/* Copyright (c) 2026 Taylor Gerard. All rights reserved. Developer: Taylor Gerard. BB Hashtag Generator.
 *
 * Language switcher: the universal "language" icon button and its picker, placed in the header's button row right after the social icon. Behaviour lives in assets/js/language.js.
 */

/* ---------- Colour variables (the button lives in the header's button row, after the social icon) ---------- */
.bbhg-lang {
    --lg-bg: #ffffff;
    --lg-fg: #14161b;
    --lg-line: #e4e7f0;
    --lg-hover: #f1f3fa;
    --lg-muted: #5b6070;
    --lg-accent: #2f5bff;
    --lg-on-accent: #ffffff;
    --lg-pop: #ffffff;
    --lg-shadow: 0 1px 2px rgba(20, 22, 27, .10), 0 0 0 1px rgba(20, 22, 27, .05);
    position: relative;
    z-index: 10003;                 /* above the header (10002) so the picker is never covered */
    flex: none;
    direction: ltr;                 /* keep the button and picker in place when the content flips to right-to-left */
}
.bbhg-modal-overlay.bbhg-section-fs .bbhg-lang { display: none !important; }

/* Dark palettes */
.bbhg-mode-dark .bbhg-lang,
.bbhg-theme-nightwatch .bbhg-lang,
.bbhg-theme-matrix .bbhg-lang,
.bbhg-theme-galaxy .bbhg-lang,
.bbhg-theme-arcade .bbhg-lang,
.bbhg-theme-vice .bbhg-lang {
    --lg-bg: #1d2230;
    --lg-fg: #f3f5fb;
    --lg-line: #343b50;
    --lg-hover: #2a3145;
    --lg-muted: #a3abc2;
    --lg-pop: #1a1f2c;
    --lg-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .08);
}
.bbhg-theme-matrix .bbhg-lang { --lg-accent: #00ff6a; --lg-on-accent: #001a09; }
.bbhg-theme-vice .bbhg-lang { --lg-accent: #ff4fa3; --lg-on-accent: #1a0526; }

/* ---------- The icon button ---------- */
.bbhg-lang { display: inline-flex; }

.bbhg-lang .bbhg-lang-btn {
    position: relative;
    box-sizing: border-box;
    width: 40px; height: 40px; min-width: 40px; padding: 0 !important; margin: 0;
    border: 0 !important; border-radius: 99px !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--lg-bg) !important; color: var(--lg-fg) !important;
    box-shadow: var(--lg-shadow) !important;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.bbhg-lang .bbhg-lang-btn:hover { background: var(--lg-hover) !important; }
.bbhg-lang .bbhg-lang-btn:active { transform: scale(.94); }
.bbhg-lang .bbhg-lang-btn:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }
.bbhg-lang .bbhg-lang-btn[aria-expanded="true"] { background: var(--lg-fg) !important; color: var(--lg-bg) !important; }

.bbhg-lang .bbhg-lang-ico { width: 22px; height: 22px; flex: none; display: block; pointer-events: none; fill: currentColor; }

/* Small code badge (ES, FR, JA...) while a language other than the original is active */
.bbhg-lang .bbhg-lang-code {
    position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 17px; padding: 0 4px; box-sizing: border-box;
    border-radius: 99px; background: var(--lg-accent); color: var(--lg-on-accent);
    font: 800 9.5px/17px system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em; text-align: center; text-transform: uppercase;
    box-shadow: 0 0 0 2px var(--lg-bg); pointer-events: none;
}
.bbhg-lang .bbhg-lang-code[hidden] { display: none; }

/* Busy ring while text is being translated */
.bbhg-lang .bbhg-lang-spin {
    position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .15s ease;
    border: 2.5px solid transparent; border-top-color: var(--lg-accent); border-right-color: var(--lg-accent);
}
.bbhg-lang.is-busy .bbhg-lang-spin { opacity: 1; animation: bbhg-lang-rot .8s linear infinite; }
@keyframes bbhg-lang-rot { to { transform: rotate(360deg); } }

/* ---------- Picker ---------- */
.bbhg-lang .bbhg-lang-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 10010;
    box-sizing: border-box; width: min(330px, calc(100vw - 24px)); max-height: min(72vh, 500px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--lg-pop); color: var(--lg-fg); border-radius: 18px;
    box-shadow: 0 18px 50px rgba(20, 22, 27, .35), 0 0 0 1px var(--lg-line);
    font-family: var(--dk-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    text-align: start; direction: ltr;
    animation: bbhg-lang-in .12s cubic-bezier(.2, .9, .3, 1.2);
}
.bbhg-lang .bbhg-lang-menu[hidden] { display: none; }
@keyframes bbhg-lang-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

.bbhg-lang-mh { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.bbhg-lang-mh b { font: 800 15px/1.2 inherit; font-family: inherit; color: var(--lg-fg); }
.bbhg-lang .bbhg-lang-x {
    width: 32px; height: 32px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; cursor: pointer;
    background: var(--lg-hover) !important; color: var(--lg-fg) !important; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.bbhg-lang .bbhg-lang-x:focus-visible, .bbhg-lang .bbhg-lang-item:focus-visible, .bbhg-lang .bbhg-lang-q:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 1px; }

.bbhg-lang-qw { padding: 6px 12px 8px; }
.bbhg-lang .bbhg-lang-q {
    box-sizing: border-box; width: 100%; height: 42px; padding: 0 14px !important; margin: 0 !important;
    border: 1px solid var(--lg-line) !important; border-radius: 12px !important; background: var(--lg-hover) !important; color: var(--lg-fg) !important;
    font: 600 14px/1 inherit; font-family: inherit; box-shadow: none !important;
}
.bbhg-lang .bbhg-lang-q::placeholder { color: var(--lg-muted); opacity: 1; }

.bbhg-lang-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 8px 6px; }
.bbhg-lang-sec { margin: 10px 8px 4px; font: 700 10.5px/1 var(--dk-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--lg-muted); }
.bbhg-lang-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bbhg-lang-list li { margin: 0; padding: 0; }

.bbhg-lang .bbhg-lang-item {
    box-sizing: border-box; width: 100%; min-height: 46px; padding: 6px 12px !important; margin: 0 !important;
    border: 0 !important; border-radius: 12px !important; cursor: pointer;
    display: flex; align-items: center; gap: 10px; text-align: start;
    background: transparent !important; color: var(--lg-fg) !important; box-shadow: none !important;
    font: 700 14px/1.2 inherit; font-family: inherit;
}
.bbhg-lang .bbhg-lang-item:hover { background: var(--lg-hover) !important; }
.bbhg-lang .bbhg-lang-item[aria-selected="true"] { background: var(--lg-fg) !important; color: var(--lg-pop) !important; }
.bbhg-lang-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbhg-lang-e { flex: none; font: 600 12px/1 inherit; font-family: inherit; opacity: .6; }
.bbhg-lang-tick { flex: none; width: 16px; height: 16px; opacity: 0; }
.bbhg-lang-item[aria-selected="true"] .bbhg-lang-tick { opacity: 1; }
.bbhg-lang-empty { margin: 14px 12px 16px; font: 600 13px/1.4 inherit; font-family: inherit; color: var(--lg-muted); }

.bbhg-lang-note { margin: 0; padding: 8px 16px 12px; border-top: 1px solid var(--lg-line); font: 500 11.5px/1.4 inherit; font-family: inherit; color: var(--lg-muted); }

/* Consent card (shown instead of the list until the person allows translation) */
.bbhg-lang-consent { padding: 4px 16px 16px; }
.bbhg-lang-consent[hidden], .bbhg-lang-qw[hidden], .bbhg-lang-scroll[hidden] { display: none !important; }
.bbhg-lang-consent p { margin: 0 0 10px; font: 500 13px/1.5 inherit; font-family: inherit; color: var(--lg-fg); }
.bbhg-lang-consent p b { font-weight: 800; font-size: 15px; }
.bbhg-lang-cbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.bbhg-lang .bbhg-lang-allow, .bbhg-lang .bbhg-lang-cancel {
    min-height: 42px; padding: 0 16px !important; border: 0 !important; border-radius: 12px !important; cursor: pointer; font: 700 13.5px/1 inherit; font-family: inherit;
}
.bbhg-lang .bbhg-lang-allow { background: var(--lg-accent) !important; color: var(--lg-on-accent) !important; }
.bbhg-lang .bbhg-lang-cancel { background: var(--lg-hover) !important; color: var(--lg-fg) !important; }

/* Error / info toast under the button */
.bbhg-lang .bbhg-lang-toast {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 10011; width: max-content; max-width: min(300px, calc(100vw - 24px));
    padding: 10px 14px; border-radius: 12px; background: #14161b; color: #fff; font: 600 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease;
}
.bbhg-lang .bbhg-lang-toast.show { opacity: 1; transform: none; }

/* ---------- Right-to-left languages (Arabic, Hebrew, Persian, Urdu) ---------- */
.bbhg-modal[dir="rtl"] .bbhg-lang-menu { text-align: start; }

/* Phones: slightly smaller button, picker never wider than the screen */
@media (max-width: 760px) {
    .bbhg-lang .bbhg-lang-btn { width: 36px; height: 36px; min-width: 36px; }
    .bbhg-lang .bbhg-lang-ico { width: 20px; height: 20px; }
    .bbhg-lang .bbhg-lang-menu { max-height: min(68vh, 460px); }
}

@media (prefers-reduced-motion: reduce) {
    .bbhg-lang .bbhg-lang-menu, .bbhg-lang.is-busy .bbhg-lang-spin { animation: none; }
    .bbhg-lang .bbhg-lang-toast, .bbhg-lang .bbhg-lang-btn { transition: none; }
}