/**
 * Crater Lang — Frontend Language Switcher Styles
 */

/* ─── Base ───────────────────────────────────────────── */
.crater-lang-switcher {
    font-family: inherit;
    font-size: inherit;
}

/* ─── Dropdown Style ─────────────────────────────────── */
.crater-lang-dropdown {
    position: relative;
    display: inline-block;
}

.crater-lang-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    cursor: pointer;
    color: inherit;
    font-size: inherit;
    transition: border-color 0.2s;
}

.crater-lang-current:hover {
    border-color: rgba(255,255,255,0.6);
}

.crater-lang-arrow {
    font-size: 10px;
    opacity: 0.6;
}

.crater-lang-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    margin: 6px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 9999;
}

/* Hover bridge: transparent strip above the list that fills the visual gap,
   so moving the pointer from the button down to the list never leaves the
   dropdown's hover area (the old bare margin gap made the menu flicker away). */
.crater-lang-list::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    height: 7px;
}

.crater-lang-dropdown:hover .crater-lang-list,
.crater-lang-dropdown:focus-within .crater-lang-list {
    display: block;
}

.crater-lang-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: #333;
    text-decoration: none;
    transition: background 0.15s;
}

.crater-lang-list li a:hover {
    background: #f5f5f5;
}

.crater-lang-flag {
    font-size: 16px;
    line-height: 1;
}

.crater-lang-name {
    font-size: 14px;
}

.crater-lang-code {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ─── Flags Style ────────────────────────────────────── */
.crater-lang-flags {
    display: flex;
    gap: 8px;
    align-items: center;
}

.crater-lang-flag-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s;
    opacity: 0.6;
}

.crater-lang-flag-link:hover,
.crater-lang-flag-link.active {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}

/* ─── List Style ─────────────────────────────────────── */
.crater-lang-list-plain {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.crater-lang-list-plain li a {
    padding: 4px 10px;
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
    opacity: 0.7;
    transition: all 0.15s;
}

.crater-lang-list-plain li a:hover,
.crater-lang-list-plain li.active a {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}