/* =====================================================
   Wedding Advisor — Satya Photography
   1:1 clone of "Build Your Quote" by THE BIG DAY by chai.
   Exact visual match: white bg, #DC143C crimson, #2C3E50 navy text,
   Poppins font, no tile borders/shadows, red checkmark on selection.
   ===================================================== */

/* ---- CSS Variables (TBD Exact Match) ---- */
:root {
        --wa-primary: #dc143c;
        --wa-primary-hover: #c8112f;
        --wa-bg: #ffffff;
        --wa-bg-soft: #f6f1e6;
        --wa-text: #2c3e50;
        --wa-text-light: #6c757d;
        --wa-heading: #2c3e50;
        --wa-white: #ffffff;
        --wa-border: #e8e8e8;
        --wa-font-heading: "Poppins", sans-serif;
        --wa-font-body: "Poppins", sans-serif;
        --wa-font-button: "Poppins", sans-serif;
        --wa-radius: 4px;
        --wa-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        --wa-shadow-hover: 0 8px 32px rgba(220, 20, 60, 0.18);
        --wa-transition: 300ms ease-out;
}

/* ---- Reset (scoped to wa-form-wrapper) ---- */
.wa-form-wrapper,
.wa-form-wrapper * {
        box-sizing: border-box;
}

.wa-form-wrapper {
        font-family: var(--wa-font-body);
        font-size: 16px;
        color: var(--wa-text);
        line-height: 1.6;
        background: var(--wa-bg);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

.wa-form-wrapper h1,
.wa-form-wrapper h2,
.wa-form-wrapper h3 {
        font-family: var(--wa-font-heading);
        color: var(--wa-heading);
        margin: 0 0 0.5em;
}

.wa-form-wrapper p { margin: 0 0 1rem; }
.wa-form-wrapper img { max-width: 100%; height: auto; }
.wa-form-wrapper a { color: var(--wa-primary); text-decoration: none; }
.wa-form-wrapper a:hover { color: var(--wa-primary-hover); }

/* ---- Bootstrap-like grid ---- */
.wa-form-wrapper .container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 15px; }
.wa-form-wrapper .row { display: flex; flex-wrap: wrap; margin: -7.5px; }
.wa-form-wrapper [class*="col-md-"] { padding: 7.5px; }
.wa-form-wrapper .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.wa-form-wrapper .col-md-3 { flex: 0 0 25%; max-width: 25%; }
.wa-form-wrapper .col-md-6 { flex: 0 0 50%; max-width: 50%; }
.wa-form-wrapper .col-md-12 { flex: 0 0 100%; max-width: 100%; }
.wa-form-wrapper .text-center { text-align: center; }
.wa-form-wrapper .form-group { margin-bottom: 1rem; }
.wa-form-wrapper .form-control {
        display: block;
        width: 100%;
        padding: 10px 14px;
        font-size: 15px;
        color: var(--wa-text);
        background: var(--wa-white);
        border: 1px solid var(--wa-border);
        border-radius: var(--wa-radius);
        transition: border-color var(--wa-transition);
        font-family: var(--wa-font-body);
}
.wa-form-wrapper .form-control:focus {
        outline: none;
        border-color: var(--wa-primary);
        box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.12);
}
.wa-form-wrapper .form-group label {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--wa-text);
}
.wa-form-wrapper .table { width: 100%; border-collapse: collapse; }
.wa-form-wrapper .table-bordered th,
.wa-form-wrapper .table-bordered td { border: 1px solid var(--wa-border); padding: 10px 14px; }
.wa-form-wrapper .alert { padding: 12px 16px; border-radius: var(--wa-radius); }
.wa-form-wrapper .alert-danger { background: #fee; color: #c33; border: 1px solid #fcc; }

/* =====================================================
   INTRO / LANDING SECTION (matches TBD exactly)
   ===================================================== */
.wa-intro {
        padding: 60px 20px 40px;
        text-align: center;
        background: var(--wa-bg);
}
.wa-intro-inner { max-width: 1200px; margin: 0 auto; }
.wa-intro-title {
        font-family: var(--wa-font-heading);
        font-size: 36px;
        font-weight: 500;
        color: var(--wa-primary);
        margin-bottom: 12px;
        line-height: 1.2;
}
.wa-intro-subtitle {
        font-family: var(--wa-font-heading);
        font-size: 32px;
        font-weight: 700;
        color: var(--wa-heading);
        margin-bottom: 30px;
        line-height: 1.3;
}

/* ---- GET STARTED button (matches TBD exactly) ---- */
.wa-btn {
        display: inline-block;
        padding: 12px 30px;
        background: var(--wa-primary);
        color: var(--wa-white) !important;
        font-family: var(--wa-font-button);
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-radius: var(--wa-radius);
        cursor: pointer;
        text-decoration: none;
        transition: background var(--wa-transition), transform var(--wa-transition);
        position: relative;
}
.wa-btn:hover {
        background: var(--wa-primary-hover);
        color: var(--wa-white) !important;
        transform: translateY(-1px);
}
.wa-btn:active { transform: translateY(0); }
.wa-btn .wa-icon-check { margin-right: 8px; }
.wa-icon-check::before { content: "\f00c"; font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; }

.wa-btn-start {
        padding: 14px 40px;
        font-size: 15px;
}

/* ---- 3-Step Explainer (text-only, no icons, centered — matches TBD) ---- */
.wa-steps-intro {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        margin-top: 50px;
        text-align: center;
}
.wa-step-intro-item {
        padding: 0 10px;
}
.wa-step-intro-icon { display: none; } /* TBD has no icons in the explainer */
.wa-step-intro-title {
        font-family: var(--wa-font-heading);
        font-size: 18px;
        font-weight: 600;
        color: #202020;
        margin-bottom: 8px;
}
.wa-step-intro-desc {
        font-size: 13.5px;
        font-weight: 400;
        color: #4a4a4a;
        line-height: 1.5;
}

/* =====================================================
   FORM CONTAINER & PROGRESS BAR
   ===================================================== */
.wa-form-container {
        background: var(--wa-bg);
        padding: 0 20px 60px;
        min-height: 600px;
}

.wa-progress-wrap {
        max-width: 1140px;
        margin: 0 auto 24px;
}
.wa-progress {
        height: 56px;
        background: var(--wa-primary);
        border-radius: 50%;
        width: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        box-shadow: 0 4px 12px rgba(220, 20, 60, 0.3);
}
.wa-progress-bar {
        display: none; /* TBD doesn't use a traditional progress bar — it uses the red circle price badge */
}
.wa-progress-bar-price {
        color: var(--wa-white);
        font-family: var(--wa-font-button);
        font-size: 16px;
        font-weight: 700;
}

/* =====================================================
   SLIDES (Each Step) — matches TBD exactly
   ===================================================== */
.wa-slides { max-width: 1140px; margin: 0 auto; }

.wa-genSlide {
        padding: 20px 0;
        animation: wa-fadeIn var(--wa-transition);
}
.wa-genSlide[style*="display: none"] { animation: none; }

@keyframes wa-fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
}

.wa-stepTitle {
        font-family: var(--wa-font-heading);
        font-size: 38px;
        font-weight: 700;
        color: var(--wa-step-title);
        text-align: center;
        margin-bottom: 16px;
        text-transform: capitalize;
        line-height: 1.2;
}
.wa-stepDescription {
        text-align: center;
        font-size: 15px;
        color: var(--wa-text-light);
        margin-bottom: 30px;
}

.wa-genContent { padding: 0; }
.wa-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        margin: 0;
}

/* =====================================================
   ITEM TILES — matches TBD exactly (NO border, NO shadow)
   ===================================================== */
.wa-itemBloc {
        padding: 18px;
        text-align: center;
        position: relative;
}

.wa-selectable {
        display: block;
        position: relative;
        cursor: pointer;
        transition: transform var(--wa-transition);
}
.wa-selectable:hover { transform: scale(1.05); }
.wa-selectable:hover .wa-selectableImg {
        /* No box-shadow on hover — TBD style is flat */
}

.wa-selectableImg {
        width: 100%;
        max-width: 140px;
        height: auto;
        border-radius: 0;
        transition: transform var(--wa-transition);
        /* NO box-shadow, NO border — TBD style is completely flat */
        background: transparent;
}

.wa-selectable.checked .wa-selectableImg {
        /* No special styling on the image when selected — TBD only shows the checkmark */
        transform: scale(0.95);
}

/* The red checkmark — TBD's signature selection indicator */
.wa-fxZoom {
        position: absolute;
        bottom: 30px;
        right: 10px;
        width: 36px;
        height: 36px;
        color: var(--wa-primary);
        font-size: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0);
        transition: all var(--wa-transition);
        text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff;
}
.wa-fxZoom::before { content: "\f00c"; font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; }
.wa-selectable.checked .wa-fxZoom {
        opacity: 1;
        transform: scale(1);
        animation: wa-pop 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wa-pop {
        0%   { transform: scale(0) rotate(-180deg); }
        60%  { transform: scale(1.2) rotate(0deg); }
        100% { transform: scale(1) rotate(0deg); }
}

.wa-itemDes {
        font-family: var(--wa-font-body);
        font-size: 14px;
        font-weight: 400;
        color: var(--wa-text);
        margin-top: 10px;
}

/* ---- Quantity Selector ---- */
.wa-quantity {
        display: inline-flex;
        align-items: center;
        margin-top: 8px;
        border: 1px solid var(--wa-border);
        border-radius: var(--wa-radius);
        overflow: hidden;
        background: var(--wa-white);
}
.wa-qt-btn {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        color: var(--wa-text);
        transition: background var(--wa-transition);
        user-select: none;
}
.wa-qt-btn:hover { background: var(--wa-primary); color: var(--wa-white); }
.wa-qt-value {
        min-width: 32px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: var(--wa-text);
        border-left: 1px solid var(--wa-border);
        border-right: 1px solid var(--wa-border);
        padding: 4px 0;
}

/* ---- Checkbox Items (Live Streaming) ---- */
.wa-switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 30px;
}
.wa-switch input { opacity: 0; width: 0; height: 0; }
.wa-switch-slider {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background: #ccc;
        border-radius: 30px;
        transition: var(--wa-transition);
}
.wa-switch-slider::before {
        content: "";
        position: absolute;
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
        background: var(--wa-white);
        border-radius: 50%;
        transition: var(--wa-transition);
}
.wa-switch input:checked + .wa-switch-slider { background: var(--wa-primary); }
.wa-switch input:checked + .wa-switch-slider::before { transform: translateX(30px); }

/* ---- Slider Items (How many events) ---- */
.wa-slider-item {
        padding: 20px;
        text-align: center;
}
.wa-slider-item label {
        display: block;
        font-family: var(--wa-font-body);
        font-size: 14px;
        font-weight: 600;
        color: var(--wa-text);
        margin-bottom: 14px;
}
.wa-slider-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        justify-content: center;
}
.wa-slider-input {
        width: 200px;
        height: 6px;
        -webkit-appearance: none;
        appearance: none;
        background: var(--wa-border);
        border-radius: 3px;
        outline: none;
        cursor: pointer;
}
.wa-slider-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--wa-primary);
        cursor: pointer;
        border: 3px solid var(--wa-white);
        box-shadow: 0 2px 6px rgba(220, 20, 60, 0.4);
}
.wa-slider-input::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--wa-primary);
        cursor: pointer;
        border: 3px solid var(--wa-white);
        box-shadow: 0 2px 6px rgba(220, 20, 60, 0.4);
}
.wa-slider-value {
        min-width: 32px;
        text-align: center;
        font-family: var(--wa-font-heading);
        font-size: 24px;
        font-weight: 700;
        color: var(--wa-primary);
}

/* =====================================================
   ERROR MESSAGE
   ===================================================== */
.wa-errorMsg {
        background: #fee;
        color: #c33;
        border: 1px solid #fcc;
        padding: 10px 14px;
        border-radius: var(--wa-radius);
        font-size: 13px;
        text-align: center;
        margin: 16px 0;
}

/* =====================================================
   BUTTONS — Next / Previous / Order (matches TBD)
   ===================================================== */
.wa-btnNextContainer { margin-top: 40px; text-align: center; }
.wa-btn-next {
        background: var(--wa-primary);
        color: var(--wa-white) !important;
        padding: 10px 30px;
        font-family: var(--wa-font-button);
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-radius: var(--wa-radius);
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all var(--wa-transition);
}
.wa-btn-next:hover {
        background: var(--wa-primary-hover);
}
.wa-btn-next .wa-icon-check::before { content: "\f00c"; }
.wa-btn-next .wa-btnContent {
        display: inline-flex;
        align-items: center;
        gap: 8px;
}

.wa-linkPreviousCt { margin-top: 16px; }
.wa-linkPrevious {
        color: var(--wa-text-light);
        font-size: 13px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: color var(--wa-transition);
}
.wa-linkPrevious:hover { color: var(--wa-primary); }
.wa-icon-arrow-left::before { content: "\f060"; font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; }

/* =====================================================
   FINAL STEP
   ===================================================== */
.wa-finalLabel {
        text-align: center;
        font-family: var(--wa-font-body);
        font-size: 18px;
        color: var(--wa-text-light);
        margin-top: 30px;
}
.wa-finalPrice {
        text-align: center;
        font-family: var(--wa-font-heading);
        font-size: 48px;
        font-weight: 700;
        color: var(--wa-primary);
        margin-bottom: 40px;
}
.wa-finalPrice span { display: inline-block; animation: wa-pulse-up 600ms ease-out; }
@keyframes wa-pulse-up {
        0%   { transform: scale(0.9); opacity: 0.5; }
        60%  { transform: scale(1.1); }
        100% { transform: scale(1); opacity: 1; }
}

.wa-finalFields {
        max-width: 700px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
}
.wa-finalFields .wa-itemBloc { padding: 0; }

/* ---- Legal Notice ---- */
.wa-legalNotice {
        max-width: 700px;
        margin: 40px auto 20px;
        padding: 20px;
        background: var(--wa-bg-soft);
        border-radius: var(--wa-radius);
}
.wa-legalNoticeContent {
        font-size: 12px;
        color: var(--wa-text-light);
        line-height: 1.7;
        margin-bottom: 14px;
        max-height: 120px;
        overflow-y: auto;
        padding-right: 8px;
}
.wa-legalCheckbox {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        cursor: pointer;
}
.wa-legalCheckbox input { width: 18px; height: 18px; accent-color: var(--wa-primary); }

/* ---- Order Button ---- */
.wa-btn-order {
        background: var(--wa-primary);
        color: var(--wa-white) !important;
        padding: 12px 36px;
        font-family: var(--wa-font-button);
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-radius: var(--wa-radius);
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: all var(--wa-transition);
}
.wa-btn-order:hover {
        background: var(--wa-primary-hover);
}

/* =====================================================
   SUMMARY TABLE
   ===================================================== */
.wa-summary {
        max-width: 900px;
        margin: 40px auto 0;
        background: var(--wa-white);
        border: 1px solid var(--wa-border);
        border-radius: var(--wa-radius);
        overflow: hidden;
}
.wa-summary h3 {
        padding: 16px 20px;
        background: var(--wa-primary);
        color: var(--wa-white);
        font-family: var(--wa-font-heading);
        font-size: 20px;
        font-weight: 600;
        margin: 0;
}
.wa-summary table { width: 100%; border-collapse: collapse; }
.wa-summary th {
        background: var(--wa-primary);
        color: var(--wa-white);
        padding: 12px 14px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: left;
}
.wa-summary .wa-quantityTh { text-align: center; width: 100px; }
.wa-summary .wa-priceTh { text-align: right; width: 140px; }
.wa-summary td {
        padding: 10px 14px;
        border-bottom: 1px solid var(--wa-border);
        font-size: 14px;
}
.wa-summary tr.wa-summary-step td {
        background: var(--wa-text);
        color: var(--wa-white);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
}
.wa-summary .wa-quantityTd { text-align: center; }
.wa-summary .wa-priceTd { text-align: right; }
.wa-summary tr.wa-static td {
        background: var(--wa-bg-soft);
        font-weight: 700;
        font-size: 16px;
        color: var(--wa-primary);
        border-top: 2px solid var(--wa-primary);
}

/* =====================================================
   LOADER
   ===================================================== */
.wa-loader {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
}
.wa-spinner {
        width: 50px;
        height: 50px;
        position: relative;
}
.double-bounce1, .double-bounce2 {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: var(--wa-primary);
        opacity: 0.6;
        position: absolute;
        top: 0; left: 0;
        animation: wa-bounce 2s infinite ease-in-out;
}
.double-bounce2 { animation-delay: -1s; }
@keyframes wa-bounce {
        0%, 100% { transform: scale(0); }
        50%      { transform: scale(1); }
}

/* =====================================================
   DATEPICKER
   ===================================================== */
.wa-datepicker { cursor: pointer; }

/* =====================================================
   FAB (Floating Action Button) — TBD-style red circle
   ===================================================== */
.wa-fab-wrap {
        position: fixed;
        z-index: 99998;
        display: flex;
        align-items: center;
        gap: 12px;
}
.wa-fab-bottom-right { bottom: 28px; right: 28px; flex-direction: row; }
.wa-fab-bottom-left  { bottom: 28px; left: 28px; flex-direction: row-reverse; }
.wa-fab-top-right    { top: 28px; right: 28px; flex-direction: row; }
.wa-fab-top-left     { top: 28px; left: 28px; flex-direction: row-reverse; }

.wa-fab {
        width: var(--wa-fab-size, 64px);
        height: var(--wa-fab-size, 64px);
        border-radius: 50%;
        background: var(--wa-fab-bg, #dc143c);
        color: var(--wa-fab-color, #fff);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(220, 20, 60, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
        text-decoration: none;
        position: relative;
        border: none;
}

.wa-fab:hover {
        transform: scale(1.08);
        box-shadow: 0 10px 28px rgba(220, 20, 60, 0.5), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.wa-fab:active { transform: scale(1.02); }

.wa-fab-pulse {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: var(--wa-fab-bg, #dc143c);
        opacity: 0;
        z-index: -1;
}
.wa-fab-anim-pulse .wa-fab-pulse {
        animation: wa-pulse-ring 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes wa-pulse-ring {
        0%   { transform: scale(1); opacity: 0.5; }
        70%  { transform: scale(1.6); opacity: 0; }
        100% { transform: scale(1.6); opacity: 0; }
}

.wa-fab-anim-bounce .wa-fab { animation: wa-bounce-fab 2.4s infinite; }
@keyframes wa-bounce-fab {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-8px); }
}
.wa-fab-anim-none .wa-fab-pulse { display: none; }

.wa-fab-svg, .wa-fab-img {
        width: 50%;
        height: 50%;
        color: var(--wa-fab-color, #fff);
}
.wa-fab-img { object-fit: contain; }

.wa-fab-label {
        background: var(--wa-white);
        color: var(--wa-text);
        padding: 10px 16px;
        border-radius: 24px;
        font-family: var(--wa-font-body);
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
        letter-spacing: 0.3px;
}
.wa-fab-bottom-left .wa-fab-label,
.wa-fab-top-left .wa-fab-label {
        order: 2;
}

/* =====================================================
   POPUP — matches TBD landing page style
   ===================================================== */
.wa-popup-overlay {
        position: fixed;
        inset: 0;
        background: rgba(44, 62, 80, 0.85);
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        animation: wa-fade-in 300ms ease-out;
}
@keyframes wa-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
}

.wa-popup {
        max-width: 720px;
        width: 100%;
        background: var(--wa-white);
        border-radius: 8px;
        position: relative;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        animation: wa-popup-rise 500ms cubic-bezier(0.16, 1, 0.3, 1);
        overflow: hidden;
}
@keyframes wa-popup-rise {
        from { transform: translateY(30px) scale(0.97); opacity: 0; }
        to   { transform: translateY(0) scale(1); opacity: 1; }
}

.wa-popup-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: transparent;
        border: none;
        color: var(--wa-text-light);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 200ms;
        z-index: 10;
}
.wa-popup-close:hover {
        background: var(--wa-bg-soft);
        color: var(--wa-text);
}

/* Popup header strip */
.wa-popup-header {
        background: var(--wa-popup-accent, var(--wa-primary));
        color: var(--wa-white);
        padding: 20px 28px;
        display: flex;
        align-items: center;
}
.wa-popup-header-inner {
        display: flex;
        align-items: center;
        gap: 12px;
}
.wa-popup-header-mark {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--wa-font-heading);
        font-size: 22px;
        font-weight: 600;
        color: var(--wa-white);
        flex-shrink: 0;
}
.wa-popup-header-brand {
        display: flex;
        flex-direction: column;
        gap: 1px;
}
.wa-popup-header-name {
        font-family: var(--wa-font-heading);
        font-size: 18px;
        font-weight: 600;
        color: var(--wa-white);
        line-height: 1.1;
}
.wa-popup-header-tag {
        font-family: var(--wa-font-body);
        font-size: 10px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        text-transform: uppercase;
        letter-spacing: 1.5px;
}

/* Popup body */
.wa-popup-body {
        padding: 36px 36px 28px;
        text-align: center;
}

.wa-popup-eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
        justify-content: center;
}
.wa-popup-eyebrow-line {
        flex: 0 0 30px;
        height: 1px;
        background: var(--wa-text-light);
        opacity: 0.4;
}
.wa-popup-eyebrow-text {
        font-family: var(--wa-font-body);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--wa-text-light);
}

.wa-popup-title {
        font-family: var(--wa-font-heading);
        font-size: 32px;
        font-weight: 600;
        color: var(--wa-heading);
        margin: 0 0 6px;
        line-height: 1.2;
}
.wa-popup-subtitle {
        font-family: var(--wa-font-heading);
        font-size: 20px;
        font-style: italic;
        color: var(--wa-text-light);
        margin: 0 0 18px;
        font-weight: 400;
}

.wa-popup-text {
        font-size: 14.5px;
        line-height: 1.7;
        color: var(--wa-text);
        margin: 0 0 24px;
        text-align: center;
}
.wa-popup-text p { margin: 0; }

/* 3-step explainer (text-only, matches TBD) */
.wa-popup-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        padding: 20px 0;
        margin: 0 0 24px;
        border-top: 1px solid var(--wa-border);
        border-bottom: 1px solid var(--wa-border);
        text-align: center;
}
.wa-popup-step {
        padding: 0 8px;
}
.wa-popup-step-num {
        display: none; /* TBD has no numbered circles — just text */
}
.wa-popup-step-content {
        display: flex;
        flex-direction: column;
        gap: 4px;
}
.wa-popup-step-title {
        font-family: var(--wa-font-heading);
        font-size: 15px;
        font-weight: 600;
        color: #202020;
        line-height: 1.2;
}
.wa-popup-step-desc {
        font-family: var(--wa-font-body);
        font-size: 12px;
        font-weight: 400;
        color: #4a4a4a;
        line-height: 1.4;
}
.wa-popup-step-divider { display: none; } /* TBD has no dividers between steps */

/* Popup actions */
.wa-popup-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        margin-bottom: 14px;
}
.wa-popup-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 30px;
        border-radius: var(--wa-radius);
        font-family: var(--wa-font-body);
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-decoration: none;
        transition: all var(--wa-transition);
}
.wa-popup-cta:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
}
.wa-popup-cta svg {
        width: 16px;
        height: 16px;
}

.wa-popup-secondary {
        background: transparent;
        border: 1px solid var(--wa-border);
        color: var(--wa-text-light);
        padding: 10px 24px;
        border-radius: var(--wa-radius);
        font-family: var(--wa-font-body);
        font-size: 13px;
        font-weight: 400;
        cursor: pointer;
        transition: all var(--wa-transition);
}
.wa-popup-secondary:hover {
        background: var(--wa-bg-soft);
        color: var(--wa-text);
}

.wa-popup-timer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        font-size: 12px;
        color: var(--wa-text-light);
        margin: 0;
        font-style: italic;
        font-family: var(--wa-font-body);
}
.wa-popup-timer svg { color: var(--wa-popup-accent, var(--wa-primary)); }

/* =====================================================
   FORM MODAL OVERLAY (modal open mode)
   ===================================================== */
.wa-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.98);
        z-index: 99998;
        display: flex;
        flex-direction: column;
        animation: wa-fade-in 300ms ease-out;
}
.wa-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 24px;
        background: var(--wa-primary, #dc143c);
        color: var(--wa-white);
        flex-shrink: 0;
}
.wa-modal-header-brand {
        display: flex;
        align-items: center;
        gap: 12px;
}
.wa-modal-header-mark {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--wa-font-heading);
        font-size: 20px;
        font-weight: 600;
}
.wa-modal-header-title {
        font-family: var(--wa-font-heading);
        font-size: 16px;
        font-weight: 600;
}
.wa-modal-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: var(--wa-white);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 200ms;
}
.wa-modal-close:hover {
        background: rgba(255, 255, 255, 0.3);
}
.wa-modal-body {
        flex: 1;
        overflow-y: auto;
        background: var(--wa-bg, #ffffff);
        position: relative;
}
.wa-modal-body .wa-form-wrapper { padding: 0; }
.wa-modal-body .wa-form-container { padding: 24px 20px; }
.wa-modal-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 20px;
        gap: 16px;
        color: var(--wa-text-light);
}
.wa-modal-spinner {
        width: 48px;
        height: 48px;
        border: 3px solid rgba(220, 20, 60, 0.2);
        border-top-color: var(--wa-primary, #dc143c);
        border-radius: 50%;
        animation: wa-modal-spin 800ms linear infinite;
}
@keyframes wa-modal-spin {
        to { transform: rotate(360deg); }
}
.wa-modal-loading p {
        font-family: var(--wa-font-body);
        font-size: 15px;
        margin: 0;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
        .wa-intro { padding: 40px 20px 30px; }
        .wa-intro-title { font-size: 28px; }
        .wa-intro-subtitle { font-size: 24px; }
        .wa-steps-intro { grid-template-columns: 1fr; gap: 24px; }
        .wa-stepTitle { font-size: 28px; }
        .wa-finalFields { grid-template-columns: 1fr; }
        .wa-finalPrice { font-size: 36px; }
        .wa-form-wrapper [class*="col-md-"] { flex: 0 0 50%; max-width: 50%; }
        .wa-fab-wrap { bottom: 20px; right: 20px; }
        .wa-fab-label { display: none; }

        .wa-popup { max-width: 100%; }
        .wa-popup-body { padding: 28px 20px 24px; }
        .wa-popup-title { font-size: 26px; }
        .wa-popup-subtitle { font-size: 17px; }
        .wa-popup-steps { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 480px) {
        .wa-form-wrapper [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; }
        .wa-btn-next { padding: 10px 24px; font-size: 13px; }
        .wa-btn-start { padding: 12px 28px; font-size: 13px; }
        .wa-stepTitle { font-size: 24px; }
        .wa-finalPrice { font-size: 32px; }
        .wa-fab-wrap { bottom: 16px; right: 16px; }
        .wa-popup-overlay { padding: 12px; }
        .wa-popup-body { padding: 24px 16px; }
        .wa-popup-title { font-size: 22px; }
        .wa-popup-cta { padding: 10px 20px; font-size: 13px; }
        .wa-modal-header { padding: 12px 16px; }
        .wa-modal-header-title { font-size: 14px; }
}