/*
 * Waehrungsumschalter.
 *
 * Eigene Klassen (nfds-cur-*), damit nichts mit dem Sprachumschalter oder
 * anderen Modulen kollidiert - .nfds-icon gab es im Plugin schon zweimal.
 * Farben als Token auf dem Wurzelelement, mit Dunkelmodus-Variante.
 */
.nfds-cur-switcher {
    --nfds-cur-ink: #1f2328;
    --nfds-cur-ink-leise: #5b6570;
    --nfds-cur-flaeche: #ffffff;
    --nfds-cur-rand: #d6dade;
    --nfds-cur-hervor: #f2f4f6;
    --nfds-cur-fokus: #a34e46;
    /* Form als Token: in der Fussleiste setzt PHP die Werte des
       Sprachumschalters ein, damit beide Pillen gleich aussehen. */
    --nfds-cur-radius: 999px;
    --nfds-cur-panel-radius: 14px;
    --nfds-cur-item-radius: 10px;
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1.4;
}

@media (prefers-color-scheme: dark) {
    .nfds-cur-switcher:not([data-theme="light"]) {
        --nfds-cur-ink: #e8eaed;
        --nfds-cur-ink-leise: #a8b0b8;
        --nfds-cur-flaeche: #23272b;
        --nfds-cur-rand: #3a4047;
        --nfds-cur-hervor: #2d3238;
    }
}

.nfds-cur-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44px Mindesthoehe fuer die Fingerbedienung */
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--nfds-cur-rand);
    border-radius: var(--nfds-cur-radius);
    background: var(--nfds-cur-flaeche);
    color: var(--nfds-cur-ink);
    font: inherit;
    cursor: pointer;
    /* Beschriftungen duerfen nicht umbrechen */
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

.nfds-cur-switcher__toggle:hover { background: var(--nfds-cur-hervor); }
.nfds-cur-switcher__toggle:focus-visible {
    outline: 3px solid var(--nfds-cur-fokus);
    outline-offset: 2px;
}

.nfds-cur-switcher__sym { font-weight: 600; }
.nfds-cur-switcher__code { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.nfds-cur-switcher__chevron { font-size: 10px; color: var(--nfds-cur-ink-leise); }

.nfds-cur-switcher__panel {
    position: absolute;
    z-index: 60;
    inset-inline-end: 0;
    bottom: calc(100% + 8px);
    min-width: 0;
    width: max-content;
    max-width: min(300px, calc(100vw - 32px));
    padding: 6px;
    border: 1px solid var(--nfds-cur-rand);
    border-radius: var(--nfds-cur-panel-radius);
    background: var(--nfds-cur-flaeche);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
    /* Mehr als acht Raeume: rollen statt wachsen */
    max-height: min(340px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nfds-cur-switcher__panel[hidden] { display: none; }

/* Oberhalb genug Platz? Sonst nach unten klappen. */
.nfds-cur-switcher--header .nfds-cur-switcher__panel {
    top: calc(100% + 8px);
    bottom: auto;
}

.nfds-cur-switcher__item {
    display: grid;
    grid-template-columns: 1.6em 3.2em 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: var(--nfds-cur-item-radius);
    color: var(--nfds-cur-ink);
    text-decoration: none;
    white-space: nowrap;
    /* min-width:0 verhindert, dass die Spalten auf Inhaltsbreite wachsen */
    min-width: 0;
}

.nfds-cur-switcher__item > * { min-width: 0; }
.nfds-cur-switcher__item:hover { background: var(--nfds-cur-hervor); }
.nfds-cur-switcher__item:focus-visible {
    outline: 3px solid var(--nfds-cur-fokus);
    outline-offset: -3px;
}

/* Der aktive Eintrag ist nicht nur farbig, er traegt auch ein Haekchen. */
.nfds-cur-switcher__item.is-active { background: var(--nfds-cur-hervor); font-weight: 600; }
.nfds-cur-switcher__haken { color: var(--nfds-cur-fokus); font-weight: 700; }

.nfds-cur-switcher__name {
    color: var(--nfds-cur-ink-leise);
    overflow: hidden;
    text-overflow: ellipsis;
}

.nfds-cur-switcher__hinweis {
    margin: 6px 10px 2px;
    color: var(--nfds-cur-ink-leise);
    font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .nfds-cur-switcher__toggle { transition: none; }
}

/* ==========================================================================
   Fussleiste
   Beide Umschalter stehen in EINER Reihe unten rechts: aussen die Waehrung,
   innen die Sprache. Der Sprachumschalter klebt am Rand (right: 20px), also
   rueckt er nach innen, sobald die Waehrungspille da ist - um deren Breite
   plus 12 px Luft. Die Breite misst das JS und legt sie auf
   --nfds-cur-breite; der Ausweichwert deckt den Normalfall (3 Zeichen Code
   plus Symbol und Pfeil), damit nichts springt, bevor das JS laeuft.
   ========================================================================== */
.nfds-cur-switcher--footer {
    position: fixed;
    inset-inline-end: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    /* Eine Stufe unter dem Sprachumschalter (9999): sein Panel klappt nach
       oben und darf ueber dieser Pille liegen. */
    z-index: 9998;
}

.nfds-cur-switcher--footer .nfds-cur-switcher__toggle {
    box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
}

.nfds-cur-switcher--footer .nfds-cur-switcher__panel {
    box-shadow: 0 20px 40px rgba(15, 23, 42, .35);
}

/* ==========================================================================
   Cascade-Riegel
   Zwei Theme-Regeln greifen von aussen ein, beide nur auf schmalen Schirmen
   sichtbar, darum hier festgenagelt wie beim Sprachumschalter:
   - max-width:100% auf Bloecke. Am absolut positionierten Panel sind das
     100% der 56px breiten Pille; auf dem Handy fielen die Waehrungsnamen
     dadurch auf 0 Pixel zusammen ("€ EUR" ohne "Euro").
   - Positionsangaben des Themes an fixierten Elementen.
   Der Sprachumschalter steht wegen seines eigenen Riegels auf JEDER Breite
   bei 20px; seine @media-Regel mit 12px ist tote Schrift. Darum hier keine
   Mobil-Sonderwerte - nachgemessen bei 390px und bei 1440px.
   ========================================================================== */
body .nfds-cur-switcher--footer {
    position: fixed !important;
    inset-inline-end: 20px !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 9998 !important;
}

/*
 * Platz fuer die Waehrungspille. Die Klasse am body setzt PHP nur, wenn der
 * Umschalter in der Fussleiste wirklich erscheint - sonst bleibt der
 * Sprachumschalter, wo er war.
 *
 * Physische Eigenschaften und eine eigene RTL-Regel statt inset-inline-end:
 * nfds-rtl.css nagelt den Sprachumschalter mit
 * html[dir="rtl"] .nfds-lang-switcher { left: 20px !important } fest. Nur
 * eine Regel mit hoeherer Spezifitaet kommt dagegen an, unabhaengig davon,
 * welche Datei zuerst geladen wird.
 */
body.nfds-hat-waehrungsumschalter .nfds-lang-switcher--footer {
    right: calc(20px + var(--nfds-cur-breite, 58px) + 12px) !important;
}

html[dir="rtl"] body.nfds-hat-waehrungsumschalter .nfds-lang-switcher--footer {
    right: auto !important;
    left: calc(20px + var(--nfds-cur-breite, 58px) + 12px) !important;
}

body .nfds-cur-switcher__panel {
    width: max-content !important;
    max-width: min(300px, calc(100vw - 32px)) !important;
}

/*
 * Farben vom Sprachumschalter uebernommen (PHP setzt Flaeche, Schrift und
 * Rand als Inline-Token). Sekundaerton und Hover-Flaeche werden daraus
 * abgeleitet statt fest gesetzt - sonst stuende bei einer dunklen Pille ein
 * dunkelgrauer Nebentext auf dunklem Grund.
 */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .nfds-cur-switcher--eigene-farben {
        --nfds-cur-ink-leise: color-mix(in srgb, var(--nfds-cur-ink) 68%, var(--nfds-cur-flaeche));
        --nfds-cur-hervor: color-mix(in srgb, var(--nfds-cur-ink) 10%, var(--nfds-cur-flaeche));
    }
}