/* ==========================================================================
   LANGUAGE SWITCHER
   ==========================================================================
   Two presentations of one control, both rendered by
   resources/views/partials/language-switcher.blade.php.

   Nothing here introduces a new colour, radius or font. The desktop pill
   reuses the same --tk-btn-* tokens as the search / account / cart buttons it
   sits beside, and the dropdown reuses the navbar surface, so the control
   reads as part of the existing bar rather than an addition to it. Light mode
   needs no overrides of its own: every token it uses is already redefined for
   the light theme in tbtk-navbar-redesign.css.
   ========================================================================== */

/* ---- Desktop ------------------------------------------------------------ */

.tk-main-navbar .tk-search-wrap > .tk-lang {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin: 0;
}

.tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 11px;
    border: 0;
    border-radius: var(--tk-btn-radius, 12px);
    background: var(--tk-btn-bg);
    box-shadow: var(--tk-btn-shadow);
    color: var(--tk-nav-icon-fg, #0073FC);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-toggle:hover {
    background: var(--tk-btn-bg-hover);
    transform: translateY(-2px);
}

.tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-toggle svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    stroke: currentColor;
}

/* The two-letter code is the only text in the bar, so it takes the navbar's
   own body font rather than inheriting a heading face. */
.tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-code {
    font-family: var(--tk-body-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
}

/* ---- Desktop dropdown --------------------------------------------------- */

.tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 172px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--tk-btn-radius, 12px);
    background: var(--tk-navbar-bg, #0B0D0D);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);

    /* Hidden without display:none so the panel can fade rather than snap, and
       so its links stay out of the tab order while it is closed. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.tk-main-navbar .tk-search-wrap > .tk-lang.is-open .tk-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

html[data-tk-theme="light"] .tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-menu {
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--tk-nav-ink, #F3F5F7);
    font-family: var(--tk-body-font);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

html[data-tk-theme="light"] .tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-option {
    color: #0A0D0F;
}

.tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-option:hover {
    background: var(--tk-btn-bg-hover);
}

html[data-tk-theme="light"] .tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-option:hover {
    background: rgba(15, 23, 42, 0.05);
}

/* The active language is marked with the brand accent, the same signal the
   rest of the bar uses for a current state. */
.tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-option.is-active {
    color: var(--primary-color, #0073FC);
    font-weight: 700;
}

.tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-option-code {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 3px 5px;
    border: 1px solid currentColor;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    opacity: 0.75;
}

.tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-option.is-active .tk-lang-option-code {
    opacity: 1;
}

/* Below the desktop breakpoint the whole bar is replaced by the mobile
   header, so the desktop control must not linger. */
@media (max-width: 1024px) {
    .tk-main-navbar .tk-search-wrap > .tk-lang {
        display: none;
    }
}

/* ---- Mobile sheet ------------------------------------------------------- */
/* Sits with the other rows in the mobile menu. Two side-by-side targets
   rather than a dropdown: there is room for both, and one tap is fewer than
   two for a control people use once. */

.tk-lang-mobile {
    margin: 14px 0 4px;
}

.tk-lang-mobile-title {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html[data-tk-theme="light"] .tk-lang-mobile-title {
    color: rgba(10, 13, 15, 0.55);
}

.tk-lang-mobile-options {
    display: flex;
    gap: 10px;
}

.tk-lang-mobile-option {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /* 46px keeps the target comfortably tappable; min-width:0 lets the two
       halves shrink together instead of pushing the sheet into a scroll. */
    min-width: 0;
    min-height: 46px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

html[data-tk-theme="light"] .tk-lang-mobile-option {
    border-color: rgba(15, 23, 42, 0.14);
    color: #0A0D0F;
}

.tk-lang-mobile-option.is-active {
    border-color: var(--primary-color, #0073FC);
    background: rgba(0, 115, 252, 0.12);
    color: var(--primary-color, #0073FC);
}

.tk-lang-mobile-code {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.tk-lang-mobile-option.is-active .tk-lang-mobile-code {
    opacity: 1;
}

/* Spanish is the longer word of the two; ellipsis is a guard, not the
   expected state, so the row never breaks the sheet's width. */
.tk-lang-mobile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Inside the rebuilt mobile sheet ------------------------------------ */
/* tbtk-mobile-nav.js moves the switcher out of the legacy menu markup and
   appends it to .tkm-body, below the social row. It arrives with the sheet's
   own spacing around it, so it only needs its bottom margin back. */
.tkm-body .tk-lang-mobile {
    margin: 10px 0 18px;
}

/* ---- Theme picker in the mobile sheet ----------------------------------- */
/* Reuses the language row's look; these are <button>s, so reset UA styles. */
.tk-theme-mobile .tk-lang-mobile-option {
    background: transparent;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}

.tk-theme-mobile .tk-lang-mobile-option.is-active {
    background: rgba(0, 115, 252, 0.12);
}

.tk-theme-mobile .tk-lang-mobile-option svg {
    flex: 0 0 auto;
}