/* =========================================================
   TU PLAYER — FINAL MOBILE RESPONSIVE FIX
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

/* Prevent accidental desktop widths */
img,
video,
canvas,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    body {
        overflow-x: hidden !important;
    }

    main,
    section,
    header,
    footer,
    .container,
    .wrap,
    .content,
    .section,
    .hero,
    .features,
    .feature-grid,
    .plans,
    .pricing,
    .support,
    .reviews {
        max-width: 100% !important;
    }

    .hero {
        min-height: auto !important;
    }

    .hero img {
        max-width: 100% !important;
    }

    .feature-grid,
    .features-grid,
    .cards,
    .content-grid,
    .plans,
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 600px) {

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        margin: 0 !important;
    }

    /* ---------- Global spacing ---------- */

    main,
    .wrap,
    .container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ---------- Header ---------- */

    header,
    nav,
    .site-nav {
        max-width: 100vw !important;
        width: 100% !important;
    }

    .site-nav {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .nav-links {
        display: none !important;
    }

    .nav-toggle {
        display: flex !important;
    }

    /* ---------- Hero ---------- */

    .hero {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 18px 0 28px !important;
        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .hero > *,
    .hero-content,
    .hero-copy,
    .hero-text,
    .hero-media,
    .hero-image {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hero-content,
    .hero-copy,
    .hero-text {
        text-align: right !important;
    }

    .hero h1 {
        font-size: clamp(34px, 10vw, 52px) !important;
        line-height: 1.12 !important;
        margin: 0 0 12px !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    .hero p {
        font-size: 15px !important;
        line-height: 1.9 !important;
        margin: 0 0 18px !important;
    }

    .hero-actions,
    .hero-buttons,
    .actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .hero-actions a,
    .hero-actions button,
    .hero-buttons a,
    .hero-buttons button {
        flex: 1 1 150px !important;
        min-width: 0 !important;
    }

    .hero-media,
    .hero-image {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .hero-media img,
    .hero-image img {
        width: 100% !important;
        max-width: 390px !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    /* ---------- Section headings ---------- */

    .section-head,
    .section-header {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 18px !important;
    }

    .section-head h2,
    .section-header h2 {
        font-size: clamp(25px, 7vw, 34px) !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }

    /* ---------- Feature cards ---------- */

    .feature-grid,
    .features-grid,
    .cards,
    .content-grid {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .feature-card,
    .content-card,
    .card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .feature-card img,
    .content-card img,
    .card img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .feature-card .image,
    .feature-card .media,
    .content-card .image,
    .content-card .media {
        width: 100% !important;
        overflow: hidden !important;
    }

    .feature-card .content,
    .feature-card .body,
    .content-card .content,
    .content-card .body {
        width: 100% !important;
        min-width: 0 !important;
        padding: 16px !important;
        text-align: right !important;
    }

    .feature-card h3,
    .content-card h3,
    .card h3 {
        font-size: 21px !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
    }

    .feature-card p,
    .content-card p,
    .card p {
        font-size: 14px !important;
        line-height: 1.8 !important;
        overflow-wrap: anywhere !important;
    }

    /* ---------- Buttons ---------- */

    a,
    button {
        max-width: 100%;
    }

    .btn,
    .button,
    .cta {
        min-height: 46px !important;
        white-space: normal !important;
    }

    /* ---------- Pricing ---------- */

    .plans,
    .pricing,
    .pricing-grid {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .plan,
    .plan-card,
    .pricing-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* ---------- Payment methods ---------- */

    .payments,
    .payment-methods,
    .payment-logos,
    .payment-cards {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .payments img,
    .payment-methods img,
    .payment-logos img {
        width: auto !important;
        max-width: 70px !important;
        max-height: 38px !important;
        object-fit: contain !important;
    }

    /* ---------- Sports ---------- */

    .matches,
    .matches-grid,
    .match-grid {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .match-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* ---------- Reviews ---------- */

    .review,
    .review-card,
    .reviews-card {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* ---------- Download / support ---------- */

    .download,
    .download-card,
    .support,
    .support-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ---------- Footer ---------- */

    footer {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* ---------- Kill accidental horizontal overflow ---------- */

    .row,
    .grid,
    .flex,
    .glass,
    .panel {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    [style*="min-width"] {
        min-width: 0 !important;
    }

    [style*="width: 100vw"] {
        width: 100% !important;
    }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    main,
    .wrap,
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .hero h1 {
        font-size: 31px !important;
    }

    .hero p {
        font-size: 14px !important;
    }

    .feature-card .content,
    .feature-card .body {
        padding: 13px !important;
    }
}