/* ==========================================================================
   MOBILE UX IMPROVEMENTS FOR EVENTLINEZ
   Add this file to base-new.html after other CSS files
   ========================================================================== */

/* ==========================================================================
   1. CONSISTENT BREAKPOINTS (Mobile-First Approach)
   ========================================================================== */
:root {
    --mobile-small: 375px;
    --mobile: 576px;
    --tablet: 768px;
    --desktop: 992px;
    --desktop-large: 1200px;
}

/* ==========================================================================
   2. IMPROVED TOUCH TARGETS (Minimum 44x44px for iOS/Android)
   ========================================================================== */
@media (max-width: 768px) {

    /* Buttons */
    .button-cart,
    .pay-event-card-details,
    .button-login,
    .buttons-primary,
    .button-tickets {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }

    /* Navigation links */
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 12px 16px !important;
    }

    /* Icon buttons */
    .button-increment {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Form controls */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
        /* Prevents zoom on iOS */
    }
}

/* ==========================================================================
   3. IMPROVED NAVIGATION FOR MOBILE
   ========================================================================== */
@media (max-width: 991px) {

    /* Make navbar more touch-friendly */
    .navbar {
        padding: 12px 16px !important;
    }

    .navbar-brand img {
        max-height: 36px;
        width: auto;
    }

    /* Improve dropdown spacing */
    .dropdown-menu {
        width: 100%;
        max-width: 100vw;
        border-radius: 0;
    }

    .dropdown-item {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* Stack user profile items vertically on small screens */
    .navbar-nav .nav-item .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    /* Organize event button full width on mobile */
    .organize-event-btn {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 !important;
    }
}

/* ==========================================================================
   4. IMPROVED CARD LAYOUTS
   ========================================================================== */
@media (max-width: 768px) {

    /* Event cards - better spacing and sizing */
    .content-all {
        width: 160px !important;
        height: 220px !important;
        margin: 0 8px 16px 8px !important;
    }

    .item {
        width: 158px !important;
        height: 120px !important;
    }

    .card-event {
        width: 160px !important;
        height: 100px !important;
        margin-left: -168px !important;
        margin-top: 120px !important;
    }

    .event-name {
        font-size: 12px !important;
        line-height: 16px !important;
        padding: 4px 8px !important;
    }

    .text-date {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   5. RESPONSIVE HERO/BANNER SECTION
   ========================================================================== */
@media (max-width: 768px) {
    #background {
        width: 100% !important;
        height: 250px !important;
        margin: 0 !important;
        border-radius: 20px !important;
    }

    .banner {
        width: 100% !important;
        height: 250px !important;
    }

    #title-home {
        font-size: 32px !important;
        line-height: 38px !important;
        width: 90% !important;
        margin: 40px auto 16px 20px !important;
    }

    #subtitle-home {
        font-size: 16px !important;
        line-height: 22px !important;
        width: 90% !important;
        margin: 0 auto 16px 20px !important;
    }

    .button-container-body {
        width: auto !important;
        min-width: 140px !important;
        height: 44px !important;
        margin: 0 auto 0 20px !important;
        padding: 0 24px !important;
    }
}

/* ==========================================================================
   6. IMPROVED FORMS
   ========================================================================== */
@media (max-width: 768px) {

    #form-signup,
    .form-limit {
        width: 100% !important;
        padding: 0 16px !important;
    }

    .form-contact,
    .select-form-contact {
        font-size: 16px !important;
        /* Prevents zoom */
        padding: 12px 16px !important;
        min-height: 44px !important;
    }

    .btn-form {
        width: 100% !important;
        min-height: 44px !important;
        margin: 16px 0 !important;
    }

    /* Input with floating label */
    .input_promo_code {
        height: 44px !important;
        font-size: 16px !important;
    }

    #label_promo_code {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   7. CART PAGE IMPROVEMENTS
   ========================================================================== */
@media (max-width: 768px) {
    .container-cart {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 16px !important;
    }

    /* Make cart table scrollable */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack cart buttons vertically */
    .button-cart {
        width: 100% !important;
        margin: 8px 0 !important;
    }

    /* Cart quantity controls */
    .cart-details-quantity {
        width: 60px !important;
    }
}

/* ==========================================================================
   8. EVENT DETAILS PAGE
   ========================================================================== */
@media (max-width: 991px) {
    #aside-event-details {
        margin: 20px 0 !important;
        padding: 16px !important;
        width: 100% !important;
    }

    .pay-event-card-details {
        width: 100% !important;
        margin: 12px 0 !important;
    }

    #buttons-pay-event-card-details {
        width: 100% !important;
        margin: 16px 0 !important;
        padding: 0 16px !important;
    }
}

/* ==========================================================================
   9. FOOTER IMPROVEMENTS
   ========================================================================== */
@media (max-width: 768px) {
    #myFooter {
        height: auto !important;
        padding: 24px 16px !important;
    }

    #myFooter .fa {
        width: 48px !important;
        height: 48px !important;
        font-size: 28px !important;
        line-height: 32px !important;
        margin: 0 8px !important;
    }

    #myFooter li {
        display: block !important;
        margin: 8px 0 !important;
    }

    .footer-text {
        text-align: center !important;
        padding: 0 8px !important;
    }
}

/* ==========================================================================
   10. IMPROVED SCROLLING AND PERFORMANCE
   ========================================================================== */
@media (max-width: 768px) {

    /* Smooth scrolling for carousel */
    #carousel {
        scroll-behavior: smooth;
        /* Removed -webkit-overflow-scrolling:touch — deprecated and conflicts
           with overflow-x:clip on iOS 18, creating a broken scroll context */
        scrollbar-width: none;
        padding: 20px 16px !important;
    }

    #content {
        margin: 0 0 0 16px !important;
        grid-gap: 16px !important;
    }

    /* ── REMOVED ──────────────────────────────────────────────────────────────
     * The previous rule set margin-left/right: -8px !important on .row and
     * padding: 8px !important on [class*="col-"].
     *
     * Bootstrap's default row margins are already -15px / 15px.  Overriding
     * them with -8px creates elements wider than the viewport which forces a
     * horizontal scrollbar.  Safari iOS then assumes the page has horizontal
     * overflow and can lock vertical scrolling.  Use Bootstrap's built-in
     * .px-0 / .gx-2 utilities instead if tighter gutters are needed on
     * specific pages.
     * ─────────────────────────────────────────────────────────────────────── */
}

/* ==========================================================================
   11. ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */
/* Focus states for keyboard navigation */
@media (max-width: 768px) {

    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid #E10087 !important;
        outline-offset: 2px !important;
    }

    /* Skip to main content link */
    .skip-to-main {
        position: absolute;
        left: -9999px;
        z-index: 999;
    }

    .skip-to-main:focus {
        left: 50%;
        transform: translateX(-50%);
        top: 10px;
        background: #E10087;
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
    }
}

/* ==========================================================================
   12. LOADING STATES AND ANIMATIONS
   ========================================================================== */
/* Removed universal * animation-duration override — it forced style recalculation
   on every element on every interaction, causing scroll jank on mobile. */
@media (max-width: 768px) {

    /* Only target elements that actually animate */
    .btn-save,
    .buttons-primary,
    .button-cart,
    .m-card,
    .organize-event-btn {
        transition-duration: 0.2s !important;
    }
}

/* ==========================================================================
   13. LANDSCAPE ORIENTATION FIXES
   ========================================================================== */
@media (max-width: 768px) and (orientation: landscape) {

    #background,
    .banner {
        height: 180px !important;
    }

    #title-home {
        font-size: 24px !important;
        line-height: 30px !important;
        margin-top: 20px !important;
    }

    .navbar {
        padding: 8px 16px !important;
    }
}

/* ==========================================================================
   14. SAFE AREA INSETS (for iPhone notch, bottom toolbar, home indicator)
   Requires viewport-fit=cover in the <meta name="viewport"> tag.
   ========================================================================== */
@media (max-width: 768px) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        /* Bottom: keeps content above the home indicator and Safari bottom bar */
        padding-bottom: env(safe-area-inset-bottom);
    }

    .navbar,
    #myFooter,
    #myFooter-new {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* Footer needs extra clearance for the bottom toolbar/home indicator */
    #myFooter,
    #myFooter-new {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* ==========================================================================
   15. PRINT STYLES (for mobile tickets)
   ========================================================================== */
@media print {

    .navbar,
    #myFooter,
    .organize-event-btn,
    .nav-toggle {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }
}