/* ========================================
   RESPONSIVE CSS - AlfCasino Italy
   Mobile-First avec !important pour override
   ======================================== */

/* ========================================
   NAVIGATION MOBILE (Login/Bonus) - cachée par défaut
   ======================================== */
.sidebar__nav--mobile,
.sidebar__divider--mobile {
    display: none;
}

/* ========================================
   MENU BURGER (base - caché par défaut)
   ======================================== */
.menu-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
    flex-shrink: 0;
}

.menu-burger__line {
    display: block;
    width: 1.25rem;
    height: 0.125rem;
    background: #fff;
    border-radius: 0.125rem;
    transition: all 0.3s ease;
}

.menu-burger__line:nth-child(1) { margin-bottom: 0.3rem; }
.menu-burger__line:nth-child(3) { margin-top: 0.3rem; }

.menu-burger.active .menu-burger__line:nth-child(1) {
    transform: rotate(45deg) translate(0.3rem, 0.3rem);
}
.menu-burger.active .menu-burger__line:nth-child(2) {
    opacity: 0;
}
.menu-burger.active .menu-burger__line:nth-child(3) {
    transform: rotate(-45deg) translate(0.3rem, -0.3rem);
}

/* Mobile overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   TABLET - max 992px
   ======================================== */
@media screen and (max-width: 992px) {
    .menu-burger {
        display: flex !important;
    }

    .mobile-overlay {
        display: block !important;
    }

    /* Hide nav links and search in header when burger appears */
    .header > .header__login-link {
        display: none !important;
    }

    .header__search {
        display: none !important;
    }

    /* Shrink header buttons to fit */
    .header {
        padding: 0 12px !important;
        gap: 10px !important;
    }

    .header__actions {
        gap: 8px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .header__actions .header__login-link {
        font-size: 13px !important;
        padding: 6px 12px !important;
        margin-left: 0 !important;
        white-space: nowrap !important;
    }

    .sidebar {
        position: fixed !important;
        top: 3.5rem !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 200px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 100 !important;
    }

    .sidebar.active {
        transform: translateX(0) !important;
    }

    .main {
        margin-left: 0 !important;
        padding: 1rem !important;
        width: 100% !important;
    }

    /* Hero adjustments for tablet/notebook */
    .hero__content {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 600px !important;
        width: 80% !important;
        text-align: center !important;
    }

    .hero__title {
        font-size: 44px !important;
    }

    .hero__badge {
        font-size: 16px !important;
        padding: 8px 24px !important;
    }

    .grid--8 { grid-template-columns: repeat(4, 1fr) !important; }
    .grid--7 { grid-template-columns: repeat(4, 1fr) !important; }
    .grid--5 { grid-template-columns: repeat(3, 1fr) !important; }
    .top5-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 1rem !important; max-width: none !important; }
    .rally-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .footer__grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ========================================
   MOBILE - max 768px
   ======================================== */
@media screen and (max-width: 768px) {
    /* === RESET GLOBAL === */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

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

    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Force toutes les images à rester dans leur conteneur */
    .hero__visual img,
    .promo__bg {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .rally__img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .promo-btn img {
        width: 50px !important;
        height: 50px !important;
        object-fit: contain !important;
    }

    .card > img,
    .top5-card__inner > img {
        object-position: center center !important;
    }

    /* === HEADER === */
    .header {
        height: 4.5rem !important;
        padding: 0 0.75rem !important;
        gap: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    .menu-burger {
        display: flex !important;
        order: 1 !important;
        flex-shrink: 0 !important;
    }

    .header__logo {
        order: 2 !important;
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .header__logo img {
        height: 1.75rem !important;
        width: auto !important;
        max-width: 6rem !important;
    }

    .header__search {
        display: none !important;
    }

    /* Cache les liens de nav dans le header */
    .header > .header__login-link {
        display: none !important;
    }

    .header__actions {
        order: 3 !important;
        display: flex !important;
        gap: 0.375rem !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
    }

    .header__actions .header__login-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem 0.8rem !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border-radius: 0.35rem !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: none !important;
        color: #fff !important;
        white-space: nowrap !important;
    }

    .header__actions .header__login-link:last-child {
        background: linear-gradient(180deg, #00e5bb 0%, #00a88a 100%) !important;
        color: #0a0814 !important;
    }

    /* === LAYOUT === */
    .layout {
        flex-direction: column !important;
    }

    /* === SIDEBAR === */
    .sidebar {
        position: fixed !important;
        top: 3.5rem !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 80% !important;
        max-width: 280px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 100 !important;
        overflow-y: auto !important;
    }

    .sidebar.active {
        transform: translateX(0) !important;
    }

    .mobile-overlay {
        display: block !important;
    }

    /* === NAVIGATION MOBILE (Login/Bonus) === */
    .sidebar__nav--mobile,
    .sidebar__divider--mobile {
        display: flex !important;
    }

    .sidebar__nav--mobile {
        flex-direction: column !important;
        gap: 0.25rem !important;
        background: rgba(0, 212, 170, 0.1) !important;
        border-radius: 0.5rem !important;
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .sidebar__nav--mobile .nav-link {
        background: rgba(0, 212, 170, 0.15) !important;
        border-radius: 0.375rem !important;
        color: #00d4aa !important;
        font-weight: 700 !important;
    }

    .sidebar__nav--mobile .nav-link:hover {
        background: rgba(0, 212, 170, 0.25) !important;
    }

    /* === MAIN CONTENT === */
    .main {
        margin-left: 0 !important;
        padding: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

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

    /* === HERO BANNER === */
    .hero {
        position: relative !important;
        border-radius: 0.75rem !important;
        margin-bottom: 1rem !important;
        overflow: hidden !important;
        min-height: auto !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero__visual {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .hero__visual img {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 380px !important;
        display: block !important;
        object-fit: cover !important;
    }

    .hero__content {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
        max-width: 70% !important;
        padding: 0 !important;
        z-index: 5 !important;
    }

    .hero__badge {
        padding: 0.6rem 1.25rem !important;
        font-size: 1.25rem !important;
        margin-bottom: 0.85rem !important;
        display: inline-block !important;
    }

    .hero__title {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.2 !important;
    }

    .hero::before {
        border-width: 2px !important;
        border-radius: 0.75rem !important;
    }

    /* === CTA BUTTON === */
    .btn--cta {
        height: 3.75rem !important;
        padding: 0 2.5rem !important;
        font-size: 1.25rem !important;
        margin: 0 0.5rem !important;
    }

    .btn--cta::before,
    .btn--cta::after {
        width: 0.5rem !important;
    }
    .btn--cta::before { left: -0.5rem !important; }
    .btn--cta::after { right: -0.5rem !important; }

    /* === CATEGORY BAR === */
    .category-bar {
        display: flex !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }

    .category-bar::-webkit-scrollbar {
        display: none !important;
    }

    .cat-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.65rem !important;
        border-radius: 1rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .cat-icon {
        font-size: 0.75rem !important;
    }

    /* === SECTIONS === */
    .section {
        margin-bottom: 1.25rem !important;
    }

    .section__head {
        margin-bottom: 0.75rem !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .section__head h2,
    .section__head .section__title {
        font-size: 1rem !important;
        font-weight: 800 !important;
    }

    .section__more {
        font-size: 0.7rem !important;
    }

    .section__sub {
        font-size: 0.75rem !important;
        margin-top: -0.25rem !important;
        margin-bottom: 0.75rem !important;
    }

    .section__nav {
        display: flex !important;
        gap: 0.375rem !important;
    }

    .nav-arrow {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.75rem !important;
    }

    /* === GRILLES - 2 COLONNES === */
    .grid {
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .grid--8,
    .grid--7,
    .grid--5,
    .grid--4,
    .grid--3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* === CARTES === */
    .card {
        border-radius: 0.5rem !important;
        overflow: hidden !important;
        aspect-ratio: 2/3 !important;
    }

    .card::after {
        border-radius: 0.5rem !important;
        border-width: 1px !important;
    }

    .card > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
    }

    .card--wide {
        aspect-ratio: 16/9 !important;
    }

    .card--live {
        aspect-ratio: 2/3 !important;
    }

    .card--sport {
        aspect-ratio: 1/1 !important;
        background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%) !important;
    }

    .card--sport img {
        width: 70% !important;
        height: auto !important;
        object-fit: contain !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -60%) !important;
    }

    .card__sport-label {
        font-size: 0.5rem !important;
        padding: 0.35rem 0.5rem !important;
    }

    .card__badge {
        top: 0.35rem !important;
        left: 0.35rem !important;
        padding: 0.2rem 0.4rem !important;
        font-size: 0.45rem !important;
    }

    .card__jackpot {
        bottom: 0.35rem !important;
        left: 0.35rem !important;
        right: 0.35rem !important;
        padding: 0.35rem 0.5rem !important;
        font-size: 0.6rem !important;
    }

    /* === TOP 5 === */
    .section--top5 {
        margin-bottom: 1.25rem !important;
    }

    .top5-grid {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        overscroll-behavior: contain !important;
        gap: 0.75rem !important;
        padding-bottom: 0.5rem !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        scrollbar-width: none !important;
    }

    .top5-grid::-webkit-scrollbar {
        display: none !important;
    }

    .top5-card {
        position: relative !important;
        flex: 0 0 40% !important;
        scroll-snap-align: start !important;
    }

    .top5-card__inner {
        border-radius: 0.5rem !important;
        overflow: hidden !important;
        aspect-ratio: 2/3 !important;
    }

    .top5-card__inner::before {
        display: none !important;
    }

    .top5-card__inner img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .top5-card__rank {
        display: block !important;
        font-size: 52px !important;
        bottom: -6px !important;
        left: 4px !important;
    }

    .top5-card__badge {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.45rem !important;
        top: 0.35rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* === RALLY === */
    .rally-grid {
        grid-template-columns: 1fr !important;
        gap: 0.625rem !important;
    }

    .rally {
        border-radius: 0.5rem !important;
        display: flex !important;
        flex-direction: row !important;
    }

    .rally__img {
        width: 5rem !important;
        flex-shrink: 0 !important;
    }

    .rally__img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .rally__premium {
        padding: 0.15rem 0.35rem !important;
        font-size: 0.45rem !important;
        top: 0.35rem !important;
        left: 0.35rem !important;
    }

    .rally__body {
        padding: 0.625rem !important;
        flex: 1 !important;
    }

    .rally__body h4 {
        font-size: 0.75rem !important;
        margin-bottom: 0.375rem !important;
    }

    .rally__info {
        font-size: 0.625rem !important;
        gap: 0.125rem 0.375rem !important;
    }

    .rally .btn--sm {
        margin-top: 0.5rem !important;
        height: 1.625rem !important;
        font-size: 0.5rem !important;
        padding: 0 0.625rem !important;
    }

    .rally .btn--sm::before,
    .rally .btn--sm::after {
        width: 0.375rem !important;
    }
    .rally .btn--sm::before { left: -0.375rem !important; }
    .rally .btn--sm::after { right: -0.375rem !important; }

    /* === PROMO BANNER === */
    .promo {
        position: relative !important;
        border-radius: 0.75rem !important;
        margin: 1rem 0 !important;
        overflow: hidden !important;
    }

    .promo__bg {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
    }

    .promo__content {
        position: absolute !important;
        left: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        max-width: 70% !important;
        padding: 0 !important;
        z-index: 5 !important;
    }

    .promo__content h2,
    .promo__content .promo__title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.2 !important;
    }

    .promo::before {
        border-width: 2px !important;
        border-radius: 0.75rem !important;
    }

    /* === INFO SECTION === */
    .info {
        padding: 1rem !important;
        border-radius: 0.75rem !important;
        margin: 1rem 0 !important;
    }

    .info h2 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .info p {
        font-size: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* === BOUTONS === */
    .btn {
        height: 2.25rem !important;
        padding: 0 1rem !important;
        font-size: 0.65rem !important;
    }

    .btn--primary,
    .btn--outline {
        margin: 0 0.5rem !important;
    }

    .btn--primary::before,
    .btn--primary::after,
    .btn--outline::before,
    .btn--outline::after {
        width: 0.5rem !important;
    }
    .btn--primary::before,
    .btn--outline::before { left: -0.5rem !important; }
    .btn--primary::after,
    .btn--outline::after { right: -0.5rem !important; }

    .btn--sm {
        height: 1.75rem !important;
        padding: 0 0.75rem !important;
        font-size: 0.55rem !important;
    }

    .bottom-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: center !important;
        margin: 1rem 0 !important;
    }

    .bottom-actions .btn {
        width: 100% !important;
        max-width: 16rem !important;
    }

    /* === FOOTER === */
    .footer {
        border-radius: 1rem 1rem 0 0 !important;
        padding: 1.5rem 1rem 1rem !important;
        margin-top: 1.5rem !important;
    }

    .footer__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .footer__col h4 {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
    }

    .footer__col ul {
        gap: 0.35rem !important;
    }

    .footer__col li a {
        font-size: 0.85rem !important;
    }

    .footer__pay {
        gap: 0.5rem !important;
        padding: 1rem 0 !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .pay-icon {
        padding: 0.35rem 0.625rem !important;
        font-size: 0.625rem !important;
    }

    .footer__age {
        padding: 1rem 0 !important;
    }

    .footer__age span {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 0.75rem !important;
    }

    .footer__disc {
        font-size: 0.75rem !important;
        line-height: 1.6 !important;
    }

    /* === SEO CONTENT === */
    .seo-content {
        padding: 1.25rem !important;
        border-radius: 0.75rem !important;
        margin-bottom: 1rem !important;
        font-size: 1.05rem !important;
    }

    .seo-content h1 {
        font-size: 1.65rem !important;
        margin-bottom: 1rem !important;
    }

    .seo-content h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    .seo-content h3 {
        font-size: 1.3rem !important;
        margin: 1.25rem 0 0.625rem !important;
    }

    .seo-content h4 {
        font-size: 1.15rem !important;
        margin: 1rem 0 0.5rem !important;
    }

    .seo-content p {
        font-size: 1.05rem !important;
        line-height: 1.7 !important;
        margin-bottom: 0.75rem !important;
    }

    .seo-content ul,
    .seo-content ol {
        padding-left: 1rem !important;
        margin: 0.75rem 0 !important;
    }

    .seo-content li {
        font-size: 1.05rem !important;
        margin-bottom: 0.35rem !important;
    }

    .seo-table {
        font-size: 0.95rem !important;
        display: block !important;
        overflow-x: auto !important;
    }

    .seo-table th,
    .seo-table td {
        padding: 0.5rem !important;
        white-space: nowrap !important;
    }

    .faq details {
        border-radius: 0.5rem !important;
        margin-bottom: 0.35rem !important;
    }

    .faq summary {
        padding: 0.75rem !important;
        font-size: 0.75rem !important;
    }

    .faq details p {
        padding: 0 0.75rem 0.75rem !important;
        font-size: 0.7rem !important;
    }

    .testimonials blockquote {
        padding: 0.75rem 1rem !important;
    }

    .testimonials blockquote p {
        font-size: 0.75rem !important;
    }

    .testimonials cite {
        font-size: 0.7rem !important;
    }

    .disclaimer {
        padding: 0.75rem 1rem !important;
    }

    .disclaimer p {
        font-size: 0.625rem !important;
    }

    .info-box {
        padding: 0.75rem 1rem !important;
    }

    .info-box p {
        font-size: 0.75rem !important;
    }

    .cta-box--final {
        padding: 1.25rem 1rem !important;
    }

    .cta-box--final p {
        font-size: 0.75rem !important;
    }
}

/* ========================================
   SMALL MOBILE - max 480px
   ======================================== */
@media screen and (max-width: 480px) {
    .header {
        height: 4rem !important;
        padding: 0 0.5rem !important;
    }

    .header__logo img {
        height: 2rem !important;
        max-width: 6rem !important;
    }

    .header__actions .header__login-link {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.85rem !important;
    }

    .menu-burger {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    .sidebar {
        top: 3rem !important;
    }

    .main {
        padding: 0.5rem !important;
    }

    .hero {
        border-radius: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .hero__content {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
        max-width: 85% !important;
    }

    .hero__badge {
        padding: 0.5rem 1rem !important;
        font-size: 1.1rem !important;
        margin-bottom: 0.6rem !important;
    }

    .hero__title {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }

    .btn--cta {
        height: 3.5rem !important;
        padding: 0 2rem !important;
        font-size: 1.15rem !important;
    }

    .category-bar {
        gap: 0.35rem !important;
        margin-bottom: 0.75rem !important;
    }

    .cat-btn {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.55rem !important;
    }

    .section {
        margin-bottom: 1rem !important;
    }

    .section__head h2,
    .section__head .section__title {
        font-size: 0.9rem !important;
    }

    .section__more {
        font-size: 0.6rem !important;
    }

    .grid,
    .grid--8,
    .grid--7,
    .grid--5,
    .grid--4,
    .grid--3,
    .top5-grid {
        gap: 0.35rem !important;
    }

    .card {
        border-radius: 0.375rem !important;
    }

    .card::after {
        border-radius: 0.375rem !important;
    }

    .card__badge {
        top: 0.25rem !important;
        left: 0.25rem !important;
        padding: 0.15rem 0.3rem !important;
        font-size: 0.4rem !important;
    }

    .card__jackpot {
        bottom: 0.25rem !important;
        left: 0.25rem !important;
        right: 0.25rem !important;
        padding: 0.25rem 0.35rem !important;
        font-size: 0.5rem !important;
    }

    .top5-card__inner {
        border-radius: 0.375rem !important;
    }

    .rally__img {
        width: 4.5rem !important;
    }

    .rally__body {
        padding: 0.5rem !important;
    }

    .rally__body h4 {
        font-size: 0.65rem !important;
    }

    .rally__info {
        font-size: 0.55rem !important;
    }

    .rally .btn--sm {
        height: 1.5rem !important;
        font-size: 0.45rem !important;
    }

    .promo {
        border-radius: 0.5rem !important;
        margin: 0.75rem 0 !important;
    }

    .promo__content {
        left: 0.75rem !important;
        max-width: 75% !important;
    }

    .promo__content h2,
    .promo__content .promo__title {
        font-size: 0.85rem !important;
    }

    .footer {
        padding: 1rem 0.75rem 0.75rem !important;
    }

    .footer__grid {
        gap: 0.75rem !important;
    }

    .footer__col h4 {
        font-size: 0.85rem !important;
    }

    .footer__col li a {
        font-size: 0.75rem !important;
    }

    .pay-icon {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.55rem !important;
    }

    .footer__age span {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 0.65rem !important;
    }

    .footer__disc {
        font-size: 0.65rem !important;
    }

    .seo-content {
        padding: 0.75rem !important;
    }

    .seo-content h1 {
        font-size: 1.45rem !important;
    }

    .seo-content h2 {
        font-size: 1.3rem !important;
    }

    .seo-content h3 {
        font-size: 1.15rem !important;
    }

    .seo-content p,
    .seo-content li {
        font-size: 0.95rem !important;
    }

    .faq summary {
        padding: 0.625rem !important;
        font-size: 0.65rem !important;
    }

    .faq details p {
        padding: 0 0.625rem 0.625rem !important;
        font-size: 0.6rem !important;
    }
}

/* ========================================
   EXTRA SMALL - max 360px
   ======================================== */
@media screen and (max-width: 360px) {
    .header {
        height: 3.5rem !important;
        padding: 0 0.375rem !important;
        gap: 0.25rem !important;
    }

    .header__logo img {
        height: 1.75rem !important;
        max-width: 5rem !important;
    }

    .header__actions .header__login-link {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    .menu-burger {
        width: 2rem !important;
        height: 2rem !important;
    }

    .sidebar {
        top: 2.75rem !important;
    }

    .main {
        padding: 0.375rem !important;
    }

    .hero__title {
        font-size: 1.75rem !important;
    }

    .btn--cta {
        height: 3.25rem !important;
        font-size: 1.05rem !important;
    }

    .section__head h2,
    .section__head .section__title {
        font-size: 0.8rem !important;
    }

    .grid,
    .top5-grid {
        gap: 0.25rem !important;
    }
}