/* ============================================
   Fast2 — Responsive
   ============================================ */

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {

    /* Header */
    .nav {
        display: none;
    }

    .burger {
        display: flex;
    }

    /* ── Mobile menu overlay ── */
    /* Use position:absolute relative to the fixed header to avoid
       the backdrop-filter stacking context bug on iOS Safari */
    body.nav-is-open .nav {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height));
        background: var(--c-white);
        z-index: var(--z-overlay);
        padding: var(--sp-xl) var(--sp-lg) var(--sp-lg);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: mobileNavIn 0.25s ease-out;
    }

    @keyframes mobileNavIn {
        from {
            opacity: 0;
            transform: translateY(-12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body.nav-is-open .nav__list {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    body.nav-is-open .nav__list li {
        border-bottom: 1px solid var(--c-border);
    }

    body.nav-is-open .nav__list li:last-child {
        border-bottom: none;
    }

    body.nav-is-open .nav__link {
        display: block;
        padding: var(--sp-md) var(--sp-sm);
        font-size: var(--fs-body);
        font-weight: var(--fw-medium);
        color: var(--c-dark);
        border-radius: 0;
        transition: background var(--transition-fast), color var(--transition-fast);
    }

    body.nav-is-open .nav__link:hover,
    body.nav-is-open .nav__link:active {
        background: var(--c-surface);
        color: var(--c-primary);
    }

    body.nav-is-open .nav__link--active {
        color: var(--c-primary);
        background: var(--c-primary-50);
        font-weight: var(--fw-semibold);
    }

    /* ── Mobile nav dropdown accordion ── */
    body.nav-is-open .nav-dropdown {
        position: static;
    }

    body.nav-is-open .nav-dropdown__trigger {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: var(--sp-md) var(--sp-sm);
        font-size: var(--fs-body);
        font-weight: var(--fw-medium);
        color: var(--c-dark);
        border-radius: 0;
    }

    body.nav-is-open .nav-dropdown__trigger svg {
        transition: transform 0.25s ease;
    }

    body.nav-is-open .nav-dropdown.is-open .nav-dropdown__trigger {
        color: var(--c-primary);
    }

    body.nav-is-open .nav-dropdown__menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    body.nav-is-open .nav-dropdown.is-open .nav-dropdown__menu {
        max-height: 300px;
    }

    body.nav-is-open .nav-dropdown__item {
        padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) var(--sp-xl);
        font-size: var(--fs-small);
        color: var(--c-medium);
        border-radius: 0;
    }

    body.nav-is-open .nav-dropdown__item:hover {
        background: var(--c-surface);
        color: var(--c-primary);
    }

    /* Burger → X animation */
    body.nav-is-open .burger__line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    body.nav-is-open .burger__line:nth-child(2) {
        opacity: 0;
    }
    body.nav-is-open .burger__line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* ── Mobile nav footer (auth + lang) ── */
    .nav__mobile-footer {
        margin-top: auto;
        padding-top: var(--sp-lg);
        border-top: 1px solid var(--c-border);
    }

    .nav__mobile-auth {
        display: flex;
        flex-direction: column;
        gap: var(--sp-sm);
    }

    .nav__mobile-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .nav__mobile-user {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .nav__mobile-user .nav__link {
        padding: var(--sp-md) var(--sp-sm);
        font-size: var(--fs-body);
        color: var(--c-dark);
        display: block;
    }

    .nav__link--danger {
        color: var(--c-error) !important;
        background: none;
        border: none;
        font-family: inherit;
        font-size: var(--fs-body);
        font-weight: var(--fw-medium);
        padding: var(--sp-md) var(--sp-sm);
        width: 100%;
        text-align: left;
        cursor: pointer;
    }

    /* Desktop-only: hide mobile footer */
    /* (visible only inside nav-is-open context) */

    /* Header logo only (don't affect footer logo) */
    .site-header .logo__img {
        height: 26px;
    }

    .logo__sub {
        display: none;
    }

    /* Footer logo: slightly smaller on mobile but still prominent */
    .footer__brand .logo__img {
        height: 100px;
    }

    /* Hide desktop auth buttons, show lang switcher */
    .header__actions .btn {
        display: none;
    }

    .header__actions .credit-badge,
    .header__actions .user-menu,
    .header__actions .lang-switcher {
        display: flex;
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-xl);
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--sp-sm);
        text-align: center;
    }

    /* Grids */
    .grid--2, .grid--3, .grid--4 {
        grid-template-columns: 1fr;
    }

    /* Page hero */
    .page-hero {
        padding: var(--sp-2xl) 0 var(--sp-xl);
    }

    /* Tables */
    .table-wrapper {
        margin-inline: calc(-1 * var(--sp-lg));
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Hide credit badge text on mobile */
    .credit-badge__value {
        display: none;
    }
}

/* ── Tablet (768px - 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }

    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--sp-sm);
        text-align: center;
    }
}

/* ── Desktop (>= 1024px) ── */
@media (min-width: 1024px) {
    .burger { display: none; }
    .nav__mobile-footer { display: none; }
}

/* ── Hide mobile-only nav footer on tablet+ when nav isn't in mobile mode ── */
@media (min-width: 768px) {
    .nav__mobile-footer { display: none; }
}