/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-TARGETED STYLES — Rajhya Sainik Board (traveler site)
   Loaded separately from the desktop `traveler.css`. Every rule below is scoped
   to viewports narrower than the `md` breakpoint (767.98px), so it can NEVER
   leak into the desktop experience.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    /* ── Safe area / viewport hygiene ────────────────────────────────────── */
    html, body {
        overscroll-behavior-y: none;
    }
    body {
        min-height: 100dvh;
        font-size: 13.5px;
        line-height: 1.45;
    }
    /* Uniform left/right page margin across ALL mobile pages (16px) */
    main {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 12px;
        padding-bottom: 16px;
    }

    /* ── Mobile Typography Scaling ────────────────────────────────────────── */
    h1, .text-3xl, .text-4xl, .text-5xl {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
        letter-spacing: -0.01em !important;
    }
    h2, .text-2xl {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
    }
    h3, .text-xl {
        font-size: 1.025rem !important;
        line-height: 1.35 !important;
    }
    h4, .text-lg {
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
    }

    /* ── Mobile Container Spacing & Padding Hygiene ───────────────────────── */
    .rounded-3xl {
        border-radius: 20px !important;
    }
    .p-6, .p-8, .p-10, .p-12 {
        padding: 14px !important;
    }
    .px-6, .px-8, .px-10 {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .py-6, .py-8, .py-10 {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    /* Reduce vertical section gaps on mobile */
    .gap-8, .gap-7, .gap-6 {
        gap: 14px !important;
    }
    .space-y-8 > :not([hidden]) ~ :not([hidden]),
    .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 14px !important;
    }

    /* ── Mobile Alignment Rules ───────────────────────────────────────────── */
    /* Center align flex badges & icon tags */
    .inline-flex, .badge, .stayind-verified-badge {
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
    }

    /* Form rows and full-width form inputs alignment */
    form .grid, .form-group {
        width: 100% !important;
    }

    /* Ensure flex items in card header rows align centered */
    .flex.items-center {
        align-items: center !important;
    }

    /* Mobile header container alignment */
    .rsb-mobile-header {
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* ── Mobile Input Controls & Buttons ──────────────────────────────────── */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="date"],
    select {
        font-size: 13px !important;
        height: 44px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-radius: 12px !important;
    }

    .stayind-btn-primary,
    .stayind-btn-secondary {
        height: 44px !important;
        font-size: 12.5px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        border-radius: 999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Sticky mobile search bar must clear the mobile header (56px) + safe-area top */
    #rsbMobileSearchBar {
        top: calc(56px + env(safe-area-inset-top)) !important;
    }

    /* ── Generic icon button ─────────────────────────────────────────────── */
    .rsb-icon-btn {
        transition: background-color 0.15s ease, transform 0.15s ease;
    }
    .rsb-icon-btn:active {
        transform: scale(0.92);
    }

    /* ── Menu / cart menu item ───────────────────────────────────────────── */
    .rsb-menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: 14px;
        color: #1B1A17;
        font-weight: 700;
        font-size: 13px;
        text-decoration: none;
        transition: background-color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .rsb-menu-item:hover,
    .rsb-menu-item:active {
        background-color: #FAF7F2;
    }

    /* ── Drawer overlays with smooth backdrop blur ──────────────────────── */
    .rsb-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
        z-index: 9990;
    }
    .rsb-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* ── Slide-out (left) menu drawer ────────────────────────────────────── */
    .rsb-drawer {
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        transform: translateX(-105%);
        will-change: transform;
    }
    .rsb-drawer.open {
        transform: translateX(0);
    }
    .rsb-drawer-left {
        border-top-right-radius: 22px;
        border-bottom-right-radius: 22px;
    }

    /* ── Header cart push-badge (iOS-style) ──────────────────────────────── */
    .rsb-fab-badge {
        position: absolute;
        top: -3px;
        right: -3px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 999px;
        background: #0067DB;
        color: #fff;
        font-size: 10.5px;
        font-weight: 800;
        line-height: 1;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
        box-sizing: border-box;
    }

    /* ── Bottom-sheet cart (removed — cart is an in-page panel now) ──────── */

    /* ── Full-screen overlay sheet (mobile search) ───────────────────────── */
    .rsb-fullsheet {
        position: fixed;
        inset: 0;
        z-index: 10010;
        display: flex;
        flex-direction: column;
        background: #fff;
        transform: translateY(7%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
        -webkit-overflow-scrolling: touch;
    }
    .rsb-fullsheet.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* ── Hide native scrollbars on horizontal tab bars ───────────────────── */
    .rsb-hide-scroll::-webkit-scrollbar {
        display: none;
    }
    .rsb-hide-scroll {
        scrollbar-width: none;
    }

    /* ── Property listing cards: stack vertically on mobile ──────────────── */
    /* Desktop list view (`grid-cols-[240px_1fr_240px]`) is left untouched;   */
    /* on mobile the card collapses to a single-column photo → details → CTA. */
    .stayind-ds-card {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        border-radius: 1.25rem !important;
        overflow: hidden !important;
    }
    .stayind-ds-card .stayind-card-image {
        width: 100% !important;
        height: 180px !important;
        min-height: 180px !important;
        border-radius: 1.25rem 1.25rem 0 0 !important;
    }
    .stayind-ds-card .stayind-card-details {
        border-right: none !important;
        border-bottom: 1px solid #F2EEE7 !important;
    }
    .stayind-ds-card .stayind-card-checklist {
        grid-template-columns: 1fr !important;
    }
    .stayind-ds-card .stayind-card-price-action {
        width: 100% !important;
        padding: 0.7rem 1rem !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        background: #FCFBF9 !important;
    }
    .stayind-ds-card .stayind-card-price-action .stayind-price-box {
        align-items: flex-start !important;
        text-align: left !important;
    }
    .stayind-ds-card .stayind-card-price-action .stayind-btn-primary-sm {
        margin: 0 !important;
    }

    /* ── Property detail hero: single image + gallery CTA on top (mobile) ── */
    /* Desktop 5-photo mosaic is untouched; on mobile we show ONE image at a   */
    /* shorter height and float the "View all photos" CTA over the top edge.  */
    .rsb-show-gallery-grid {
        height: 240px !important;
        grid-template-columns: 1fr !important;
    }
    .rsb-show-gallery-right {
        display: none !important;
    }
    .rsb-show-gallery-cta {
        top: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        font-size: 11px !important;
    }

    /* ── Add-to-cart toast (mobile-only) ─────────────────────────────────── */
    #rsbAddCartToast {
        animation: rsbToastIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes rsbToastIn {
        from { opacity: 0; transform: translateY(-14px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Dedicated /cart page ────────────────────────────────────────────── */
    /* "Show other rooms" accordion CTA: reveal affordance + comfortable tap */
    details.group summary {
        -webkit-tap-highlight-color: transparent;
    }
    details.group summary .material-symbols-rounded {
        transition: transform 0.28s ease;
    }

    /* Full-width, stacked room + summary cards on the cart layout */
    #stayCartPanel {
        position: static !important;
        border-radius: 20px !important;
    }

    /* Cart "Added Rooms" line rows: give remove/stepper targets bigger taps */
    #cartItemsList .w-6 {
        width: 26px !important;
        height: 26px !important;
    }
    #cartItemsList button {
        -webkit-tap-highlight-color: transparent;
    }

    /* ── Checkout: cart summary sits below the forms on mobile ──────────── */
    .lg\:block.space-y-4 .p-6,
    .lg\:block.space-y-4 .p-5 {
        padding: 14px !important;
    }
}