/**
 * Agrani Reunion — UI refinements (v3.73.0)
 *
 * Loaded LAST so it overrides every earlier layer, including
 * agrani-responsive-fix.css (which forces a single narrow column).
 *
 * 1. The collapsed "selected category" strip inside Step 1 never renders.
 * 2. The side panel (selected category + Total Payable) sits fixed/sticky
 *    on the right side of the form on desktop; on mobile it flows below.
 * 3. Participant category cards auto-fit the width of whatever container
 *    the form is placed in.
 */

/* ============================================================
   1. NEVER show the mini selected-category strip inside the form
   ============================================================ */

.agrani-reunion-wrap .agrani-participant-grid.agrani-collapsed,
.agrani-reunion-wrap .agrani-participant-grid.agrani-collapsed > .agrani-ptype,
.agrani-reunion-wrap .agrani-participant-grid.agrani-collapsed > .agrani-ptype.is-picked {
    display: none !important;
}

.agrani-reunion-wrap .agrani-form .agrani-participant-grid.agrani-collapsed {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ============================================================
   2. Two-column layout + sticky side panel (desktop)
   ============================================================ */

@media (min-width: 901px) {
    /* Undo the single-column rule from agrani-responsive-fix.css */
    .agrani-reunion-wrap .agrani-layout {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 330px !important;
        gap: 22px !important;
        align-items: start !important;
    }

    /* Before a category is picked, the panel is empty → form takes full width. */
    .agrani-reunion-wrap .agrani-layout:not(:has(.agrani-price-summary.is-active)) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .agrani-reunion-wrap .agrani-layout .agrani-form,
    .agrani-reunion-wrap .agrani-form.agrani-after-selection {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* The panel itself: pinned to the side while scrolling. */
    .agrani-reunion-wrap .agrani-price-summary,
    .agrani-reunion-wrap .agrani-price-summary.is-active {
        position: sticky !important;
        top: 20px !important;
        align-self: start !important;
        order: initial !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 5;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .agrani-reunion-wrap .agrani-price-summary::-webkit-scrollbar {
        width: 6px;
    }
    .agrani-reunion-wrap .agrani-price-summary::-webkit-scrollbar-thumb {
        background: rgba(107, 17, 17, .25);
        border-radius: 6px;
    }
}

/* Mobile / tablet: single column, panel below the form. */
@media (max-width: 900px) {
    .agrani-reunion-wrap .agrani-layout {
        grid-template-columns: 1fr !important;
    }

    .agrani-reunion-wrap .agrani-price-summary,
    .agrani-reunion-wrap .agrani-price-summary.is-active {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        order: 2;
    }
}

/* ============================================================
   3. Auto-width participant category cards
   ============================================================ */

.agrani-reunion-wrap .agrani-participant-grid,
.agrani-reunion-wrap .agrani-form.agrani-before-selection .agrani-participant-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    gap: clamp(12px, 2vw, 20px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

.agrani-reunion-wrap .agrani-participant-grid > .agrani-ptype {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

.agrani-reunion-wrap .agrani-ptype span.agrani-ptype-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 100%;
}

.agrani-reunion-wrap .agrani-ptype-title,
.agrani-reunion-wrap .agrani-ptype-desc,
.agrani-reunion-wrap .agrani-ptype-amount,
.agrani-reunion-wrap .agrani-ptype-feat span {
    overflow-wrap: anywhere;
}

/* Very narrow containers fall back to one comfortable column. */
@media (max-width: 560px) {
    .agrani-reunion-wrap .agrani-participant-grid,
    .agrani-reunion-wrap .agrani-form.agrani-before-selection .agrani-participant-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Keep the Teacher category cards three across on desktop. */
.agrani-reunion-wrap #teacherPicker .agrani-participant-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
    .agrani-reunion-wrap #teacherPicker .agrani-participant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .agrani-reunion-wrap #teacherPicker .agrani-participant-grid {
        grid-template-columns: 1fr !important;
    }
}

/* JavaScript-controlled conditional sections must be able to hide even
    when an earlier card-layout rule uses !important for display. */
.agrani-reunion-wrap .conditional[style*="display: none"],
.agrani-reunion-wrap .conditional > [hidden] {
     display: none !important;
}

/* ============================================================
    4. Unified wizard form polish
   ============================================================ */

.agrani-reunion-wrap .agrani-layout,
.agrani-reunion-wrap .agrani-layout .agrani-form,
.agrani-reunion-wrap .agrani-form.agrani-after-selection {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.agrani-reunion-wrap .agrani-layout .agrani-form {
    padding: clamp(16px, 2.8vw, 28px) !important;
}

/* Keep section text clear of its divider and its icon. */
.agrani-reunion-wrap .agrani-step > h3 {
    min-height: 0 !important;
    margin: 0 0 24px !important;
    padding: 4px 0 15px 48px !important;
    border-bottom: 1px solid #e7d8be !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

.agrani-reunion-wrap .agrani-form-subsection > h4,
.agrani-reunion-wrap .agrani-batch-fee-box > h4,
.agrani-reunion-wrap .agrani-conditional > h4,
.agrani-reunion-wrap .conditional > h4,
.agrani-reunion-wrap .agrani-pm-header > h4,
.agrani-reunion-wrap .agrani-total-box > h4 {
    margin: 0 0 16px !important;
    padding: 0 0 12px 40px !important;
    min-height: 32px !important;
    border-bottom: 1px solid #eadcc5 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
}

.agrani-reunion-wrap .agrani-form-subsection,
.agrani-reunion-wrap .agrani-batch-fee-box,
.agrani-reunion-wrap .agrani-total-box,
.agrani-reunion-wrap .agrani-review {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 20px !important;
    padding: 18px !important;
    border: 1px solid #eadcc5 !important;
    border-radius: 14px !important;
    background: #fffdf8 !important;
    box-shadow: 0 5px 16px rgba(73, 31, 8, .045) !important;
    box-sizing: border-box !important;
}

.agrani-reunion-wrap .agrani-total-box .total-amount {
    color: #6a1414 !important;
}
.agrani-reunion-wrap .agrani-total-box > h4 {
    color: #6a1414 !important;
}
.agrani-reunion-wrap .agrani-total-box .fee-breakdown {
    color: #75666a !important;
}

.agrani-reunion-wrap .agrani-step1-details {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.agrani-reunion-wrap .agrani-step1-details > * + *,
.agrani-reunion-wrap .agrani-form-subsection > * + *,
.agrani-reunion-wrap .agrani-batch-fee-box > * + * {
    margin-top: 0 !important;
}

.agrani-reunion-wrap .agrani-grid,
.agrani-reunion-wrap .agrani-step .agrani-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
}

.agrani-reunion-wrap .agrani-grid > .full-width,
.agrani-reunion-wrap .agrani-grid > .agrani-address-field,
.agrani-reunion-wrap .agrani-grid > [style*="grid-column"] {
    grid-column: 1 / -1 !important;
}

.agrani-reunion-wrap .agrani-grid > label:not(.agrani-radio):not(.agrani-checkbox),
.agrani-reunion-wrap .conditional > label {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #4a4032 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
}

.agrani-reunion-wrap input:not([type="radio"]):not([type="checkbox"]),
.agrani-reunion-wrap select,
.agrani-reunion-wrap textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    border: 1px solid #d9cdbb !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.agrani-reunion-wrap input:not([type="radio"]):not([type="checkbox"]):focus,
.agrani-reunion-wrap select:focus,
.agrani-reunion-wrap textarea:focus {
    border-color: #8b5518 !important;
    box-shadow: 0 0 0 3px rgba(139, 85, 24, .12) !important;
}

.agrani-reunion-wrap textarea {
    min-height: 92px !important;
    resize: vertical !important;
}

.agrani-reunion-wrap .agrani-payment-gateways {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
}

.agrani-reunion-wrap .agrani-pg-inner {
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.agrani-reunion-wrap .agrani-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
}

.agrani-reunion-wrap .agrani-actions .agrani-btn {
    min-width: 150px !important;
    min-height: 46px !important;
    margin: 0 !important;
}

@media (max-width: 760px) {
    .agrani-reunion-wrap .agrani-grid,
    .agrani-reunion-wrap .agrani-step .agrani-grid,
    .agrani-reunion-wrap .agrani-payment-gateways {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .agrani-reunion-wrap .agrani-form-subsection,
    .agrani-reunion-wrap .agrani-batch-fee-box,
    .agrani-reunion-wrap .agrani-total-box,
    .agrani-reunion-wrap .agrani-review {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .agrani-reunion-wrap .agrani-step > h3 {
        margin-bottom: 20px !important;
        padding-left: 42px !important;
        font-size: 18px !important;
    }

    .agrani-reunion-wrap .agrani-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .agrani-reunion-wrap .agrani-actions .agrani-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 380px) {
    .agrani-reunion-wrap .agrani-layout .agrani-form {
        padding: 12px !important;
    }

    .agrani-reunion-wrap .agrani-form-subsection,
    .agrani-reunion-wrap .agrani-batch-fee-box,
    .agrani-reunion-wrap .agrani-total-box,
    .agrani-reunion-wrap .agrani-review {
        padding: 12px !important;
    }

    .agrani-reunion-wrap .agrani-step > h3 {
        padding-left: 38px !important;
        font-size: 16px !important;
    }
}

/* ============================================================
   5. Mobile stepper polish
   ============================================================ */

@media (max-width: 760px) {
    .agrani-reunion-wrap .agrani-step-info {
        display: block !important;
        width: fit-content !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #7b6a57 !important;
        font-size: 11px !important;
        letter-spacing: .02em !important;
        text-transform: uppercase !important;
    }

    .agrani-reunion-wrap .agrani-stepper {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 0 22px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .agrani-reunion-wrap .agrani-stepper-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 68px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 10px 12px !important;
        border: 1px solid #eadcc5 !important;
        border-radius: 14px !important;
        background: #fffdf8 !important;
        text-align: left !important;
        box-sizing: border-box !important;
        transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
    }

    .agrani-reunion-wrap .agrani-stepper-item.is-active {
        border-color: var(--ag-maroon) !important;
        background: #fff7e8 !important;
        box-shadow: 0 4px 12px rgba(107, 17, 17, .08) !important;
    }

    .agrani-reunion-wrap .agrani-stepper-dot {
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        font-size: 12px !important;
    }

    .agrani-reunion-wrap .agrani-stepper-text {
        min-width: 0 !important;
        display: block !important;
        text-align: left !important;
    }

    .agrani-reunion-wrap .agrani-stepper-text strong {
        display: block !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }

    .agrani-reunion-wrap .agrani-stepper-text small,
    .agrani-reunion-wrap .agrani-stepper-line {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .agrani-reunion-wrap .agrani-stepper {
        gap: 8px !important;
    }

    .agrani-reunion-wrap .agrani-stepper-item {
        min-height: 62px !important;
        gap: 7px !important;
        padding: 8px 9px !important;
        border-radius: 12px !important;
    }

    .agrani-reunion-wrap .agrani-stepper-dot {
        flex-basis: 27px !important;
        width: 27px !important;
        height: 27px !important;
    }

    .agrani-reunion-wrap .agrani-stepper-text strong {
        font-size: 11px !important;
    }
}

/* Remove the empty mobile track below the initial participant cards. */
@media (max-width: 760px) {
    .agrani-reunion-wrap .agrani-price-summary:not(.is-active) {
        display: none !important;
    }

    .agrani-reunion-wrap .agrani-layout:has(.agrani-form.agrani-before-selection) .agrani-price-summary {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .agrani-reunion-wrap .agrani-layout:has(.agrani-form.agrani-before-selection) {
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

    .agrani-reunion-wrap .agrani-form.agrani-before-selection,
    .agrani-reunion-wrap .agrani-form.agrani-before-selection .agrani-step,
    .agrani-reunion-wrap .agrani-form.agrani-before-selection .agrani-participant-grid {
        height: auto !important;
        min-height: 0 !important;
    }

    .agrani-reunion-wrap .agrani-form.agrani-before-selection .agrani-participant-grid {
        align-items: start !important;
        grid-auto-rows: max-content !important;
    }

    .agrani-reunion-wrap .agrani-form.agrani-before-selection .agrani-ptype,
    .agrani-reunion-wrap .agrani-form.agrani-before-selection .agrani-ptype-card {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* A group selection (Teacher / Staff) must reveal only that sub-picker first. */
.agrani-reunion-wrap .agrani-form.agrani-staff-selection-pending .agrani-step1-details > *:not(.agrani-group-picker) {
    display: none !important;
}

.agrani-reunion-wrap .agrani-form.agrani-staff-selection-pending .agrani-group-picker.agrani-picker-active {
    display: block !important;
    margin-bottom: 0 !important;
}

/* Once a concrete participant type is selected, continue with the form only. */
.agrani-reunion-wrap .agrani-form.agrani-type-selected #agraniParticipantPicker,
.agrani-reunion-wrap .agrani-form.agrani-type-selected .agrani-group-picker {
    display: none !important;
}

/* Only the picker of the selected group card may ever be visible. */
.agrani-reunion-wrap .agrani-form .agrani-group-picker:not(.agrani-picker-active) {
    display: none !important;
}

/* Remove Elementor's mobile widget/container spacing around the form only. */
@media (max-width: 767px) {
    .e-con.e-con:has(.agrani-reunion-wrap) > .e-con-inner,
    .elementor.elementor .e-con:has(.agrani-reunion-wrap) > .e-con-inner {
        width: 100% !important;
        max-width: 100% !important;
        gap: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .e-con.e-con > .e-con-inner > .elementor-widget:has(.agrani-reunion-wrap),
    .elementor.elementor .e-con > .elementor-widget:has(.agrani-reunion-wrap),
    .e-con.e-con > .e-con-inner > .elementor-widget:has(.agrani-reunion-wrap) > .elementor-widget-container,
    .elementor.elementor .e-con > .elementor-widget:has(.agrani-reunion-wrap) > .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .agrani-reunion-wrap,
    .agrani-reunion-wrap .agrani-layout {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Keep the payable panel visible while filling the form on phones and tablets. */
@media (max-width: 900px) {
    .agrani-reunion-wrap .agrani-layout:has(.agrani-price-summary.is-active) {
        align-items: start !important;
    }

    /* Show the selected category before the form's Step 1 content. */
    .agrani-reunion-wrap .agrani-price-summary.is-active {
        display: contents !important;
    }

    .agrani-reunion-wrap .agrani-price-summary.is-active .agrani-selected-participant {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
    }

    .agrani-reunion-wrap .agrani-layout > .agrani-form {
        grid-column: 1 !important;
        grid-row: 2 !important;
        order: 0 !important;
    }

    .agrani-reunion-wrap .agrani-layout:has(.agrani-price-summary.is-active) {
        padding-bottom: clamp(150px, 24vh, 230px) !important;
    }

    .agrani-reunion-wrap .agrani-price-summary.is-active {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .agrani-reunion-wrap .agrani-price-summary.is-active .agrani-price-summary-card {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(38vh, 250px) !important;
        margin: 0 !important;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -8px 24px rgba(58, 10, 10, .18) !important;
    }

    .agrani-reunion-wrap .agrani-price-summary.is-active .agrani-selected-participant {
        position: static !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Keep the SSC/HSC choice side by side on mobile. */
@media (max-width: 760px) {
    .agrani-reunion-wrap #exStudentPicker .agrani-batch-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .agrani-reunion-wrap #exStudentPicker .agrani-batch-grid .agrani-radio,
    .agrani-reunion-wrap #exStudentPicker .agrani-batch-grid .agrani-radio > span {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 360px) {
    .agrani-reunion-wrap #exStudentPicker .agrani-batch-grid {
        gap: 8px !important;
    }

    .agrani-reunion-wrap #exStudentPicker .agrani-batch-grid .agrani-radio > span {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}