/* Letzte Änderung: v0.5.24.0 */
/* ============================================================
   Gutscheine Plugin – Frontend-STRUKTUR (lädt immer)

   v0.5.24.0: Aufteilung Struktur/Skin (Bugfix Theme-Übernahme).
   Diese Datei enthält ausschließlich Layout & Funktion:
   Anordnung, Abstände, Sichtbarkeit, funktionales Feedback
   (Erfolg/Fehler, Auswahl-Markierung, Fokus-Erreichbarkeit).
   Die komplette Optik (Farben, Schriften, Rahmen, Radius,
   Schatten, Hover) liegt in gutscheine-skin.css und lädt nur,
   wenn die Theme-Übernahme AUS ist. Bei Übernahme AN bestimmt
   das Theme das Aussehen; diese Datei hält nur das Gerüst.

   Funktionale Farben (bewusst hier, nicht im Skin): Erfolg/
   Fehler sind Semantik, kein Design — ohne sie wären Meldungen
   unkenntlich. Ein Theme liefert dafür keinen Ersatz.
   ============================================================ */

:root {
    --gs-success: #2d7d46;
    --gs-error:   #b00020;
}

/* ── Wrapper ─────────────────────────────────────────────── */
/* Die Kastenmaße (max-width, Zentrierung, Innenpolster) sind Teil
   des Karten-DESIGNS und liegen im Skin. Bei Theme-Übernahme läuft
   das Formular in voller Inhaltsbreite des Themes mit. */

.gutscheine-wrapper h2 {
    margin: 0 0 8px;
}

.gutscheine-intro {
    margin: 0 0 24px;
}

/* ── Step indicator ──────────────────────────────────────── */
.gutscheine-step-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.gutscheine-step {
    white-space: nowrap;
}

.gutscheine-step.active {
    font-weight: 700;
}

.gutscheine-step.done {
    color: var(--gs-success);
}

/* ── Confirmed badge (funktionales Erfolgs-Feedback) ─────── */
.gutscheine-confirmed-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eaf7ee;
    border: 1px solid #b2dfbb;
    color: var(--gs-success);
    padding: 6px 14px;
    margin-bottom: 20px;
}

.gutscheine-checkmark {
    font-weight: 700;
}

/* ── Fields ──────────────────────────────────────────────── */
.gutscheine-row {
    display: flex;
    gap: 16px;
}

.gutscheine-row .gutscheine-field {
    flex: 1;
}

.gutscheine-field {
    margin-bottom: 18px;
    position: relative;
}

.gutscheine-field label {
    display: block;
    margin-bottom: 6px;
}

.gutscheine-required {
    color: var(--gs-error);
    margin-left: 2px;
}

.gutscheine-field input[type="text"],
.gutscheine-field input[type="email"],
.gutscheine-field input[type="number"],
.gutscheine-field input[type="url"],
.gutscheine-field input[type="tel"],
.gutscheine-field textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.gutscheine-field textarea {
    resize: vertical;
    min-height: 90px;
}

/* Euro-Prefix (funktional: € darf die Eingabe nicht überlagern) */
.gutscheine-input-prefix {
    position: relative;
    display: flex;
    align-items: center;
}

.gutscheine-input-prefix .prefix-symbol {
    position: absolute;
    left: 13px;
    pointer-events: none;
}

.gutscheine-input-prefix input {
    padding-left: 28px !important;
}

/* Char counter (funktionale Einblendung im Feld) ───────────  */
.gutscheine-char-count {
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-size: 11px;
}

/* ── Privacy checkbox ────────────────────────────────────── */
.gutscheine-privacy {
    margin-bottom: 22px;
}

.gutscheine-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.gutscheine-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* ── Button (Gerüst; Optik kommt aus Skin oder Theme) ────── */
.gutscheine-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
}

.gutscheine-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* Spinner (funktional) ─────────────────────────────────────  */
.btn-spinner {
    animation: gs-spin 1s linear infinite;
    display: inline-block;
}

@keyframes gs-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Hint text ───────────────────────────────────────────── */
.gutscheine-hint {
    margin: 12px 0 0;
}

/* ── Privacy note (Opt-In form) ──────────────────────────── */
.gutscheine-privacy-note {
    margin: 0 0 20px;
}

/* ── Messages (funktionales Erfolg-/Fehler-Feedback) ─────── */
.gutscheine-message {
    border-radius: var(--gs-radius-sm, 4px);
    padding: 13px 16px;
    margin-bottom: 20px;
}

.gutscheine-message.success {
    background: #eaf7ee;
    border: 1px solid #b2dfbb;
    color: var(--gs-success);
}

.gutscheine-message.error {
    background: #fdecea;
    border: 1px solid #f5c2be;
    color: var(--gs-error);
}

/* ════════════════════════════════════════════════════════════
   2-Step-Formular – Übersicht & Bestellung (NEU v0.3.4.0)
   ════════════════════════════════════════════════════════════ */

/* Step-Panes – Sichtbarkeit wird per [hidden] / JS gesteuert */
.gutscheine-step-pane[hidden] {
    display: none;
}

.gutscheine-step2-title {
    margin: 0 0 16px;
}

/* Zusammenfassung ──────────────────────────────────────────  */
.gutscheine-summary {
    padding: 8px 18px;
    margin-bottom: 22px;
}

.gutscheine-summary-row {
    display: flex;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--gs-border, #d8dde6);
}

.gutscheine-summary-row:last-child {
    border-bottom: none;
}

.gutscheine-summary-label {
    flex: 0 0 38%;
    font-weight: 600;
}

.gutscheine-summary-value {
    flex: 1;
    word-break: break-word;
}

/* Widerrufsbelehrung ───────────────────────────────────────  */
.gutscheine-withdrawal {
    margin-bottom: 22px;
}

.gutscheine-withdrawal > summary {
    cursor: pointer;
    padding: 12px 16px;
    list-style-position: inside;
}

.gutscheine-withdrawal-text {
    padding: 0 16px 14px;
}

/* Aktionsleiste Schritt 2 ──────────────────────────────────  */
.gutscheine-btn-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Success state (after submission) ───────────────────── */
.gutscheine-success-state {
    text-align: center;
    padding: 20px 0;
}

.gutscheine-success-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 16px;
}

.gutscheine-success-state h3 {
    color: var(--gs-success);
    margin: 0 0 10px;
}

/* Gutschein-Code (funktional: Monospace + Sperrung = Lesbarkeit) */
.gutscheine-code-display {
    display: inline-block;
    font-family: monospace;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 10px 20px;
    margin: 16px 0;
}

/* ── Responsive ──────────────────────────────────────────── */
/* (Wrapper-Padding mobil liegt beim Kasten-Design im Skin) */
@media (max-width: 540px) {
    .gutscheine-row {
        flex-direction: column;
        gap: 0;
    }
    /* Button-Leiste Schritt 2 untereinander, Bestell-Button zuerst (NEU v0.3.4.0) */
    .gutscheine-btn-row {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .gutscheine-btn-row .gutscheine-btn {
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }
    /* Zusammenfassung: Label über Wert (NEU v0.3.4.0) */
    .gutscheine-summary-row {
        flex-direction: column;
        gap: 2px;
    }
    .gutscheine-summary-label {
        flex-basis: auto;
    }
}

/* ════════════════════════════════════════════════════════════
   Phase 3b (v0.3.5.0) – Frontend-Vorlagenauswahl
   ════════════════════════════════════════════════════════════ */

.gutscheine-template-select {
    margin-bottom: 22px;
}

.gutscheine-template-select__label {
    display: block;
    margin-bottom: 10px;
}

.gutscheine-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.gutscheine-template-card {
    display: block;
    cursor: pointer;
    position: relative;
}

/* Radio visuell verstecken, aber für Tastatur/Screenreader erreichbar */
.gutscheine-template-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Rahmen-Gerüst transparent: Das Skin (oder nichts) färbt ihn.
   Die Auswahl-Markierung (checked/focus) ist FUNKTION und bleibt
   deshalb hier — theme-neutral über currentColor; das Skin
   übersteuert die Farben auf die Plugin-Palette. */
.gutscheine-template-card__inner {
    display: block;
    border: 2px solid transparent;
    overflow: hidden;
}

.gutscheine-template-card input[type="radio"]:checked + .gutscheine-template-card__inner {
    border-color: currentColor;
}

.gutscheine-template-card input[type="radio"]:focus-visible + .gutscheine-template-card__inner {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.gutscheine-template-card__img {
    display: block;
    width: 100%;
    height: 86px;
    object-fit: cover;
}

.gutscheine-template-card__noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 86px;
}

.gutscheine-template-card__name {
    display: block;
    padding: 7px 8px;
    text-align: center;
}