/**

 * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.

 *

 * Header currency switcher for the Phase 1 multi-currency display layer.

 */



.dna-currency-switcher-wrap {

    display: flex;

    align-items: center;

}



.dna-currency-switcher {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.125rem 0;

}



.dna-currency-switcher__label {

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.02em;

    text-transform: uppercase;

    color: #64748b;

    margin-right: 0.125rem;

}



.dna-currency-switcher__group {

    display: inline-flex;

    align-items: center;

    border: 1px solid #dbe3ea;

    border-radius: 999px;

    background: #f8fafc;

    padding: 2px;

    gap: 2px;

}



.dna-currency-switcher__btn {

    appearance: none;

    border: 0;

    background: transparent;

    color: #475569;

    font-size: 0.75rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.03em;

    padding: 0.4rem 0.65rem;

    border-radius: 999px;

    cursor: pointer;

    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

}



.dna-currency-switcher__btn:hover:not(:disabled) {

    color: #0f172a;

    background: #eef2f7;

}



.dna-currency-switcher__btn.is-active {

    color: #ffffff;

    background: #237465;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);

}



.dna-currency-switcher__btn:disabled {

    opacity: 0.65;

    cursor: wait;

}



.navbar-nav-secondary .dna-currency-switcher-wrap {

    margin-right: 0.5rem;

}



/* ========================================

   Compact navbar currency selector

   Custom popover (no Bootstrap dropdown)

   ======================================== */

#mainNav.navbar-premium .dna-currency-switcher-compact {

    position: relative;

    display: flex;

    align-items: center;

    margin-right: 0.25rem;

}



#mainNav.navbar-premium .dna-currency-switcher-compact__trigger {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.35rem;

    min-width: 72px;

    height: var(--nav-icon-btn-size, 40px);

    padding: 0 0.75rem;

    border: 1px solid rgba(15, 23, 42, 0.1);

    border-radius: 8px;

    background: #ffffff;

    color: var(--nav-text, #1a1a2e);

    font-family: var(--nav-font, 'Josefin Sans', sans-serif);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    line-height: 1;

    cursor: pointer;

    transition:

        background-color 150ms ease,

        border-color 150ms ease,

        color 150ms ease,

        box-shadow 150ms ease;

}



#mainNav.navbar-premium .dna-currency-switcher-compact__trigger:hover,

#mainNav.navbar-premium .dna-currency-switcher-compact__trigger:focus {

    border-color: rgba(35, 116, 101, 0.28);

    background: #ffffff;

    color: var(--nav-text, #1a1a2e);

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);

    outline: none;

}



#mainNav.navbar-premium .dna-currency-switcher-compact.is-open .dna-currency-switcher-compact__trigger {

    border-color: rgba(35, 116, 101, 0.35);

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);

}



#mainNav.navbar-premium .dna-currency-switcher-compact__trigger:focus-visible {

    outline: 2px solid rgba(35, 116, 101, 0.2);

    outline-offset: 2px;

}



#mainNav.navbar-premium .dna-currency-switcher-compact__chevron {

    font-size: 0.625rem;

    color: var(--nav-text-muted, #64748b);

    transition: transform 150ms ease, color 150ms ease;

}



#mainNav.navbar-premium .dna-currency-switcher-compact.is-open .dna-currency-switcher-compact__chevron {

    transform: rotate(180deg);

    color: var(--nav-accent, #237465);

}



#mainNav.navbar-premium .dna-currency-switcher-compact__panel {

    position: absolute;

    top: calc(100% + 6px);

    right: 0;

    left: auto;

    z-index: 1100;

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

    min-width: 100%;

    padding: 0.35rem;

    border: 1px solid rgba(15, 23, 42, 0.1);

    border-radius: 10px;

    background: #ffffff;

    box-shadow:

        0 4px 6px rgba(15, 23, 42, 0.04),

        0 12px 24px rgba(15, 23, 42, 0.08);

}



#mainNav.navbar-premium .dna-currency-switcher-compact__panel[hidden] {

    display: none !important;

}



#mainNav.navbar-premium .dna-currency-switcher-compact__option {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    width: 100%;

    padding: 0.55rem 0.65rem;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--nav-text, #1a1a2e);

    font-family: var(--nav-font, 'Josefin Sans', sans-serif);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    line-height: 1;

    text-align: left;

    cursor: pointer;

    transition:

        background-color 150ms ease,

        color 150ms ease;

}



#mainNav.navbar-premium .dna-currency-switcher-compact__option:hover:not(:disabled) {

    background: rgba(35, 116, 101, 0.06);

    color: var(--nav-accent, #237465);

}



#mainNav.navbar-premium .dna-currency-switcher-compact__option.is-active {

    background: var(--nav-accent-light, rgba(35, 116, 101, 0.08));

    color: var(--nav-accent, #237465);

}



#mainNav.navbar-premium .dna-currency-switcher-compact__option-check {

    font-size: 0.625rem;

    opacity: 0;

    transform: scale(0.85);

    transition: opacity 150ms ease, transform 150ms ease;

}



#mainNav.navbar-premium .dna-currency-switcher-compact__option.is-active .dna-currency-switcher-compact__option-check {

    opacity: 1;

    transform: scale(1);

}



#mainNav.navbar-premium .dna-currency-switcher-compact__option:disabled {

    opacity: 0.65;

    cursor: wait;

}



#mainNav.navbar-premium--dark .dna-currency-switcher-compact__trigger {

    border-color: rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.06);

    color: rgba(255, 255, 255, 0.88);

}



#mainNav.navbar-premium--dark .dna-currency-switcher-compact__trigger:hover,

#mainNav.navbar-premium--dark .dna-currency-switcher-compact__trigger:focus,

#mainNav.navbar-premium--dark .dna-currency-switcher-compact.is-open .dna-currency-switcher-compact__trigger {

    border-color: rgba(255, 255, 255, 0.22);

    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

}



#mainNav.navbar-premium--dark .dna-currency-switcher-compact__chevron {

    color: rgba(255, 255, 255, 0.6);

}



#mainNav.navbar-premium--dark .dna-currency-switcher-compact.is-open .dna-currency-switcher-compact__chevron {

    color: #ffffff;

}



#mainNav.navbar-premium--dark .dna-currency-switcher-compact__panel {

    border-color: rgba(255, 255, 255, 0.12);

    background: rgba(26, 26, 46, 0.98);

    box-shadow:

        0 4px 6px rgba(0, 0, 0, 0.2),

        0 12px 24px rgba(0, 0, 0, 0.35);

}



#mainNav.navbar-premium--dark .dna-currency-switcher-compact__option {

    color: rgba(255, 255, 255, 0.88);

}



#mainNav.navbar-premium--dark .dna-currency-switcher-compact__option:hover:not(:disabled) {

    background: rgba(255, 255, 255, 0.08);

    color: #ffffff;

}



#mainNav.navbar-premium--dark .dna-currency-switcher-compact__option.is-active {

    background: rgba(31, 122, 104, 0.35);

    color: #ffffff;

}



/* ========================================

   Report Dark Variant (obsidian + gold ancestry reports)

   Mirrors the .navbar-premium--dark block above but uses the report-dark

   navbar's own custom properties (see navbar-premium.css

   `#mainNav.navbar-premium--report-dark`) so the compact switcher matches

   each report's gold accent instead of falling back to the light theme

   default white pill.

   ======================================== */



#mainNav.navbar-premium--report-dark .dna-currency-switcher-compact__trigger {

    border-color: var(--navbar-border, rgba(201, 160, 48, 0.18));

    background: rgba(255, 255, 255, 0.06);

    color: var(--navbar-text, #E8E4DC);

}



#mainNav.navbar-premium--report-dark .dna-currency-switcher-compact__trigger:hover,

#mainNav.navbar-premium--report-dark .dna-currency-switcher-compact__trigger:focus,

#mainNav.navbar-premium--report-dark .dna-currency-switcher-compact.is-open .dna-currency-switcher-compact__trigger {

    border-color: var(--navbar-accent-medium, rgba(201, 160, 48, 0.28));

    background: var(--navbar-accent-light, rgba(201, 160, 48, 0.16));

    color: #ffffff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

}



#mainNav.navbar-premium--report-dark .dna-currency-switcher-compact__chevron {

    color: var(--navbar-text-muted, rgba(232, 228, 220, 0.72));

}



#mainNav.navbar-premium--report-dark .dna-currency-switcher-compact.is-open .dna-currency-switcher-compact__chevron {

    color: var(--navbar-accent, #C9A030);

}



#mainNav.navbar-premium--report-dark .dna-currency-switcher-compact__panel {

    border-color: var(--navbar-border, rgba(201, 160, 48, 0.18));

    background: var(--navbar-bg-scrolled, rgba(10, 10, 11, 0.94));

    box-shadow:

        0 4px 6px rgba(0, 0, 0, 0.3),

        0 12px 24px rgba(0, 0, 0, 0.45);

}



#mainNav.navbar-premium--report-dark .dna-currency-switcher-compact__option {

    color: var(--navbar-text, #E8E4DC);

}



#mainNav.navbar-premium--report-dark .dna-currency-switcher-compact__option:hover:not(:disabled) {

    background: rgba(255, 255, 255, 0.08);

    color: #ffffff;

}



#mainNav.navbar-premium--report-dark .dna-currency-switcher-compact__option.is-active {

    background: var(--navbar-accent-medium, rgba(201, 160, 48, 0.28));

    color: #ffffff;

}



@media (max-width: 991.98px) {

    .navbar-nav-secondary .dna-currency-switcher-wrap {

        margin: 0.5rem 0 0.75rem;

        width: 100%;

        justify-content: flex-start;

    }



    .dna-currency-switcher__label {

        display: inline !important;

    }

}



/* ========================================

   Dark variant (scoped to dark navbar only)

   Used by _Layout_PublicHome_v2.cshtml via `navbar-premium--dark`.

   ======================================== */

#mainNav.navbar-premium--dark .dna-currency-switcher__label {

    color: rgba(255, 255, 255, 0.6);

}



#mainNav.navbar-premium--dark .dna-currency-switcher__group {

    background: rgba(255, 255, 255, 0.06);

    border-color: rgba(255, 255, 255, 0.12);

}



#mainNav.navbar-premium--dark .dna-currency-switcher__btn {

    color: rgba(255, 255, 255, 0.7);

}



#mainNav.navbar-premium--dark .dna-currency-switcher__btn:hover:not(:disabled) {

    color: #ffffff;

    background: rgba(255, 255, 255, 0.06);

}



#mainNav.navbar-premium--dark .dna-currency-switcher__btn.is-active {

    color: #ffffff;

    background: #1f7a68;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

}



/* ========================================

   Mobile slide-in panel placement.

   Used by _Layout_2025.cshtml and _Layout_PublicHome_v2.cshtml when the

   custom mobile nav panel (#mobileNavPanel) is open. Renders the switcher

   below the header and above the navigation list.

   ======================================== */

.mobile-nav-currency-switcher {

    padding: 0.75rem 1rem;

    border-bottom: 1px solid rgba(15, 23, 42, 0.08);

    background: rgba(255, 255, 255, 0.6);

}



.mobile-nav-currency-switcher .dna-currency-switcher-wrap {

    width: 100%;

    margin: 0;

}



.mobile-nav-currency-switcher .dna-currency-switcher {

    width: 100%;

    justify-content: space-between;

    gap: 0.75rem;

}



.mobile-nav-currency-switcher .dna-currency-switcher__label {

    display: inline !important;

    color: #1f2937;

    font-size: 0.8125rem;

    letter-spacing: 0.04em;

}



.mobile-nav-currency-switcher .dna-currency-switcher__group {

    flex: 0 0 auto;

    background: #ffffff;

    border-color: rgba(15, 23, 42, 0.12);

}



.mobile-nav-currency-switcher .dna-currency-switcher__btn {

    font-size: 0.8125rem;

    padding: 0.5rem 0.9rem;

}



.mobile-nav-currency-switcher .dna-currency-switcher__btn.is-active {

    color: #ffffff;

}