/* ---------------------------------------------------------------------------
   Language picker - nav button, dropdown, and first-visit / request modal.

   Scoped under .lang-* so nothing here can affect the rest of the site. The
   colours are copied from the existing nav and auth dialogs rather than
   referenced, because those are plain CSS files with no custom properties.
   --------------------------------------------------------------------------- */

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #dce8fb;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.lang-btn:hover,
.lang-btn:focus-visible {
    border-color: #5b8dd9;
    background: rgba(91, 141, 217, 0.16);
    color: #fff;
    outline: none;
}

.lang-btn-icon {
    width: 17px;
    height: 17px;
    flex: none;
}

.lang-btn-label {
    max-width: 9ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lang-btn-caret {
    width: 9px;
    height: 9px;
    flex: none;
    opacity: 0.65;
}

/* The dropdown is positioned relative to this wrapper so it can right-align
   itself under the button without measuring anything at runtime. */
.lang-wrap {
    position: relative;
    display: inline-flex;
}

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    min-width: 232px;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #333;
    border-radius: 10px;
    background: #12121c;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.lang-menu[hidden] {
    display: none;
}

.lang-menu-head {
    padding: 7px 9px 8px;
    color: #888;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.lang-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: #dce8fb;
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.lang-item:hover,
.lang-item:focus-visible {
    background: #243552;
    color: #fff;
    outline: none;
}

.lang-item[aria-current="true"] {
    background: #1d2a40;
    color: #fff;
    font-weight: 700;
}

.lang-item-native {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lang-item-code {
    flex: none;
    color: #7f8ea6;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lang-item-check {
    flex: none;
    width: 14px;
    color: #57d987;
}

.lang-sep {
    height: 1px;
    margin: 6px 4px;
    background: #2a2a3c;
}

.lang-request-link {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: #82b0f0;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.lang-request-link:hover,
.lang-request-link:focus-visible {
    background: #243552;
    color: #fff;
    outline: none;
}

/* ------------------------------------------------------------- modal shell */
.lang-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(6, 6, 14, 0.72);
}

.lang-overlay[hidden] {
    display: none;
}

.lang-dialog {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px 22px 20px;
    border: 1px solid #333;
    border-radius: 14px;
    background: #14141f;
    color: #e6ecf7;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.lang-dialog-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.lang-dialog-text {
    margin: 0 0 16px;
    color: #9aa7bb;
    font-size: 0.9rem;
    line-height: 1.55;
}

.lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.lang-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid #333;
    border-radius: 9px;
    background: #191926;
    color: #dce8fb;
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.lang-choice:hover,
.lang-choice:focus-visible {
    border-color: #5b8dd9;
    background: #22304a;
    color: #fff;
    outline: none;
}

.lang-choice[aria-current="true"] {
    border-color: #57d987;
    background: #1b2c24;
    color: #fff;
    font-weight: 700;
}

.lang-choice-native {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lang-choice-hint {
    flex: none;
    color: #6f7f97;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lang-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 6px;
}

.lang-dialog-actions .lang-spacer {
    margin-right: auto;
}

.lang-primary,
.lang-secondary {
    padding: 10px 16px;
    border-radius: 9px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.lang-primary {
    border: 1px solid #5b8dd9;
    background: #2b4a7d;
    color: #fff;
}

.lang-primary:hover,
.lang-primary:focus-visible {
    background: #35598f;
    outline: none;
}

.lang-primary:disabled {
    opacity: 0.55;
    cursor: default;
}

.lang-secondary {
    border: 1px solid #333;
    background: none;
    color: #b9c6da;
}

.lang-secondary:hover,
.lang-secondary:focus-visible {
    border-color: #5b8dd9;
    color: #fff;
    outline: none;
}

/* ------------------------------------------------------------ request form */
.lang-field {
    margin-bottom: 13px;
}

.lang-label {
    display: block;
    margin-bottom: 5px;
    color: #9aa7bb;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lang-input,
.lang-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #0f0f18;
    color: #eef2f9;
    font: inherit;
    font-size: 0.9rem;
}

.lang-input:focus,
.lang-textarea:focus {
    border-color: #5b8dd9;
    outline: none;
}

.lang-input::placeholder,
.lang-textarea::placeholder {
    color: #5f6b80;
}

.lang-textarea {
    min-height: 76px;
    resize: vertical;
    line-height: 1.45;
}

.lang-msg {
    min-height: 18px;
    margin-top: 10px;
    color: #9aa7bb;
    font-size: 0.84rem;
}

.lang-msg.is-ok {
    color: #57d987;
}

.lang-msg.is-err {
    color: #ff8080;
}

.lang-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The language name is written in its own script, so the button keeps a
   sensible width on narrow screens by hiding the label below the drawer
   breakpoint and leaving the globe icon. */
@media (max-width: 720px) {
    .lang-btn-label {
        display: none;
    }

    .lang-btn {
        padding: 0 9px;
    }
}