/* RTL Mobile & Tablet Responsiveness */
@media only screen and (max-width: 991px) {

    /* 0. Kill horizontal scroll at root level */
    html[dir="rtl"],
    html[dir="rtl"] body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    html[dir="rtl"] .page-wrapper,
    html[dir="rtl"] .page-wrapper.compact-wrapper,
    html[dir="rtl"] .page-body-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* 1. Sidebar: HIDDEN by default (JS adds .close_icon on load = collapsed state)
          So .close_icon = off-screen hidden
          No .close_icon = drawer open (overlay from right) */
    html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
        position: fixed !important;
        right: 0 !important;
        left: unset !important;
        top: 0 !important;
        height: 100% !important;
        width: 280px !important;
        margin-right: 0 !important;
        margin-left: unset !important;
        z-index: 9999 !important;
        transition: transform 0.4s ease, margin-right 0.4s ease !important;
        transform: translateX(0) !important;
    }

    /* .close_icon = sidebar is HIDDEN (pushed off screen to the right) */
    html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon {
        transform: translateX(100%) !important;
        margin-right: 0 !important;
    }

    /* Keep sidebar text visible when sidebar is open */
    html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a span {
        display: inline-block !important;
    }

    html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper {
        display: block !important;
        text-align: right !important;
    }

    html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-icon-wrapper {
        display: none !important;
    }

    html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .according-menu {
        display: block !important;
    }

    /* 2. Page Header — full width, no sidebar margin */
    html[dir="rtl"] .page-wrapper.compact-wrapper .page-header,
    html[dir="rtl"] .page-wrapper.compact-wrapper .page-header.close_icon {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }

    html[dir="rtl"] .page-header .header-wrapper .header-logo-wrapper {
        margin-right: unset !important;
        margin-left: auto !important;
    }

    html[dir="rtl"] .page-header .header-wrapper .nav-right {
        margin-left: unset !important;
        margin-right: auto !important;
    }

    html[dir="rtl"] .page-header .header-wrapper .toggle-sidebar {
        margin-left: 15px !important;
        margin-right: 0 !important;
    }

    /* 3. Page Body — always full width, no margin offset */
    html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper .page-body,
    html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper ~ .page-body,
    html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        transform: none !important;
        position: relative !important;
    }

    /* Footer full width too */
    html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper ~ footer,
    html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ footer {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* 4. Container fluid must not overflow */
    html[dir="rtl"] .container-fluid {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* 5. Fix dropdown menu alignments in RTL mobile */
    html[dir="rtl"] .nb-dropdown {
        left: 0 !important;
        right: auto !important;
        text-align: right !important;
    }

    html[dir="rtl"] .nb-dropdown-item {
        flex-direction: row !important;
    }

    html[dir="rtl"] .nb-di-icon {
        margin-left: 10px !important;
        margin-right: 0 !important;
    }
}


/* Global RTL fixes for elements */
html[dir="rtl"] .add_bus_operator-section-title i {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* =====================================================
   book_ticket.php — RTL Mobile Responsive Fixes
   Fixes invisible / broken content on mobile Arabic
   ===================================================== */

/* --- Ticket Card: Right-section border & radius flip for RTL --- */
html[dir="rtl"] .ticket-card-modern .col-md-3:last-child {
    border-left: none !important;
    border-right: 2px dashed #cbd5e1 !important;
    border-radius: 16px 0 0 16px !important;
}

html[dir="rtl"] .ticket-card-modern .col-md-3:first-child {
    border-left: 1px solid #f1f5f9 !important;
    border-right: none !important;
}

/* --- Ticket Card: Route text alignment for RTL --- */
html[dir="rtl"] .ticket-card-modern .text-start {
    text-align: right !important;
}

html[dir="rtl"] .ticket-card-modern .text-end {
    text-align: left !important;
}

/* --- Mobile breakpoint: full-width stacked layout for RTL ticket cards --- */
@media only screen and (max-width: 767px) {

    /* Make ticket card columns stack properly */
    html[dir="rtl"] .ticket-card-modern .row.g-0 {
        flex-direction: column !important;
    }

    html[dir="rtl"] .ticket-card-modern .col-md-3,
    html[dir="rtl"] .ticket-card-modern .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Remove side borders that break stacked layout */
    html[dir="rtl"] .ticket-card-modern .col-md-3.border-end,
    html[dir="rtl"] .ticket-card-modern [class*="border-end"] {
        border-right: none !important;
        border-left: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    /* Fix right-section (price block) border & radius for stacked RTL mobile */
    html[dir="rtl"] .ticket-card-modern .col-md-3:last-child {
        border-right: none !important;
        border-left: none !important;
        border-top: 2px dashed #cbd5e1 !important;
        border-radius: 0 0 16px 16px !important;
    }

    /* Ensure price section is fully visible */
    html[dir="rtl"] .ticket-card-modern .col-md-3:last-child > div {
        width: 100% !important;
        text-align: center !important;
    }

    /* Search form: full-width fields on small screens */
    html[dir="rtl"] .add_bus_operator-premium-section .form-group {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Search button full width */
    html[dir="rtl"] .search-btn-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    html[dir="rtl"] .search-btn-container .btn {
        width: 100% !important;
    }

    /* Middle section: timeline alignment for RTL on mobile */
    html[dir="rtl"] .ticket-card-modern .d-flex.justify-content-between {
        gap: 8px !important;
    }

    html[dir="rtl"] .ticket-card-modern .flex-grow-1.px-4 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Ensure card_maintain row is visible and not clipped */
    html[dir="rtl"] .card_maintain {
        overflow: visible !important;
        width: 100% !important;
    }

    /* Fix action links row wrapping */
    html[dir="rtl"] .ticket-card-modern .d-flex.justify-content-center.gap-4 {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* VIEW SEATS button full width on mobile */
    html[dir="rtl"] .ticket-card-modern .btn.w-100 {
        font-size: 12px !important;
        padding: 10px 8px !important;
    }
}

/* --- Tablet breakpoint for RTL ticket cards --- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    html[dir="rtl"] .ticket-card-modern .col-md-3 {
        width: 30% !important;
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }

    html[dir="rtl"] .ticket-card-modern .col-md-6 {
        width: 40% !important;
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }

    /* Fix right section border for tablet RTL */
    html[dir="rtl"] .ticket-card-modern .col-md-3:last-child {
        border-right: 2px dashed #cbd5e1 !important;
        border-left: none !important;
        border-radius: 16px 0 0 16px !important;
    }
}