/* ============================================================
   MOBILE OPTIMIZATION - All Devices (iPad, iPhone, Android)
   Created: 2026-02-14
   Covers: iPhone SE (375), iPhone 14 (390), iPhone Pro Max (430),
           Android (360-412), iPad Mini (768), iPad Air (820),
           iPad Pro (1024), Galaxy Fold (280)
   ============================================================ */

/* ---- Global Reset & Safety ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

table {
    max-width: 100%;
}

/* Prevent horizontal scroll from any element */
.container, .container-fluid, section, main, article, aside, footer, header, nav {
    max-width: 100vw;
}

/* ---- Touch & Tap Optimizations ---- */
a, button, input[type="submit"], input[type="button"], .btn, select {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input, textarea, select {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0; /* Reset iOS default */
}

input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    font-size: inherit !important;
}

input[type="radio"] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
}

/* ---- Table Scroll Safety ---- */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}


/* ============================================================
   SLIDER / OLD THEME ELEMENTS - Fix hardcoded widths
   ============================================================ */
.slider_cntnt {
    max-width: 100%;
}

.testimonial_slider .carousel-item,
.valign-wrapper {
    max-width: 100%;
}

.magnify {
    max-width: 100%;
}


/* ============================================================
   HERO SECTION - Decorative overflow fix
   ============================================================ */
.hero-section {
    overflow: hidden; /* Prevent ::before 500px blob from creating scrollbar */
}


/* ============================================================
   iPad Pro (1024px) & iPad Air (820px)
   ============================================================ */
@media (max-width: 1024px) {
    /* Nav tabs compress better */
    .nav-tab-colored {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* Footer columns */
    .footer .col-md-3,
    .footer .col-md-2 {
        margin-bottom: 20px;
    }
}


/* ============================================================
   Tablet (max-width: 991px) - iPad Mini & landscape phones
   ============================================================ */
@media (max-width: 991px) {

    /* ---- Container fix ---- */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* ---- Hero section ---- */
    .hero-section::before {
        width: 300px;
        height: 300px;
        right: -10%;
    }

    /* ---- Footer stacking ---- */
    .footer .row {
        display: flex;
        flex-wrap: wrap;
    }

    .footer .col-md-4,
    .footer .col-md-2,
    .footer .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 28px;
    }

    /* ---- CTA Section ---- */
    .cta-section h2 {
        font-size: 24px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 320px;
    }

    /* ---- Pricing page ---- */
    .pricing-card {
        margin-bottom: 20px;
    }

    /* ---- Gallery grid ---- */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ---- Dashboard table scroll ---- */
    .dash-table-wrap,
    .card-body-content:has(table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dash-table {
        min-width: 600px;
    }

    /* ---- Conference booking ---- */
    .rooms-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }

    /* ---- Auth pages ---- */
    .auth-container {
        padding: 0 16px;
    }

    .auth-card {
        max-width: 100%;
    }
}


/* ============================================================
   Mobile Large (max-width: 768px) - Phones landscape & small tablets
   ============================================================ */
@media (max-width: 768px) {

    /* ---- Typography ---- */
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }

    /* ---- Container ---- */
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* ---- Section padding ---- */
    .section-padding {
        padding: 40px 0 !important;
    }

    /* ---- Hero ---- */
    .hero-section::before {
        display: none; /* Remove decorative blob on mobile */
    }

    /* ---- Footer ---- */
    .footer .col-md-4,
    .footer .col-md-2,
    .footer .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 24px;
    }

    .footer .social-links {
        margin-bottom: 10px;
    }

    .footer-bottom p {
        font-size: 12px;
        line-height: 1.6;
    }

    /* ---- CTA ---- */
    .cta-section {
        padding: 40px 0 !important;
    }

    .cta-section h2 {
        font-size: 20px !important;
    }

    .cta-section p {
        font-size: 14px;
    }

    /* ---- Pricing Cards ---- */
    .pricing-card {
        margin-bottom: 16px;
    }

    /* ---- Gallery ---- */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ---- Contact Page ---- */
    .contact-hero h1 {
        font-size: 24px !important;
    }

    .contact-form-card {
        padding: 20px !important;
    }

    /* ---- Tables (all pages) ---- */
    table:not(.fc-scrollgrid) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    table:not(.fc-scrollgrid) thead,
    table:not(.fc-scrollgrid) tbody,
    table:not(.fc-scrollgrid) tr {
        display: revert;
    }

    /* ---- Booking Details ---- */
    .booking-details-container {
        padding: 16px !important;
    }

    .details-table th {
        width: 40% !important;
        font-size: 13px;
    }

    .details-table td {
        font-size: 13px;
    }

    /* ---- Membership ---- */
    .membership-grid {
        grid-template-columns: 1fr !important;
    }

    .membership-hero h1 {
        font-size: 1.6rem !important;
    }

    /* ---- Loyalty ---- */
    .loy-hero {
        flex-direction: column !important;
    }

    .loy-hero-side {
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    .loy-balance-num {
        font-size: 32px !important;
    }

    .loy-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- Conference Booking ---- */
    .conf-header h1 {
        font-size: 20px !important;
    }

    .rooms-grid {
        grid-template-columns: 1fr !important;
    }

    .booking-mode-selector {
        grid-template-columns: 1fr !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    .conf-features {
        grid-template-columns: 1fr 1fr !important;
    }

    .conf-header-stats {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .free-hours-banner {
        flex-direction: column !important;
        text-align: center;
        gap: 12px !important;
    }

    /* ---- Seats page ---- */
    .floor-plan-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .top-section {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .top-section .walkway-spacer,
    .center-aisle {
        display: none !important;
    }

    /* ---- Access Pass ---- */
    .pass-container {
        max-width: 100% !important;
        margin: 16px auto !important;
        padding: 16px !important;
    }

    /* ---- Check-in Admin ---- */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .sidebar {
        position: fixed;
        z-index: 10000;
        width: 0 !important;
        overflow: hidden;
        transition: width 0.3s ease;
    }

    .sidebar.open {
        width: 260px !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    /* ---- Modals ---- */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    /* ---- Blog tables ---- */
    .blog-content table,
    .entry-content table,
    article table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Slider legacy elements ---- */
    .slider_cntnt {
        width: 100% !important;
        float: none !important;
    }

    .slider_btn_wraper {
        width: 100% !important;
        float: none !important;
    }

    #theme-main-banner .camera_caption .container h1 {
        font-size: 22px !important;
    }
}


/* ============================================================
   Mobile Medium (max-width: 576px) - Most phones portrait
   ============================================================ */
@media (max-width: 576px) {

    /* ---- Container ---- */
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ---- Contact Page additional ---- */
    .contact-hero p {
        font-size: 14px;
    }

    .quick-action-btns {
        flex-direction: column;
    }

    .btn-whatsapp, .btn-call {
        width: 100%;
        justify-content: center;
    }

    .trust-badges {
        flex-direction: column;
        gap: 12px !important;
    }

    /* ---- Loyalty additional ---- */
    .promo-form {
        flex-wrap: wrap !important;
    }

    .promo-form input {
        width: 100% !important;
        min-width: 0 !important;
    }

    .promo-form button {
        width: 100% !important;
    }

    /* ---- Conference features grid ---- */
    .conf-features {
        grid-template-columns: 1fr !important;
    }

    /* ---- Quick Actions ---- */
    .quick-actions {
        grid-template-columns: 1fr !important;
    }

    .quick-action-btn {
        padding: 16px !important;
    }
}


/* ============================================================
   Mobile (max-width: 480px) - Smaller phones
   ============================================================ */
@media (max-width: 480px) {

    /* ---- Typography ---- */
    h1 { font-size: 1.35rem !important; }
    h2 { font-size: 1.2rem !important; }
    body { font-size: 14px; }

    /* ---- Topbar ---- */
    .topbar-email {
        display: none !important;
    }

    .topbar-item {
        font-size: 11px !important;
    }

    /* ---- Contact page ---- */
    .contact-hero h1 {
        font-size: 20px !important;
    }

    .contact-form-card {
        padding: 16px !important;
    }

    .contact-item {
        padding: 14px !important;
    }

    /* ---- Dashboard ---- */
    .dashboard-banner {
        padding: 18px 14px !important;
    }

    .dashboard-banner h1 {
        font-size: 1.2rem !important;
    }

    .dash-nav {
        gap: 2px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding: 4px !important;
    }

    .dash-nav-btn {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .dash-table {
        font-size: 12px;
    }

    .dash-table th,
    .dash-table td {
        padding: 8px 10px !important;
    }

    /* ---- Cards ---- */
    .card-header-bar {
        padding: 14px !important;
    }

    .card-body-content {
        padding: 14px !important;
    }

    /* ---- Today hero ---- */
    .today-hero-left {
        padding: 18px 14px !important;
    }

    .today-hero-right {
        padding: 14px !important;
    }

    .today-seat-info h2 {
        font-size: 1.2rem !important;
    }

    .today-countdown-num {
        font-size: 1.8rem !important;
    }

    /* ---- Loyalty ---- */
    .loy-balance-num {
        font-size: 26px !important;
    }

    .loy-hero-side {
        padding: 16px !important;
    }

    /* ---- Booking Details ---- */
    .booking-actions {
        grid-template-columns: 1fr !important;
    }

    .booking-details-container {
        margin: 10px 6px !important;
        padding: 10px !important;
    }

    .booking-details-card {
        padding: 16px !important;
    }

    .booking-details-card h2 {
        font-size: 22px !important;
        padding-bottom: 10px !important;
    }

    .booking-details-card h4 {
        font-size: 16px !important;
    }

    .details-table th, .details-table td {
        padding: 8px !important;
        font-size: 12px !important;
    }

    /* ---- Membership additional ---- */
    .membership-hero {
        padding: 36px 16px !important;
        margin-bottom: 28px !important;
    }

    .membership-hero p {
        font-size: 1rem !important;
    }

    .membership-price {
        font-size: 1.8rem !important;
    }

    .membership-header {
        padding: 18px !important;
    }

    .membership-features {
        padding: 18px !important;
    }

    .membership-footer {
        padding: 16px 18px !important;
    }

    .membership-name {
        font-size: 1.2rem !important;
    }

    /* ---- Contact additional ---- */
    .map-section iframe {
        height: 250px !important;
    }

    .trust-badge .number {
        font-size: 20px !important;
    }

    .btn-submit {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* ---- Loyalty additional ---- */
    .referral-code {
        font-size: 18px !important;
        letter-spacing: 2px !important;
    }

    .redeem-option {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .history-filters {
        gap: 4px !important;
    }

    .filter-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    .tier-table {
        font-size: 12px !important;
    }

    .tier-table td {
        padding: 8px 6px !important;
    }

    .loy-card {
        padding: 18px !important;
    }

    /* ---- Check-in Admin ---- */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 14px !important;
    }

    .stat-card h3 {
        font-size: 1.3rem !important;
    }

    .pending-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }

    .pc-actions {
        width: 100%;
    }

    .pc-actions .btn {
        flex: 1;
    }

    /* ---- Seats page floor plan ---- */
    .floor-plan {
        min-width: 700px !important; /* Reduce minimum for scroll */
    }

    .desk {
        width: 50px !important;
        height: 32px !important;
        font-size: 9px !important;
    }

    .stats-grid {
        gap: 8px !important;
    }

    /* ---- Conference bookings table ---- */
    .bookings-table th:nth-child(4),
    .bookings-table td:nth-child(4),
    .bookings-table th:nth-child(5),
    .bookings-table td:nth-child(5) {
        display: none; /* Hide less important columns on small screens */
    }

    /* ---- Access Pass ---- */
    .access-code-value {
        font-size: 24px !important;
    }

    .conf-qr-row {
        flex-direction: column !important;
        gap: 16px;
    }

    /* ---- Auth pages (Login/Register) ---- */
    .auth-card {
        padding: 20px 16px !important;
    }

    .auth-header h2 {
        font-size: 1.3rem !important;
    }

    /* ---- Gallery ---- */
    .gallery-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* ---- Pricing ---- */
    .pricing-card .price {
        font-size: 28px !important;
    }

    /* ---- Calendar ---- */
    .fc .fc-toolbar {
        flex-direction: column !important;
        gap: 8px;
    }

    .fc .fc-toolbar-title {
        font-size: 1.1rem !important;
    }

    .fc .fc-button {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    /* ---- Bootstrap column reset avoid float ---- */
    .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9,
    .col-lg-3, .col-lg-4, .col-lg-6 {
        float: none !important;
        width: 100% !important;
    }

    /* ---- Prevent random floating ---- */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .row::before, .row::after {
        display: none !important;
    }

    .row > [class*="col-"] {
        float: none !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}


/* ============================================================
   Small Mobile (max-width: 380px) - iPhone SE, Galaxy S series
   ============================================================ */
@media (max-width: 380px) {

    /* ---- Container ---- */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* ---- Typography ---- */
    h1 { font-size: 1.2rem !important; }

    /* ---- Topbar ---- */
    .topbar-left {
        gap: 8px !important;
    }

    .topbar-address {
        display: none !important;
    }

    /* ---- Navbar ---- */
    .navbar-main .container {
        min-height: 52px !important;
        padding: 0 10px !important;
    }

    .logo-img {
        height: 32px !important;
        min-height: 32px !important;
        min-width: 100px !important;
    }

    /* ---- Mobile menu ---- */
    .mobile-menu {
        padding: 16px !important;
    }

    .mobile-nav-links li a {
        padding: 12px 0 !important;
        font-size: 14px !important;
    }

    .mobile-admin-tab a {
        padding: 12px 12px !important;
        font-size: 13px !important;
    }

    /* ---- Bottom nav ---- */
    .admin-bottom-nav a {
        font-size: 9px !important;
        min-width: 44px !important;
        padding: 4px 3px !important;
    }

    .admin-bottom-nav a i {
        font-size: 16px !important;
    }

    /* ---- Dashboard ---- */
    .dash-container {
        padding: 0 8px !important;
    }

    .stats-card {
        padding: 12px 10px !important;
    }

    .stats-card h2 {
        font-size: 1.2rem !important;
    }

    .stats-card p {
        font-size: 11px !important;
    }

    /* ---- Loyalty ---- */
    .loy-balance-num {
        font-size: 22px !important;
    }

    .loy-hero-main h1 {
        font-size: 1.1rem !important;
    }

    /* ---- Gallery single column on very small ---- */
    .gallery-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- Floor plan even tighter ---- */
    .desk {
        width: 44px !important;
        height: 28px !important;
        font-size: 8px !important;
    }

    /* ---- Seat bookings grid ---- */
    .bookings-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   Galaxy Fold & Ultra-narrow (max-width: 300px)
   ============================================================ */
@media (max-width: 300px) {
    .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    h1 { font-size: 1.1rem !important; }
    h2 { font-size: 1rem !important; }

    .topbar {
        display: none !important; /* Hide topbar on extremely small screens */
    }

    .navbar-main .container {
        min-height: 48px !important;
    }

    .logo-img {
        height: 28px !important;
        min-height: 28px !important;
        min-width: 80px !important;
    }

    .admin-bottom-nav a span {
        display: none; /* Icon only on ultra narrow */
    }

    .admin-bottom-nav a {
        min-width: 36px !important;
    }

    .stats-grid,
    .loyalty-grid,
    .quick-actions,
    .engage-grid,
    .conf-features,
    .booking-mode-selector {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   iPad Landscape specific (1024px-1180px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
    .hero-content h1 {
        font-size: 34px !important;
    }

    .nav-tab-colored {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    /* Prevent conference grid from getting too crowded */
    .rooms-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ============================================================
   iPhone Landscape (max-height: 500px) & (orientation: landscape)
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce fixed header height */
    .navbar-main .container {
        min-height: 48px !important;
    }

    .logo-img {
        height: 32px !important;
    }

    .topbar {
        display: none !important;
    }

    /* Bottom nav slimmer in landscape */
    .admin-bottom-nav {
        padding: 3px 4px !important;
    }

    .admin-bottom-nav a {
        padding: 3px 6px 2px !important;
    }

    .admin-bottom-nav a i {
        font-size: 14px !important;
    }

    .admin-bottom-nav a span {
        font-size: 8px !important;
    }

    body.has-bottom-nav {
        padding-bottom: 48px !important;
    }

    /* Hero compact */
    .hero-section {
        min-height: auto !important;
        padding: 20px 0 !important;
    }
}


/* ============================================================
   Safe area insets (iPhone X, 11, 12, 13, 14, 15 with notch)
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    .admin-bottom-nav {
        padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    }

    body.has-bottom-nav {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    .mobile-menu {
        padding-top: calc(24px + env(safe-area-inset-top));
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
        padding-left: calc(24px + env(safe-area-inset-left));
        padding-right: calc(24px + env(safe-area-inset-right));
    }
}


/* ============================================================
   Print - Clean layout
   ============================================================ */
@media print {
    .topbar, .navbar-main, .mobile-toggle, .mobile-menu,
    .admin-bottom-nav, .cta-section, .chatbot-widget,
    .footer .social-links, .btn, button {
        display: none !important;
    }

    body {
        padding: 0 !important;
        margin: 0 !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
}


/* ============================================================
   Accessibility - Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   Fix old template float issues globally
   ============================================================ */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Fix legacy .row float clearing */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Prevent old slider from causing horizontal scroll */
#theme-main-banner,
.camera_wrap {
    overflow: hidden !important;
    max-width: 100vw !important;
}

/* Fix old template 100% + padding overflow */
.about_left_wrapper,
.about_right_wrapper,
.ci_icon_wrapper_list,
.blog_text,
.top_header_add,
.social_links_wrapper {
    max-width: 100%;
    box-sizing: border-box;
}