/*
 * Nexa Accessibility Max Score V1
 * Runtime accessibility hardening for the public dark theme.
 * Loaded last so these rules can safely correct contrast/touch-target issues
 * without rewriting the existing theme bundles.
 */

:root {
    --nexa-a11y-text: #eef0f5;
    --nexa-a11y-muted: #cfd3dd;
    --nexa-a11y-subtle: #bcc2cf;
    --nexa-a11y-link: #c6baff;
    --nexa-a11y-focus: #d7d0ff;
}

body.nexa-public-ui-v3 {
    --body-color: var(--nexa-a11y-text);
    --nexa-text: var(--nexa-a11y-text);
    --nexa-muted: var(--nexa-a11y-muted);
    color: var(--nexa-a11y-muted);
}

/* Strong keyboard focus that clears WCAG non-text contrast expectations. */
body.nexa-public-ui-v3 :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--nexa-a11y-focus) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px #171a2b !important;
}

/* Skip link is invisible until a keyboard user needs it. */
.nexa-a11y-skip-link {
    position: fixed;
    z-index: 20000;
    top: 10px;
    left: 10px;
    padding: 10px 14px;
    border: 2px solid #fff;
    border-radius: 8px;
    color: #111522 !important;
    background: #fff !important;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    transform: translateY(-180%);
    transition: transform 120ms ease;
}

.nexa-a11y-skip-link:focus,
.nexa-a11y-skip-link:focus-visible {
    transform: translateY(0);
}

/*
 * Contrast hardening.
 * The original theme uses multiple 24%-56% white text values on dark panels.
 * These selectors cover the public/home components that Lighthouse can see.
 */
body.nexa-public-ui-v3 p,
body.nexa-public-ui-v3 .nexa-admin-sync-description,
body.nexa-public-ui-v3 .nexa-admin-sync-trending__header p,
body.nexa-public-ui-v3 .nexa-premium-why__item p,
body.nexa-public-ui-v3 .nexa-trustpilot-v1__content > p,
body.nexa-public-ui-v3 .nexa-trustpilot-v1__card p,
body.nexa-public-ui-v3 .nexa-trustpilot-v1__note,
body.nexa-public-ui-v3 .copyright-inner p {
    color: var(--nexa-a11y-muted) !important;
}

body.nexa-public-ui-v3 :where(
    .reviews,
    .nexa-shop-path-card__label,
    .nexa-premium-hero__assurances > span,
    .nexa-premium-trending__kicker,
    .nexa-premium-product__type,
    .nexa-premium-product__meta,
    .nexa-premium-trustbar__item small,
    .nexa-premium-why__badge small,
    .nexa-trust-strip__item small,
    .nexa-order-confirmation__copy small
) {
    color: var(--nexa-a11y-subtle) !important;
}

body.nexa-public-ui-v3 .nexa-premium-product__meta .reviews,
body.nexa-public-ui-v3 .nexa-premium-product__meta .reviews span {
    color: var(--nexa-a11y-subtle) !important;
}

/* Purple is excellent as a button background, but the original purple text is
   below 4.5:1 on the darkest surfaces. Use a lighter text-only purple. */
body.nexa-public-ui-v3 :where(
    .reviews .active,
    .desktop-view-wrapper .nav-link.active,
    .widget-link.active,
    .text-primary
) {
    color: var(--nexa-a11y-link) !important;
}

/* Form helper/placeholder text: keep it readable without mistaking it for data. */
body.nexa-public-ui-v3 :where(.form-control, .form-select)::placeholder,
body.nexa-public-ui-v3 .desktop-view .search-box2 .form-control::placeholder {
    color: #b9bfca !important;
    opacity: 1 !important;
}

/* Links embedded inside prose must not rely on color alone. */
body.nexa-public-ui-v3 :where(p, .nexa-legal-content, .contact-item) a:not(.cmn-btn):not(.kew-btn):not([class*="button"]) {
    text-decoration-line: underline !important;
    text-decoration-thickness: 0.11em !important;
    text-underline-offset: 0.18em !important;
    text-decoration-skip-ink: auto;
}

body.nexa-public-ui-v3 :where(p, .nexa-legal-content, .contact-item) a:hover {
    text-decoration-thickness: 0.16em !important;
}

/* Touch targets: interactive icon controls and carousel controls get a 44px box. */
body.nexa-public-ui-v3 :where(
    .header-top-section .social-box a,
    .footer-section .social-box a,
    .lang-currency-btn,
    .search-btn2,
    .shopping-cart > button,
    .shopping-cart .dropdown-toggle,
    .cmn-btn-close,
    .nexa-mobile-header-v10__action,
    .nexa-mobile-header-v10__menu-button,
    .nexa-mobile-drawer-v10__close,
    .owl-nav button,
    .swiper-button-next,
    .swiper-button-prev
) {
    min-width: 44px !important;
    min-height: 44px !important;
}

body.nexa-public-ui-v3 .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

body.nexa-public-ui-v3 .owl-dots .owl-dot,
body.nexa-public-ui-v3 .swiper-pagination-bullet {
    position: relative;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

body.nexa-public-ui-v3 .owl-dots .owl-dot > span {
    width: 10px !important;
    height: 10px !important;
    margin: 0 !important;
    border-radius: 999px;
}

/* Swiper uses the bullet itself as the visual dot. Recreate the small visual
   dot while leaving the actual hit area at 44x44. */
body.nexa-public-ui-v3 .swiper-pagination-bullet::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
}

body.nexa-public-ui-v3 .swiper-pagination-bullet-active::after {
    background: #fff;
}

/* Prevent a native button reset from changing the existing account avatar UI. */
body.nexa-public-ui-v3 button.profile {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
}

/* Heading replacements retain the old visual styling when semantic tags change. */
body.nexa-public-ui-v3 .nexa-a11y-cart-title {
    color: var(--nexa-text, #fff);
    font: inherit;
    font-weight: 700;
}

body.nexa-public-ui-v3 .single-countdown .nexa-a11y-countdown-value {
    display: block;
    color: rgb(var(--heading-color, 255, 255, 255));
    font-family: var(--heading-font, sans-serif);
    font-size: inherit;
    font-weight: 700;
    line-height: 1.2;
}

/* Respect reduced-motion preferences; also prevents focus being lost to motion. */
@media (prefers-reduced-motion: reduce) {
    body.nexa-public-ui-v3 *,
    body.nexa-public-ui-v3 *::before,
    body.nexa-public-ui-v3 *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* NEXA_ACCESSIBILITY_MAX_SCORE_V1_HOTFIX_1:LAYOUT_GUARD
 * The legacy theme has an unscoped docs rule: main { width: calc(100% - 300px); margin-left: auto; }.
 * V1's accessibility landmark exposed that old rule on public pages and visually shifted content right.
 * These selectors only neutralize that legacy rule for V1-created landmarks; no section positioning is redesigned.
 */
body.nexa-public-ui-v3 main#main-content.nexa-home-main,
body.nexa-public-ui-v3 main#main-content.nexa-a11y-runtime-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* NEXA_ACCESSIBILITY_MAX_SCORE_V1_HOTFIX_2:CONTRAST_100
 * Lighthouse follow-up: only the three remaining contrast findings are changed.
 * This block intentionally changes color/decoration only. It does not alter
 * width, height, spacing, positioning, display, typography size, or layout.
 */
.copyright-section,
.copyright-section .copyright-inner,
.copyright-section .copyright-inner p,
.copyright-section .copyright-inner p > i {
    color: #e2e5ed !important;
}

.copyright-section a.highlight,
.copyright-section a.highlight:visited {
    color: #d7d0ff !important;
    text-decoration-line: underline !important;
    text-decoration-thickness: 0.11em !important;
    text-underline-offset: 0.18em !important;
}

.copyright-section a.highlight:hover,
.copyright-section a.highlight:focus-visible {
    color: #e7e3ff !important;
}

.nexa-cookie-banner .nexa-cookie-banner__actions .cmn-btn2 {
    color: #e7e3ff !important;
}

.nexa-cookie-banner .nexa-cookie-banner__actions .cmn-btn2:hover,
.nexa-cookie-banner .nexa-cookie-banner__actions .cmn-btn2:focus-visible {
    color: #ffffff !important;
}