/* ============================================================================
   Design System Tokens — Editorum
   Phase 1.1: CSS custom properties (design tokens) only.
   Components will be added in later phases.
   ============================================================================ */

:root {
    /* ── Colors ─────────────────────────────────────────────────────────── */
    --ds-color-link:        #1a56db;
    --ds-color-link-hover:  #1e429f;
    --ds-color-heading:     #111827;
    --ds-color-body:        #374151;
    --ds-color-muted:       #6B7280;
    --ds-color-secondary:   #9CA3AF;
    --ds-color-bg:          #F9FAFB;
    --ds-color-white:       #ffffff;
    --ds-color-border:      #E5E7EB;
    --ds-color-border-lt:   #F3F4F6;
    --ds-color-border-strong: #D1D5DB;
    --ds-color-surface-soft:  #FAFAFA;

    /* ── Semantic action colors ────────────────────────────────────────── */
    --ds-color-success:       #16a34a;
    --ds-color-success-hover: #15803d;
    --ds-color-danger:        #dc2626;
    --ds-color-danger-hover:  #DC2626;
    --ds-color-warning:       #F59E0B;
    --ds-color-accent:        #3B82F6;
    --ds-color-overlay:       rgba(0, 0, 0, 0.5);

    /* ── Badge semantic colors ──────────────────────────────────────────── */
    --ds-badge-success-bg:      #F0FDF4;
    --ds-badge-success-color:   #15803D;
    --ds-badge-success-border:  #BBF7D0;

    --ds-badge-primary-bg:      #EEF2FF;
    --ds-badge-primary-color:   #4338CA;
    --ds-badge-primary-border:  #C7D2FE;

    --ds-badge-warning-bg:      #FFF7ED;
    --ds-badge-warning-color:   #C2410C;
    --ds-badge-warning-border:  #FED7AA;

    --ds-badge-default-bg:      #F3F4F6;
    --ds-badge-default-color:   #6B7280;
    --ds-badge-default-border:  #E5E7EB;

    --ds-badge-info-bg:         var(--ds-badge-primary-bg);
    --ds-badge-info-color:      var(--ds-badge-primary-color);
    --ds-badge-info-border:     var(--ds-badge-primary-border);

    --ds-badge-rubric-bg:       #F0F9FF;
    --ds-badge-rubric-color:    #0369A1;
    --ds-badge-rubric-border:   #BAE6FD;

    --ds-badge-vak-bg:          var(--ds-badge-success-bg);
    --ds-badge-vak-color:       var(--ds-badge-success-color);
    --ds-badge-vak-border:      var(--ds-badge-success-border);

    --ds-badge-oa-bg:           #FFF7ED;
    --ds-badge-oa-color:        #C2410C;
    --ds-badge-oa-border:       #FED7AA;

    --ds-badge-rinc-bg:         var(--ds-badge-primary-bg);
    --ds-badge-rinc-color:      var(--ds-badge-primary-color);
    --ds-badge-rinc-border:     var(--ds-badge-primary-border);

    --ds-chip-edn-bg:           #F5F3FF;
    --ds-chip-edn-color:        #6D28D9;
    --ds-chip-edn-border:       #DDD6FE;
    --ds-chip-elocator-bg:      #1E40AF;

    --ds-issue-thumb-1:         #DBEAFE;
    --ds-issue-thumb-2:         #D1FAE5;
    --ds-issue-thumb-3:         #FEF3C7;
    --ds-issue-thumb-4:         #EDE9FE;

    /* ── Typography ─────────────────────────────────────────────────────── */
    --ds-font-family:   'Inter', sans-serif;
    --ds-font-mono:     'JetBrains Mono', 'Fira Code', monospace;

    --ds-font-size-xs:  10px;
    --ds-font-size-sm:  12px;
    --ds-font-size-base: 14px;
    --ds-font-size-md:  15px;
    --ds-font-size-lg:  16px;
    --ds-font-size-xl:  18px;
    --ds-font-size-2xl: 20px;
    --ds-font-size-3xl: 22px;
    --ds-font-size-4xl: 28px;

    /* ── Spacing (4px grid) ─────────────────────────────────────────────── */
    --ds-space-1:  4px;
    --ds-space-2:  8px;
    --ds-space-3:  12px;
    --ds-space-4:  16px;
    --ds-space-5:  20px;
    --ds-space-6:  24px;
    --ds-space-7:  28px;
    --ds-space-8:  32px;

    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --ds-radius-card:   8px;
    --ds-radius-btn:    5px;
    --ds-radius-badge:  3px;
    --ds-radius-pill:   999px;

    --ds-shadow-card:   0 2px 8px rgba(0, 0, 0, 0.08);
    --ds-shadow-popup:  0 8px 40px rgba(0, 0, 0, 0.18);

    /* ── Layout ─────────────────────────────────────────────────────────── */
    --ds-max-width:      1200px;
    --ds-sidebar-width:  260px;
    --ds-gutter:         28px;

    /* ── Breadcrumb ─────────────────────────────────────────────────────── */
    --ds-breadcrumb-link:        var(--ds-color-link);
    --ds-breadcrumb-current:     var(--ds-color-body);
    --ds-breadcrumb-separator:   #9CA3AF;
    --ds-breadcrumb-current-max: 320px;
}

/* ============================================================================
   Design System Components — Editorum
   Phase 2: Shared component CSS (canonical location).
   Originals remain in article.css / new-front.css until cleanup phase.
   ============================================================================ */


/* ── DS Base: Links ────────────────────────────────────────────────────── */

a {
    color: var(--ds-color-link);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--ds-color-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

a:focus-visible {
    outline: 2px solid var(--ds-color-link);
    outline-offset: 2px;
    border-radius: 2px;
}

/* UI elements: never underline */
.b_header a:hover,
.b_footer a:hover,
.tab-bar a:hover,
.tab:hover,
.cite-tab:hover,
.nav-tabs > li > a:hover,
.dropdown-menu > li > a:hover,
.pagination a:hover,
.action-btn:hover,
.index-logo-item:hover,
.logo-block-item:hover,
.btn:hover,
.ds-badge:hover,
.popup-close:hover,
.catalog-view-tabs a:hover,
.catalog-gallery-card a:hover {
    text-decoration: none;
}


/* ── DS Component: Breadcrumb ───────────────────────────────────────────── */

.ds-breadcrumb {
    white-space: nowrap;
    overflow: hidden;
}

.ds-breadcrumb__link {
    color: var(--ds-breadcrumb-link);
    font-weight: 400;
    text-transform: none;
}

.ds-breadcrumb__link:hover,
.ds-breadcrumb__link:focus {
    color: var(--ds-color-link-hover);
}

.ds-breadcrumb__separator {
    color: var(--ds-breadcrumb-separator);
}

.ds-breadcrumb__current {
    color: var(--ds-breadcrumb-current);
    text-transform: none;
    display: inline-block;
    max-width: var(--ds-breadcrumb-current-max);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 991px) {
    .ds-breadcrumb__current {
        max-width: 48vw;
    }
}


/* ── DS Component: Badge ────────────────────────────────────────────────── */

/* Canonical DS badge base */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--ds-radius-badge);
    border: 1px solid var(--ds-color-border);
    background: var(--ds-color-bg);
    color: var(--ds-color-body);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    text-transform: none;
    box-shadow: none;
}

/* DS badge variants */
.ds-badge--success {
    background: var(--ds-badge-success-bg);
    color: var(--ds-badge-success-color);
    border-color: var(--ds-badge-success-border);
}

.ds-badge--primary {
    background: var(--ds-badge-primary-bg);
    color: var(--ds-badge-primary-color);
    border-color: var(--ds-badge-primary-border);
}

.ds-badge--warning {
    background: var(--ds-badge-warning-bg);
    color: var(--ds-badge-warning-color);
    border-color: var(--ds-badge-warning-border);
}

.ds-badge--info {
    background: var(--ds-badge-info-bg);
    color: var(--ds-badge-info-color);
    border-color: var(--ds-badge-info-border);
}

.ds-badge--default {
    background: var(--ds-badge-default-bg);
    color: var(--ds-badge-default-color);
    border-color: var(--ds-badge-default-border);
}

/* Backward-compatible selectors for existing .label-* in page contexts */
.article-page .ds-badge,
.issue-page .ds-badge,
.journal-page .ds-badge,
.article-page .label,
.issue-page .label,
.journal-page .label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--ds-radius-badge);
    border: 1px solid var(--ds-color-border);
    background: var(--ds-color-bg);
    color: var(--ds-color-body);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    text-transform: none;
    box-shadow: none;
}

.article-page .label::after,
.issue-page .label::after,
.journal-page .label::after {
    display: none;
}

.article-page .ds-badge.label-success,
.issue-page .ds-badge.label-success,
.journal-page .ds-badge.label-success,
.article-page .label-success,
.issue-page .label-success,
.journal-page .label-success {
    background: var(--ds-badge-success-bg);
    color: var(--ds-badge-success-color);
    border-color: var(--ds-badge-success-border);
}

.article-page .ds-badge.label-primary,
.issue-page .ds-badge.label-primary,
.journal-page .ds-badge.label-primary,
.article-page .label-primary,
.issue-page .label-primary,
.journal-page .label-primary {
    background: var(--ds-badge-primary-bg);
    color: var(--ds-badge-primary-color);
    border-color: var(--ds-badge-primary-border);
}

.article-page .ds-badge.label-warning,
.issue-page .ds-badge.label-warning,
.journal-page .ds-badge.label-warning,
.article-page .label-warning,
.issue-page .label-warning,
.journal-page .label-warning {
    background: var(--ds-badge-warning-bg);
    color: var(--ds-badge-warning-color);
    border-color: var(--ds-badge-warning-border);
}

.article-page .ds-badge.label-info,
.issue-page .ds-badge.label-info,
.journal-page .ds-badge.label-info,
.article-page .label-info,
.issue-page .label-info,
.journal-page .label-info {
    background: var(--ds-badge-info-bg);
    color: var(--ds-badge-info-color);
    border-color: var(--ds-badge-info-border);
}

.article-page .ds-badge.label-default,
.issue-page .ds-badge.label-default,
.journal-page .ds-badge.label-default,
.article-page .label-default,
.issue-page .label-default,
.journal-page .label-default {
    background: var(--ds-badge-default-bg);
    color: var(--ds-badge-default-color);
    border-color: var(--ds-badge-default-border);
}


/* ── DS Component: Card ─────────────────────────────────────────────────── */

.card {
    background: var(--ds-color-white);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-card);
    overflow: hidden;
    box-shadow: none;
}


/* ── DS Component: Popup ────────────────────────────────────────────────── */

.popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 500;
    align-items: center;
    justify-content: center;
}

.popup-overlay:target {
    display: flex;
}

.popup-box {
    background: var(--ds-color-white);
    border-radius: 10px;
    box-shadow: var(--ds-shadow-popup);
    width: 560px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.popup-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.popup-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-color-heading);
}

.popup-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-color-secondary);
    font-size: 18px;
    text-decoration: none;
    background: var(--ds-color-border-lt);
    line-height: 1;
}

.popup-close:hover {
    background: var(--ds-color-border);
    color: var(--ds-color-body);
    text-decoration: none;
}

.popup-body {
    padding: 20px;
    overflow-y: auto;
}


/* ── DS Component: Cite Popup ───────────────────────────────────────────── */

.cite-formats-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ds-color-border);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cite-tab {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-color-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
}

.cite-tab.active {
    color: var(--ds-color-link);
    border-bottom-color: var(--ds-color-link);
}

.cite-tab:hover:not(.active) {
    color: var(--ds-color-body);
    text-decoration: none;
}

.cite-text-block {
    background: var(--ds-color-bg);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-btn);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--ds-color-body);
    line-height: 1.65;
    margin-bottom: 12px;
    user-select: all;
    cursor: text;
}

.cite-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ds-badge-primary-bg);
    color: var(--ds-badge-primary-color);
    border: 1px solid var(--ds-badge-primary-border);
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 16px;
}

.cite-copy-btn:hover {
    background: #E0E7FF;
    text-decoration: none;
}

.cite-export-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--ds-color-border-lt);
}

.export-label {
    font-size: 11px;
    color: var(--ds-color-secondary);
    align-self: center;
    margin-right: 4px;
}

.cite-export-btn {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--ds-color-border);
    background: var(--ds-color-bg);
    color: var(--ds-color-body);
    text-decoration: none;
}

.cite-export-btn:hover {
    background: var(--ds-color-border-lt);
    text-decoration: none;
}


/* ── DS Component: Page Layout ──────────────────────────────────────────── */

.page-layout {
    max-width: none;
    margin: var(--ds-gutter) auto;
    padding: 0 var(--ds-space-8);
    display: grid;
    grid-template-columns: 1fr var(--ds-sidebar-width);
    gap: var(--ds-gutter);
    align-items: start;
}

@media (max-width: 768px) {
    .page-layout {
        grid-template-columns: 1fr;
        padding: 0 var(--ds-space-4);
        gap: var(--ds-space-4);
        margin: var(--ds-space-4) auto;
    }
}


/* ── DS Component: ID Chip ──────────────────────────────────────────────── */

.article-ids {
    padding: 12px 14px;
    margin-top: 12px;
    margin-bottom: 14px;
    border: 1px solid var(--ds-color-border);
    border-radius: 6px;
    background: var(--ds-color-bg);
}

.id-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 500;
}

.id-chip a {
    color: inherit;
    text-decoration: none;
}

.id-chip a:hover {
    color: inherit;
    text-decoration: none;
}

.id-chip:has(a):hover {
    filter: brightness(0.96);
}

.id-chip-label {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.doi-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--ds-badge-primary-bg);
    color: var(--ds-badge-primary-color);
    border: 1px solid var(--ds-badge-primary-border);
}

.edn-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--ds-chip-edn-bg);
    color: var(--ds-chip-edn-color);
    border: 1px solid var(--ds-chip-edn-border);
}

.edn-chip a {
    font-family: var(--ds-font-mono);
}

.elocator-chip {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    font-family: monospace;
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--ds-chip-elocator-bg);
    color: var(--ds-color-white);
}

.elocator-chip .id-chip-label {
    opacity: 0.75;
}

.issue-ids {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* Default/conarc articles use a flat DOI/EDN row (no nested card). */
.article-page--default .article-ids,
.article-page--conarc .article-ids {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.article-page--default .article-ids .id-chip,
.article-page--conarc .article-ids .id-chip,
.article-page--default .article-ids .doi-chip,
.article-page--conarc .article-ids .doi-chip,
.article-page--default .article-ids .edn-chip,
.article-page--conarc .article-ids .edn-chip,
.article-page--default .article-ids .elocator-chip,
.article-page--conarc .article-ids .elocator-chip {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 400;
    color: var(--ds-color-body);
    gap: 4px;
}

.article-page--default .article-ids .id-chip-label,
.article-page--conarc .article-ids .id-chip-label {
    opacity: 1;
    color: var(--ds-color-secondary);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
}

.article-page--default .article-ids a,
.article-page--conarc .article-ids a {
    color: var(--ds-color-link);
    text-decoration: none;
}


/* ── DS Component: Tab Bar ──────────────────────────────────────────────── */

.tab-bar {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--ds-color-border);
    border-bottom: 1px solid var(--ds-color-border);
    padding: 0 var(--ds-gutter);
    background: var(--ds-color-white);
    overflow-x: auto;
}

.tab {
    padding: 11px 16px;
    font-size: 13px;
    color: var(--ds-color-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    text-decoration: none !important;
    display: inline-block;
}

.tab.active {
    color: var(--ds-color-link);
    border-bottom-color: var(--ds-color-link);
    font-weight: 500;
}

.tab:hover:not(.active) {
    color: var(--ds-color-body);
}

.tab-section {
    padding: var(--ds-space-6) var(--ds-gutter);
    border-top: 1px solid var(--ds-color-border-lt);
}

/* Segmented tabs (journal default layout) */
.ds-tabs-segmented {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ds-color-border-strong);
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
}

.ds-tabs-segmented .tab {
    padding: 8px 18px;
    font-size: 13px;
    color: var(--ds-color-muted);
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none !important;
    white-space: nowrap;
    border-right: 1px solid var(--ds-color-border-strong);
    border-bottom: 0;
    margin-bottom: 0;
    background: var(--ds-color-white);
}

.ds-tabs-segmented .tab:last-child {
    border-right: none;
}

.ds-tabs-segmented .tab.active {
    background: var(--ds-color-link);
    color: var(--ds-color-white);
    font-weight: 500;
}

.ds-tabs-segmented .tab:hover:not(.active) {
    color: var(--ds-color-body);
    background: var(--ds-color-bg);
}


/* ── DS Component: Action Card ──────────────────────────────────────────── */

.action-card {
    padding: 14px 16px;
}

.action-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-btn);
    background: var(--ds-color-surface-soft);
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--ds-color-body) !important;
    cursor: pointer;
    text-decoration: none !important;
    font-weight: 500;
}

.action-btn:last-child {
    margin-bottom: 0;
}

.action-btn:hover {
    background: var(--ds-color-border-lt);
    color: var(--ds-color-body) !important;
}

.action-btn-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.action-btn-title {
    display: block;
    line-height: 1.3;
}

.btn-pdf {
    border-color: #FECACA;
    background: #FEF2F2;
    color: #DC2626 !important;
}

.btn-pdf:hover {
    background: #FEE2E2;
    color: #DC2626 !important;
}

.btn-xml {
    border-color: var(--ds-badge-primary-border);
    background: var(--ds-badge-primary-bg);
    color: var(--ds-badge-primary-color) !important;
}

.btn-xml:hover {
    background: #E0E7FF;
    color: var(--ds-badge-primary-color) !important;
}

.btn-cite {
    border-color: var(--ds-color-border);
    background: var(--ds-color-surface-soft);
    color: var(--ds-color-body) !important;
}

.btn-cite:hover {
    background: var(--ds-color-border-lt);
    color: var(--ds-color-body) !important;
}

.btn-citations {
    border-color: #FDE68A;
    background: #FFFBEB;
    color: #92400E !important;
}

.btn-citations:hover {
    background: #FEF3C7;
    color: #92400E !important;
}

.btn-citations .cit-count {
    margin-left: auto;
    background: #F59E0B;
    color: var(--ds-color-white);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}


/* ── DS Utility: Card variants ─────────────────────────────────────────── */

.card--flush {
    margin-bottom: 0;
}

.card--spaced {
    margin-bottom: 16px;
}

.card--padded {
    padding: 14px 16px;
}

.ds-hidden {
    display: none !important;
}

.ds-spinner-inline {
    font-size: 14px;
    color: var(--ds-color-muted);
}

.ds-empty-state,
.sidebar-empty {
    font-size: 12px;
    color: var(--ds-color-muted);
    line-height: 1.55;
}

/* ── DS Component: Language Switch ─────────────────────────────────────── */

.ds-lang-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ds-lang-switch__trigger {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    color: var(--ds-color-body);
    font-weight: 500;
    font-size: var(--ds-font-size-sm);
    font-family: var(--ds-font-family);
    border-radius: var(--ds-radius-btn);
    transition: color 0.15s ease;
    cursor: pointer;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
}

.ds-lang-switch__trigger:hover {
    color: var(--ds-color-link);
}

.ds-lang-switch__menu {
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
    min-width: 0;
    padding: 4px 0;
    margin-top: 4px;
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow-card);
    background: var(--ds-color-white);
    border: 1px solid var(--ds-color-border);
    list-style: none;
    z-index: 100;
}

.ds-lang-switch__item {
    display: block;
    padding: 8px 14px;
    font-size: var(--ds-font-size-sm);
    font-family: var(--ds-font-family);
    font-weight: 400;
    color: var(--ds-color-body);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.ds-lang-switch__item:hover {
    background: var(--ds-color-bg);
    color: var(--ds-color-link);
    text-decoration: none;
}

.ds-lang-switch__item.active,
.ds-lang-switch__item.active:hover {
    color: var(--ds-color-link);
    font-weight: 500;
}