/**
 * NA Google Translate – GTranslate Integration
 * Header Dropdown + Hide Float/Footer + Noble Atlas CI
 *
 * @package NA_Google_Translate
 * @since 1.0.0
 */

/* Noble Atlas CI Tokens (Fallback falls Header-CSS später geladen) */
.na-translate-wrapper {
    --na-emerald: #01221c;
    --na-moss: #1c3c2c;
    --na-gold: #dbc16d;
    --na-ivory: #f8f5f0;
    --na-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ==========================================
   Placement – Integriert im Header-Layout (kein Overlay)
   ========================================== */
.na-translate-wrapper {
    z-index: 2147483202;
    overflow: visible !important;
}

/* Desktop: Flex-Child zwischen Nav und CTA */
.noble-header-container:has(.na-translate-desktop) {
    overflow: visible;
}
.na-translate-desktop {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: var(--noble-space-xl, 24px);
    margin-right: var(--noble-space-md, 16px);
}

@media (max-width: 1023px) {
    .na-translate-desktop {
        display: none;
    }
}

/* Mobile Header-Leiste: links vor Anmelden / Dashboard */
.noble-header-mobile .noble-header-container:has(.na-translate-mobile) {
    overflow: visible;
}
.na-translate-mobile {
    display: none;
    align-items: center;
    flex-shrink: 0;
    margin-right: var(--noble-space-sm, 8px);
}

@media (max-width: 1023px) {
    .na-translate-mobile {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .na-translate-mobile {
        display: none !important;
    }
}

/* ==========================================
   Lazy Load – Mount (Inject-Ziel, Trigger bleibt außerhalb)
   ========================================== */
/* Kein display:contents — sonst können injizierte GTranslate-Knoten/Skripte in Flex-Headern schlecht treffbar sein */
.na-translate-lazy-mount {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ==========================================
   Lazy Load – Trigger-Button (Load on Click)
   ========================================== */
.na-translate-lazy-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    color: var(--noble-ivory, #f8f5f0) !important;
    background-color: var(--noble-emerald, #01221c) !important;
    border: 1px solid var(--noble-gold, #dbc16d);
    border-radius: 6px;
    font-family: var(--noble-font-body, 'Lato'), sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.na-translate-lazy-trigger:hover {
    background-color: rgba(219, 193, 109, 0.12) !important;
    border-color: var(--noble-gold, #dbc16d);
}
.na-translate-lazy-icon {
    font-size: 16px;
    line-height: 1;
}
.na-translate-lazy-text {
    font-size: inherit;
}

/* ==========================================
   GTranslate Floating Widget ausblenden
   ========================================== */
#gt_float_wrapper,
.gt_float_switcher {
    display: none !important;
    visibility: hidden !important;
}

body > div[id*="gt_"][id*="float"],
body > div.gt_float_switcher {
    display: none !important;
}

/* Einstellungsseiten: Sprachauswahl inline im Formular */
.na-translate-settings {
    display: inline-block;
    margin-top: 4px;
}

/* Dashboard #settings-form: Section nicht zum Clipping-Stack beitragen (JS nutzt fixed-Dropdown) */
.settings-section-language {
    overflow: visible !important;
    position: relative;
    z-index: 6;
}

/* ==========================================
   Noble Atlas CI – Trigger-Button
   ========================================== */
.na-translate-wrapper .gtranslate_wrapper,
.na-translate-wrapper .gt_switcher,
.na-translate-wrapper .gt-container {
    font-family: var(--noble-font-body, var(--na-font, 'Lato')), sans-serif !important;
    font-size: var(--noble-text-sm, 13px) !important;
}

.na-translate-wrapper select,
.na-translate-wrapper .gt_switcher select,
.na-translate-wrapper a.gt-current-lang,
.na-translate-wrapper .gt_switcher .gt_selected > a {
    color: var(--noble-ivory, #f8f5f0) !important;
    background-color: var(--noble-emerald, #01221c) !important;
    background-image: none !important;
    border: 1px solid var(--noble-gold, #dbc16d) !important;
    border-radius: 6px !important;
    padding: 4px 6px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 32px !important;
    min-height: 32px !important;
    cursor: pointer !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Sprachtext und Pfeil im geschlossenen Trigger ausblenden – nur Flagge */
.na-translate-wrapper .gt_switcher .gt_selected > a > *:not(.gt_flag),
.na-translate-wrapper .gt_switcher .gt_selected span:not(.gt_flag) {
    display: none !important;
}

.na-translate-wrapper select:hover,
.na-translate-wrapper .gt_switcher select:hover,
.na-translate-wrapper a.gt-current-lang:hover,
.na-translate-wrapper .gt_switcher .gt_selected > a:hover {
    border-color: var(--noble-gold, #dbc16d) !important;
    background-color: rgba(219, 193, 109, 0.12) !important;
}

.na-translate-wrapper .gt_flag {
    margin: 0 !important;
}

.na-translate-wrapper .gt_flag img {
    width: 20px !important;
    height: auto !important;
}

.na-translate-wrapper .gt_switcher,
.na-translate-wrapper .gtranslate_wrapper {
    width: 40px !important;
    max-width: 40px !important;
}

/* ==========================================
   Noble Atlas CI – Dropdown-Panel (öffnet nach UNTEN)
   ========================================== */
.na-translate-wrapper .gt_white_content,
.na-translate-wrapper .gt_options,
.na-translate-wrapper [class*="gt_options"],
.na-translate-wrapper .gt_switcher .gt_options {
    background-color: var(--noble-moss, #1c3c2c) !important;
    border: 1px solid var(--noble-gold, #dbc16d) !important;
    border-radius: 8px !important;
    box-shadow: var(--noble-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12)) !important;
    padding: var(--noble-space-sm, 8px) 0 !important;
    min-width: 140px !important;
    z-index: 2147483300 !important;
    overflow: visible !important;
    top: 100% !important;
    bottom: auto !important;
    margin-top: 6px !important;
}

.na-translate-wrapper .gt_option,
.na-translate-wrapper a.glink,
.na-translate-wrapper .gt_switcher a[href] {
    color: var(--noble-ivory, #f8f5f0) !important;
    background-color: transparent !important;
    font-family: var(--noble-font-body, 'Lato'), sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.02em !important;
    padding: 10px 16px !important;
    border: none !important;
    border-bottom: none !important;
}

.na-translate-wrapper .gt_option:hover,
.na-translate-wrapper a.glink:hover {
    background-color: rgba(219, 193, 109, 0.15) !important;
    color: var(--noble-gold, #dbc16d) !important;
}

/* GTranslate fügt Dropdown teils als body-child ein – nach unten, lesbar, Flaggen vollständig */
body .gt_white_content,
body [id^="gt-wrapper-"] .gt_white_content {
    background-color: #1c3c2c !important;
    border: 1px solid #dbc16d !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    z-index: 2147483300 !important;
    position: fixed !important;
    bottom: auto !important;
    margin-top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    clip-path: none !important;
}

body .gt_white_content a,
body [id^="gt-wrapper-"] .gt_white_content a {
    color: #f8f5f0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.02em !important;
    padding: 10px 16px !important;
}

body .gt_white_content a:hover {
    background-color: rgba(219, 193, 109, 0.15) !important;
    color: #dbc16d !important;
}

/* Flaggen und Optionen vollständig sichtbar */
body .gt_white_content .glink,
body .gt_white_content .gt_option,
body .gt_white_content a.glink {
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
}
body .gt_white_content .glink img,
body .gt_white_content .gt_option img {
    max-height: none !important;
    object-fit: contain !important;
}

/* ==========================================
   Flags-Only Mode: Stack → Dropdown
   ========================================== */
.na-translate-wrapper.na-translate-flags-mode {
    position: relative;
}
.na-translate-wrapper.na-translate-flags-mode .gt_switcher,
.na-translate-wrapper.na-translate-flags-mode [id^="gt-wrapper"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: auto !important;
    max-width: none !important;
}
.na-translate-wrapper.na-translate-flags-mode .na-translate-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 32px !important;
    min-width: 40px !important;
    background-color: var(--noble-emerald, #01221c) !important;
    border: 1px solid var(--noble-gold, #dbc16d) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    padding: 0 !important;
}
.na-translate-wrapper.na-translate-flags-mode .na-translate-trigger:hover {
    background-color: rgba(219, 193, 109, 0.12) !important;
}
.na-translate-wrapper.na-translate-flags-mode .na-translate-trigger img {
    width: 20px !important;
    height: auto !important;
}
.na-translate-wrapper.na-translate-flags-mode .na-translate-dropdown {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 6px !important;
    background-color: var(--noble-moss, #1c3c2c) !important;
    border: 1px solid var(--noble-gold, #dbc16d) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    padding: 6px 0 !important;
    min-width: 48px !important;
    z-index: 2147483300 !important;
    flex-direction: column !important;
}
.na-translate-wrapper.na-translate-flags-mode.na-translate-flags-open .na-translate-dropdown {
    display: flex !important;
}
.na-translate-wrapper.na-translate-flags-mode .na-translate-dropdown a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    min-width: 40px !important;
    background: transparent !important;
    border: none !important;
}
.na-translate-wrapper.na-translate-flags-mode .na-translate-dropdown a:hover {
    background-color: rgba(219, 193, 109, 0.15) !important;
}
.na-translate-wrapper.na-translate-flags-mode .na-translate-dropdown img {
    width: 24px !important;
    height: auto !important;
}

/* Google-Übersetzer-Link ausblenden */
.na-translate-wrapper a.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.na-translate-wrapper a[href="https://translate.google.com"] {
    display: none !important;
}

/* ==========================================
   Dashboard: Sexworker/Bordell Sidebar + Endverbraucher Sidebar
   ========================================== */
.na-translate-dashboard {
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
}
/* Optional: falls ein Theme/Plugin das Widget noch in die Topbar legt */
.topbar-right .na-translate-dashboard {
    margin-right: 12px;
    margin-left: 0;
}
.noble-sidebar .na-translate-dashboard--sidebar {
    width: 100%;
    box-sizing: border-box;
}
/* Endverbraucher: In Sidebar vor User-Profil */
.noble-sidebar .na-translate-dashboard {
    padding: 12px 16px;
    margin: 0 8px 8px;
    border-top: 1px solid rgba(219, 193, 109, 0.15);
    justify-content: center;
}
.noble-sidebar .na-translate-dashboard.na-translate-flags-mode .na-translate-trigger {
    margin: 0 auto;
}
/* Endverbraucher-Sidebar: Dropdown öffnet nach OBEN */
.noble-sidebar .na-translate-dashboard.na-translate-flags-mode .na-translate-dropdown {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}
.noble-sidebar .na-translate-dashboard .gt_switcher .gt_options,
.noble-sidebar .na-translate-dashboard .gt_white_content {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

/* ==========================================
   Legacy: Alte Google translate_a UI (Banner/Balloon)
   ========================================== */
.goog-te-banner-frame,
.goog-te-banner,
.goog-te-balloon-frame,
.goog-te-gadget-icon {
    display: none !important;
}

/*
 * NICHT global .skiptranslate verstecken: GTranslate / Website Translator setzen
 * diese Klasse am sichtbaren Widget — display:none würde die Sprachauswahl komplett killen.
 */

body {
    top: 0 !important;
}