/* =====================================================================
   ΔΙΑΚΟΠΤΗΣ ΓΛΩΣΣΑΣ (αιωρούμενος, κάτω δεξιά)
   =====================================================================
   Ίδια θέση και ίδια συμπεριφορά με το ringel-iot, αλλά με τη γλώσσα του
   WeldGrid: ναυτικό, λεπτές γραμμές, καμία σκιά-βουνό, πορτοκαλί μόνο
   στην ενεργή επιλογή.

   Δουλεύει και στη σελίδα σύνδεσης και μέσα στο κέλυφος. Στη σύνδεση τα
   tokens έρχονται από το css/wg-tokens.css που φορτώνεται ρητά - εκεί
   ΜΟΝΟ οι μεταβλητές ισχύουν, γιατί κάθε άλλος κανόνας του αρχείου είναι
   κλειδωμένος σε `body.weldgrid-shell`.

   ΚΑΤΩ ΔΕΞΙΑ και όχι αριστερά: το κουμπί προσβασιμότητας κάθεται κάτω
   αριστερά. Δύο αιωρούμενα κουμπιά στην ίδια γωνία τρώνε το ένα το άλλο.
   ===================================================================== */

.wg-language-switcher {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10060; /* πάνω από το splash (10050) και το cookie banner */
    font-family: inherit;
}

.wg-language-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 9.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--wg-border);
    border-radius: var(--wg-radius);
    background: var(--wg-surface);
    color: var(--wg-navy-900);
    box-shadow: var(--wg-shadow-sm);
    font-size: var(--wg-font-size-sm);
    font-weight: var(--wg-weight-bold);
    cursor: pointer;
}

.wg-language-trigger:hover {
    border-color: var(--wg-navy-900);
}

.wg-language-trigger:focus-visible,
.wg-language-option:focus-visible {
    outline: var(--wg-focus-width) solid var(--wg-navy-900);
    outline-offset: 2px;
}

.wg-language-current {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.wg-language-trigger .ri-arrow-up-s-line,
.wg-language-trigger i {
    color: var(--wg-steel-500);
    font-size: 1rem;
    transition: transform 0.15s ease;
}

.wg-language-trigger[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.wg-lang-flag {
    width: 1.5rem;
    height: 1.05rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--wg-border);
    object-fit: cover;
    flex: 0 0 auto;
}

.wg-language-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    min-width: 11rem;
    padding: 0.25rem;
    border: 1px solid var(--wg-border);
    border-radius: var(--wg-radius);
    background: var(--wg-surface);
    box-shadow: var(--wg-shadow-md);
    display: none;
}

.wg-language-panel.is-open {
    display: block;
}

.wg-language-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: var(--wg-radius-sm);
    background: transparent;
    color: var(--wg-text);
    font-size: var(--wg-font-size-sm);
    font-weight: var(--wg-weight-medium);
    text-align: start;
    cursor: pointer;
    /* Τα tokens κίνησης μηδενίζονται μόνα τους σε `prefers-reduced-motion`
     * (wg-tokens.css), οπότε το εφέ δεν χρειάζεται δικό του media query. */
    transition: background var(--wg-transition),
                color var(--wg-transition),
                transform var(--wg-transition-fast);
}

.wg-language-option .wg-lang-flag {
    transition: transform var(--wg-transition-fast), box-shadow var(--wg-transition);
}

/* HOVER: η γραμμή γέρνει ελάχιστα προς τα δεξιά και η σημαία ανασηκώνεται.
 * Δύο πολύ μικρές κινήσεις μαζί διαβάζονται ως μία, και δίνουν στο μενού
 * αίσθηση αφής χωρίς να το κάνουν παιχνιδιάρικο: 2px μετατόπιση, 8% στη
 * σημαία. Καμία αλλαγή μεγέθους στη ΓΡΑΜΜΗ, ώστε να μη χοροπηδά το μενού. */
.wg-language-option:hover {
    background: var(--wg-surface-soft);
    color: var(--wg-navy-900);
    transform: translateX(2px);
}

.wg-language-option:hover .wg-lang-flag {
    transform: scale(1.08);
    box-shadow: 0 0 0 1px var(--wg-steel-500), 0 2px 6px rgb(10 43 73 / 18%);
}

/* Πάτημα: μαζεύεται λίγο, ώστε το κλικ να έχει απάντηση. */
.wg-language-option:active {
    transform: translateX(1px) scale(0.985);
}

.wg-language-option:active .wg-lang-flag {
    transform: scale(1.02);
}

/* Η ΕΝΕΡΓΗ ΓΛΩΣΣΑ.
 *
 * Ξεχωρίζει με βάρος και ΠΙΟ ΣΚΟΥΡΟ φόντο, χωρίς πορτοκαλί μπάρα. Το
 * `--wg-surface-muted` είναι ένα σκαλί κάτω από το `--wg-surface-soft` του
 * hover, οπότε η ενεργή μένει αναγνωρίσιμη ΚΑΙ όταν ο κέρσορας περνά από
 * πάνω της, χωρίς να στηρίζεται μόνο στα έντονα γράμματα.
 *
 * Το `aria-checked` στο κουμπί μεταφέρει την ίδια πληροφορία σε όποιον δεν
 * βλέπει το χρώμα: δεν χρειάζεται δεύτερο οπτικό σήμα. */
.wg-language-option.is-active {
    background: var(--wg-surface-muted);
    color: var(--wg-navy-900);
    font-weight: var(--wg-weight-bold);
}

/* Η ενεργή πρέπει να παραμείνει ΠΙΟ σκούρα από τη μη ενεργή που περνά ο
 * κέρσορας, αλλιώς στο hover οι δύο γραμμές μοιάζουν ίδιες. */
.wg-language-option.is-active:hover {
    background: var(--wg-steel-100);
}

@media (max-width: 700px) {
    .wg-language-switcher {
        right: 0.6rem;
        bottom: 0.6rem;
    }

    .wg-language-trigger {
        min-width: 0;
    }

    /* Σε στενή οθόνη μένει η σημαία και το βέλος: το όνομα το λέει το
       ανοιγμένο πάνελ. */
    .wg-language-trigger [data-wg-current-label] {
        display: none;
    }
}