/*
 * Frontend-Styles fuer IDF Woo Roomdesign.
 *
 * Bewusst zurueckhaltend. Schrift, Schriftgroesse und Grundfarben bleiben Sache
 * des Themes, hier stehen nur Struktur, Rahmen und Zustaende. Wo eine Farbe
 * noetig ist, steht `currentColor`: das ist die Textfarbe des Themes und passt
 * damit ueberall, ohne etwas vorzugeben.
 *
 * Zwei Ausnahmen mit festen Werten, beide dokumentiert: die Farbfelder zeigen
 * einen vom Kunden gewaehlten Ton, und Fehler brauchen ein Rot, das nicht vom
 * Zufall der Themefarbe abhaengt.
 */

:root {
    /*
     * Fehlerrot. Der Wert stammt aus dem WordPress-Backend und ist bewusst
     * gedeckt: er soll auf hellen wie dunklen Themes lesbar sein, ohne sich
     * als Markenfarbe aufzudraengen.
     */
    --idf-rd-error: #b32d2e;
}

/* ── Schritte ───────────────────────────────────────────────────────────── */

/*
 * Zaehlziffern per CSS-Counter statt vom Browser. Die Ziffern einer `ol`
 * lassen sich nicht gestalten und standen ungestylt neben den Ueberschriften.
 */
.idf-roomdesign__steps {
    list-style: none;
    counter-reset: idf-step;
    margin: 1.5em 0;
    padding: 0;
}

.idf-roomdesign__step {
    counter-increment: idf-step;
    margin: 0 0 2.5em;
}

.idf-roomdesign__step:last-child {
    margin-bottom: 0;
}

.idf-roomdesign__step-title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 0.75em;
}

.idf-roomdesign__step-title::before {
    content: counter(idf-step);
    box-sizing: border-box;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.65em;
    font-weight: normal;
    line-height: 1;
}

/* Erledigter Schritt: Haken statt Ziffer. Der Counter zaehlt trotzdem weiter,
   die folgenden Nummern bleiben also richtig. */
.idf-roomdesign__step[data-state="done"] .idf-roomdesign__step-title::before {
    content: "\2713";
}

/* Noch nicht moeglicher Schritt. Nur gedaempft, nicht ausgeblendet: er soll
   sichtbar bleiben, damit klar ist, was noch kommt. */
.idf-roomdesign__step[data-state="locked"] {
    opacity: 0.5;
}

.idf-roomdesign__hint {
    margin: 0 0 0.75em;
    opacity: 0.75;
}

/* ── Ablageflaeche fuer das Foto ────────────────────────────────────────── */

.idf-roomdesign__dropzone {
    position: relative;
    border: 2px dashed currentColor;
    border-radius: 4px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/*
 * Der Rahmen wirkt in Ruhe zurueckhaltend und wird bei Hover, Tastaturfokus
 * und beim Ziehen kraeftiger. `color-mix` faellt auf Browsern ohne
 * Unterstuetzung schlicht aus, dann bleibt der volle Rahmen stehen.
 */
@supports (border-color: color-mix(in srgb, currentColor 40%, transparent)) {
    .idf-roomdesign__dropzone {
        border-color: color-mix(in srgb, currentColor 40%, transparent);
    }
}

.idf-roomdesign__dropzone:hover,
.idf-roomdesign__dropzone[data-state="dragover"] {
    border-color: currentColor;
    background-color: rgba(127, 127, 127, 0.08);
}

/* Das Feld selbst ist optisch ausgeblendet, der Fokus muss trotzdem sichtbar
   sein. Deshalb liegt der Fokusring auf der Flaeche. */
.idf-roomdesign__dropzone:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-color: currentColor;
}

.idf-roomdesign__dropzone[data-state="error"] {
    border-style: solid;
    border-color: var(--idf-rd-error);
}

/*
 * Optisch ausgeblendet, aber vorhanden: mit `display: none` waere das Feld
 * weder mit der Tastatur erreichbar noch fuer einen Screenreader da.
 */
.idf-roomdesign__file {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.idf-roomdesign__drop-label {
    display: block;
    padding: 2em 1.25em;
    text-align: center;
    cursor: pointer;
}

.idf-roomdesign__drop-title {
    display: block;
    font-weight: bold;
}

.idf-roomdesign__drop-hint {
    display: block;
    margin-top: 0.5em;
    opacity: 0.75;
}

/* Waehrend des Uploads ist die Flaeche nicht mehr anklickbar, die
   Fortschrittsanzeige uebernimmt. */
.idf-roomdesign__dropzone[data-state="uploading"] .idf-roomdesign__drop-label {
    cursor: default;
    opacity: 0.6;
}

/* ── Fortschritt ────────────────────────────────────────────────────────── */

/*
 * Eigene Anzeige statt `<progress>`: das Element laesst sich nur ueber
 * Hersteller-Pseudoelemente einfaerben und bringt sonst ein Browserblau mit,
 * das zu keinem Theme passt.
 */
.idf-roomdesign__progress {
    margin: 0;
    padding: 0 1.25em 1.25em;
}

.idf-roomdesign__progress-track {
    display: block;
    height: 0.5em;
    border-radius: 0.25em;
    background-color: rgba(127, 127, 127, 0.25);
    overflow: hidden;
}

.idf-roomdesign__progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background-color: currentColor;
    transition: width 0.2s ease;
}

/* ── Vorschau ───────────────────────────────────────────────────────────── */

.idf-roomdesign__preview {
    margin-top: 1em;
}

/*
 * Begrenzte Hoehe: in Originalbreite schiebt ein Handyfoto im Hochformat die
 * folgenden Schritte aus dem Bild.
 */
.idf-roomdesign__preview img {
    display: block;
    max-width: 100%;
    max-height: 340px;
    width: auto;
    height: auto;
    border: 1px solid currentColor;
    border-radius: 3px;
}

.idf-roomdesign__preview p {
    margin: 0.75em 0 0;
}

/* ── Ergebnis ───────────────────────────────────────────────────────────── */

/*
 * Das Ergebnis darf groesser sein als die Vorschau des Ausgangsfotos: es ist
 * das, weswegen die Kundschaft hier ist.
 */
.idf-roomdesign__result {
    margin-top: 1em;
}

.idf-roomdesign__result img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid currentColor;
    border-radius: 3px;
}

.idf-roomdesign__result p {
    margin: 0.75em 0 0;
}

/* ── Meldungen ──────────────────────────────────────────────────────────── */

.idf-roomdesign__status {
    margin: 0.75em 0 0;
}

.idf-roomdesign__status:empty {
    display: none;
}

.idf-roomdesign__status--pending {
    opacity: 0.75;
}

.idf-roomdesign__status--fail {
    color: var(--idf-rd-error);
    font-weight: bold;
}

.idf-roomdesign__status--ok {
    font-weight: bold;
}

/* ── Flaechen ───────────────────────────────────────────────────────────── */

.idf-roomdesign__surface {
    margin: 0 0 1.25em;
    padding: 1em 1.25em 1.25em;
    border: 1px solid currentColor;
    border-radius: 4px;
}

@supports (border-color: color-mix(in srgb, currentColor 30%, transparent)) {
    .idf-roomdesign__surface {
        border-color: color-mix(in srgb, currentColor 30%, transparent);
    }
}

.idf-roomdesign__surface:last-child {
    margin-bottom: 0;
}

.idf-roomdesign__surface-title {
    padding: 0 0.4em;
    font-weight: bold;
}

.idf-roomdesign__surface-product {
    margin: 0;
}

.idf-roomdesign__surface-product select {
    max-width: 100%;
}

.idf-roomdesign__color-hint {
    margin: 0.75em 0 0.4em;
}

.idf-roomdesign__surface-picker {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin: 0.75em 0 0;
}

/* ── Farbfelder ─────────────────────────────────────────────────────────── */

/*
 * Ein Feld je Farbton, die Beschriftung liegt auf dem Ton selbst. Eine
 * Auswahlliste zeigte nur Namen und Nummern, und eine Nummer sagt ueber einen
 * Farbton nichts aus.
 *
 * Farbwert und Schriftfarbe kommen als Custom Properties vom Skript, die
 * Schriftfarbe hat der Server nach Kontrast bestimmt. Das ist der
 * dokumentierte Ausnahmefall fuer feste Farben: hier IST die Farbe der Inhalt.
 */
/* ── Akkordeon um die Farbfelder ────────────────────────────────────────── */

.idf-roomdesign__colors {
    margin-top: 0.75em;
}

.idf-roomdesign__colors-summary {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.25em;
    cursor: pointer;
}

.idf-roomdesign__colors-summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.idf-roomdesign__colors-label {
    font-weight: bold;
}

.idf-roomdesign__colors-count {
    opacity: 0.7;
}

/* Die getroffene Wahl steht in der Kopfzeile, sonst ist sie nach dem
   Zuklappen nicht mehr zu sehen. */
.idf-roomdesign__colors-chosen {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.idf-roomdesign__chosen-swatch {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px;
}

.idf-roomdesign__colors-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 0.75em;
}

.idf-roomdesign__filter {
    flex: 1 1 12em;
    max-width: 22em;
}

/*
 * Gedeckelte Hoehe mit eigenem Scrollbereich. Mehrere hundert Farbfelder
 * schieben sonst alles Weitere aus dem Bild, auch aufgeklappt.
 */
.idf-roomdesign__swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr));
    gap: 0.4em;
    margin: 0;
    max-height: 22em;
    overflow-y: auto;
    padding-right: 0.25em;
}

.idf-roomdesign__swatch {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 3.25em;
    padding: 0.35em 0.45em;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    background-color: var(--idf-rd-swatch, transparent);
    color: var(--idf-rd-swatch-text, inherit);
    cursor: pointer;
}

/* Ohne HEX-Wert gibt es nichts zu zeigen: dann bleibt es beim Namen auf dem
   Untergrund des Themes, statt eine Farbe zu erfinden. */
.idf-roomdesign__swatch--nocolor {
    border-style: dashed;
    color: inherit;
}

/*
 * Etwas groesser und halbfett. Bei mittleren Toenen liegt der Kontrast
 * bauartbedingt bei gut 4,3 zu 1 und laesst sich nicht weiter steigern, ohne
 * den Farbton mit einem Schleier zu verfaelschen - und der Farbton ist hier
 * die Information. Groesse und Strichstaerke helfen, wo Kontrast nicht mehr
 * geht. Der Name steht ausserdem im Vorlesetext der Auswahl.
 */
.idf-roomdesign__swatch-label {
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Das Feld selbst ist optisch ausgeblendet, aber vorhanden und bedienbar. */
.idf-roomdesign__swatch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.idf-roomdesign__swatch:hover {
    border-color: rgba(0, 0, 0, 0.45);
}

/*
 * Die Auswahl darf nicht allein an der Farbe haengen: auf einem Feld, dessen
 * Ton dem Rahmen aehnelt, waere sie unsichtbar. Deshalb ein Ring aussen herum
 * plus ein Haken auf dem Feld.
 */
.idf-roomdesign__swatch.is-selected {
    box-shadow: 0 0 0 3px currentColor;
    border-color: transparent;
}

.idf-roomdesign__swatch.is-selected::after {
    content: "\2713";
    position: absolute;
    top: 0.35em;
    right: 0.45em;
    font-size: 1.1em;
    line-height: 1;
}

.idf-roomdesign__swatch:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/*
 * Der Farbwaehler rendert einen vom Kunden gewaehlten Wert. Das ist der
 * dokumentierte Ausnahmefall, in dem feste Farben erlaubt sind.
 */
.idf-roomdesign__color-picker {
    width: 3em;
    height: 2em;
    padding: 0;
    border: 1px solid currentColor;
    cursor: pointer;
}

.idf-roomdesign__color-picker:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Schmale Schirme. Das ist der Regelfall, nicht die Ausnahme - fotografiert
   wird mit dem Telefon. */
@media (max-width: 600px) {
    .idf-roomdesign__drop-label {
        padding: 1.5em 1em;
    }

    .idf-roomdesign__surface {
        padding: 0.75em 1em 1em;
    }

    /* Zwei Spalten bleiben auch auf dem Telefon lesbar, mehr nicht. */
    .idf-roomdesign__swatches {
        grid-template-columns: repeat(auto-fill, minmax(7.5em, 1fr));
        max-height: 18em;
    }

    .idf-roomdesign__surface-product select {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .idf-roomdesign__dropzone,
    .idf-roomdesign__progress-bar {
        transition: none;
    }
}

/* ── Meine Designs ──────────────────────────────────────────────────────── */

.idf-roomdesign-account__list {
    list-style: none;
    margin: 1em 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1em;
}

.idf-roomdesign-account__item {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    padding: 0.75em;
    border: 1px solid currentColor;
    border-radius: 3px;
}

.idf-roomdesign-account__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    margin-bottom: 0.5em;
}

.idf-roomdesign-account__title {
    font-weight: bold;
}

.idf-roomdesign-design__image img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid currentColor;
    border-radius: 3px;
    margin: 1em 0;
}

.idf-roomdesign-account__meta {
    opacity: 0.75;
}

/* ── Detailansicht ──────────────────────────────────────────────────────── */

.idf-roomdesign-design__surfaces {
    list-style: none;
    margin: 0.5em 0;
    padding: 0;
}

.idf-roomdesign-design__surfaces li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.35em;
}

/*
 * Der Farbton kommt aus dem Farben-Datensatz und wird per Inline-Style
 * gesetzt. Das ist genau der dokumentierte Ausnahmefall: ein Wert, den der
 * Anwender bewusst gewaehlt hat, darf fest gerendert werden.
 */
.idf-roomdesign-design__swatch {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 2px;
}

.idf-roomdesign-design__disclaimer {
    margin-top: 1.5em;
    opacity: 0.75;
}