/*
 * Proxima Pricing Calculator — standalone styles.
 * Ported from the client-supplied "index (1).html" test page, which itself
 * reproduces the live Elementor page's look (white card + multi-step form on
 * the left, gradient "Pricing Details" panel on the right). Kept class names
 * (elementor-form, e-form__*, elementor-field-group, etc.) so the ported
 * markup and calculator.js need no selector changes.
 */
:root {
  --page: #F1F3F8; --card: #FFFFFF; --navy: #212950; --teal: #00B4BA; --btn: #6983DF;
  --input: #E9EDF7; --grey: #C2CBD2; --panel-val: #BEE5E8; --err: #C0392B; --warn: #B7791F;
  --body: 'Work Sans', system-ui, sans-serif; --head: 'Manrope', system-ui, sans-serif;
}
.ppc-root * { box-sizing: border-box; }
.ppc-root [hidden] { display: none !important; }
/* Block themes (e.g. the default Twenty Twenty-Five) cap any non-alignfull
   block to the site's content width via ".is-layout-constrained > *". Since
   this shortcode must render full-width regardless of theme/page builder, we
   explicitly opt its own root out of that constraint. */
.ppc-root { max-width: none !important; width: 100% !important; color: var(--navy); font-family: var(--body); font-size: 16px; line-height: 1.5; }
.ppc-root .wrap { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; align-items: start; }
@media (max-width: 980px) { .ppc-root .wrap { grid-template-columns: minmax(0, 1fr); } }
/* Shadow values below are pulled directly from the live page's computed
   styles (not a guess) — the card's is a tight dark glow, the panel's
   (further down) is a soft wide drop shadow; they're intentionally different. */
.ppc-root .card { background: var(--card); border-radius: 10px; box-shadow: rgba(0,0,0,.5) 0 0 30px -10px; padding: 40px 36px; min-width: 0; }
@media (max-width: 600px) { .ppc-root .card { padding: 24px 18px; } }

/* Elementor-style multi-step form look (kept so the ported markup needs no class renaming).
   Font sizes below were corrected against the live page's actual computed
   styles (not the client's test-file CSS, which turned out to run a size or
   two larger than production everywhere in this block). */
.ppc-root .elementor-form h4 { font-family: var(--head); font-size: 20px; font-weight: 700; color: var(--teal); margin: 0 0 16px; text-wrap: balance; }
.ppc-root .elementor-form h5 { font-family: var(--head); font-size: 16px; font-weight: 700; color: var(--navy); margin: 18px 0 4px; }
.ppc-root .elementor-form p { font-size: 14px; margin: 0 0 10px; }
.ppc-root .elementor-form ul { font-size: 14px; margin: 0 0 10px; padding-left: 22px; }
.ppc-root .elementor-form a { color: var(--teal); font-weight: 600; }
.ppc-root .elementor-field-group { margin: 0 0 16px; }
.ppc-root .elementor-field-group > label, .ppc-root .elementor-field-group .elementor-field-label { display: block; font-weight: 600; font-size: 13px; color: var(--navy); margin-bottom: 6px; }
.ppc-root .elementor-field-group.radio label.elementor-field-option, .ppc-root .elementor-field-group.checkbox label.elementor-field-option { display: block; font-weight: 600; font-size: 14px; margin: 4px 0; cursor: pointer; }
.ppc-root .elementor-field-group.radio.inline label.elementor-field-option { display: inline-block; margin-right: 22px; }
.ppc-root .elementor-field-option input { margin-right: 6px; vertical-align: -1px; }
/* !important throughout this block: on a real Elementor page, the site's own
   global Kit CSS (".elementor-kit-N input:not(...), .elementor-kit-N textarea")
   targets every input/textarea on the page and otherwise wins over our rule
   here (its :not() pseudo-classes count toward specificity the same as
   classes, so a plain `.ppc-root input[type]` selector loses to it). This
   shortcode needs to look the same regardless of what else is on the page. */
.ppc-root input[type="text"], .ppc-root input[type="number"], .ppc-root input[type="email"], .ppc-root input[type="date"], .ppc-root select, .ppc-root textarea { width: 100% !important; max-width: 100%; font: inherit; color: var(--navy) !important; background: var(--input) !important; border: 0 !important; border-radius: 8px !important; padding: 7px 20px !important; min-height: 59px !important; box-sizing: border-box; }
.ppc-root textarea { min-height: 90px !important; }
.ppc-root input:focus-visible, .ppc-root select:focus-visible, .ppc-root textarea:focus-visible, .ppc-root button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Custom dropdown arrow: the live page positions Elementor's own caret-down
   icon in an absolutely-positioned wrapper; replicated here as a plain
   background-image chevron since we don't have that wrapper markup. */
.ppc-root select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212950' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; padding-right: 40px !important; }
/* First/Last name side by side on the Contact step, matching the live
   page's elementor-col-50 pair (everything else there is full width). */
.ppc-root .ppc-row-2 { display: flex; gap: 16px; }
.ppc-root .ppc-row-2 > .elementor-field-group { flex: 1 1 0; min-width: 0; }
@media (max-width: 600px) { .ppc-root .ppc-row-2 { flex-direction: column; gap: 0; } }
.ppc-root .elementor-field-type-html small { font-size: 14px; color: #4B5563; }
/* The Implementation step's ".elementor-message" info boxes use an Elementor
   icon font (eicons) for their leading icon. That font is normally loaded by
   Elementor's own form widget, which this plugin deliberately doesn't depend
   on (see the plugin header) — without it, the icon renders as a blank
   rectangle. Hiding the icon keeps the plugin fully self-contained rather
   than registering a dependency on Elementor being installed/active just for
   one icon (client-reported, confirmed fix per their own suggestion). */
.ppc-root .elementor-message:before { display: none; }
.ppc-root .elementor-field-type-step { display: none; }
.ppc-root .elementor-field-type-step.e-form__step--active { display: block; }

/* Matches the live Elementor form's actual mechanism (read from its own
   widget-form.min.css, not guessed): circles are spread with
   justify-content: space-between, and each connector is a `width: 100%`
   element that gets SHRUNK (not grown) to fill the remaining space — that's
   why it needs flex-shrink (via the shorthand) rather than flex-grow. A
   margin-top of half the circle's height (minus half the line's own height)
   centers the line on the circle, since the row uses align-items: flex-start. */
.ppc-root .e-form__indicators { display: flex; justify-content: space-between; align-items: flex-start; margin: 0 0 34px; }
.ppc-root .e-form__indicators__indicator { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.ppc-root .e-form__indicators__indicator__number { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--body); font-size: 15px; font-weight: 600; border: 1px solid var(--grey); color: var(--grey); background: #fff; }
.ppc-root .e-form__indicators__indicator--state-active .e-form__indicators__indicator__number { border-color: var(--teal) !important; color: var(--teal) !important; }
/* !important: belt-and-braces alongside dropping the "...--shape-circle" class
   in calculator.js — Elementor Pro's own global CSS targets completed-step
   circles by a generic [class*="indicator--shape-"] attribute selector with a
   hardcoded green, which has higher specificity than a plain two-class rule. */
.ppc-root .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number { background: var(--teal) !important; border-color: var(--teal) !important; color: #fff !important; }
.ppc-root .e-form__indicators__indicator__separator { flex: 0 1 auto; width: 100%; height: 1px; background: var(--grey); margin-top: 14.5px; }
/* This form has 8 steps (2 more than the original 6-step Elementor layout),
   so on narrow phones the circles alone can still be tight. Shrink just the
   circles below 480px; the separators already shrink to fit automatically. */
@media (max-width: 480px) {
  .ppc-root .e-form__indicators__indicator__number { width: 22px; height: 22px; font-size: 12px; }
  .ppc-root .e-form__indicators__indicator__separator { margin-top: 10.5px; }
}
.ppc-root .e-form__buttons { display: flex; justify-content: center; gap: 24px; margin-top: 36px; }
.ppc-root .elementor-button { font-family: var(--body); font-size: 14px; font-weight: 600; color: #fff !important; background: var(--btn) !important; border: 0 !important; border-radius: 8px; padding: 20px 40px; min-height: 59px; cursor: pointer; }
.ppc-root .elementor-button:disabled { opacity: .5; cursor: not-allowed; }
.ppc-root .calc-error { color: var(--err); font-weight: 600; font-size: 15px; margin: 6px 0; }
.ppc-root .calc-warning { color: var(--warn); font-size: 14px; margin: 6px 0; }
.ppc-root .calc-ok { color: #1E7A49; font-weight: 600; font-size: 15px; margin: 6px 0; }
.ppc-root .elementor-mark-required { color: red; }

/* Thank-you message shown in place of the form after a successful submission
   (content copied from the site's own "Thank You for Contacting Us" block). */
.ppc-root .ppc-thank-you { text-align: center; padding: 20px 0; }
.ppc-root .ppc-thank-you__eyebrow { display: flex; align-items: center; gap: 12px; color: var(--teal); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 18px; }
.ppc-root .ppc-thank-you__eyebrow::before, .ppc-root .ppc-thank-you__eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--grey); }
.ppc-root .ppc-thank-you__title { font-family: var(--head); font-size: 32px; font-weight: 800; color: var(--navy); margin: 0 0 16px; }
.ppc-root .ppc-thank-you p { font-size: 15px; margin: 0 0 10px; }
.ppc-root .ppc-thank-you__buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.ppc-root .ppc-thank-you__btn { display: inline-block; color: var(--btn); font-weight: 600; font-size: 14px; text-decoration: none; padding: 12px 28px; border: 1.5px solid var(--btn); border-radius: 8px; }
.ppc-root .ppc-thank-you__btn:hover { background: var(--btn); color: #fff; }

/* Pricing Details panel */
.ppc-root .panel { border-radius: 8px; padding: 48px 48px 40px; background: radial-gradient(at 100% 100%, #6983DF 0%, #212950 100%); box-shadow: rgba(0,0,0,.15) 0 30px 60px 0; color: #fff; position: sticky; top: env(safe-area-inset-top, 0px); }
@media (max-width: 980px) { .ppc-root .panel { position: static; } }
@media (max-width: 600px) { .ppc-root .panel { padding: 28px 22px; } }
.ppc-root .panel p { font-family: var(--body); font-size: 14px; margin: 0 0 18px; color: #fff; }
/* The site theme sets a global navy color on h1-h6 (higher priority than the
   inherited white from .panel, since inheritance always loses to any explicit
   rule). Set white explicitly here so these headings stay readable on the
   dark panel regardless of the page/theme this shortcode is dropped into. */
.ppc-root .panel h4 { font-family: var(--head); font-size: 20px; font-weight: 700; margin: 0 0 22px; color: #fff; }
.ppc-root .panel h5 { font-family: var(--head); font-size: 16px; font-weight: 600; margin: 0 0 18px; line-height: 1.35; color: #fff; }
/* Live page applies no text-transform here — "RECURRING FEES (monthly):"
   renders with "(monthly)" lowercase exactly as typed, not uppercased by CSS. */
.ppc-root .panel h5.sec { font-weight: 600; }
.ppc-root .panel h5 span:not(.inline):not(.new-tag) { display: block; font-weight: 700; color: var(--panel-val); font-variant-numeric: tabular-nums; }
.ppc-root .panel h5 span.inline { display: inline; color: #fff; font-weight: 400; }
.ppc-root .panel hr { border: 0; border-top: 1px solid rgba(255,255,255,.35); margin: 22px 0; }
.ppc-root .panel small { display: block; font-size: 13px; opacity: .85; margin-top: -10px; margin-bottom: 14px; }
.ppc-root #payment-schedule table { width: 100%; border-collapse: collapse; font-family: var(--body); font-size: 14px; margin: 4px 0 6px; color: #fff; }
.ppc-root #payment-schedule th, .ppc-root #payment-schedule td { text-align: left; padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.25); color: #fff; }
.ppc-root #payment-schedule th { font-weight: 600; opacity: .85; }
.ppc-root #payment-schedule td:last-child { color: var(--panel-val); font-weight: 700; }
.ppc-root #payment-schedule td:last-child, .ppc-root #payment-schedule th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ppc-root #payment-schedule p { font-size: 13px; opacity: .85; margin: 6px 0 0; color: #fff; }
.ppc-root #aws-offer-note p { font-size: 14px; margin: 10px 0 0; color: #fff; }
.ppc-root #calc-errors .calc-error { color: #FFB4A8; } .ppc-root #calc-errors .calc-warning { color: #FFD98A; }
.ppc-root .calc-field-error { outline: 2px solid #E5484D; outline-offset: 1px; }

/* v3: license quantities (Basic/Advanced/Enterprise), term controls, invalid-panel state. */
.ppc-root .qty-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 16px; }
.ppc-root .qty-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; align-items: center; }
@media (max-width: 420px) { .ppc-root .qty-row { grid-template-columns: minmax(0, 1fr) 110px; } }
.ppc-root .qty-row .qty-label { font-weight: 600; } .ppc-root .qty-row .qty-label small { display: block; font-weight: 400; color: #4B5563; font-size: 14px; }
.ppc-root .term-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ppc-root .term-row input { width: 130px; }
.ppc-root .btn-small { font: inherit; font-weight: 600; font-size: 14px; color: var(--teal); background: #fff; border: 1px solid var(--teal); border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.ppc-root .btn-small:hover { background: var(--teal); color: #fff; }
.ppc-root .btn-small.reset { color: #4B5563; border-color: var(--grey); } .ppc-root .btn-small.reset:hover { background: var(--input); color: var(--navy); }
.ppc-root .panel.calc-invalid h5 span:not(.inline) { opacity: .45; }
.ppc-root .panel h5.total { font-size: 18px; font-weight: 700; } .ppc-root .panel h5.total span:not(.inline) { font-size: 24px; }
.ppc-root .panel small.note { margin-top: -14px; }
.ppc-root .panel h5 span.val-inline { display: inline; font-weight: 700; color: var(--panel-val); }