/**
 * Tax3S — Mobile UI (≤767px): tokens, cards, chips, motion
 * Load via _ThemeStyles after tax3s-controls.css
 */

:root {
    --tx-mobile-card-radius: 14px;
    --tx-mobile-shadow: 0 4px 18px rgba(15, 39, 64, 0.08);
    --tx-mobile-shadow-lg: 0 10px 28px rgba(15, 39, 64, 0.12);
    --tx-mobile-tap-scale: 0.98;
    --tx-mobile-stagger-step: 55ms;
    --tx-mobile-reveal-dur: 0.45s;
    --tx-mobile-accent-line: linear-gradient(
        90deg,
        var(--tx-primary, #6d28d9) 0%,
        var(--tx-primary-light, #a78bfa) 100%
    );
}

@keyframes tx-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tx-shine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Ẩn tải app Windows — không cài được trên điện thoại / tablet */
@media (max-width: 1024px) {
    .sl-app-downloads,
    .tc-download-app-card,
    .tx-support-section {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .nav-link-download-app,
    body.sl-site--phone-feed .tx-trial-fab,
    body.sl-site--phone-feed #txTrialFab,
    body.sl-site--launcher.sl-site--phone-feed .tx-trial-fab {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .tx-mobile-card {
        border-radius: var(--tx-mobile-card-radius);
        background: var(--tx-surface, #fff);
        border: 1px solid var(--tx-border, #dde3ea);
        box-shadow: var(--tx-mobile-shadow);
        position: relative;
        overflow: hidden;
    }

    .tx-mobile-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--tx-mobile-accent-line);
        pointer-events: none;
    }

    .tx-mobile-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        font-size: var(--tx-fs-sm, 0.8125rem);
        font-weight: 650;
        line-height: 1.3;
        background: var(--tx-primary-soft, rgba(109, 40, 217, 0.12));
        color: var(--tx-primary-dark, #5b21b6);
        border: 1px solid color-mix(in srgb, var(--tx-primary, #6d28d9) 22%, transparent);
        white-space: nowrap;
    }

    .tx-mobile-btn-row {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .tx-mobile-btn-row > .btn,
    .tx-mobile-btn-row > .sl-btn,
    .tx-mobile-btn-row > a.btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    [data-tx-reveal] {
        opacity: 0;
        transform: translateY(12px);
        transition:
            opacity var(--tx-mobile-reveal-dur) ease,
            transform var(--tx-mobile-reveal-dur) ease;
        will-change: opacity, transform;
    }

    [data-tx-reveal].is-revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .tx-mobile-stagger > *:nth-child(1) { animation-delay: calc(var(--tx-mobile-stagger-step) * 0); }
    .tx-mobile-stagger > *:nth-child(2) { animation-delay: calc(var(--tx-mobile-stagger-step) * 1); }
    .tx-mobile-stagger > *:nth-child(3) { animation-delay: calc(var(--tx-mobile-stagger-step) * 2); }
    .tx-mobile-stagger > *:nth-child(4) { animation-delay: calc(var(--tx-mobile-stagger-step) * 3); }
    .tx-mobile-stagger > *:nth-child(5) { animation-delay: calc(var(--tx-mobile-stagger-step) * 4); }
    .tx-mobile-stagger > *:nth-child(6) { animation-delay: calc(var(--tx-mobile-stagger-step) * 5); }
    .tx-mobile-stagger > *:nth-child(7) { animation-delay: calc(var(--tx-mobile-stagger-step) * 6); }
    .tx-mobile-stagger > *:nth-child(8) { animation-delay: calc(var(--tx-mobile-stagger-step) * 7); }
    .tx-mobile-stagger > *:nth-child(9) { animation-delay: calc(var(--tx-mobile-stagger-step) * 8); }
    .tx-mobile-stagger > *:nth-child(n+10) { animation-delay: calc(var(--tx-mobile-stagger-step) * 9); }

    .tx-mobile-stagger > * {
        animation: tx-fade-in-up 0.5s ease both;
    }

    body.tx-site.tx-mobile-scrolled .sl-header,
    body.sl-site.tx-mobile-scrolled .sl-header {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        background: color-mix(in srgb, var(--tx-surface, #fff) 88%, transparent);
        box-shadow: 0 4px 18px rgba(15, 39, 64, 0.1);
    }

    body.tx-site .sl-footer {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    [data-tx-reveal],
    [data-tx-reveal].is-revealed,
    .tx-mobile-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

html[data-theme="dark"] {
    --tx-mobile-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    --tx-mobile-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.45);
}