/* ============================================================
   Cost Calculator Engine — cost-calc-engine.css  v1.6.0
   Brand: Primary #1c426c  |  Secondary #97c2db  |  White #fff
   ============================================================ */

:root {
    --costcalc-primary:       #1c426c;
    --costcalc-primary-hover: #15314f; /* darker shade for hover/active states */
    --costcalc-secondary:     #97c2db;
    --costcalc-white:         #fff;
    --costcalc-danger:        #d64545; /* validation / error states only — kept separate from brand color so errors stay visually distinct */
}

/* ── Utility ─────────────────────────────────────────────── */
.costcalc-hidden { display: none !important; }

/* Fade+slide every top-level modal state (intro / form / success) in as it
   becomes visible, so switching between them — e.g. Start Calculation
   taking you from intro straight to the (prefetched) form — reads as one
   smooth transition instead of an abrupt hard cut. Relies on the
   :not(.costcalc-hidden) selector only matching once the hidden class is
   removed, which changes the computed animation-name and re-triggers the
   animation each time. */
.costcalc-modal-intro:not(.costcalc-hidden),
#costcalc-modal-form-wrap:not(.costcalc-hidden),
.costcalc-modal-success:not(.costcalc-hidden) {
    animation: costcalcStateFadeIn 0.3s ease;
}
@keyframes costcalcStateFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Widget wrapper (card above trigger button) ──────────── */
.costcalc-widget-card {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1.5px solid #dde3ea;
    border-radius: 12px;
    padding: 22px 24px 20px;
    background: #fff;
    gap: 0;
    max-width: 340px;
}
.costcalc-widget-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.costcalc-widget-icon {
    width: 52px;
    height: 52px;
    background: var(--costcalc-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.costcalc-widget-icon svg {
    width: 28px;
    height: 28px;
    color: #fff;
    fill: none;
    stroke: #fff;
}
.costcalc-widget-label {
    font-size: 20px;
    font-weight: 700;
    color: var(--costcalc-primary);
    line-height: 1.2;
}
.costcalc-widget-divider {
    width: 100%;
    height: 1px;
    background: #e8ecf0;
    margin: 0 0 14px;
}
.costcalc-widget-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.55;
    margin: 0 0 18px;
}

/* ── Trigger Button ──────────────────────────────────────── */
.costcalc-calc-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--costcalc-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 26px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    letter-spacing: 0.02em;
    text-decoration: none;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}
.costcalc-calc-trigger:hover {
    background: var(--costcalc-primary-hover);
    transform: translateY(-1px);
}
.costcalc-btn-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.costcalc-calc-trigger:hover .costcalc-btn-arrow {
    transform: translateX(3px);
}

/* ── Modal Overlay ───────────────────────────────────────── */
.costcalc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Safari (including iOS) needs the -webkit- prefix for backdrop-filter
       even on fairly recent versions — without it the blur silently does
       nothing there, so it must come before the unprefixed property. */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-sizing: border-box;
    /* iOS Safari (and any iOS browser, since they all run on WebKit) can
       auto-recolor native-ish form controls like <button> to fit the
       device's system Dark Mode, overriding our own explicit colors even
       with -webkit-appearance:none set. This opts the whole modal out of
       that automatic adjustment — our design is fixed-light regardless of
       the visitor's OS theme, so this is correct everywhere, not just iOS. */
    color-scheme: only light;
}

/* ── Modal Box ───────────────────────────────────────────── */
.costcalc-modal-content {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    /* Modal box stays a fixed size across all states (intro/form/success) —
       only its contents change via the step-panel flow/animation. Never
       exceed 420px, per explicit instruction. */
    max-width: 420px;
    max-height: 90vh;
    /* FIX #6: overflow-hidden on wrapper + inner scroll keeps radius intact */
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: costcalcSlideUp 0.25s ease;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Inner scrollable area — scrollbar stays inside the radius */
.costcalc-modal-inner {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 90vh;
    /* Always reserve the scrollbar's gutter, even on states/moments where
       content doesn't overflow — otherwise the scrollbar track popping in
       and out (as content height changes between intro/form/success, or
       mid-animation) shifts the content width and reads as a flicker/
       shake. Desktop-only effect; mobile browsers use overlay scrollbars
       that don't take layout space either way. */
    scrollbar-gutter: stable;
    /* Smooth momentum scrolling for this nested scroll area on iOS Safari */
    -webkit-overflow-scrolling: touch;
    /* Custom scrollbar — stays clipped by parent border-radius */
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
}
.costcalc-modal-inner::-webkit-scrollbar { width: 4px; }
.costcalc-modal-inner::-webkit-scrollbar-track { background: #f1f1f1; }
.costcalc-modal-inner::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

@keyframes costcalcSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Close Button ────────────────────────────────────────── */
.costcalc-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: #f0f0f0;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #555;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 2;
}
.costcalc-modal-close:hover {
    background: var(--costcalc-primary);
    color: #fff;
}

/* ── Modal Header — FIX #2: centered ────────────────────── */
.costcalc-modal-header {
    padding: 30px 30px 18px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 22px;
    text-align: center;
}
/* Icon + title, side by side — the row carries the spacing/close-button
   clearance that used to live on the title itself. */
.costcalc-modal-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 6px;
    padding: 0 40px; /* space for close btn on both sides */
}
.costcalc-modal-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(28,66,108,0.08);
    color: var(--costcalc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.costcalc-modal-title-icon svg {
    width: 17px;
    height: 17px;
}
.costcalc-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--costcalc-primary);
    margin: 0;
}
.costcalc-modal-subtitle {
    font-size: 13px;
    color: #888;
    margin: 0;
}

/* ── Form ────────────────────────────────────────────────── */
/* Bottom cushion so the form never sits flush against the modal's bottom
   edge — matters most for the stepped wizard's Step 1/2 panels, where the
   Next Step button is the last visible thing (the external #costcalc-modal-
   actions button only appears on the final step). #costcalc-modal-actions'
   own top padding is removed below so the two don't stack into a double
   gap when it IS visible right after this. */
#costcalc-modal-body {
    padding-bottom: 28px;
}
.costcalc-form {
    padding: 0 30px;
}

/* Contact row — 3 equal columns */
.costcalc-contact-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

/* Main fields grid */
.costcalc-fields-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px 14px;
}

/* Grid column spans */
.costcalc-col-12 { grid-column: span 12; }
.costcalc-col-6  { grid-column: span 6; }
.costcalc-col-4  { grid-column: span 4; }
.costcalc-col-3  { grid-column: span 3; }

/* Labels */
.costcalc-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--costcalc-primary);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.costcalc-req {
    color: var(--costcalc-primary);
    margin-left: 2px;
}

/* Text / Email / Tel inputs */
.costcalc-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 13px;
    border: 1px solid #dde1e9;
    border-radius: 6px;
    /* Deliberately below the 16px iOS-safe threshold (site owner asked for
       smaller field text). Below 16px, iOS Safari auto-zooms the whole page
       when this field receives focus — a known, accepted tradeoff here. */
    font-size: 14px;
    color: #333;
    background: #fafbfc;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    /* FIX #1: ensure line-height so text sits vertically centred */
    line-height: 1.4;
    height: 42px;
}
.costcalc-input::placeholder { color: #bbb; }
.costcalc-input:focus {
    border-color: var(--costcalc-primary);
    box-shadow: 0 0 0 3px rgba(28,66,108,0.08);
    background: #fff;
}
.costcalc-input.costcalc-input-error {
    border-color: var(--costcalc-danger);
    box-shadow: 0 0 0 3px rgba(214,69,69,0.1);
}

/* FIX #1: Select — vertically centred text */
.costcalc-select {
    width: 100%;
    box-sizing: border-box;
    padding: 0 34px 0 13px;   /* top/bottom 0, let height + line-height center it */
    height: 42px;
    line-height: 42px;
    border: 1px solid #dde1e9;
    border-radius: 6px;
    /* Deliberately below the 16px iOS-safe threshold (site owner asked for
       smaller field text). Below 16px, iOS Safari auto-zooms the whole page
       when this field receives focus — a known, accepted tradeoff here. */
    font-size: 14px;
    color: #333;
    background: #fafbfc;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: border-color 0.2s ease;
    outline: none;
    vertical-align: middle;
}
.costcalc-select:focus {
    border-color: var(--costcalc-primary);
    box-shadow: 0 0 0 3px rgba(28,66,108,0.08);
    background-color: #fff;
}

/* Radio groups */
.costcalc-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.costcalc-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    user-select: none;
}
.costcalc-radio-label input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #c0c8d8;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color 0.15s ease;
    position: relative;
    background: #fff;
}
.costcalc-radio-label input[type="radio"]:checked {
    border-color: var(--costcalc-primary);
    background: var(--costcalc-primary);
    box-shadow: inset 0 0 0 3px #fff;
}
.costcalc-radio-label:hover input[type="radio"] {
    border-color: var(--costcalc-primary);
}

/* Number selector pills */
.costcalc-number-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.costcalc-num-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #dde1e9;
    border-radius: 6px;
    background: #fafbfc;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.costcalc-num-btn:hover {
    border-color: var(--costcalc-primary);
    color: var(--costcalc-primary);
}
.costcalc-num-btn.active {
    background: var(--costcalc-primary);
    border-color: var(--costcalc-primary);
    color: #fff;
}

/* Narrow select (e.g. founders count) */
.costcalc-select-narrow {
    width: 120px;
}

/* Icon-prefixed select (Document Origin / Target Destination country) */
.costcalc-select-icon-field {
    position: relative;
}
.costcalc-select-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3b0;
    display: flex;
    pointer-events: none;
    z-index: 1;
}
.costcalc-select-icon svg {
    width: 16px;
    height: 16px;
}
.costcalc-select.costcalc-select-iconed {
    padding-left: 38px;
}

/* Number-of-documents −/+ counter — same total height as the text/select
   inputs (42px, border-box) so the row lines up with the rest of the form. */
.costcalc-stepper {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: #fafbfc;
    border: 1px solid #dde1e9;
    border-radius: 10px;
    padding: 0 8px;
    height: 42px;
    box-sizing: border-box;
}
.costcalc-stepper-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #eef0f3;
    color: #444;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}
.costcalc-stepper-btn:hover {
    background: #e2e5ea;
}
.costcalc-stepper-display {
    font-size: 15px;
    font-weight: 800;
    color: #333;
    width: 24px;
    text-align: center;
}

/* ── Step wizard (3-step schemas, e.g. Global Calculator) ───── */
/* Fade + slide-in transition between step panels — mirrors the reference
   design's .step-panel/.entering pattern. The panel is switched visible
   via .costcalc-hidden (display:none, so it can't itself be transitioned);
   the "entering" class supplies the animated FROM state (faded out,
   shifted right) which goToFormStep() removes a tick later so the panel
   animates in to its resting state. */
.costcalc-step-panel {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.costcalc-step-panel.costcalc-step-entering {
    opacity: 0;
    transform: translateX(15px);
}
.costcalc-step-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eef0f3;
}
.costcalc-step-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9aa3b0;
}
.costcalc-step-title {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}
.costcalc-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 18px;
    margin-top: 4px;
    border-top: 1px solid #eef0f3;
}
.costcalc-step-nav-spacer {
    flex: 1;
}
.costcalc-step-back,
.costcalc-step-next {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.costcalc-step-back {
    background: none;
    color: #777;
    padding: 8px 4px;
    transition: color 0.15s ease;
}
.costcalc-step-back:hover {
    color: #333;
}
.costcalc-step-back svg {
    width: 14px;
    height: 14px;
}
.costcalc-step-next {
    /* White text/icon color (incl. the iOS Safari fix) now comes from the
       .costcalc-btn-white class added to this button's markup — see
       FormRenderer::renderStepped(). */
    background: var(--costcalc-primary);
    border-radius: 30px;
    padding: 10px 20px;
    transition: background 0.2s ease, transform 0.15s ease;
}
.costcalc-step-next:hover {
    background: var(--costcalc-primary-hover);
    transform: translateY(-1px);
}
.costcalc-step-next svg {
    width: 15px;
    height: 15px;
}

/* Error messages */
.costcalc-error-msg {
    display: block;
    font-size: 12px;
    color: var(--costcalc-danger);
    margin-top: 5px;
    min-height: 0;
}

/* ── Modal Actions ────────────────────────────────────────── */
.costcalc-modal-actions {
    /* No top padding — #costcalc-modal-body's own padding-bottom (above)
       already supplies the gap between the form and this button, so the
       two don't stack into a double gap. Bottom padding here keeps the
       submit button from touching the modal's rounded bottom edge. */
    padding: 0 30px 28px;
}
/* Same pill/flex structure as the intro screen's Start button (icon left,
   text, pulsing arrow right) — it reuses .costcalc-intro-start-icon and
   .costcalc-intro-start-arrow directly so the two buttons stay visually
   identical with no duplicated rules to drift out of sync. */
.costcalc-btn-submit {
    /* White text/icon color (incl. the iOS Safari fix) now comes from the
       .costcalc-btn-white class added to this button's markup — see
       applyFormData() in the JS. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: var(--costcalc-primary);
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, transform 0.15s ease;
    letter-spacing: 0.02em;
    box-sizing: border-box;
}
.costcalc-btn-submit-text {
    /* Centered as part of the icon+text+arrow group — see
       .costcalc-btn-submit's justify-content:center. */
}
.costcalc-btn-submit:hover:not(:disabled) {
    background: var(--costcalc-primary-hover);
    transform: translateY(-1px);
}
.costcalc-btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.costcalc-btn-submit:disabled .costcalc-intro-start-arrow {
    animation-play-state: paused;
}
/* Residence permit: red submit button */
.costcalc-btn-submit.costcalc-btn-red {
    background: var(--costcalc-primary);
}
.costcalc-btn-submit.costcalc-btn-red:hover:not(:disabled) {
    background: var(--costcalc-primary-hover);
}

/* ── Success State ────────────────────────────────────────── */
.costcalc-modal-success {
    padding: 44px 36px 40px;
    text-align: center;
}
.costcalc-success-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 20px;
}
.costcalc-success-icon svg {
    width: 100%;
    height: 100%;
}
/* Sparkle accents around the checkmark — continuous twinkle (opacity +
   scale), staggered per star so they don't all pulse in lockstep.
   transform-box:fill-box makes the CSS transform scale around the path's
   own center rather than the SVG viewport's origin; the position itself
   is set by the static <g transform> in the markup, which this never
   touches, so the twinkle can't fight the placement. */
.costcalc-success-star {
    transform-box: fill-box;
    transform-origin: center;
    animation: costcalcStarTwinkle 1.6s ease-in-out infinite;
}
.costcalc-star-1 { animation-delay: 0s; }
.costcalc-star-2 { animation-delay: 0.45s; }
.costcalc-star-3 { animation-delay: 0.9s; }
@keyframes costcalcStarTwinkle {
    0%, 100% { opacity: 0.35; transform: scale(0.7); }
    50%      { opacity: 1;    transform: scale(1.15); }
}
.costcalc-success-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--costcalc-primary);
    margin: 0 0 12px;
    line-height: 1.25;
}
.costcalc-success-detail {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 20px;
}
.costcalc-success-note-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
    text-align: left;
}
.costcalc-success-note-box svg {
    flex-shrink: 0;
    margin-top: 1px;
}
.costcalc-success-note-box p {
    font-size: 13px;
    color: #444;
    margin: 0;
    line-height: 1.5;
}
.costcalc-btn-close-success {
    /* White text color (incl. the iOS Safari fix) now comes from the
       .costcalc-btn-white class added to this button's markup — see
       modal-shell.php. */
    background: var(--costcalc-primary);
    border: none;
    border-radius: 30px; /* pill shape, matching the Start/Submit buttons */
    padding: 13px 40px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
}
.costcalc-btn-close-success:hover {
    background: var(--costcalc-primary-hover);
}

/* ── Responsive — FIX #8: mobile margins ─────────────────── */
@media (max-width: 600px) {
    /* Mobile: tightened so the modal doesn't take up excessive screen space */
    .costcalc-modal-overlay {
        align-items: center;
        padding: 14px 10px;
    }
    .costcalc-modal-content {
        border-radius: 12px;
        max-height: calc(100vh - 28px);
        width: 100%;
    }
    .costcalc-modal-inner {
        max-height: calc(100vh - 28px);
    }
    .costcalc-contact-row {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }
    .costcalc-col-6 {
        grid-column: span 12;
    }
    .costcalc-fields-grid {
        gap: 12px 10px;
    }
    .costcalc-label {
        margin-bottom: 5px;
    }
    .costcalc-modal-header {
        padding: 16px 16px 10px;
    }
    #costcalc-modal-body {
        padding-bottom: 16px;
    }
    .costcalc-form {
        padding: 0 16px;
    }
    .costcalc-modal-actions {
        padding: 0 16px 16px;
    }
    .costcalc-modal-title-row {
        padding: 0 36px;
        gap: 8px;
    }
    .costcalc-modal-title-icon {
        width: 26px;
        height: 26px;
    }
    .costcalc-modal-title-icon svg {
        width: 14px;
        height: 14px;
    }
    .costcalc-modal-title {
        font-size: 18px;
    }
    /* FIX #8: success modal also gets mobile margins */
    .costcalc-modal-success {
        padding: 24px 18px 20px;
    }

    .costcalc-num-btn {
        width: 35px;
        height: 35px;
    }
}

/* ============================================================
   v1.4.0 additions — Intro modal + Floating icon
   ============================================================ */

/* ── Intro state ─────────────────────────────────────────── */
.costcalc-modal-intro {
    padding: 40px 32px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Icon + title sit side by side as one row — see .costcalc-intro-title-row */
.costcalc-intro-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}
.costcalc-intro-icon {
    width: 44px;
    height: 44px;
    margin: 0;
    background: rgba(28,66,108,0.08);  /* soft tint of primary, not a solid square */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--costcalc-primary);
    flex-shrink: 0;
}
.costcalc-intro-icon svg {
    width: 22px;
    height: 22px;
}
.costcalc-intro-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--costcalc-primary);
    margin: 0;
    line-height: 1.2;
}
.costcalc-intro-subtitle {
    font-size: 14px;
    color: #666;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 300px;
}

/* Small decorative rule between the subtitle and the feature row */
.costcalc-intro-divider {
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--costcalc-secondary);
    margin-bottom: 24px;
    flex-shrink: 0;
}

/* ── Feature highlights — white bordered/shadowed cards, per the
   reference design (replaces the old plain icon+divider row) ──────── */
.costcalc-intro-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    margin-bottom: 28px;
}
.costcalc-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    padding: 12px 7px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.costcalc-feature--a:hover { border-color: rgba(2,132,199,0.4); box-shadow: 0 4px 10px rgba(16,24,40,0.08); }
.costcalc-feature--b:hover { border-color: rgba(46,125,50,0.4); box-shadow: 0 4px 10px rgba(16,24,40,0.08); }
.costcalc-feature--c:hover { border-color: rgba(123,31,162,0.4); box-shadow: 0 4px 10px rgba(16,24,40,0.08); }
.costcalc-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.costcalc-feature:hover .costcalc-feature-icon {
    transform: scale(1.06);
}
.costcalc-feature-icon svg {
    width: 17px;
    height: 17px;
}
/* 3 accent tints, exact colors from the reference design */
.costcalc-feature-icon--a {
    background: #E3F2FD;
    color: #0284c7;
    box-shadow: 0 0 0 4px rgba(224,242,254,0.6);
}
.costcalc-feature-icon--b {
    background: #E8F5E9;
    color: #2e7d32;
    box-shadow: 0 0 0 4px rgba(232,245,233,0.6);
}
.costcalc-feature-icon--c {
    background: #F3E5F5;
    color: #7b1fa2;
    box-shadow: 0 0 0 4px rgba(243,229,245,0.6);
}
.costcalc-feature-title {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 3px;
}
.costcalc-feature-desc {
    font-size: 10px;
    color: #888;
    line-height: 1.35;
}

/* ── Start button ────────────────────────────────────────── */
.costcalc-intro-start-btn {
    /* White text/icon color (incl. the iOS Safari fix) now comes from the
       .costcalc-btn-white class added to this button's markup — see
       modal-shell.php. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: var(--costcalc-primary);
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 30px;  /* pill shape per reference design */
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, transform 0.15s ease;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}
.costcalc-intro-start-btn:hover {
    background: var(--costcalc-primary-hover);
    transform: translateY(-1px);
}
/* Small translucent round icon badge, left side */
.costcalc-intro-start-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    flex-shrink: 0;
}
.costcalc-intro-start-icon svg {
    width: 15px;
    height: 15px;
}
.costcalc-intro-start-text {
    /* Centered as part of the icon+text+arrow group — see
       .costcalc-intro-start-btn's justify-content:center. */
}
/* Arrow, right side — pulses continuously to draw the eye. Moderate speed
   (not fast) per explicit instruction: a slow nudge-right + fade, not a
   rapid blink. */
.costcalc-intro-start-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: costcalcArrowPulse 1.8s ease-in-out infinite;
}
.costcalc-intro-start-arrow svg {
    width: 18px;
    height: 18px;
}
@keyframes costcalcArrowPulse {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50%      { transform: translateX(4px); opacity: 0.55; }
}

/* ── Floating pill button (fixed, bottom-right) ──────────── */
/*
 * Structure (HTML order): label | icon
 * CSS row-reverse: icon appears RIGHT, label slides LEFT
 *
 * Collapsed : icon = full circle, label hidden (max-width:0)
 * Expanded  : icon = right half of pill, label = left half
 *
 * IMPORTANT — why border-radius is a constant, never a transitioned value:
 * A "circle that stretches into a pill" shape only looks smooth if its
 * corner radius is a FIXED px number equal to exactly half the box height
 * (26px desktop / 27px mobile) at all times. With that one constant:
 *   - when width == height (collapsed)         → renders as a perfect circle
 *   - when width  > height (expanded, label on) → renders as a pill/stadium
 * No radius value ever needs to change between states, so there is nothing
 * to animate here and nothing that can desync from the width change.
 * The ONLY property that actually animates is the label's max-width — the
 * shape just follows the box size automatically.
 * Do not use `border-radius: 50%` anywhere in this block: percentages are
 * resolved against the box's current (changing) size, which — combined
 * with a separate border-radius transition — is exactly what caused the
 * old "squished / eaten corner" glitch on hover.
 */
.costcalc-float-btn {
    position: fixed;
    right: 30px;
    bottom: 40px;         /* JS recalculates this — see getFloatBottom() */
    z-index: 997;
    display: flex;
    flex-direction: row;   /* label left, icon right */
    align-items: center;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    /* iOS Safari renders <button> with native control chrome/text-rendering
       unless appearance is reset — without this, custom text/background
       colors inside the button can look dull or get overridden by the
       system's own control color on some iOS versions. Setting `color`
       directly on the <button> itself too (not just on the inner label
       span) guards against WebKit versions where the button's own unset
       color still factors into how its descendants render. */
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Same iOS Dark Mode opt-out as .costcalc-modal-overlay above — this
       button lives outside the overlay in the DOM, so it needs its own
       declaration rather than inheriting the overlay's. */
    color-scheme: only light;
    /* Single ring + shadow drawn around the WHOLE pill (icon + label as one
       shape), so there's never a seam where the two halves meet. */
    border-radius: 26px;   /* = half of the 52px icon height — see note above */
    box-shadow: 0 4px 16px rgba(28,66,108,0.40), 0 0 0 1px rgba(255,255,255,0.85);
}

/* Icon — right side, always visible. Fixed 52×52 box, so its border-radius
   values are plain px (never %) and interpolate cleanly on hover. */
.costcalc-float-icon {
    width: 52px;
    height: 52px;
    background: var(--costcalc-primary);
    border-radius: 26px;                   /* full circle while box is 52×52 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-radius 0.32s ease;
    position: relative;
    z-index: 1;
}
/* float icon: no hover color change per design */
.costcalc-float-icon svg {
    width: 26px;
    height: 26px;
}

/* Label — left side, hidden by default */
.costcalc-float-label {
    background: var(--costcalc-primary);
    color: #fff;
    -webkit-text-fill-color: #fff; /* forces the glyph fill on iOS Safari — see note on .costcalc-float-btn above */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    height: 52px;
    line-height: 52px;
    white-space: nowrap;
    border-radius: 26px 0 0 26px;  /* rounded left, flat right (icon covers) */
    /* Hidden state */
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    transition: max-width 0.35s ease, opacity 0.28s ease, padding 0.32s ease;
    /* NOTE: no margin-right here. A negative margin on a 0-width element
       still shifts flex layout (it shrinks the container's computed width
       even though nothing visible occupies that space), which made the
       icon 1px wider than its own container — covering the white ring on
       its left edge. The -1px join below only applies once the label
       actually has real width (expanded), where it's needed/safe. */
}

/* Expanded: pill shape — only the label's own properties (max-width/opacity/
   padding) are animated; no element's border-radius needs to change here. */
.costcalc-float-btn.costcalc-float-expanded .costcalc-float-label {
    max-width: 160px;
    opacity: 1;
    padding: 0 16px 0 18px;
    margin-right: -1px;   /* seamless join with icon, only while expanded */
}
.costcalc-float-btn.costcalc-float-expanded .costcalc-float-icon {
    border-radius: 0 26px 26px 0;  /* flat left, rounded right */
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .costcalc-modal-intro {
        padding: 22px 16px 18px;
    }
    .costcalc-intro-features {
        gap: 6px;
    }
    .costcalc-feature {
        padding: 8px 5px;
        border-radius: 12px;
    }
    .costcalc-feature-icon {
        width: 34px;
        height: 34px;
        margin-bottom: 6px;
    }
    .costcalc-feature-icon svg {
        width: 16px;
        height: 16px;
    }
    .costcalc-feature-title {
        font-size: 10.5px;
    }
    .costcalc-feature-desc {
        font-size: 9.5px;
    }
    .costcalc-float-btn {
        right: 30px;       /* +10px from the previous 20px */
        bottom: 14px;      /* -10px from the previous 24px — JS recalculates this when Chaty is present, see getFloatBottom() */
        border-radius: 27px;  /* = half of the 54px mobile icon height */
    }
    .costcalc-float-icon {
        width: 54px;
        height: 54px;
        border-radius: 27px;  /* full circle while box is 54×54 */
    }
    .costcalc-float-label {
        height: 54px;
        line-height: 54px;
        font-size: 12px;
        border-radius: 27px 0 0 27px;
    }
    .costcalc-float-btn.costcalc-float-expanded .costcalc-float-icon {
        border-radius: 0 27px 27px 0;
    }
    .costcalc-float-btn.costcalc-float-expanded .costcalc-float-label {
        padding: 0 12px 0 16px;
    }
}




/* =========================================
   FORCE WHITE BUTTON TEXT — iOS SAFARI FIX
   Scoped utility class: add .costcalc-btn-white only to the specific
   buttons that need white text (Start/Submit/Next Step/Close), instead of
   forcing every button everywhere — a site-wide `button, button *` rule
   would also whitewash this plugin's OWN dark-text buttons (Back, the ×
   close button, the −/+ stepper) as well as every unrelated button
   elsewhere on the site (any theme/Gutenberg button, other plugins' admin
   buttons, etc.), making their text invisible. The `*` descendant selector
   covers text that lives in a nested <span> (iOS Safari's dark-mode
   auto-recolor targets the deepest text node directly, bypassing inherited
   color even with color-scheme:only light set) and SVG icons using
   fill/stroke="currentColor".
========================================= */
.costcalc-btn-white,
.costcalc-btn-white *,
.costcalc-btn-white:hover,
.costcalc-btn-white:focus,
.costcalc-btn-white:focus-visible,
.costcalc-btn-white:active,
.costcalc-btn-white:disabled {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-appearance: none;
    appearance: none;
}