/* ==========================================================================
   OASI — Template "Dona ora" (page-dona.php)
   Ref Figma 522:525. Hero teal (foto + gradiente) con card form donazione
   sovrapposta a destra (placeholder multistep — nessun plugin). La FAQ è
   condivisa (azione.css). Riusa .btn, .eyebrow, .crumb.
   DS: container 1400, un accento arancio, fondo teal fino alla FAQ.
   ========================================================================== */

/* ============ HERO (teal + foto) con form a destra ============ */
.dona-hero{position:relative;background:var(--teal-900);color:#fff;padding:clamp(200px,20vw,280px) 0 clamp(80px,9vw,120px);overflow:hidden}
.dona-hero .bg{position:absolute;left:0;right:0;top:0;height:min(72%,780px);background-size:cover;background-position:center 34%;z-index:0}
.dona-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,61,82,.2) 0%,rgba(0,61,82,.55) 52%,var(--teal-900) 100%)}
.dona-hero .wrap{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:56px;align-items:start}

.dona-hero-text{padding-top:20px}
.dona-hero-text .crumb{margin-bottom:32px}
.dona-hero-text .eyebrow{color:rgba(255,255,255,.85);margin-bottom:30px}
.dona-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;letter-spacing:-.025em;color:#fff;max-width:15ch;margin-bottom:28px}
.dona-hero h1 em{font-style:normal;color:var(--orange)}
.dona-hero .lead{font-family:var(--font-body);font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;color:rgba(255,255,255,.85);max-width:520px}

/* ============ FORM CARD (placeholder multistep) ============ */
.donate-card{background:#fff;border-radius:14px;padding:8px;box-shadow:0 40px 80px -30px rgba(0,30,45,.5)}
.dc-header{padding:26px 28px 22px;border-bottom:1px solid var(--border-default)}
.dc-title{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;color:var(--teal);text-align:center;margin-bottom:22px}
.dc-steps{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;counter-reset:none}
.dc-step{display:flex;align-items:center;gap:10px;flex:1;font-family:var(--font-display);font-weight:600;font-size:.78rem;color:var(--muted);position:relative}
.dc-step:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--border-default);margin-left:10px}
.dc-step-n{width:26px;height:26px;border-radius:50%;background:var(--paper-2);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0}
.dc-step.is-current .dc-step-n{background:var(--orange);color:#fff}
.dc-step.is-current{color:var(--teal)}
.dc-step-l{white-space:nowrap}
@media(max-width:520px){.dc-step:not(.is-current) .dc-step-l{display:none}}

.dc-body{padding:26px 28px 28px}
.dc-field{margin-bottom:26px}
.dc-label{display:block;font-family:var(--font-display);font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--muted);margin-bottom:12px}

.dc-freq{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--paper);border:1px solid var(--border-default);border-radius:999px;padding:6px}
.dc-freq-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--muted);background:none;border:0;border-radius:999px;padding:12px;cursor:pointer;transition:background .2s,color .2s}
.dc-freq-btn::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.4}
.dc-freq-btn.is-active{background:var(--teal);color:#fff}
.dc-freq-btn.is-active::before{background:var(--orange);opacity:1}

.dc-amounts{display:flex;flex-direction:column;gap:10px}
.dc-amount{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;font-family:var(--font-display);color:var(--teal);background:var(--paper);border:1.5px solid var(--border-default);border-radius:8px;padding:16px 18px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.dc-amount:hover{border-color:var(--teal)}
.dc-amount.is-active{background:var(--teal);border-color:var(--teal);color:#fff}
.dc-amount-v{font-weight:800;font-size:1.15rem;line-height:1}
.dc-amount-d{font-family:var(--font-body);font-weight:400;font-size:.85rem;line-height:1.4;color:var(--muted)}
.dc-amount.is-active .dc-amount-d{color:rgba(255,255,255,.82)}
.dc-free{display:flex;align-items:center;gap:10px;margin-top:10px;border:1.5px solid var(--border-default);border-radius:8px;padding:0 18px;height:58px}
.dc-free-cur{font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--muted)}
.dc-free-input{flex:1;border:0;background:none;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);height:100%}
.dc-free-input::placeholder{color:var(--muted);font-weight:500}

.dc-submit{width:100%;justify-content:center;margin-top:4px}

.dc-secure{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--font-display);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dc-chips{display:inline-flex;gap:5px}
.dc-chips i{width:30px;height:20px;border-radius:3px;background:var(--paper-2);display:inline-block}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .dona-hero .wrap{grid-template-columns:1fr;gap:40px}
  .dona-hero-text{padding-top:0}
  .dona-hero h1{max-width:none}
  .donate-card{max-width:600px}
}
@media(max-width:560px){
  .dc-header,.dc-body{padding-left:20px;padding-right:20px}
}