/*
 * DZM Auswahlassistent - Widget-Styling
 *
 * Theme-v2-Kontrakt:
 *   Alle Farben und Radien laufen ueber eigene --dzm-advisor-*-Variablen, die
 *   hier am Komponenten-Root mit Hex-Defaults stehen. Damit sieht das Widget
 *   auch unter NOVA und in Shops ohne Theme v2 vollstaendig aus.
 *   Ueberschrieben werden diese Variablen ausschliesslich unter
 *   body.niu-theme2 - dort zeigen sie auf die flaechenrelativen --s-*-Tokens
 *   des Templates. Es werden KEINE eigenen --niu-*-Namen definiert; die
 *   gehoeren dem Template.
 */

.dzm-advisor {
    /* Flaeche */
    --dzm-advisor-bg: #ffffff;
    --dzm-advisor-border: #dfe3e8;
    --dzm-advisor-text: #23282d;
    --dzm-advisor-heading: #23282d;
    --dzm-advisor-muted: #6c757d;
    --dzm-advisor-shadow: 0 1px 3px rgba(0, 0, 0, .08);

    /* Auswahl */
    --dzm-advisor-option-bg: #ffffff;
    --dzm-advisor-option-border: #ced4da;
    --dzm-advisor-option-hover: #f4f6f8;
    --dzm-advisor-accent: #005f56;
    --dzm-advisor-accent-text: #ffffff;

    /* Zustaende */
    --dzm-advisor-danger: #b3261e;
    --dzm-advisor-info: #1a6ea8;

    /* Geometrie */
    --dzm-advisor-radius: 6px;
    --dzm-advisor-radius-option: 6px;
    --dzm-advisor-gap: 1rem;

    color: var(--dzm-advisor-text);
}

/*
 * Theme v2. Zwei Sorten Token, und die Unterscheidung ist der ganze Punkt:
 *
 *   --s-*    flaechenrelativ. Sie beschreiben die Flaeche, AUF der die
 *            Komponente gerade sitzt - Karte, Checkout-Panel, Seite. Damit
 *            passt sich das Widget an seinen Ort an, statt fest wie eine Karte
 *            auszusehen, auch wenn es auf dem Seitenhintergrund liegt.
 *   --niu-*  global am :root, ohne Dark-Variante (Signalfarben, Radien).
 *
 * Ohne var()-Fallbacks: Unterhalb von body sind beide Sorten immer definiert.
 * Das Gate auf body.niu-theme2 ist Pflicht - ohne es griffe der Block auch in
 * Shops ohne Theme v2 und laese dort ins Leere.
 */
body.niu-theme2 .dzm-advisor {
    --dzm-advisor-bg: var(--s-bg);
    --dzm-advisor-border: var(--s-border);
    --dzm-advisor-text: var(--s-text);
    --dzm-advisor-heading: var(--s-heading);
    --dzm-advisor-muted: var(--s-text-muted);
    --dzm-advisor-shadow: var(--s-shadow);

    --dzm-advisor-option-bg: var(--s-input-bg);
    --dzm-advisor-option-border: var(--s-input-border);
    --dzm-advisor-option-hover: var(--s-hover);
    --dzm-advisor-accent: var(--s-accent);
    --dzm-advisor-accent-text: var(--s-accent-text);

    --dzm-advisor-danger: var(--niu-danger);
    --dzm-advisor-info: var(--niu-info);

    --dzm-advisor-radius: var(--niu-radius-card);
    --dzm-advisor-radius-option: var(--niu-radius-control);
}

/* ---------- Rahmen ---------- */

.dzm-advisor__head {
    margin-bottom: var(--dzm-advisor-gap);
}

.dzm-advisor__title {
    color: var(--dzm-advisor-heading);
    margin: 0 0 .25rem;
}

.dzm-advisor__intro {
    color: var(--dzm-advisor-muted);
    margin: 0;
}

/* ---------- Schritt-Modus ---------- */

.dzm-advisor__progress {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: var(--dzm-advisor-gap);
}

.dzm-advisor__progress-bar {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: var(--dzm-advisor-option-border);
    overflow: hidden;
}

.dzm-advisor__progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--dzm-advisor-accent);
    transition: width .2s ease;
}

.dzm-advisor__progress-label {
    flex: 0 0 auto;
    color: var(--dzm-advisor-muted);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.dzm-advisor__steps {
    display: flex;
    gap: .5rem;
    margin-bottom: var(--dzm-advisor-gap);
}

/* ---------- Content-Schritt ---------- */

/*
 * Die beiden Kastenregeln sind bewusst ueber den Wurzelknoten gescoped, statt
 * einfach .dzm-advisor__content zu heissen. Grund ist eine globale Regel aus
 * dzm_resources (frontend/css/dzm_resources.style.css):
 *
 *     section[class^="dzm-"] { padding: 0; }
 *
 * Sie ist Absicht - Portlet-WURZELN sollen keine Polsterung tragen - trifft
 * aber jedes <section>, dessen Klasse mit dzm- beginnt, also auch innere
 * Elemente. Mit (0,1,1) schlaegt sie eine einfache Klassenregel (0,1,0).
 * Sichtbar wurde das nur am Content-Schritt: Der ist ein <section>, die Fragen
 * sind <fieldset> und damit nicht betroffen. Der Text klebte am Rand.
 *
 * Das Scoping auf .dzm-advisor ergibt (0,2,0) und gewinnt unabhaengig von der
 * Ladereihenfolge der beiden Dateien. Wer das hier zurueckvereinfacht, holt
 * den Fehler zurueck.
 */
.dzm-advisor .dzm-advisor__content {

    background: var(--dzm-advisor-bg);
    border: 1px solid var(--dzm-advisor-border);
    border-radius: var(--dzm-advisor-radius);
    box-shadow: var(--dzm-advisor-shadow);
    padding: var(--dzm-advisor-gap);
    margin: 0 0 var(--dzm-advisor-gap);
}

.dzm-advisor__content-title {
    color: var(--dzm-advisor-heading);
    font-size: 1.0625rem;
    margin: 0 0 .5rem;
}

/*
 * Der Inhalt kommt als HTML aus dem Admin. Hier wird bewusst nur das Noetigste
 * gesetzt - alles Weitere soll aus dem Template kommen, damit der Text aussieht
 * wie der uebrige Shop-Inhalt und nicht wie ein Fremdkoerper.
 */
.dzm-advisor__content-body > *:first-child {
    margin-top: 0;
}

.dzm-advisor__content-body > *:last-child {
    margin-bottom: 0;
}

/* ---------- Frage ---------- */

/* Aus demselben Grund gescoped wie oben - heute ein <fieldset> und damit nicht
   betroffen, aber die Symmetrie soll halten, falls das Element je wechselt. */
.dzm-advisor .dzm-advisor__question {

    background: var(--dzm-advisor-bg);
    border: 1px solid var(--dzm-advisor-border);
    border-radius: var(--dzm-advisor-radius);
    box-shadow: var(--dzm-advisor-shadow);
    padding: var(--dzm-advisor-gap);
    margin: 0 0 var(--dzm-advisor-gap);
    /* fieldset bringt eigene Voreinstellungen mit, die wir nicht wollen */
    min-width: 0;
}

.dzm-advisor__legend {
    color: var(--dzm-advisor-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    /* legend als Block, damit es sich wie eine Ueberschrift verhaelt */
    display: block;
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 .25rem;
}

.dzm-advisor__hint {
    color: var(--dzm-advisor-muted);
    font-size: .875rem;
    margin: 0 0 .75rem;
}

.dzm-advisor__hint > *:first-child {
    margin-top: 0;
}

.dzm-advisor__hint > *:last-child {
    margin-bottom: 0;
}

/* ---------- Antwortoptionen ---------- */

.dzm-advisor__options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .5rem;
}

.dzm-advisor__options--list {
    grid-template-columns: 1fr;
}

/*
 * Das label umschliesst den Input - damit ist die ganze Flaeche klickbar,
 * ohne dass dafuer JavaScript noetig waere.
 */
.dzm-advisor__option {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--dzm-advisor-option-bg);
    border: 1px solid var(--dzm-advisor-option-border);
    border-radius: var(--dzm-advisor-radius-option);
    padding: .625rem .75rem;
    margin: 0;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.dzm-advisor__option:hover {
    background: var(--dzm-advisor-option-hover);
}

/* Tastaturbedienung sichtbar halten - der Fokus sitzt auf dem Input. */
.dzm-advisor__option:focus-within {
    outline: 2px solid var(--dzm-advisor-accent);
    outline-offset: 2px;
}

.dzm-advisor__option-input {
    margin: 0;
    flex: 0 0 auto;
}

.dzm-advisor__option-label {
    flex: 1 1 auto;
    min-width: 0;
}

.dzm-advisor__option-count {
    flex: 0 0 auto;
    color: var(--dzm-advisor-muted);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}


/*
 * Sackgasse: Option fuehrt zu null Treffern. Sie bleibt sichtbar statt zu
 * verschwinden - ein Feld, das beim Antworten wegspringt, verwirrt mehr als
 * eine ausgegraute Option, die erklaert, warum sie nicht geht.
 */
.dzm-advisor__option--dead {
    opacity: .45;
    cursor: not-allowed;
}

.dzm-advisor__option--dead:hover {
    background: var(--dzm-advisor-option-bg);
}

.dzm-advisor__option--dead .dzm-advisor__option-count {
    color: var(--dzm-advisor-danger);
}

.dzm-advisor__option-image {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    border-radius: var(--dzm-advisor-radius-option);
}

/* ---------- Fuss und Ergebnis ---------- */

.dzm-advisor__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding-top: .25rem;
}

.dzm-advisor__total {
    font-weight: 600;
    color: var(--dzm-advisor-heading);
    font-variant-numeric: tabular-nums;
}

.dzm-advisor__results {
    margin-top: var(--dzm-advisor-gap);
}

.dzm-advisor__notice {
    border: 1px solid var(--dzm-advisor-border);
    border-left: 3px solid var(--dzm-advisor-info);
    border-radius: var(--dzm-advisor-radius);
    background: var(--dzm-advisor-bg);
    color: var(--dzm-advisor-muted);
    padding: .75rem 1rem;
    margin: 0;
}

.dzm-advisor__notice--empty {
    border-left-color: var(--dzm-advisor-danger);
}

/*
 * Ohne JavaScript bleibt der Fragebogen vollstaendig lesbar - die Zaehler und
 * die Ergebnisflaeche sind dann nur nicht interaktiv. Deshalb wird hier nichts
 * per CSS versteckt, was der Nutzer sonst nie zu sehen bekaeme.
 */

/* Ergebnisraster.
   Bewusst hier und nicht ueber Template-Utilities: d-grid und grid-cols-2
   gibt es erst ab NIUplus 6, im 4.x-Zweig (Shop 5.5) sind sie nirgends
   definiert. Dort waeren die Karten zu einem vollbreiten Stapel geworden.
   Eine Spalte auf dem Telefon, zwei ab Tablet - dasselbe Ergebnis wie
   vorher, nur unabhaengig von der Template-Generation. */
.dzm-advisor__result-grid--own {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .dzm-advisor__result-grid--own {
        grid-template-columns: repeat(2, 1fr);
    }
}