/* ================================================================
   HELSAN — DARK MODE
   Rebased onto the `--hs-*` token vocabulary with a dark-green palette.
   Honors `[data-theme="dark"]` (manual toggle) and `prefers-color-scheme`.
   ================================================================ */

/* ----- Shared dark palette ----- */

:root[data-theme="dark"] {
    --hs-bg: #0e1712;
    --hs-card: #16241b;
    --hs-border: rgba(255, 255, 255, .08);
    --hs-black: #f2f7f3;
    --hs-text: #dfe8e1;
    --hs-text-2: #9fb0a4;
    --hs-text-3: #7d8d82;
    --hs-shadow-xs: 0 2px 8px rgba(0, 0, 0, .3);
    --hs-shadow-sm: 0 5px 18px rgba(0, 0, 0, .4);
    --hs-shadow: 0 12px 35px rgba(0, 0, 0, .5);
    --hs-shadow-lg: 0 25px 70px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --hs-bg: #0e1712;
        --hs-card: #16241b;
        --hs-border: rgba(255, 255, 255, .08);
        --hs-black: #f2f7f3;
        --hs-text: #dfe8e1;
        --hs-text-2: #9fb0a4;
        --hs-text-3: #7d8d82;
        --hs-shadow-xs: 0 2px 8px rgba(0, 0, 0, .3);
        --hs-shadow-sm: 0 5px 18px rgba(0, 0, 0, .4);
        --hs-shadow: 0 12px 35px rgba(0, 0, 0, .5);
        --hs-shadow-lg: 0 25px 70px rgba(0, 0, 0, .6);
    }
}

/* ----- Component overrides (both triggers) ----- */

[data-theme="dark"] body {
    background:
        radial-gradient(circle at 100% 0%, rgba(68, 151, 97, .08), transparent 420px),
        var(--hs-bg);
    color: var(--hs-text);
}

[data-theme="dark"] .item-product,
[data-theme="dark"] .best-seller-container,
[data-theme="dark"] .price-container,
[data-theme="dark"] .detail-product,
[data-theme="dark"] .description-product,
[data-theme="dark"] .container-comment .list-comment-box .list-comment .item-comment {
    background: var(--hs-card);
    border-color: var(--hs-border);
}

[data-theme="dark"] .navbar-wrapper .header {
    background: rgba(14, 23, 18, .9);
    border-bottom-color: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .navbar-wrapper .navbar {
    background: rgba(18, 30, 23, .92);
}

[data-theme="dark"] .price-add-basket {
    background: rgba(14, 23, 18, .96);
    border-top-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] footer {
    background: linear-gradient(135deg, #08120c 0%, #10241a 50%, #08120c 100%) !important;
}

[data-theme="dark"] .list-basket {
    background: var(--hs-card);
}

[data-theme="dark"] .search-list-box,
[data-theme="dark"] .dropdown-profile {
    background: rgba(22, 36, 27, .98) !important;
}

[data-theme="dark"] .t1-dark-mode-toggle {
    background: var(--hs-card);
    border-color: var(--hs-border);
    color: var(--hs-text);
}

/* Same overrides for OS-level dark preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body {
        background:
            radial-gradient(circle at 100% 0%, rgba(68, 151, 97, .08), transparent 420px),
            var(--hs-bg);
        color: var(--hs-text);
    }

    :root:not([data-theme="light"]) .item-product,
    :root:not([data-theme="light"]) .best-seller-container,
    :root:not([data-theme="light"]) .price-container,
    :root:not([data-theme="light"]) .detail-product,
    :root:not([data-theme="light"]) .description-product,
    :root:not([data-theme="light"]) .container-comment .list-comment-box .list-comment .item-comment {
        background: var(--hs-card);
        border-color: var(--hs-border);
    }

    :root:not([data-theme="light"]) .navbar-wrapper .header {
        background: rgba(14, 23, 18, .9);
        border-bottom-color: rgba(255, 255, 255, .06);
    }

    :root:not([data-theme="light"]) .navbar-wrapper .navbar {
        background: rgba(18, 30, 23, .92);
    }

    :root:not([data-theme="light"]) .price-add-basket {
        background: rgba(14, 23, 18, .96);
        border-top-color: rgba(255, 255, 255, .08);
    }

    :root:not([data-theme="light"]) footer {
        background: linear-gradient(135deg, #08120c 0%, #10241a 50%, #08120c 100%) !important;
    }

    :root:not([data-theme="light"]) .list-basket {
        background: var(--hs-card);
    }

    :root:not([data-theme="light"]) .search-list-box,
    :root:not([data-theme="light"]) .dropdown-profile {
        background: rgba(22, 36, 27, .98) !important;
    }

    :root:not([data-theme="light"]) .t1-dark-mode-toggle {
        background: var(--hs-card);
        border-color: var(--hs-border);
        color: var(--hs-text);
    }
}


/* ================================================================
   FOCUS STATES — Accessibility
   ================================================================ */

:focus-visible {
    outline: 3px solid rgba(68, 151, 97, .4);
    outline-offset: 2px;
}

.btn-add-basket:focus-visible,
.btn-add-price a:focus-visible {
    outline: 3px solid rgba(68, 151, 97, .6);
    outline-offset: 3px;
}


/* ================================================================
   LOADING SPINNER / CHECKMARK
   ================================================================ */

.t1-btn-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hpSpin .8s linear infinite;
}

.t1-btn-checkmark {
    width: 24px;
    height: 24px;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: hpCheckmark .4s var(--hs-ease-out) forwards;
}

@keyframes hpCheckmark {
    to { stroke-dashoffset: 0; }
}


/* ================================================================
   IMAGE LAZY LOAD FADE
   ================================================================ */

img[loading="lazy"] {
    opacity: 0;
    transition: opacity var(--hs-dur) var(--hs-ease-out);
}

img[loading="lazy"].t1-loaded {
    opacity: 1;
}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    img[loading="lazy"] {
        opacity: 1;
        transition: none;
    }
}