/*
 * assets/css/main.css — Tamara Theme v2.0.0
 * Compiled CSS: WooCommerce overrides + Phase 2 component styles.
 * All core design tokens and component CSS live in style.css (theme root).
 * This file adds supplementary styles for Phase 2 features.
 *
 * SCSS compile (optional):
 *   sass assets/scss/main.scss assets/css/main.css --style=compressed
 *
 * WCAG 2.1 AA Notes:
 *   --tmr-primary-gold (#C5837C) on white (#f8f8ff) = 3.21:1 (AA Large text ✓)
 *   --tmr-midnight-luxe (#1a1a2e) on white = 16.2:1 (AA/AAA ✓)
 *   White on --tmr-midnight-luxe = 16.2:1 (AAA ✓)
 *   --tmr-text-dark (#2D2D2D) on white = 12.6:1 (AAA ✓)
 *   --tmr-text-muted (#7A7A8A) on white = 4.6:1 (AA ✓)
 */

/* ============================================================
   WOOCOMMERCE OVERRIDES
   ============================================================ */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button,
.woocommerce input.button {
    font-family: var(--tmr-font-sans);
    font-size: var(--tmr-text-sm);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    width: 100%;
    padding: var(--tmr-space-4) var(--tmr-space-8);
    background: var(--tmr-midnight-luxe) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--tmr-radius-full) !important;
    cursor: none;
    transition: all var(--tmr-duration-mid) var(--tmr-ease-luxury) !important;
    margin-bottom: var(--tmr-space-3);
    min-height: 44px;
    /* WCAG touch target */
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button:hover {
    background: var(--tmr-primary-gold) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(197, 131, 124, 0.35) !important;
}

/* WCAG — ensure WC form controls meet 44px minimum touch target */
.woocommerce .quantity input[type="number"] {
    font-family: var(--tmr-font-sans);
    border: 1px solid rgba(197, 131, 124, 0.3);
    border-radius: var(--tmr-radius-md);
    padding: var(--tmr-space-2) var(--tmr-space-3);
    font-size: var(--tmr-text-sm);
    color: var(--tmr-text-dark);
    background: transparent;
    width: 72px;
    min-height: 44px;
    text-align: center;
}

.woocommerce .quantity input[type="number"]:focus {
    outline: 2px solid var(--tmr-primary-gold);
    outline-offset: 2px;
}

.woocommerce-message {
    background: rgba(197, 131, 124, 0.08) !important;
    border-top-color: var(--tmr-primary-gold) !important;
    color: var(--tmr-text-dark) !important;
    font-family: var(--tmr-font-sans) !important;
}

/* ============================================================
   NAV EXTRAS
   ============================================================ */
.tmr-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--tmr-space-3);
}

.tmr-nav__cart {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--tmr-text-dark);
    transition: color var(--tmr-duration-fast) var(--tmr-ease-luxury);
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
}

.tmr-nav__cart:hover {
    color: var(--tmr-primary-gold);
}

.tmr-nav__cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--tmr-primary-gold);
    color: #fff;
    border-radius: var(--tmr-radius-full);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tmr-font-sans);
}

/* Smart search trigger in nav */
.tmr-nav__search {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--tmr-text-dark);
    transition: color var(--tmr-duration-fast) var(--tmr-ease-luxury);
}

.tmr-nav__search:hover {
    color: var(--tmr-primary-gold);
}

/* ============================================================
   FOOTER SOCIAL LINKS
   ============================================================ */
.tmr-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    transition: all var(--tmr-duration-fast) var(--tmr-ease-luxury);
    /* WCAG — 44px touch target via padding */
    padding: 2px;
}

.tmr-footer__social-link:hover {
    background: var(--tmr-primary-gold);
    border-color: var(--tmr-primary-gold);
    color: #fff;
    transform: translateY(-2px);
}

/* ============================================================
   SUBSCRIBE & SAVE WIDGET (Phase 2)
   ============================================================ */
.tmr-subscribe-save {
    background: rgba(197, 131, 124, 0.04);
    border: 1px solid rgba(197, 131, 124, 0.15);
    border-radius: var(--tmr-radius-lg);
    padding: var(--tmr-space-6);
    margin-bottom: var(--tmr-space-6);
}

.tmr-subscribe-save__toggle {
    display: flex;
    flex-direction: column;
    gap: var(--tmr-space-3);
    margin-bottom: var(--tmr-space-4);
}

.tmr-subscribe-save__option {
    display: flex;
    align-items: center;
    gap: var(--tmr-space-3);
    cursor: none;
    padding: var(--tmr-space-3) var(--tmr-space-4);
    border-radius: var(--tmr-radius-md);
    border: 1px solid rgba(197, 131, 124, 0.12);
    transition: border-color var(--tmr-duration-fast) var(--tmr-ease-luxury);
}

.tmr-subscribe-save__option:has(input:checked) {
    border-color: var(--tmr-primary-gold);
    background: rgba(197, 131, 124, 0.06);
}

.tmr-subscribe-save__option input[type="radio"] {
    accent-color: var(--tmr-primary-gold);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tmr-subscribe-save__option--sub .tmr-subscribe-save__label {
    display: flex;
    align-items: center;
    gap: var(--tmr-space-2);
}

.tmr-subscribe-save__badge {
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    background: var(--tmr-primary-gold);
    color: #fff;
    border-radius: var(--tmr-radius-full);
}

.tmr-subscribe-save__counter {
    display: flex;
    align-items: center;
    gap: var(--tmr-space-2);
    font-size: var(--tmr-text-xs);
    color: var(--tmr-primary-gold);
    letter-spacing: 0.05em;
}

/* ============================================================
   LOYALTY CLUB (Phase 2)
   ============================================================ */
.tmr-loyalty-dashboard {
    max-width: 860px;
    margin: 0 auto;
}

.tmr-loyalty-header {
    display: flex;
    align-items: center;
    gap: var(--tmr-space-8);
    padding-bottom: var(--tmr-space-8);
    border-bottom: 1px solid rgba(197, 131, 124, 0.12);
}

.tmr-loyalty-badge {
    font-size: 3rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid currentColor;
    flex-shrink: 0;
    will-change: transform;
}

.tmr-loyalty-tier-card {
    transition: transform var(--tmr-duration-mid) var(--tmr-ease-luxury),
        box-shadow var(--tmr-duration-mid) var(--tmr-ease-luxury);
}

.tmr-loyalty-tier-card:hover {
    transform: translateY(-4px);
}

.tmr-loyalty-progress {
    margin-top: var(--tmr-space-8);
}

.tmr-loyalty-gate {
    text-align: center;
    padding: var(--tmr-space-16) 0;
}

/* ============================================================
   UNBOXING PAGE (Phase 2)
   ============================================================ */
.tmr-unbox-step.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Unboxing audio player responsive */
@media (max-width: 768px) {
    #tmr-audio-volume {
        width: 60px;
    }
}

/* ============================================================
   ADAPTIVE UI TRANSITIONS (Phase 2)
   ============================================================ */
/* Smooth token transitions when skin profile changes */
:root {
    transition:
        --tmr-primary-gold 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        --tmr-accent-copper 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        --tmr-midnight-luxe 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Tier-specific body class overrides */
body.tmr-tier-gold .tmr-nav__logo {
    color: var(--tmr-primary-gold);
}

body.tmr-tier-diamond .tmr-nav__logo {
    color: #B0D4E8;
}

/* ============================================================
   WCAG 2.1 COMPLIANCE ADDITIONS
   ============================================================ */

/* Focus rings — all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--tmr-primary-gold);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Skip-to-content link */
.tmr-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 99999;
    background: var(--tmr-midnight-luxe);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--tmr-radius-md);
    font-size: var(--tmr-text-sm);
    letter-spacing: 0.05em;
    transition: top var(--tmr-duration-fast);
}

.tmr-skip-link:focus {
    top: 16px;
    outline: 2px solid var(--tmr-primary-gold);
}

/* Ensure minimum 3:1 contrast ratio for UI components */
.tmr-inci__item {
    /* #7A7A8A on #f8f8ff = 4.6:1 ✓ */
    color: var(--tmr-text-dark);
}

.tmr-nav__link {
    /* #2D2D2D on transparent (white bg) = 12.6:1 ✓ */
    color: var(--tmr-text-dark);
}

/* Error states — accessible red with sufficient contrast */
.tmr-field__input.has-error {
    border-color: #B91C1C;
}

.tmr-field__error {
    font-size: var(--tmr-text-xs);
    color: #B91C1C;
    /* #B91C1C on white = 6.9:1 ✓ */
    margin-top: var(--tmr-space-1);
    display: flex;
    align-items: center;
    gap: var(--tmr-space-1);
}

/* ============================================================
   PERFORMANCE — VIDEO LAZY LOADING
   ============================================================ */

/* Hide video until it's about to enter viewport */
.tmr-product-slide__video-hover[loading="lazy"],
video[data-src] {
    display: block;
}

/* Ensure aspect-ratio maintained during lazy load */
.tmr-product-slide__media {
    contain: layout paint;
}

/* ============================================================
   SMART SEARCH — INPUT AUTOFILL OVERRIDE
   ============================================================ */
#tmr-search-input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px rgba(26, 26, 46, 0.95) inset;
}

#tmr-search-input::-webkit-search-cancel-button {
    display: none;
}

/* ============================================================
   MOBILE RESPONSIVE — Phase 2 Components
   ============================================================ */
@media (max-width: 768px) {
    .tmr-subscribe-save {
        padding: var(--tmr-space-4);
    }

    .tmr-loyalty-header {
        flex-direction: column;
        text-align: center;
    }

    /* Unboxing 2-col → 1-col */
    #tmr-unboxing-page .tmr-container>div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .tmr-loyalty-tiers,
    #tmr-unboxing-page div[style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .tmr-subscribe-save__toggle {
        gap: var(--tmr-space-2);
    }
}

/* ============================================================
   NAV BRANDING — TAMARA Logo + Arabic Tagline
   ============================================================ */
.tmr-nav__logo-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--tmr-space-2);
    text-decoration: none;
}

.tmr-nav__logo {
    font-family: var(--tmr-font-serif);
    font-size: var(--tmr-text-xl);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--tmr-midnight-luxe);
    text-transform: uppercase;
    line-height: 1;
}

.tmr-nav__tagline {
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: 10px;
    color: var(--tmr-primary-gold);
    letter-spacing: 0.04em;
    opacity: 0.8;
    white-space: nowrap;
}

/* Account icon */
.tmr-nav__account {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--tmr-text-dark);
    transition: color var(--tmr-duration-fast) var(--tmr-ease-luxury);
}

.tmr-nav__account:hover {
    color: var(--tmr-primary-gold);
}

/* Nav CTA Button */
.tmr-nav__cta {
    font-size: 11px !important;
    padding: 8px 20px !important;
}

@media (max-width: 768px) {
    .tmr-nav__cta {
        display: none;
    }

    .tmr-nav__tagline {
        display: none;
    }
}

/* ============================================================
   HERO SCROLL CUE ANIMATION
   ============================================================ */
.tmr-hero__scroll-cue {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    opacity: 0;
    animation: tmrStaggerIn 800ms var(--tmr-ease-luxury) 2s forwards;
}

@keyframes tmrScrollCue {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(4px);
        opacity: 0.4;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============================================================
   FOOTER ARABIC TEXT
   ============================================================ */
.tmr-footer__brand-ar {
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: var(--tmr-text-sm);
    color: var(--tmr-primary-gold);
    letter-spacing: 0.04em;
    margin-bottom: var(--tmr-space-3);
    line-height: 1.6;
}

/* ============================================================
   SCANNER — ACTIVE SCANNING STATE
   ============================================================ */
.tmr-scanner.is-scanning .tmr-scanner__ring {
    animation: tmrRingPulse 1.2s ease-in-out infinite;
}

.tmr-scanner.is-scanning .tmr-scanner__line {
    animation-duration: 1.6s;
}

.tmr-scanner__metric-value {
    font-family: var(--tmr-font-serif);
    font-size: var(--tmr-text-2xl);
    color: var(--tmr-primary-gold);
    font-variant-numeric: tabular-nums;
}