/* PWGermanShop — Widerrufs-Modul CSS
 *
 * Wird vom GermanShopWiderruf-Modul über die AssetRegistry mit Priority 50
 * (Modul-Schicht) angemeldet. Referenziert die Design-Tokens aus
 * `gs-theme.css` (--gs-*).
 *
 * Inhalt:
 *  - Widerrufs-Formular-Container (/widerruf/), Intro-Text.
 *  - Status-Banner (Eingangs-/Fehler-Meldungen) im selben Look-and-Feel
 *    wie die Checkout-Validierungs-Banner.
 *  - Generische Form-Row-/Fieldset-Styles für das Widerrufsformular —
 *    gleicher Look-and-Feel wie der Checkout, aber HIER mitgeliefert, damit
 *    das Modul ohne Checkout-CSS funktioniert (auf `/widerruf/` lädt das
 *    Frontend nur widerruf.css + cart.css + gs-theme.css).
 *  - Generischer `.gs-hint`-Subtext — wird (Stand 06/2026) nur hier
 *    verwendet und bleibt deshalb beim Widerruf-Subtree.
 */

.gs-widerruf {
    max-width: 40rem;
    margin: 0 auto;
}
.gs-widerruf h1 { margin-top: 0; }
.gs-widerruf-intro {
    color: var(--gs-ink-soft);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}
.gs-widerruf-result {
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
}
.gs-widerruf-result p { margin: 0.4rem 0; }
.gs-widerruf-result p:first-child { margin-top: 0; }
.gs-widerruf-result p:last-child { margin-bottom: 0; }
.gs-widerruf-result--ok {
    background: var(--gs-ok-bg);
    border-color: var(--gs-ok-border);
    color: var(--gs-ok);
}
.gs-widerruf-result--ok strong { color: var(--gs-ink); }
.gs-widerruf-result--err {
    background: var(--gs-err-bg);
    border-color: var(--gs-err-border);
    color: var(--gs-err);
}
.gs-widerruf-result--err ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.gs-widerruf-result--err li { margin: 0.2rem 0; }
.gs-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--gs-ink-soft);
    line-height: 1.5;
}

/* ── Formular (Fieldset/Form-Rows) ─────────────────────────────────────
 * Bewusst identisch zum Checkout, damit der WiderrufRenderer dieselben
 * Klassen-Namen nutzen kann (DRY: ein Markup-Muster für alle Shop-Formulare).
 * Wird hier mitgeliefert, weil auf `/widerruf/` die checkout.css NICHT
 * geladen wird — das Modul soll für sich allein hübsch sein.
 */
.gs-checkout-fieldset {
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    background: var(--gs-surface);
    box-shadow: var(--gs-shadow-sm);
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.35rem 1.35rem;
}
.gs-checkout-fieldset legend {
    font-family: var(--gs-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 0 0.5rem;
}
.gs-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0 0 0.85rem;
}
.gs-form-row label {
    font-size: 0.9375rem;
    font-weight: 500;
}
.gs-form-row input,
.gs-form-row select,
.gs-form-row textarea {
    padding: 0.55rem 0.65rem;
    font-size: 1rem;
    border: 1px solid var(--gs-border-strong);
    border-radius: var(--gs-radius-sm);
    background: var(--gs-surface);
    font-family: inherit;
}
.gs-form-row input:focus,
.gs-form-row select:focus,
.gs-form-row textarea:focus {
    border-color: var(--gs-accent);
    outline: none;
}
.gs-form-row--error input,
.gs-form-row--error select,
.gs-form-row--error textarea {
    border-color: var(--gs-err);
    background: var(--gs-err-bg);
}
.gs-field-error {
    color: var(--gs-err);
    font-size: 0.8125rem;
}
.gs-required { color: var(--gs-err); }

.gs-checkout-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.gs-widerruf-actions { justify-content: flex-start; }