/**
 * Agrani Reunion — Step Design & Responsive Layer (v3.61.0)
 * ---------------------------------------------------------
 * Loaded last, after form.css and agrani-form-simple.css, so it can refine
 * every registration step without editing the older layers.
 *
 * Scope (presentation only — no markup or logic changes):
 *   1. Step shell + step heading treatment
 *   2. Stepper: horizontal scroll strip on phones, clean rail on desktop
 *   3. Field grid + label/input rhythm on every step
 *   4. Step 1 grouped boxes (batch / staff / t-shirt / guests)
 *   5. Step 4 payment cards, total box, review list, declarations
 *   6. Access-code modal
 *   7. Sticky action bar on phones + safe-area handling
 */

/* =========================================================
   0. Shared tokens for this layer
   ========================================================= */
.agrani-reunion-wrap {
    --ag-step-radius: 16px;
    --ag-step-gap: clamp(12px, 2.2vw, 18px);
    --ag-surface: #fffdf8;
    --ag-line: color-mix(in srgb, var(--agrani-theme-line, #efe4cc) 85%, #fff);
    --ag-tap: 46px;
}

/* =========================================================
   1. Step shell
   ========================================================= */
.agrani-reunion-wrap .agrani-step {
    animation: agraniStepIn .32s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes agraniStepIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.agrani-reunion-wrap .agrani-step > h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    padding: 0 0 14px;
    font-size: clamp(16px, 2.4vw, 20px);
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--agrani-theme, var(--c-primary));
    border-bottom: 1px solid var(--ag-line);
}
.agrani-reunion-wrap .agrani-step > h3 + .fee-note {
    margin: 10px 0 18px;
}
.agrani-reunion-wrap .agrani-step > h3[data-icon]::after {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--agrani-theme, #6a1414) 12%, #fff),
        color-mix(in srgb, var(--agrani-theme, #6a1414) 22%, #fff));
    border-color: color-mix(in srgb, var(--agrani-theme, #6a1414) 25%, #fff);
}
.agrani-reunion-wrap .agrani-step > h3[data-icon]::before {
    background-color: var(--agrani-theme, var(--c-primary));
}

/* =========================================================
   2. Stepper
   ========================================================= */
.agrani-reunion-wrap .agrani-progress-wrap {
    padding: 14px 16px 16px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-step-radius);
    background: linear-gradient(180deg, #fff, var(--ag-surface));
    box-shadow: 0 10px 26px -22px rgba(42,15,15,.5);
    margin-bottom: 22px;
}
.agrani-reunion-wrap .agrani-progress { margin-bottom: 10px; }
.agrani-reunion-wrap .agrani-step-info { margin-bottom: 0; }

.agrani-reunion-wrap .agrani-stepper {
    display: flex;
    align-items: flex-start;
    margin-top: 16px;
}
.agrani-reunion-wrap .agrani-stepper-item {
    gap: 8px;
    padding: 2px;
    border-radius: 12px;
}
.agrani-reunion-wrap .agrani-stepper-dot {
    width: 32px; height: 32px;
    font-size: 13.5px;
}
.agrani-reunion-wrap .agrani-stepper-item.is-complete .agrani-stepper-dot {
    font-size: 0;
    position: relative;
}
.agrani-reunion-wrap .agrani-stepper-item.is-complete .agrani-stepper-dot::after {
    content: "";
    width: 13px; height: 7px;
    border-left: 2.4px solid currentColor;
    border-bottom: 2.4px solid currentColor;
    transform: translateY(-2px) rotate(-45deg);
}

/* Phones: turn the stepper into a scrollable chip strip so 4 steps never
   squash into unreadable stacks. */
@media (max-width: 640px) {
    .agrani-reunion-wrap .agrani-progress-wrap { padding: 12px; }
    .agrani-reunion-wrap .agrani-stepper {
        margin-top: 12px;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .agrani-reunion-wrap .agrani-stepper::-webkit-scrollbar { display: none; }
    .agrani-reunion-wrap .agrani-stepper-line { display: none; }
    .agrani-reunion-wrap .agrani-stepper-item {
        flex: 0 0 auto;
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        scroll-snap-align: start;
        padding: 7px 12px 7px 8px;
        border: 1px solid var(--ag-line);
        border-radius: 999px;
        background: #fff;
    }
    .agrani-reunion-wrap .agrani-stepper-item.is-active {
        border-color: var(--agrani-theme, var(--c-primary));
        background: color-mix(in srgb, var(--agrani-theme, #6a1414) 8%, #fff);
    }
    .agrani-reunion-wrap .agrani-stepper-dot { width: 26px; height: 26px; font-size: 12px; }
    .agrani-reunion-wrap .agrani-stepper-text { text-align: left; }
    .agrani-reunion-wrap .agrani-stepper-text strong { font-size: 12px; white-space: nowrap; }
    .agrani-reunion-wrap .agrani-stepper-text small { display: none; }
}

/* =========================================================
   3. Fields — same rhythm on every step
   ========================================================= */
.agrani-reunion-wrap .agrani-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--ag-step-gap);
    align-items: start;
}
.agrani-reunion-wrap .agrani-grid label:not(.agrani-radio):not(.agrani-checkbox) {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    background: #fff !important;
    border: 1px solid var(--ag-line) !important;
    border-radius: 14px !important;
    padding: 12px 14px 13px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #6f5c3c !important;
    box-shadow: 0 1px 2px rgba(42,15,15,.03);
}
.agrani-reunion-wrap .agrani-grid label:not(.agrani-radio):focus-within {
    border-color: var(--agrani-theme, var(--c-primary)) !important;
    box-shadow: 0 0 0 4px var(--agrani-theme-glow, rgba(106,20,20,.12));
}
.agrani-reunion-wrap .agrani-grid label small {
    display: block;
    font-weight: 500;
    margin-top: 3px;
}
.agrani-reunion-wrap .agrani-grid label input:not([type="checkbox"]):not([type="radio"]),
.agrani-reunion-wrap .agrani-grid label select,
.agrani-reunion-wrap .agrani-grid label textarea {
    margin-top: 8px;
    min-height: var(--ag-tap);
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 11px;
    background: #fffdf8;
}
.agrani-reunion-wrap .agrani-grid label select { padding-right: 38px; }
.agrani-reunion-wrap .agrani-grid label textarea { min-height: 84px; }
.agrani-reunion-wrap .agrani-grid label input[type="file"] { min-height: auto; }

/* 16px on phones stops iOS from zooming into the field. */
@media (max-width: 640px) {
    .agrani-reunion-wrap .agrani-grid label input:not([type="checkbox"]):not([type="radio"]),
    .agrani-reunion-wrap .agrani-grid label select,
    .agrani-reunion-wrap .agrani-grid label textarea { font-size: 16px; }
}

/* =========================================================
   4. Step 1 — grouped boxes
   ========================================================= */
.agrani-reunion-wrap .agrani-batch-fee-box,
.agrani-reunion-wrap .guest-fields {
    background: linear-gradient(180deg, #fff, var(--ag-surface)) !important;
    border: 1px solid var(--ag-line) !important;
    border-radius: var(--ag-step-radius) !important;
    padding: clamp(14px, 2.6vw, 20px) !important;
    margin-bottom: 16px;
    box-shadow: 0 12px 28px -26px rgba(42,15,15,.55);
}
.agrani-reunion-wrap .agrani-batch-fee-box h4 {
    font-size: clamp(14.5px, 2vw, 16px);
    color: var(--agrani-theme, var(--c-primary));
}
.agrani-reunion-wrap .agrani-batch-fee-box .fee-note { line-height: 1.6; }
.agrani-reunion-wrap .agrani-batch-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.agrani-reunion-wrap .agrani-batch-grid .agrani-radio span { min-height: var(--ag-tap); display: flex; align-items: center; justify-content: center; }

.agrani-reunion-wrap .guest-fields:empty { display: none; }

/* =========================================================
   5. Step 4 — payment
   ========================================================= */
.agrani-reunion-wrap .agrani-total-box {
    border-radius: var(--ag-step-radius);
    padding: clamp(16px, 3vw, 22px);
}
.agrani-reunion-wrap .total-amount {
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.15;
}
.agrani-reunion-wrap .agrani-payment-gateways {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.agrani-reunion-wrap .agrani-pg-inner {
    border-radius: 14px;
    min-height: 74px;
}
.agrani-reunion-wrap .agrani-pg-card input:checked + .agrani-pg-check + .agrani-pg-inner {
    border-color: var(--agrani-theme, var(--c-primary));
    background: linear-gradient(180deg, #fff,
        color-mix(in srgb, var(--agrani-theme, #6a1414) 9%, #fff));
    box-shadow: 0 10px 24px -16px var(--agrani-theme-glow, rgba(106,20,20,.5));
}
.agrani-reunion-wrap .agrani-pg-card input:focus-visible + .agrani-pg-check + .agrani-pg-inner {
    outline: 2px solid var(--agrani-theme, var(--c-primary));
    outline-offset: 2px;
}

.agrani-reunion-wrap .agrani-review {
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-step-radius);
    background: var(--ag-surface);
    padding: clamp(14px, 2.6vw, 18px);
}
.agrani-reunion-wrap .agrani-review:empty { display: none; }

/* Declaration checkboxes: readable, left aligned, comfortable tap target. */
.agrani-reunion-wrap .agrani-step[data-step="4"] > .agrani-radio { margin-top: 10px; }
.agrani-reunion-wrap .agrani-step[data-step="4"] > .agrani-radio span {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.55;
    padding: 13px 15px;
    border-radius: 12px;
}
.agrani-reunion-wrap .agrani-step[data-step="4"] > .agrani-radio input[type="checkbox"] {
    position: static;
    opacity: 1;
    width: 18px; height: 18px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    accent-color: var(--agrani-theme, var(--c-primary));
}

/* =========================================================
   6. Access-code modal
   ========================================================= */
.agrani-reunion-wrap .agrani-code-modal {
    border-radius: var(--ag-step-radius);
    max-width: min(440px, calc(100vw - 28px));
    max-height: min(88vh, 720px);
    overflow-y: auto;
    padding: clamp(18px, 4vw, 26px);
}
.agrani-reunion-wrap .agrani-code-modal label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}
.agrani-reunion-wrap .agrani-code-modal input,
.agrani-reunion-wrap .agrani-code-modal select { min-height: var(--ag-tap); font-size: 16px; }
.agrani-reunion-wrap .agrani-code-modal .agrani-btn { min-height: var(--ag-tap); }

/* =========================================================
   7. Actions — sticky on phones
   ========================================================= */
.agrani-reunion-wrap .agrani-actions {
    gap: 10px;
    margin-top: 26px;
    padding-top: 18px;
}
.agrani-reunion-wrap .agrani-actions .agrani-btn { min-height: var(--ag-tap); }

@media (max-width: 640px) {
    .agrani-reunion-wrap .agrani-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin: 22px -4px 0;
        padding: 12px 4px calc(12px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(255,255,255,.75), #fff 38%);
        backdrop-filter: blur(6px);
        border-top: 1px solid var(--ag-line);
        flex-wrap: nowrap;
    }
    .agrani-reunion-wrap .agrani-actions .agrani-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 14px;
        font-size: 14.5px;
        white-space: nowrap;
    }
    /* Keep the sticky bar clear of the fixed price bar. */
    body.agrani-has-price-bar .agrani-reunion-wrap .agrani-actions { bottom: 76px; }
}

@media (max-width: 380px) {
    .agrani-reunion-wrap .agrani-actions .agrani-btn { padding: 11px 10px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .agrani-reunion-wrap .agrani-step { animation: none; }
}


/* =========================================================
   8. Spacing fixes (v3.59.1)
   Tighten the gap between the stepper card, the step heading and the
   first content box, and never show an empty heading row.
   ========================================================= */
.agrani-reunion-wrap .agrani-progress-wrap { margin-bottom: 18px; }
.agrani-reunion-wrap .agrani-step1-heading { margin-bottom: 4px; }
.agrani-reunion-wrap .agrani-step1-details.is-visible { margin-top: 0; }
.agrani-reunion-wrap .agrani-step1-details > .agrani-batch-fee-box:first-child { margin-top: 14px; }
.agrani-reunion-wrap .agrani-batch-fee-box + .agrani-batch-fee-box { margin-top: 0; }
.agrani-reunion-wrap .agrani-batch-fee-box > *:last-child { margin-bottom: 0; }
.agrani-reunion-wrap .agrani-participant-grid.agrani-collapsed { margin-bottom: 0; }

/* An unconfigured step heading must not leave an icon floating over blank
   space with a stray divider line. */
.agrani-reunion-wrap .agrani-step > h3:empty { display: none; }

/* =========================================================
   EXACT DESIGN ALIGNMENT WITH IMAGE MOCKUP (v3.60.0)
   ========================================================= */

/* 1. Stepper Navigation */
.agrani-reunion-wrap .agrani-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    margin: 10px 0 25px;
    background: #ffffff;
    border: 1px solid #f0e3c0;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(180, 140, 80, 0.06);
}

.agrani-reunion-wrap .agrani-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    cursor: default;
    flex: 1;
}

.agrani-reunion-wrap .agrani-stepper-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    transition: all 0.25s ease;
    background: #ffffff;
    border: 2px solid #e0d5c1;
    color: #8c7b6c;
}

.agrani-reunion-wrap .agrani-stepper-item.is-active .agrani-stepper-dot {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 5px rgba(217, 119, 6, 0.2) !important;
}

.agrani-reunion-wrap .agrani-stepper-item.is-complete .agrani-stepper-dot {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

.agrani-reunion-wrap .agrani-stepper-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.agrani-reunion-wrap .agrani-stepper-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #4a3828;
}

.agrani-reunion-wrap .agrani-stepper-item.is-active .agrani-stepper-text strong {
    color: #b45309;
}

.agrani-reunion-wrap .agrani-stepper-text small {
    font-size: 11.5px;
    color: #8c7b6c;
}

.agrani-reunion-wrap .agrani-stepper-line {
    flex: 1;
    height: 2px;
    background: #e8dcc8;
    margin: 0 -15px 25px -15px;
    position: relative;
    z-index: 1;
}

.agrani-reunion-wrap .agrani-stepper-line.is-complete {
    background: #d97706;
}

/* 2. Step 1 Header & Section Boxes */
.agrani-reunion-wrap .agrani-step1-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #92400e !important;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid #f3e5c8;
}

.agrani-reunion-wrap .agrani-step1-heading::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #fef3c7;
    border: 1px solid #fde68a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23b45309'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}

/* Grouped Card Boxes in Steps */
.agrani-reunion-wrap .agrani-step-box,
.agrani-reunion-wrap .guest-fields,
.agrani-reunion-wrap .agrani-step1-details,
.agrani-reunion-wrap .agrani-tshirt-group {
    background: #ffffff !important;
    border: 1.5px solid #f1e3bf !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 4px 14px rgba(220, 190, 140, 0.08) !important;
}

.agrani-reunion-wrap .agrani-box-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #4a3828;
    margin-bottom: 6px;
}

.agrani-reunion-wrap .agrani-box-subtitle {
    font-size: 12px;
    color: #786655;
    margin-bottom: 14px;
    line-height: 1.4;
}

/* SSC & HSC Cards */
.agrani-reunion-wrap .agrani-category-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

.agrani-reunion-wrap .agrani-batch-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1.5px solid #ebd9b5;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: #4a3828;
    transition: all 0.2s ease;
}

.agrani-reunion-wrap .agrani-batch-card:hover {
    border-color: #d97706;
    background: #fffaf0;
    transform: translateY(-2px);
}

.agrani-reunion-wrap .agrani-batch-card.is-selected {
    border-color: #b45309 !important;
    background: #fff8eb !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
    color: #92400e !important;
}

/* 3. T-Shirt & Select Input */
.agrani-reunion-wrap select,
.agrani-reunion-wrap input[type="text"],
.agrani-reunion-wrap input[type="number"],
.agrani-reunion-wrap input[type="email"],
.agrani-reunion-wrap input[type="tel"] {
    width: 100%;
    height: 46px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1.5px solid #ded0b8;
    border-radius: 10px;
    font-size: 14px;
    color: #333333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.agrani-reunion-wrap select:focus,
.agrani-reunion-wrap input:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
}

/* 4. Continue / Navigation Buttons */
.agrani-reunion-wrap .agrani-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin-top: 25px;
}

.agrani-reunion-wrap .agrani-btn-primary,
.agrani-reunion-wrap .agrani-btn-next,
.agrani-reunion-wrap button[name="agrani_next"],
.agrani-reunion-wrap #agraniSubmitBtn,
.agrani-reunion-wrap .agrani-form-submit {
    background: #701016 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 34px !important;
    border-radius: 30px !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(112, 16, 22, 0.3) !important;
    transition: all 0.2s ease !important;
}

.agrani-reunion-wrap .agrani-btn-primary:hover,
.agrani-reunion-wrap .agrani-btn-next:hover,
.agrani-reunion-wrap button[name="agrani_next"]:hover,
.agrani-reunion-wrap #agraniSubmitBtn:hover {
    background: #560a0f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(112, 16, 22, 0.4) !important;
}

/* Back Button */
.agrani-reunion-wrap .agrani-btn-prev,
.agrani-reunion-wrap button[name="agrani_prev"] {
    background: transparent !important;
    color: #701016 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 26px !important;
    border-radius: 30px !important;
    border: 1.5px solid #701016 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.agrani-reunion-wrap .agrani-btn-prev:hover,
.agrani-reunion-wrap button[name="agrani_prev"]:hover {
    background: #fff4f4 !important;
}

/* 5. Right Sidebar Summary Cards */
.agrani-reunion-wrap .agrani-price-summary-card {
    background: #701016 !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    padding: 22px !important;
    box-shadow: 0 10px 30px rgba(112, 16, 22, 0.25) !important;
    margin-top: 16px !important;
}

.agrani-reunion-wrap .agrani-price-summary-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #fce7e7;
    margin-bottom: 10px;
}

.agrani-reunion-wrap .agrani-price-summary-amount {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 6px 0 14px !important;
    letter-spacing: -0.5px;
}


.agrani-reunion-wrap .agrani-selected-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff5e0;
    color: #b45309;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}


/* =========================================================
   GOLDEN JUBILEE FORM MASTER SKIN — v3.61.0
   Final visual layer: keep every registration step in the same
   warm cream / gold / deep-maroon language as the supplied mockup.
   Presentation only — no form logic or field names are changed.
   ========================================================= */

.agrani-reunion-wrap {
    --agrani-theme: #701016 !important;
    --agrani-theme-2: #4f080d !important;
    --agrani-theme-soft: #fff8ea !important;
    --agrani-theme-line: #efd8a9 !important;
    --agrani-theme-glow: rgba(112,16,22,.14) !important;
    --ag-gold: #c98a17;
    --ag-gold-light: #f7e8c4;
    --ag-cream: #fffaf0;
    --ag-maroon: #701016;
    --ag-brown: #5a3a25;
}

/* Form workspace */
.agrani-reunion-wrap .agrani-form {
    background: #fffdf8 !important;
    border: 1px solid #ecd6a7 !important;
    border-top: 3px solid var(--ag-gold) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 55px rgba(92,49,15,.10) !important;
    padding: clamp(18px, 2.6vw, 28px) !important;
}

/* Every visible step uses the same entrance, spacing and typography. */
.agrani-reunion-wrap .agrani-step {
    color: #49382b;
}

.agrani-reunion-wrap .agrani-step > h3 {
    color: var(--ag-maroon) !important;
    font-size: clamp(17px, 2.1vw, 20px) !important;
    font-weight: 800 !important;
    margin: 0 0 16px !important;
    padding: 0 0 13px !important;
    border-bottom: 1px solid #f0dfbc !important;
}

/* Large soft icon tile beside every step heading. Existing data-icon SVGs are reused. */
.agrani-reunion-wrap .agrani-step > h3[data-icon]::after {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #fff4dc, #f7e1b4) !important;
    border: 1px solid #efd49e !important;
}
.agrani-reunion-wrap .agrani-step > h3[data-icon]::before {
    width: 36px !important;
    height: 36px !important;
    background-color: var(--ag-gold) !important;
    -webkit-mask-size: 20px 20px !important;
    mask-size: 20px 20px !important;
}

/* Progress rail exactly follows the reference: white card + gold rail. */
.agrani-reunion-wrap .agrani-progress-wrap {
    background: linear-gradient(180deg, #fff, #fffaf0) !important;
    border: 1px solid #efd9ad !important;
    border-radius: 16px !important;
    box-shadow: 0 7px 22px rgba(112,16,22,.06) !important;
    padding: 12px 14px 14px !important;
}
.agrani-reunion-wrap .agrani-progress {
    height: 8px !important;
    background: #f3e7d0 !important;
    border-radius: 99px !important;
    overflow: hidden !important;
}
.agrani-reunion-wrap .agrani-progress-bar {
    background: linear-gradient(90deg, #b9780d, #d99a27, #e8b84e) !important;
    border-radius: inherit !important;
}
.agrani-reunion-wrap .agrani-step-info {
    background: #fff8e9 !important;
    border: 1px solid #edd29b !important;
    color: #8a5b12 !important;
    font-size: 11.5px !important;
}
.agrani-reunion-wrap .agrani-stepper {
    background: #fff !important;
    border: 1px solid #f0dfc1 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 15px rgba(130,82,23,.05) !important;
    padding: 14px 16px !important;
    margin: 10px 0 4px !important;
}
.agrani-reunion-wrap .agrani-stepper-dot {
    width: 36px !important;
    height: 36px !important;
    border: 1.5px solid #dfcfb3 !important;
    background: #fff !important;
    color: #927e69 !important;
    box-shadow: none !important;
}
.agrani-reunion-wrap .agrani-stepper-item.is-active .agrani-stepper-dot,
.agrani-reunion-wrap .agrani-stepper-item.is-complete .agrani-stepper-dot {
    background: linear-gradient(135deg, #d89a23, #b8750a) !important;
    border-color: #c98a17 !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(201,138,23,.13) !important;
}
.agrani-reunion-wrap .agrani-stepper-item.is-complete .agrani-stepper-dot::after {
    border-color: #fff !important;
}
.agrani-reunion-wrap .agrani-stepper-text strong {
    color: #49382b !important;
    font-size: 13px !important;
}
.agrani-reunion-wrap .agrani-stepper-item.is-active .agrani-stepper-text strong {
    color: #a36a0b !important;
}
.agrani-reunion-wrap .agrani-stepper-text small {
    color: #8b7a68 !important;
}
.agrani-reunion-wrap .agrani-stepper-line,
.agrani-reunion-wrap .agrani-stepper-line.is-complete {
    background: #eadcc3 !important;
}

/* Step content: consistent cream-bordered information cards. */
.agrani-reunion-wrap .agrani-step .agrani-grid {
    gap: 12px 14px !important;
}
.agrani-reunion-wrap .agrani-step .agrani-grid > label:not(.agrani-radio):not(.agrani-checkbox) {
    background: #fff !important;
    border: 1px solid #efdfbf !important;
    border-radius: 12px !important;
    padding: 11px 13px 12px !important;
    color: #614d39 !important;
    box-shadow: 0 3px 10px rgba(111,71,25,.035) !important;
    min-width: 0;
}
.agrani-reunion-wrap .agrani-step .agrani-grid > label:not(.agrani-radio):not(.agrani-checkbox):hover {
    border-color: #e4c98e !important;
}
.agrani-reunion-wrap .agrani-step .agrani-grid > label:not(.agrani-radio):not(.agrani-checkbox) > input,
.agrani-reunion-wrap .agrani-step .agrani-grid > label:not(.agrani-radio):not(.agrani-checkbox) > select,
.agrani-reunion-wrap .agrani-step .agrani-grid > label:not(.agrani-radio):not(.agrani-checkbox) > textarea {
    background: #fffdf8 !important;
    border: 1px solid #dfd0b7 !important;
    border-radius: 9px !important;
}
.agrani-reunion-wrap .agrani-step .agrani-grid > label:not(.agrani-radio):not(.agrani-checkbox):focus-within {
    border-color: #d3a247 !important;
    box-shadow: 0 0 0 3px rgba(211,162,71,.13) !important;
}
.agrani-reunion-wrap .agrani-step .agrani-grid input:focus,
.agrani-reunion-wrap .agrani-step .agrani-grid select:focus,
.agrani-reunion-wrap .agrani-step .agrani-grid textarea:focus {
    border-color: #c98a17 !important;
    box-shadow: 0 0 0 3px rgba(201,138,23,.12) !important;
}

/* Step 2 — personal profile area */
.agrani-reunion-wrap .agrani-step[data-step="2"] > .agrani-grid {
    padding: 14px !important;
    background: linear-gradient(180deg,#fff,#fffaf1) !important;
    border: 1px solid #efdfbf !important;
    border-radius: 15px !important;
}
.agrani-reunion-wrap .agrani-step[data-step="2"] > hr {
    border: 0 !important;
    border-top: 1px dashed #e8d5ae !important;
    margin: 20px 0 !important;
}

/* Conditional Teacher / Office / Support blocks become matching mini-cards. */
.agrani-reunion-wrap .agrani-step[data-step="2"] .conditional {
    background: linear-gradient(180deg,#fff,#fffaf1) !important;
    border: 1px solid #efdfbf !important;
    border-radius: 15px !important;
    padding: 16px !important;
    margin: 0 0 14px !important;
    box-shadow: 0 4px 14px rgba(111,71,25,.045) !important;
}
.agrani-reunion-wrap .agrani-step .conditional h4,
.agrani-reunion-wrap .agrani-step .agrani-pm-header h4 {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #8c4d0d !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    margin: 0 0 12px !important;
}
.agrani-reunion-wrap .agrani-step .conditional h4[data-icon]::before,
.agrani-reunion-wrap .agrani-step .agrani-pm-header h4[data-icon]::before {
    width: 29px !important;
    height: 29px !important;
    border-radius: 9px !important;
    background-color: #b9780d !important;
    -webkit-mask-size: 17px 17px !important;
    mask-size: 17px 17px !important;
}

/* Step 3 — career card gets the exact same content shell as Step 2. */
.agrani-reunion-wrap .agrani-step[data-step="job"] > .fee-note {
    background: #fff8e9 !important;
    border: 1px solid #f0dcb2 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: #735d42 !important;
    margin: 0 0 14px !important;
}
.agrani-reunion-wrap .agrani-step[data-step="job"] > .agrani-grid {
    padding: 14px !important;
    background: linear-gradient(180deg,#fff,#fffaf1) !important;
    border: 1px solid #efdfbf !important;
    border-radius: 15px !important;
}

/* Step 4 — checkout hierarchy. */
.agrani-reunion-wrap .agrani-step[data-step="4"] > hr {
    border: 0 !important;
    border-top: 1px dashed #ead7b1 !important;
    margin: 16px 0 !important;
}
.agrani-reunion-wrap .agrani-total-box {
    text-align: left !important;
    background: linear-gradient(145deg, #7b1117, #4e070c) !important;
    border: 1px solid #8f292c !important;
    border-radius: 15px !important;
    padding: 18px 20px !important;
    box-shadow: 0 14px 30px rgba(112,16,22,.18) !important;
    position: relative;
    overflow: hidden;
}
.agrani-reunion-wrap .agrani-total-box::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -55px;
    top: -65px;
    border: 1px solid rgba(242,196,91,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(242,196,91,.04), 0 0 0 44px rgba(242,196,91,.025);
    pointer-events: none;
}
.agrani-reunion-wrap .agrani-total-box h4 {
    color: #f6dfaa !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.agrani-reunion-wrap .agrani-total-box h4[data-icon]::before {
    background-color: #f0c15b !important;
}
.agrani-reunion-wrap .agrani-total-box .total-amount {
    color: #fff !important;
    font-size: clamp(30px, 5vw, 42px) !important;
    font-weight: 850 !important;
}
.agrani-reunion-wrap .agrani-total-box .fee-breakdown {
    color: rgba(255,243,211,.84) !important;
}

.agrani-reunion-wrap .agrani-pm-header {
    background: linear-gradient(180deg,#fffaf0,#fff) !important;
    border: 1px solid #efdfbf !important;
    border-radius: 14px !important;
    padding: 13px 15px !important;
    margin: 0 0 12px !important;
}
.agrani-reunion-wrap .agrani-pm-header p {
    color: #776653 !important;
}
.agrani-reunion-wrap .agrani-payment-gateways {
    gap: 12px !important;
}
.agrani-reunion-wrap .agrani-pg-inner {
    border: 1px solid #ead7b4 !important;
    background: linear-gradient(180deg,#fff,#fffaf0) !important;
    border-radius: 13px !important;
    box-shadow: 0 4px 12px rgba(101,62,18,.045) !important;
}
.agrani-reunion-wrap .agrani-pg-card:hover .agrani-pg-inner {
    border-color: #d7aa53 !important;
    box-shadow: 0 8px 18px rgba(112,16,22,.08) !important;
}
.agrani-reunion-wrap .agrani-pg-card input:checked + .agrani-pg-check + .agrani-pg-inner {
    border-color: #701016 !important;
    background: linear-gradient(180deg,#fffaf0,#fff0ce) !important;
    box-shadow: 0 0 0 3px rgba(201,138,23,.12), 0 8px 20px rgba(112,16,22,.10) !important;
}
.agrani-reunion-wrap .agrani-pg-check {
    border-color: #d8c59e !important;
}
.agrani-reunion-wrap .agrani-pg-card input:checked + .agrani-pg-check {
    background: #701016 !important;
    border-color: #701016 !important;
}

/* Payment/review notices use the same cream card language despite inline styles. */
.agrani-reunion-wrap #agrani-bkash-api-notice,
.agrani-reunion-wrap #agrani-gateway-notice,
.agrani-reunion-wrap #agrani-pubaliqr-notice,
.agrani-reunion-wrap #agrani-cashpay-notice {
    background: #fff9ed !important;
    border: 1px solid #e7cf9d !important;
    border-left: 4px solid #c98a17 !important;
    border-radius: 11px !important;
    color: #654b2f !important;
}
.agrani-reunion-wrap #agrani-bkash-api-notice strong,
.agrani-reunion-wrap #agrani-gateway-notice strong,
.agrani-reunion-wrap #agrani-pubaliqr-notice strong,
.agrani-reunion-wrap #agrani-cashpay-notice strong { color: #701016 !important; }

.agrani-reunion-wrap .agrani-review {
    background: linear-gradient(180deg,#fff,#fffaf1) !important;
    border: 1px solid #ead9b9 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 13px rgba(101,62,18,.04) !important;
}

/* Declaration rows: look like the small confirmation cards in the mockup. */
.agrani-reunion-wrap .agrani-step[data-step="4"] > .agrani-radio {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 10px 0 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #ead9b9 !important;
    border-radius: 11px !important;
    background: #fffdf8 !important;
    color: #654f38 !important;
}
.agrani-reunion-wrap .agrani-step[data-step="4"] > .agrani-radio input[type="checkbox"] {
    accent-color: #701016 !important;
}

/* Buttons: deep maroon with gold-friendly hover. */
.agrani-reunion-wrap .agrani-actions {
    border-top: 1px dashed #e4d0a8 !important;
    padding-top: 16px !important;
    margin-top: 20px !important;
}
.agrani-reunion-wrap .agrani-actions .agrani-btn-primary,
.agrani-reunion-wrap .agrani-actions .agrani-btn-next,
.agrani-reunion-wrap .agrani-actions #agraniNext,
.agrani-reunion-wrap .agrani-actions #agraniSubmit,
.agrani-reunion-wrap .agrani-actions .agrani-form-submit,
.agrani-reunion-wrap .agrani-actions button[name="agrani_next"] {
    background: linear-gradient(135deg,#7a1117,#56090e) !important;
    color: #fff !important;
    border: 1px solid #6b0e13 !important;
    border-radius: 11px !important;
    min-height: 46px !important;
    padding: 11px 26px !important;
    box-shadow: 0 7px 17px rgba(112,16,22,.18) !important;
}
.agrani-reunion-wrap .agrani-actions .agrani-btn-primary:hover,
.agrani-reunion-wrap .agrani-actions .agrani-btn-next:hover,
.agrani-reunion-wrap .agrani-actions #agraniNext:hover,
.agrani-reunion-wrap .agrani-actions #agraniSubmit:hover,
.agrani-reunion-wrap .agrani-actions .agrani-form-submit:hover,
.agrani-reunion-wrap .agrani-actions button[name="agrani_next"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(112,16,22,.23) !important;
}
.agrani-reunion-wrap .agrani-actions .agrani-btn-ghost {
    border: 1px solid #d9c39a !important;
    background: #fffaf0 !important;
    color: #6d5134 !important;
    border-radius: 11px !important;
}

/* Student verification modal follows the same visual system. */
.agrani-reunion-wrap .agrani-code-modal {
    background: #fffdf8 !important;
    border: 1px solid #e9d4a7 !important;
    box-shadow: 0 24px 70px rgba(45,12,12,.22) !important;
}
.agrani-reunion-wrap .agrani-code-modal h4 {
    color: #701016 !important;
}
.agrani-reunion-wrap .agrani-code-modal input,
.agrani-reunion-wrap .agrani-code-modal select {
    border-color: #ddcba9 !important;
    background: #fffaf1 !important;
    border-radius: 10px !important;
}

/* Mobile: preserve the mockup's spacious card feel without horizontal overflow. */
@media (max-width: 760px) {
    .agrani-reunion-wrap .agrani-form {
        padding: 14px !important;
        border-radius: 14px !important;
    }
    .agrani-reunion-wrap .agrani-stepper {
        padding: 10px !important;
    }
    .agrani-reunion-wrap .agrani-step .agrani-grid > label:not(.agrani-radio):not(.agrani-checkbox) {
        padding: 10px 11px 11px !important;
    }
    .agrani-reunion-wrap .agrani-step[data-step="2"] > .agrani-grid,
    .agrani-reunion-wrap .agrani-step[data-step="job"] > .agrani-grid {
        padding: 10px !important;
    }
    .agrani-reunion-wrap .agrani-step[data-step="2"] .conditional {
        padding: 12px !important;
    }
}

@media (max-width: 480px) {
    .agrani-reunion-wrap .agrani-step > h3 {
        font-size: 16px !important;
    }
    .agrani-reunion-wrap .agrani-step > h3[data-icon]::before,
    .agrani-reunion-wrap .agrani-step > h3[data-icon]::after {
        width: 32px !important;
        height: 32px !important;
    }
    .agrani-reunion-wrap .agrani-payment-gateways {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Conditional fields inside Step 2 use the exact same field-card treatment. */
.agrani-reunion-wrap .agrani-step[data-step="2"] .conditional > label,
.agrani-reunion-wrap .agrani-step[data-step="2"] .conditional .agrani-grid > label {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: #fff !important;
    border: 1px solid #efdfbf !important;
    border-radius: 12px !important;
    padding: 11px 13px 12px !important;
    margin: 0 0 10px !important;
    color: #614d39 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.agrani-reunion-wrap .agrani-step[data-step="2"] .conditional > label:last-child { margin-bottom: 0 !important; }
.agrani-reunion-wrap .agrani-step[data-step="2"] .conditional > label input,
.agrani-reunion-wrap .agrani-step[data-step="2"] .conditional > label select,
.agrani-reunion-wrap .agrani-step[data-step="2"] .conditional > label textarea {
    width: 100% !important;
    min-height: 46px !important;
    background: #fffdf8 !important;
    border: 1px solid #dfd0b7 !important;
    border-radius: 9px !important;
}

/* Selected participant panel — warm premium card above total payable. */
.agrani-reunion-wrap .agrani-selected-participant-inner {
    background: linear-gradient(180deg,#fffaf0,#fff) !important;
    border: 1px solid #e8cf98 !important;
    border-radius: 14px !important;
    padding: 14px !important;
    box-shadow: 0 8px 24px rgba(112,16,22,.07) !important;
}
.agrani-reunion-wrap .agrani-selected-kicker {
    color: #8d5c0b !important;
    font-weight: 800 !important;
}
.agrani-reunion-wrap .agrani-selected-check {
    background: #c98a17 !important;
    color: #fff !important;
}
.agrani-reunion-wrap .agrani-change-participant {
    color: #701016 !important;
    border-color: #dfc28b !important;
    background: #fffaf0 !important;
}