/* ============================================================
   modal-responsive.css
   Only responsive overrides. Link AFTER modal.css.
   ============================================================ */


/* ──────────────────────────────────────────────────────────
   TABLET  ≤ 768px
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Overlay — tighter padding */
    .modal-overlay {
        padding: 12px;
    }

    /* Modal box — allow full width, taller scroll area */
    .modal {
        max-width: 100%;
        max-height: 95vh;
    }

    /* ── Step 1: two room-type cards side-by-side → stack ── */
    .first-step.modal-step.active-step {
        flex-direction: column;
        overflow-y: auto;
    }

    .room-type {
        width: 100%;
        height: auto;
        padding: 24px 16px;
    }

    /* Fixed-height title becomes auto */
    .room-type > .section-title {
        height: auto;
        margin-bottom: 8px;
    }

    /* Description box: remove fixed height so content shows */
    .room-type > .room-description {
        height: auto;
        max-height: none;
        width: 90%;
    }

    /* Turn vertical divider into a horizontal rule */
    .vertical-line {
        width: 80%;
        height: 1px;
        background: linear-gradient(to right,
            #BD9457 0%, #b99052 25%, rgb(185,147,90) 70%, #6E4E10 100%);
        box-shadow: none;
        align-self: center;
    }

    /* ── Step 2: booking details ── */
    .second-step {
        margin-top: 50px;
    }

    .step-body {
        padding: 0 20px;
    }

    /* Guests row: horizontal → column */
    .number-of-guests {
        flex-direction: column;
        gap: 16px;
        margin-top: 20px;
    }

    /* Each guest block fills full width */
    .guests-block {
        width: 100%;
    }

    .total-guests-count {
        width: 100%;
    }

    .guests-gender-count-input {
        width: 100%;
    }

    /* Date + time pickers: horizontal → column */
    .date-and-time {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-top: 24px;
    }

    .date-input {
        width: 100%;
    }

    /* Time range: fill available space */
    .time-range {
        width: 100%;
        align-items: flex-start;
    }

    .time-range-container {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .time-input {
        width: 100%;
    }

    /* ── Step 3: personal info ── */
    .personal-info-container {
        padding: 24px 20px;
        gap: 28px;
    }

    /* Name / phone / email pairs: side-by-side → column */
    .personal-block {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .personal-info-block {
        width: 100%;
    }

    /* Price + payment: horizontal → column */
    .reserve-payment {
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }

    /* ── Navigation buttons ── */
    .modal-navigation-container {
        margin-top: 20px;
        margin-bottom: 30px;
    }

    /* ── Price breakdown step ── */
    .price-breakdown-container {
        padding: 0 20px;
        margin-top: 30px;
    }

    /* Canvas step: scrollable if wider than screen */
    .canvas-wrapper {
        height: auto;
        min-height: 320px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ──────────────────────────────────────────────────────────
   MOBILE  ≤ 480px
   ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* Overlay: align sheet to bottom */
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    /* Modal becomes a bottom sheet */
    .modal {
        max-height: 93vh;
        border-radius: 18px 18px 0 0;
    }

    /* Close button: tighten position */
    .modal-close-btn {
        top: 14px;
        right: 14px;
    }

    /* Step body: smaller side padding */
    .step-body {
        padding: 0 14px;
    }

    /* Date and time */
    .date-and-time {
        margin-top: 16px;
        gap: 12px;
    }

    /* Guests */
    .number-of-guests {
        margin-top: 14px;
        gap: 12px;
    }

    /* Personal info */
    .personal-info-container {
        padding: 16px 14px;
        gap: 20px;
    }

    /* Price amount: slightly smaller */
    .total-order-price {
        font-size: 28px;
    }

    /* Stacked price + eye-icon link on very small screens */
    .price-and-breakdown {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Nav buttons: compact */
    .modal-nav-btn {
        font-size: 15px;
        padding: 9px 14px;
    }

    .modal-navigation {
        gap: 12px;
    }

    /* Breakdown step */
    .price-breakdown-container {
        padding: 0 14px;
        margin-top: 20px;
    }

    .breakdown-navigation {
        margin-bottom: 30px;
    }

    /* Event title (step header) */
    .step-header .event-title {
        font-size: 36px;
    }

    /* Second step top offset */
    .second-step {
        margin-top: 36px;
    }

    /* Menu modal: also a bottom sheet */
    .menu-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .menu-modal-content {
        border-radius: 18px 18px 0 0;
        max-height: 93vh;
    }
}