/*
 * Patient-specific responsive rules.
 * New patient-only classes should use the `.pt-` prefix (doctor uses `.dd-`, vendor uses `.vv-`).
 * Use only the project's six approved range-based media queries (xs/sm/md/lg/xl/xxl).
 */

/* booking_popup.blade.php / booking_request_popup.blade.php: widen the popup
   and split its content into two columns (.pt-form-grid) once there's enough
   screen width, instead of forcing scroll on a narrow single column when
   space is available. Stacks to one column below lg (no rule needed — block
   is the natural default). Shared .booking-popup width rule covers both
   popups; .pt-booking-popup--tall only adds its own max-height on top.

   At these widths each column also scrolls independently instead of sharing
   one scrollbar (.pt-form-grid itself stops scrolling; its two direct
   children do instead) — the shorter column (e.g. static info/alerts)
   shouldn't visually move just because the taller column (the form) does. */

/* Below lg the layout is a single stacked column (see base .pt-form-grid rule
   in ccc-patient.css: flex:1 1 auto; min-height:0; overflow-y:auto). That one
   shared scrollbar is intentional and must stay universal here — giving each
   column its own overflow-y:auto (as lg+ does) would create two competing,
   height-starved scrollboxes stacked on top of each other, clipping fields.
   Only fix needed at the narrowest width: stack paired fields (Gender/Age,
   Time From/To) vertically instead of squeezing them side by side. */
@media (max-width: 575.98px) {
    .pt-form-row,
    .pt-form-row-mb {
        flex-direction: column;
    }

    /* .popup-form-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    } */
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .booking-popup {
        max-width: 975px;
    }

    .pt-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--space-md);
        overflow-y: visible;
    }

    .pt-form-grid>div {
        overflow-y: auto;
        min-height: 0;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .booking-popup {
        max-width: 1175px;
    }

    .pt-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--space-md);
        overflow-y: visible;
    }

    .pt-form-grid>div {
        overflow-y: auto;
        min-height: 0;
    }
}

@media (min-width: 1400px) {
    .booking-popup {
        max-width: 1375px;
    }

    .pt-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--space-md);
        overflow-y: visible;
    }

    .pt-form-grid>div {
        overflow-y: auto;
        min-height: 0;
    }
}