/* ==========================================================
   ADN GLOBAL – user site mobile fixes (loaded on every user page)
   Fixes overlapping: fixed header (z 100) and bottom nav (z 1000)
   were drawn on top of popups, toasts and the product buy bar.
   ========================================================== */

:root { --bn-h: 0px; }

/* ---------- Popups / modals always on top, scroll when tall ---------- */
.fixed.inset-0.z-50,
.modal-backdrop,
#login-modal, #register-modal, #forgot-password-modal,
#payment-modal, #paymethod-modal, #video-modal {
    z-index: 1200 !important;
}
@media (max-width: 1024px) {
    .fixed.inset-0.z-50 > div:not(.hidden),
    .modal-backdrop > div {
        max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    body.um-modal-open { overflow: hidden !important; }
}

/* ---------- Toast notifications below the fixed header ---------- */
@media (max-width: 1024px) {
    .fixed.top-4.right-4 {
        top: calc(74px + env(safe-area-inset-top)) !important;
        left: 12px !important;
        right: 12px !important;
        max-width: none !important;
        z-index: 1300 !important;
    }
}

/* ---------- Product page buy bar sits above the bottom nav ---------- */
@media (max-width: 767px) {
    .mobile-buy-bar {
        bottom: var(--bn-h, 76px) !important;
        z-index: 990 !important;
        border-radius: 16px 16px 0 0;
    }
    body.um-has-buybar { padding-bottom: calc(var(--bn-h, 76px) + var(--buy-h, 120px) + 12px) !important; }

    /* bottom nav: room for the iPhone home indicator */
    .mobile-bottom-nav { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- General phone polish ---------- */
@media (max-width: 767px) {
    /* long words / emails / links never push content sideways or overlap */
    main, footer { overflow-wrap: anywhere; }
    main img, main video, main iframe { max-width: 100%; height: auto; }
    main iframe { aspect-ratio: 16 / 9; }

    /* tables scroll inside their card instead of squeezing text on top of each other */
    main table { min-width: 560px; }
    main .overflow-x-auto { -webkit-overflow-scrolling: touch; }

    /* 16px inputs: stops iOS from zooming the page */
    input[type=text], input[type=email], input[type=password], input[type=number], input[type=search],
    input[type=tel], input[type=url], select, textarea { font-size: 16px !important; }

    /* headings scale down so they do not run into neighbouring elements */
    main h1.text-4xl, main h1.text-5xl, main .text-4xl, main .text-5xl { font-size: 1.75rem !important; line-height: 1.25 !important; }
    main .text-3xl { font-size: 1.5rem !important; line-height: 1.3 !important; }

    /* flex rows with text + badge/button wrap instead of overlapping */
    main .flex.justify-between:not(.flex-col) { flex-wrap: wrap; row-gap: .5rem; }
}

/* ---------- Scrollable tab strips: tabs keep their width (no squashed, overlapping labels) ---------- */
.overflow-x-auto > button, .overflow-x-auto > a,
nav.overflow-x-auto > *, .overflow-x-auto.flex > * { flex-shrink: 0; }
@media (max-width: 1024px) {
    .overflow-x-auto { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .overflow-x-auto::-webkit-scrollbar { display: none; }
}

/* ---------- Header user menu on phones: fixed dropdown under the app bar ---------- */
@media (max-width: 1024px) {
    #user-menu {
        position: fixed !important;
        top: calc(60px + env(safe-area-inset-top)) !important;
        right: 10px !important;
        left: auto !important;
        width: min(280px, calc(100vw - 20px)) !important;
        margin: 0 !important;
        max-height: calc(100dvh - 160px);
        overflow-y: auto !important;
        z-index: 1150 !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .22) !important;
    }
    #user-menu a, #user-menu button { min-height: 46px; }
    [data-user-menu-toggle="true"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}