/* JR_PREFS_SELECT_v1: selected language is obvious. Cookie list stays out of the way. */
.jr-prefs-item.is-active,
html[data-jr-theme="spotify"] .jr-prefs-item.is-active,
html[data-jr-theme="lake-dark"] .jr-prefs-item.is-active,
html[data-jr-theme="light"] .jr-prefs-item.is-active {
    background: #FF9709 !important;
    border: 2px solid #FFAE23 !important;
    box-shadow: none !important;
    color: #1A1008 !important;
}

.jr-prefs-item.is-active .jr-prefs-item-text,
.jr-prefs-item.is-active .jr-prefs-item-text strong,
.jr-prefs-item.is-active .jr-prefs-item-text small,
.jr-prefs-item.is-active .jr-prefs-name,
html[data-jr-theme="spotify"] .jr-prefs-item.is-active strong,
html[data-jr-theme="spotify"] .jr-prefs-item.is-active .jr-prefs-item-text small {
    color: #1A1008 !important;
}

.jr-prefs-item.is-active .jr-prefs-check {
    color: #1A1008 !important;
    font-size: 18px !important;
    font-weight: 900;
}

.jr-prefs-item.is-picking {
    background: #FFAE23 !important;
    border-color: #FF9709 !important;
}

.jr-prefs-item:active {
    transform: scale(0.99);
}

.jr-prefs-code-chip {
    flex-shrink: 0;
    min-width: 2.4em;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
}

.jr-prefs-item.is-active .jr-prefs-code-chip {
    color: #1A1008 !important;
    background: rgba(26, 16, 8, 0.12) !important;
}

/* Cookie language menu is not the site picker. Hide it while prefs is open. */
body.jr-prefs-scroll-lock .jr-cc-lang,
body.jr-prefs-scroll-lock .jr-cc-lang-menu {
    display: none !important;
}

/* Cookie list, when it is the only picker, still needs a hard selected state. */
.jr-cc-lang-menu button[aria-selected="true"] {
    background: #FF9709 !important;
    color: #1A1008 !important;
}
.jr-cc-lang-menu button[aria-selected="true"] .jr-cc-lang-native,
.jr-cc-lang-menu button[aria-selected="true"] .jr-cc-lang-code {
    color: #1A1008 !important;
}
.jr-cc-lang-menu button[aria-selected="true"]::after {
    color: #1A1008 !important;
}

/* After a tap, the list locks until the page changes. */
.jr-prefs-panel.is-switching .jr-prefs-body,
.jr-prefs-panel.is-switching .jr-prefs-tabs,
.jr-prefs-panel.is-switching .jr-prefs-list,
.jr-prefs-panel.is-switching .jr-prefs-item,
body.jr-prefs-switching .jr-prefs-item,
body.jr-prefs-switching .jr-prefs-tab,
body.jr-prefs-switching .jr-prefs-search,
body.jr-prefs-switching .jr-prefs-close {
    pointer-events: none !important;
}

.jr-prefs-switching-hold {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #FF9709;
    color: #1A1008;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.jr-prefs-switching-name {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.jr-prefs-switching-bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: rgba(26, 16, 8, 0.18);
    overflow: hidden;
    position: relative;
}

.jr-prefs-switching-bar::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    background: #1A1008;
    animation: jrPrefsSwitchBar 0.9s ease-in-out infinite;
}

@keyframes jrPrefsSwitchBar {
    0% { transform: translateX(-20%); }
    100% { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
    .jr-prefs-switching-bar::after { animation: none; width: 100%; }
}