/*
 * Mobile improvements (branch mobile-friendly).
 * Loaded last in header.php, so these rules win over style.css / g_style.css / new.css.
 */

/* ---------- all widths ---------- */

/* the checkout button is now wrapped in .seat-cart-bar: keep the style style.css gives to ".seats-availability-right-banner > a" */
.seat-cart-bar > a {
    display: block;
    text-decoration: none;
    font-size: 16px;
    color: white;
    padding: 10px;
    width: 100%;
    background-color: #00004D;
    border-radius: 4px;
    margin-top: 24px;
}
.seat-cart-bar > a:hover,
.seat-cart-bar > a:focus { color: white; box-shadow: none; outline: none; }

/* reCAPTCHA v3 badge is hidden; the required notice is shown in the login/register forms instead */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-notice { font-size: 11px; line-height: 1.4; color: #6c757d; margin-top: 10px; }
.recaptcha-notice a { color: #6c757d; text-decoration: underline; }

.seat-map-swipe-hint { display: none; }

/* seat maps: allow pinch-zoom and panning, but no double-tap zoom when tapping seats quickly */
.seats-availability-left-banner svg,
.stadium-sections svg { touch-action: manipulation; }


/* ---------- touch screens ----------
   Seat/sector hover tooltips follow "mousemove" (g_script.js). A tap fires mousemove but never mouseleave,
   so on phones the tooltip + seat photo stayed open next to the finger, covered the map and pushed the page
   wider than the screen. The seat view photo is still shown in "view from the chosen seats" below the map. */
@media (hover: none) {
    .seat_info,
    .seat_image,
    .sector_info { display: none !important; }
}

/* ---------- footer sponsors: a compact grid (3 + 2) instead of one logo per line ----------
   style.css (max-width: 768px) gives every logo link width:100%, which stacked them vertically. */
@media screen and (max-width: 768px) {
    .partners .partners-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        width: 100%;
        padding: 16px 12px 24px;
    }
    .partners a {
        width: calc((100% - 24px) / 3);
        max-width: 140px;
        padding-bottom: 0;
    }
    .partners img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* ---------- phones ---------- */
@media screen and (max-width: 767.98px) {

    /* mobile menu: fits the screen, scrolls, big touch targets */
    .mobile-menu {
        width: min(340px, 90vw);
        height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-menu > ul li { padding-bottom: 0; }
    .mobile-menu > ul li a {
        display: block;
        padding: 12px 0;
        font-size: 17px;
    }
    .mobile-menu select,
    .mobile-menu .select2 { width: 100% !important; max-width: 280px; }
    .mobile-menu > .login-register > a { padding: 10px 0; font-size: 17px; }

    /* footer links: one per line, easier to tap (style.css limits each li to 30% width) */
    .footer-content .footer-navigation li { width: 100%; }
    .footer-content .footer-navigation li a { display: inline-block; width: auto; padding: 6px 0; } /* style.css sets width:25% on the link */

    /* ---- sector page: seat map ---- */
    .seat-map-swipe-hint {
        display: block;
        font-size: 13px;
        color: #00004D;
        opacity: .75;
        text-align: center;
        margin: 4px 0 8px;
    }
    .select-seat-container .table-mobile {
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- sector page: "view from the chosen seats" slider ----
       It is a bootstrap .row (-15px margins) outside a .container, and it grows with every chosen seat.
       Anything wider than the screen makes the phone browser widen the whole page (zoom is allowed now),
       so it must never overflow. */
    .select-seat-container .chosen-seats-view { overflow-x: hidden; max-width: 100%; }
    .select-seat-container .chosen-seats-view-slider.row { margin-left: 0; margin-right: 0; }
    .select-seat-container .chosen-seats-view-slider img,
    .select-seat-container .chosen-seats-view-item { max-width: 100%; }

    /* ---- sector page: selection summary + "add to cart" fixed at the bottom ---- */
    .seat-cart-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -4px 16px rgba(0, 0, 77, .15);
    }
    .seats-availability-right-banner .seat-cart-bar .total-tickets {
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        border: 0;
    }
    .seat-cart-bar > a {
        flex: 1.3;
        margin-top: 0;
        padding: 14px 10px;
        text-align: center;
    }
    /* keep page content (footer) reachable above the fixed bar */
    body:has(.seat-cart-bar) { padding-bottom: 90px; }

    /* ---- cart: every ticket is a card (7 column table did not fit, seat details were hidden) ---- */
    .single-ticket-container .table-mobile { overflow: visible; }
    .single-ticket-container .checkout-body table thead { display: none; }
    .single-ticket-container .checkout-body table,
    .single-ticket-container .checkout-body table tbody,
    .single-ticket-container .checkout-body table tr { display: block; width: 100%; }
    .single-ticket-container .checkout-body table tbody tr {
        position: relative;
        border: 1px solid #EBEBEB;
        border-radius: 12px;
        padding: 10px 52px 10px 14px;
        margin-bottom: 10px;
    }
    .single-ticket-container .checkout-body table tbody tr:last-child { border-bottom: 1px solid #EBEBEB; }
    .single-ticket-container .checkout-body table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        border: 0;
    }
    .single-ticket-container .checkout-body table tbody td::before {
        content: attr(data-label);
        color: #6c757d;
        font-size: 13px;
    }
    /* delete icon: top right corner of the card, 44px touch area */
    .single-ticket-container .checkout-body table tbody tr th:first-child {
        position: absolute;
        top: 6px;
        right: 6px;
        padding: 0;
        border: 0;
    }
    .single-ticket-container .checkout-body table tbody tr th:first-child a {
        width: 44px;
        height: 44px;
        background-size: 16px 18px;
    }

    /* ---- cart: payment buttons (bank card / idram) as big, clearly tappable buttons ---- */
    .checkout .checkout-footer ul { flex-direction: column; align-items: stretch; gap: 12px; }
    .checkout .checkout-footer ul li form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
    .checkout .checkout-footer ul li a.ppresbtn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 56px;
        padding: 10px 16px;
        background-color: #fff;
        border: 1px solid #D6D6E7;
        border-radius: 12px;
    }
    .checkout .checkout-footer ul li a.ppresbtn img { max-height: 36px; max-width: 100%; margin: 0 !important; }

    /* ---- modals: forms fit the screen ---- */
    .login-register-modal .modal-dialog { margin: 8px; }
    .login-register-modal .modal-body { max-height: calc(100vh - 110px); overflow-y: auto; }
}