/* ============================================================
   CECIC Language Translator Plugin  —  translator.css  v2.0
   ============================================================ */

/* ── 1. Hide the old English / Français text switcher ────── */
/* Polylang widget / menu item */
.lang-item,
.pll-parent-menu-item,
.widget_polylang,
.polylang-language-switcher,
/* TranslatePress */
.trp-language-switcher,
.trp-ls-shortcode-language,
/* Google Translate default bar */
.goog-te-banner-frame,
.skiptranslate,
#google_translate_element,
/* Generic "English / Français" footer link patterns */
.footer-language-switcher,
[class*="language-switcher"],
[id*="language-switcher"] {
    display: none !important;
}

/* Keep page from jumping when GT hides its bar */
body { top: 0 !important; }

/* ── 2. Widget container — fixed bottom-right ────────────── */
#cecic-tr-widget {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── 3. Trigger pill ──────────────────────────────────────── */
#cecic-tr-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px 9px 11px;
    background: #1a6e2e;
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(26,110,46,.38);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .18s, transform .15s, box-shadow .18s;
    white-space: nowrap;
}
#cecic-tr-trigger:hover {
    background: #145723;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(26,110,46,.45);
}
#cecic-tr-trigger:active  { transform: scale(.96); }

#cecic-tr-flag  { font-size: 19px; line-height: 1; }
#cecic-tr-label { font-size: 12px; font-weight: 700; }

#cecic-tr-caret {
    width: 10px;
    height: 6px;
    opacity: .8;
    transition: transform .2s;
    flex-shrink: 0;
}
#cecic-tr-widget.cecic-tr-open #cecic-tr-caret {
    transform: rotate(180deg);
}

/* ── 4. Dropdown panel ───────────────────────────────────── */
#cecic-tr-panel {
    display: none;
    flex-direction: column;
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 260px;
    background: #fff;
    border: 1px solid #e0e5e0;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,.16);
    overflow: hidden;
}
#cecic-tr-widget.cecic-tr-open #cecic-tr-panel {
    display: flex;
}

/* ── 5. Search row ───────────────────────────────────────── */
.cecic-tr-search-row {
    padding: 10px 12px 8px;
    border-bottom: 1px solid #f0f3f0;
}
#cecic-tr-search {
    width: 100%;
    font-size: 13px;
    padding: 7px 11px;
    border: 1px solid #d6dbd6;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    color: #222;
    background: #f8faf8;
    transition: border-color .15s;
}
#cecic-tr-search:focus {
    border-color: #1a6e2e;
    background: #fff;
}

/* ── 6. Language list ─────────────────────────────────────── */
#cecic-tr-list {
    max-height: 268px;
    overflow-y: auto;
    padding: 4px 0;
}
#cecic-tr-list::-webkit-scrollbar       { width: 4px; }
#cecic-tr-list::-webkit-scrollbar-thumb { background: #cdd; border-radius: 4px; }

/* ── 7. Language items ───────────────────────────────────── */
.cecic-tr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #222;
    text-align: left;
    transition: background .1s;
}
.cecic-tr-item:hover   { background: #f2f7f2; }
.cecic-tr-item.active  {
    background: #e6f2e8;
    color: #1a6e2e;
    font-weight: 600;
}

.cecic-tr-item-flag   { font-size: 19px; width: 26px; text-align: center; flex-shrink: 0; }
.cecic-tr-item-name   { flex: 1; }
.cecic-tr-item-native { font-size: 11px; color: #999; margin-left: auto; }
.cecic-tr-item.active .cecic-tr-item-native { color: #1a6e2e; }