/* =====================================================================
 * Fichier : assets/css/pages/widerrufsbelehrung.css
 * Projet  : Brennholz Shop24
 * Rôle    : Styles propres à la Widerrufsbelehrung (widerrufsbelehrung.php) :
 *           actions et chiffres du bandeau, encadré « texte officiel »,
 *           fonction de rétractation en ligne en trois étapes (saisie,
 *           récapitulatif, accusé de réception animé), modèle de
 *           formulaire de rétractation pré-remplissable, étapes pratiques,
 *           impression de l'accusé ou du modèle seul.
 *           Mise en page commune : assets/css/components/legal.css
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Bandeau
 * ------------------------------------------------------------------- */
.wr-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.4rem; animation: hfk-fade-up .7s .25s var(--hfk-ease) both; }
.wr-hero-cta { position: relative; overflow: hidden; box-shadow: var(--hfk-shadow-fire); }
.wr-hero-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: wr-shine 3.6s 1.2s ease-in-out infinite; }
.wr-hero-cta i { transition: transform .45s var(--hfk-ease); }
.wr-hero-cta:hover i { transform: rotate(-200deg); }
.wr-hero-facts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; animation: hfk-fade-up .7s .35s var(--hfk-ease) both; }
.wr-hero-facts li { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; background: rgba(255, 255, 255, .07); border-left: 3px solid var(--hfk-amber); }
.wr-hero-facts li:nth-child(2) { border-color: var(--hfk-forest); }
.wr-hero-facts li:nth-child(3) { border-color: var(--hfk-flame); }
.wr-hero-facts strong { min-width: 28px; font-family: var(--hfk-font-head); font-size: 1.5rem; line-height: 1; color: #fff; text-align: center; }
.wr-hero-facts span { font-size: .82rem; color: #E1D7CC; }
@keyframes wr-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------------------------------------------------------------------
 * 2. Texte officiel de la Belehrung
 * ------------------------------------------------------------------- */
.wr-official { position: relative; padding: 1.3rem 1.4rem .4rem; background: #fff; border: 1px solid var(--hfk-border); border-left: 5px solid var(--hfk-charcoal); }
.wr-official h3 { margin-top: 0; font-size: 1.15rem; }
.wr-official-label { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; padding: .25rem .7rem; background: var(--hfk-charcoal); color: #fff; font-family: var(--hfk-font-head); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wr-official-label i { color: var(--hfk-amber); }
.wr-official a { overflow-wrap: anywhere; }
.wr-official + .lx-note { margin-top: 1rem; }

/* ---------------------------------------------------------------------
 * 3. Fonction de rétractation en ligne
 * ------------------------------------------------------------------- */
#vertrag-widerrufen { scroll-margin-top: calc(var(--hfk-header-h, 76px) + 1rem); }
#vertrag-widerrufen.is-target .wr-tool { animation: wr-pulse 1.4s var(--hfk-ease); }
.wr-tool { margin-top: 1.2rem; background: #fff; border: 2px solid var(--hfk-flame); box-shadow: var(--hfk-shadow); }
@keyframes wr-pulse { 0%, 40% { box-shadow: 0 0 0 6px rgba(34, 166, 75, .3), var(--hfk-shadow); } 100% { box-shadow: var(--hfk-shadow); } }

.lx-content .wr-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; background: var(--hfk-cream); border-bottom: 1px solid var(--hfk-border); counter-reset: none; }
.lx-content .wr-progress > li { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .8rem 1rem; font-size: .86rem; font-weight: 600; color: var(--hfk-muted); border-right: 1px solid var(--hfk-border); transition: background .35s, color .35s; }
.lx-content .wr-progress > li::before { display: none; }
.lx-content .wr-progress > li:last-child { border-right: 0; }
.wr-progress span { display: inline-grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; background: #fff; border: 2px solid var(--hfk-border); font-family: var(--hfk-font-head); font-size: .85rem; color: var(--hfk-muted); transition: background .35s, border-color .35s, color .35s, transform .4s var(--hfk-ease-bounce); }
.lx-content .wr-progress > li.is-current { background: #fff; color: var(--hfk-charcoal); }
.wr-progress li.is-current span { background: var(--hfk-flame); border-color: var(--hfk-flame); color: #fff; transform: scale(1.1); }
.wr-progress li.is-done span { background: var(--hfk-forest); border-color: var(--hfk-forest); color: #fff; }

.wr-panel { padding: clamp(1.1rem, 3vw, 1.6rem); animation: hfk-fade-up .45s var(--hfk-ease) both; }
.wr-panel[hidden] { display: none; }
.wr-panel-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: 1.15rem; }
.wr-panel-title i { color: var(--hfk-flame); }
.wr-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; margin-top: .4rem; }
.wr-field .form-control { height: 50px; }
.wr-field textarea.form-control { height: auto; min-height: 96px; }
.wr-field.has-error .form-control { border-color: var(--hfk-ember); box-shadow: 0 0 0 3px rgba(229, 56, 59, .12); }
.wr-msg { display: block; min-height: 1.1em; margin-top: .3rem; font-size: .8rem; color: var(--hfk-muted); }
.wr-field.has-error .wr-msg { color: var(--hfk-ember-dark); font-weight: 600; }
.wr-req { color: var(--hfk-ember); }
.wr-opt { margin-left: .3rem; padding: .05rem .4rem; background: var(--hfk-ash); color: var(--hfk-muted); font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.wr-items[hidden] { display: none; }
.wr-items { margin-top: .4rem; animation: hfk-fade-up .35s var(--hfk-ease) both; }

.wr-scope { margin: 1rem 0 .6rem; padding: 0; border: 0; min-width: 0; }
.wr-scope legend { margin: 0 0 .5rem; padding: 0; font-weight: 700; font-size: .92rem; color: var(--hfk-charcoal); }
.wr-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.wr-radio { position: relative; margin: 0; cursor: pointer; }
.wr-radio input { position: absolute; opacity: 0; pointer-events: none; }
.wr-radio span { display: flex; flex-direction: column; gap: .1rem; height: 100%; padding: .75rem 1rem .75rem 2.6rem; border: 2px solid var(--hfk-border); background: #fff; transition: border-color .25s, background .25s, transform .25s var(--hfk-ease); }
.wr-radio span::before { content: ''; position: absolute; left: .95rem; top: 1rem; width: 18px; height: 18px; border: 2px solid #C3C9CF; border-radius: 50%; background: #fff; transition: border-color .25s, box-shadow .25s; }
.wr-radio small { font-size: .8rem; color: var(--hfk-muted); }
.wr-radio:hover span { transform: translateY(-2px); border-color: var(--hfk-flame-light); }
.wr-radio input:checked + span { border-color: var(--hfk-flame); background: var(--hfk-cream); }
.wr-radio input:checked + span::before { border-color: var(--hfk-flame); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--hfk-flame); }
.wr-radio input:focus-visible + span { outline: 3px solid var(--hfk-amber); outline-offset: 2px; }

.wr-privacy { display: flex; gap: .5rem; margin: 1rem 0; padding: .7rem .9rem; background: var(--hfk-cream); font-size: .84rem; color: var(--hfk-muted); }
.wr-privacy i { flex: 0 0 auto; margin-top: .2rem; color: var(--hfk-forest); }
.wr-privacy span { flex: 1; min-width: 0; }
.wr-btn-withdraw, .wr-btn-confirm { min-width: 240px; }
.wr-btn-withdraw i { transition: transform .5s var(--hfk-ease); }
.wr-btn-withdraw:hover i { transform: rotate(-360deg); }
.wr-btn-confirm { background: var(--hfk-ember); border-color: var(--hfk-ember); }
.wr-btn-confirm:hover { background: var(--hfk-ember-dark); border-color: var(--hfk-ember-dark); }

/* Récapitulatif */
.wr-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .8rem 0 1rem; }
.wr-summary > div { padding: .6rem .8rem; background: var(--hfk-cream); border-left: 3px solid var(--hfk-amber); }
.wr-summary dt { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hfk-muted); }
.wr-summary dd { margin: .15rem 0 0; font-weight: 600; color: var(--hfk-charcoal); overflow-wrap: anywhere; }
.wr-declaration { margin: 0 0 1rem; padding: 1rem 1.1rem; background: #FAF7F3; border: 1px dashed var(--hfk-border); font-family: var(--hfk-font-body); font-size: .9rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--hfk-text); }
.wr-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }

/* Accusé de réception */
.wr-done { text-align: center; outline: 0; }
.wr-done h3 { margin: .6rem 0 1rem; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.wr-done .wr-summary, .wr-done .wr-declaration { text-align: left; }
.wr-done .wr-review-actions { justify-content: center; }
.wr-done-icon { width: 84px; height: 84px; margin: 0 auto; display: grid; place-items: center; background: #E8F6EC; animation: hfk-bounce-in .7s var(--hfk-ease-bounce) both; }
.wr-done-icon svg { width: 64px; height: 64px; }
.wr-done-icon circle, .wr-done-icon path { fill: none; stroke: var(--hfk-forest); stroke-width: 5; stroke-linecap: square; }
.wr-done-icon circle { stroke-dasharray: 176; stroke-dashoffset: 176; transform: rotate(-90deg); transform-origin: 50% 50%; animation: wr-draw .7s .15s var(--hfk-ease) forwards; }
.wr-done-icon path { stroke-width: 6; stroke-dasharray: 40; stroke-dashoffset: 40; animation: wr-draw .45s .75s var(--hfk-ease) forwards; }
.wr-warn { display: flex; gap: .5rem; padding: .8rem 1rem; background: #FDE8E8; color: var(--hfk-ember-dark); font-weight: 600; text-align: left; }
.wr-warn[hidden], [data-wr-r-mail][hidden] { display: none; }
@keyframes wr-draw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------------
 * 4. Modèle de formulaire
 * ------------------------------------------------------------------- */
.wr-model { position: relative; padding: 1.4rem 1.5rem .6rem; background: #fff; border: 1px solid var(--hfk-border); box-shadow: 6px 6px 0 var(--hfk-ash); }
.wr-model::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--hfk-grad-fire-h); }
.wr-model p { margin-bottom: .7rem; }
.wr-model-title { font-family: var(--hfk-font-head); font-size: 1.2rem; font-weight: 700; color: var(--hfk-charcoal); }
.wr-model-hint { font-size: .86rem; color: var(--hfk-muted); }
.wr-model-line span, .wr-model-fill { display: inline-block; min-width: 220px; max-width: 100%; padding: 0 .3rem; border-bottom: 1px dotted #9C8F84; font-weight: 600; color: var(--hfk-charcoal); overflow-wrap: anywhere; transition: background .3s; }
.wr-model-line span { display: block; min-height: 1.6em; }
.wr-model-fill.is-filled, .wr-model-line span.is-filled { background: var(--hfk-amber-light); }
.wr-model-tools { margin-top: 1rem; padding: 1.1rem 1.2rem; background: var(--hfk-cream); }
.wr-model-tools-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-weight: 700; color: var(--hfk-charcoal); }
.wr-model-tools-title i { color: var(--hfk-flame); }
.wr-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.wr-model-grid label { display: flex; flex-direction: column; gap: .25rem; margin: 0; font-size: .82rem; font-weight: 600; color: var(--hfk-muted); }
.wr-model-wide { grid-column: 1 / -1; }
.wr-model-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.wr-model-note { margin: .8rem 0 0; font-size: .82rem; color: var(--hfk-muted); }

/* ---------------------------------------------------------------------
 * 5. Étapes pratiques
 * ------------------------------------------------------------------- */
.lx-content .wr-steps-list { display: grid; gap: .7rem; margin: 1rem 0 1.2rem; padding: 0; list-style: none; counter-reset: wrstep; }
.lx-content .wr-steps-list > li { position: relative; display: flex; flex-direction: column; gap: .2rem; margin: 0; padding: .9rem 1rem .9rem 3.6rem; background: #fff; border: 1px solid var(--hfk-border); counter-increment: wrstep; transition: transform .35s var(--hfk-ease), border-color .3s, box-shadow .3s; }
.lx-content .wr-steps-list > li::before { content: counter(wrstep); position: absolute; left: .9rem; top: .9rem; display: grid; place-items: center; width: 34px; height: 34px; background: var(--hfk-grad-fire); color: #fff; font-family: var(--hfk-font-head); font-weight: 800; transition: transform .4s var(--hfk-ease-bounce); }
.lx-content .wr-steps-list > li:hover { transform: translateX(4px); border-color: var(--hfk-flame); box-shadow: var(--hfk-shadow-sm); }
.lx-content .wr-steps-list > li:hover::before { transform: rotate(-8deg) scale(1.08); }
.wr-steps-list strong { color: var(--hfk-charcoal); }
.wr-steps-list span { font-size: .92rem; color: var(--hfk-muted); }

/* ---------------------------------------------------------------------
 * 6. Adaptation aux écrans
 * ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .wr-grid, .wr-scope-grid, .wr-summary, .wr-model-grid { grid-template-columns: minmax(0, 1fr); }
    .lx-content .wr-progress > li { flex-direction: column; justify-content: center; gap: .3rem; padding: .7rem .4rem; font-size: .74rem; text-align: center; }
    .wr-btn-withdraw, .wr-btn-confirm, .wr-review-actions .btn { width: 100%; min-width: 0; }
    .wr-model { padding: 1.2rem 1rem .4rem; }
    .wr-model-line span, .wr-model-fill { min-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
    .wr-hero-cta::after { animation: none; }
    .wr-done-icon circle, .wr-done-icon path { animation: none; stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------------
 * 7. Impression : accusé de réception seul ou modèle seul
 * ------------------------------------------------------------------- */
@media print {
    body.wr-print-receipt .lx-section:not(#vertrag-widerrufen), body.wr-print-receipt #vertrag-widerrufen .lx-section-body > p, body.wr-print-receipt .wr-progress,
    body.wr-print-model .lx-section:not(#muster-widerrufsformular), body.wr-print-model .wr-model-tools, body.wr-print-model #muster-widerrufsformular .lx-section-body > p,
    body.wr-print-receipt .lx-hero, body.wr-print-model .lx-hero, body.wr-print-receipt .lx-aside, body.wr-print-model .lx-aside,
    body.wr-print-receipt .lx-related, body.wr-print-model .lx-related, .wr-review-actions, .wr-hero-actions { display: none !important; }
    .wr-tool { border: 1px solid #777; box-shadow: none; }
    .wr-model { box-shadow: none; border-color: #777; }
    .wr-model-fill.is-filled, .wr-model-line span.is-filled { background: none; }
}