/* =====================================================================
 * Fichier : assets/css/pages/zahlungsarten.css
 * Projet  : Brennholz Shop24
 * Rôle    : Styles propres à la page « Zahlungsarten » (zahlungsarten.php) :
 *           icônes du bandeau, cartes des moyens de paiement et badges,
 *           étapes du virement, simulateur d'acompte (curseur, barre
 *           acompte / solde animée), tuiles « sécurité ».
 *           Mise en page commune : assets/css/components/legal.css
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Bandeau
 * ------------------------------------------------------------------- */
.za-hero-icons { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.3rem 0 0; padding: 0; list-style: none; animation: hfk-fade-up .7s .25s var(--hfk-ease) both; }
.za-hero-icons li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; background: rgba(255, 255, 255, .08); color: #F3EAE1; font-size: .82rem; font-weight: 600; transition: background .3s, transform .3s var(--hfk-ease); }
.za-hero-icons li:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.za-hero-icons i { color: var(--hfk-amber); font-size: 1rem; }
.za-hero-cta { margin-top: 1rem; animation: hfk-fade-up .7s .35s var(--hfk-ease) both; }

/* ---------------------------------------------------------------------
 * 2. Moyens de paiement
 * ------------------------------------------------------------------- */
.za-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin: 1rem 0 1.2rem; }
.za-method { display: flex; flex-direction: column; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--hfk-border); border-left: 4px solid var(--hfk-flame); transition: transform .35s var(--hfk-ease), box-shadow .35s, border-color .3s; }
.za-method:hover { transform: translateY(-4px); box-shadow: var(--hfk-shadow); }
.za-method.is-balance { border-left-color: var(--hfk-forest); }
.za-method header { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.za-method-icon { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; background: var(--hfk-flame-light); color: var(--hfk-flame-dark); font-size: 1.25rem; transition: background .3s, color .3s, transform .45s var(--hfk-ease-bounce); }
.za-method.is-balance .za-method-icon { background: #E8F6EC; color: var(--hfk-forest-dark); }
.za-method:hover .za-method-icon { background: var(--hfk-grad-fire); color: #fff; transform: rotate(-8deg) scale(1.06); }
.za-method.is-balance:hover .za-method-icon { background: var(--hfk-forest); }
.lx-content .za-method h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.lx-content .za-method > p { flex: 1; margin-bottom: .6rem; font-size: .9rem; line-height: 1.55; }
.za-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.lx-content .za-badges > li { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: .15rem .5rem; background: var(--hfk-cream); font-size: .74rem; font-weight: 600; color: var(--hfk-muted); }
.za-badges i { color: var(--hfk-flame); }
.lx-content .za-badges > li.is-fee { background: #E8F6EC; color: var(--hfk-forest-dark); }
.za-badges li.is-fee i, .za-badges li.is-balance i { color: var(--hfk-forest); }
.lx-content .za-badges > li.is-proof { background: var(--hfk-amber-light); color: #7A5300; }
.za-more { margin-top: .7rem; border-top: 1px dashed var(--hfk-border); }
.za-more summary { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0 0; font-size: .86rem; font-weight: 700; color: var(--hfk-flame-dark); cursor: pointer; list-style: none; }
.za-more summary::-webkit-details-marker { display: none; }
.za-more summary i { transition: transform .3s var(--hfk-ease); }
.za-more[open] summary i { transform: rotate(180deg); }
.lx-content .za-more p { margin: .5rem 0 0; font-size: .86rem; line-height: 1.55; animation: hfk-fade-up .3s var(--hfk-ease) both; }
.za-provider { color: var(--hfk-muted); }
.za-provider i { color: var(--hfk-sky); margin-right: .2rem; }

/* ---------------------------------------------------------------------
 * 3. Virement pas à pas
 * ------------------------------------------------------------------- */
.lx-content .za-steps { display: grid; gap: .7rem; margin: 1rem 0 1.2rem; padding: 0; list-style: none; }
.lx-content .za-steps > li { display: flex; gap: .9rem; margin: 0; padding: .9rem 1rem; background: #fff; border: 1px solid var(--hfk-border); transition: border-color .3s, transform .3s var(--hfk-ease); }
.lx-content .za-steps > li:hover { border-color: var(--hfk-flame); transform: translateX(4px); }
.za-step-num { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; background: var(--hfk-charcoal); color: var(--hfk-amber); font-family: var(--hfk-font-head); font-weight: 800; font-size: 1.05rem; transition: background .3s, color .3s; }
.za-steps li:hover .za-step-num { background: var(--hfk-flame); color: #fff; }
.za-steps strong { font-family: var(--hfk-font-head); }
.lx-content .za-steps p { margin: .2rem 0 0; font-size: .9rem; line-height: 1.55; }

/* ---------------------------------------------------------------------
 * 4. Simulateur d'acompte
 * ------------------------------------------------------------------- */
.za-small { font-size: .84rem; color: var(--hfk-muted); }
.za-sim { margin: 1.4rem 0 .4rem; background: #fff; border: 2px solid var(--hfk-charcoal); box-shadow: 8px 8px 0 var(--hfk-amber-light); }
.za-sim-head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; background: var(--hfk-charcoal); color: #fff; }
.za-sim-head strong { display: block; font-family: var(--hfk-font-head); font-size: 1.1rem; color: #fff; }
.za-sim-head small { color: #D5DADF; font-size: .8rem; }
.za-sim-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; background: var(--hfk-grad-fire); font-size: 1.1rem; }
.za-sim-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.za-sim-inputs { padding: 1.1rem; border-right: 1px solid var(--hfk-border); }
.za-sim-inputs .form-label { margin-top: .4rem; }
.za-amount { display: flex; border: 2px solid var(--hfk-border); transition: border-color .25s, box-shadow .25s; }
.za-amount:focus-within { border-color: var(--hfk-flame); box-shadow: 0 0 0 4px rgba(34, 166, 75, .15); }
.za-amount .form-control { flex: 1; min-width: 0; height: 50px; border: 0; box-shadow: none !important; font-family: var(--hfk-font-head); font-size: 1.25rem; font-weight: 700; }
.za-amount span { display: grid; place-items: center; padding: 0 .9rem; background: var(--hfk-ash); font-weight: 700; color: var(--hfk-muted); }
.za-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 1rem 0 .8rem; background: linear-gradient(90deg, var(--hfk-flame) var(--fill, 25%), var(--hfk-ash) var(--fill, 25%)); cursor: pointer; }
.za-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; background: #fff; border: 5px solid var(--hfk-flame); box-shadow: var(--hfk-shadow-sm); transition: transform .2s var(--hfk-ease-bounce); }
.za-range::-moz-range-thumb { width: 16px; height: 16px; background: #fff; border: 5px solid var(--hfk-flame); border-radius: 0; }
.za-range:active::-webkit-slider-thumb { transform: scale(1.2); }
.za-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin-bottom: .6rem; }
.za-presets button { padding: .45rem .2rem; border: 1px solid var(--hfk-border); background: #fff; font-size: .82rem; font-weight: 700; color: var(--hfk-charcoal); transition: border-color .25s, background .25s, color .25s, transform .25s var(--hfk-ease); }
.za-presets button:hover { border-color: var(--hfk-flame); transform: translateY(-2px); }
.za-presets button.is-active { background: var(--hfk-flame); border-color: var(--hfk-flame); color: #fff; }
.za-sim-out { display: flex; flex-direction: column; justify-content: center; padding: 1.1rem; background: var(--hfk-cream); }
.za-sim-bar { display: flex; height: 16px; margin-bottom: 1rem; background: var(--hfk-ash); overflow: hidden; }
.za-sim-bar span { display: block; height: 100%; transition: width .6s var(--hfk-ease); }
.za-bar-dep { width: 30%; background: var(--hfk-grad-fire-h); }
.za-bar-bal { flex: 1; background: repeating-linear-gradient(-45deg, var(--hfk-forest), var(--hfk-forest) 8px, #3BB3A4 8px, #3BB3A4 16px); background-size: 200% 100%; animation: za-stripes 6s linear infinite; }
.za-sim-out.is-full .za-bar-bal { animation: none; }
.za-sim-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .8rem; }
.za-sim-figures > div { padding: .6rem .7rem; background: #fff; border-top: 3px solid var(--hfk-flame); }
.za-sim-figures > div.is-bal { border-top-color: var(--hfk-forest); }
.za-sim-figures dt { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--hfk-muted); line-height: 1.3; }
.za-sim-figures dd { margin: .25rem 0 0; font-family: var(--hfk-font-head); font-size: 1.35rem; font-weight: 800; color: var(--hfk-charcoal); font-variant-numeric: tabular-nums; }
.za-sim-figures dd.is-tick { animation: za-tick .35s var(--hfk-ease); }
.lx-content .za-sim-rule { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--hfk-text); }
.za-sim-rule strong { color: var(--hfk-flame-dark); }
.za-sim-rule.is-none strong { color: var(--hfk-muted); }
@keyframes za-stripes { to { background-position: 100% 0; } }
@keyframes za-tick { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
 * 5. Sécurité
 * ------------------------------------------------------------------- */
.za-security { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.za-security > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: .8rem; padding: 1rem; background: #fff; border: 1px solid var(--hfk-border); border-bottom: 3px solid var(--hfk-sky); transition: transform .3s var(--hfk-ease), box-shadow .3s; }
.za-security > div:hover { transform: translateY(-3px); box-shadow: var(--hfk-shadow-sm); }
.za-security i { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; background: #E5F2F9; color: var(--hfk-sky); font-size: 1.05rem; }
.za-security strong { color: var(--hfk-charcoal); }
.za-security span { font-size: .87rem; line-height: 1.5; color: var(--hfk-muted); }

/* ---------------------------------------------------------------------
 * 6. Adaptation aux écrans
 * ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .za-methods, .za-security, .za-sim-grid { grid-template-columns: minmax(0, 1fr); }
    .za-sim-inputs { border-right: 0; border-bottom: 1px solid var(--hfk-border); }
    .za-sim { box-shadow: 5px 5px 0 var(--hfk-amber-light); }
}
@media (max-width: 420px) {
    .za-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .za-sim-figures dd { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
    .za-bar-bal { animation: none; }
}
@media print {
    .za-sim, .za-hero-cta { display: none !important; }
    .za-more { display: block; }
}