/*!
 * NSO 2026 — donate page
 * Requires nso-2026.css first (tokens, resets, buttons, chrome, page header).
 *
 * IMPORTANT: this file restyles the EXISTING donation-box markup rather than
 * replacing it. common/causes/includes/donation_box.blade.php is shared by eight
 * themes, and its ids and classes are wired to the payment JS (#details_form,
 * #amount, #subscription, .option-label, .tab/.content, #continue_btn,
 * #donation-button, the Stripe/Razorpay includes…). Renaming any of it would
 * break the money path. So every rule below is scoped to `.n26-donate`, which
 * only the NSO donate page applies — no other theme is affected, and no markup
 * or JS hook changes.
 *
 * nso/css/custom.css also forces height/padding/border-radius on inputs with
 * !important, so the field rules here have to match that weight.
 */

/* ---------- layout ---------- */
.n26-donatewrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:34px;align-items:start}
@media (max-width:1040px){.n26-donatewrap{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:560px){
  .n26-donate{padding:20px 16px}
  .n26-donate .st-donation-box,.n26-donate .form-content{min-width:0}
}

.n26-donate{
  background:#fff;border:1px solid var(--n26-line);border-radius:var(--n26-r-xl);
  padding:34px;box-shadow:var(--n26-shadow-sm);
}
@media (max-width:560px){.n26-donate{padding:24px 18px;border-radius:var(--n26-r-lg)}}

/* the legacy wrapper chrome inside it is redundant now */
.n26-donate #donate-div,
.n26-donate .donate-div-inner,
.n26-donate .donate-div-main,
.n26-donate .wrapper,
.n26-donate .content-wrapper{margin:0;padding:0;background:none;border:0;box-shadow:none;width:auto}
.n26-donate .col,
.n26-donate .col-xm-12,
.n26-donate .col-md-12,
.n26-donate .col-lg-12{padding:0;margin:0;max-width:100%;flex:0 0 100%}

/* ---------- headings ---------- */
.n26-donate .head{
  font-family:var(--n26-font-display);font-size:1.32rem;font-weight:600;
  color:var(--n26-navy-800);text-align:left;margin:0 0 6px;letter-spacing:-.02em;
}
.n26-donate .form-content > .head,
.n26-donate .st-donation-box + .form-content .head{margin-top:26px}

/* ---------- preset amounts ---------- */
.n26-donate .payment-options{display:grid!important;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 22px!important}
@media (max-width:640px){.n26-donate .payment-options{grid-template-columns:repeat(2,1fr)}}
.n26-donate .payment-options li{list-style:none;width:auto!important;margin:0!important}
.n26-donate .option-label{display:block;cursor:pointer;margin:0!important}
.n26-donate .option-label > .pay-text{
  display:flex;align-items:center;justify-content:center;
  padding:16px 8px!important;border:1.5px solid var(--n26-line)!important;border-radius:var(--n26-r-sm)!important;
  background:#fff!important;color:var(--n26-navy-800)!important;
  font-family:var(--n26-font-display);font-weight:600;font-size:1.12rem!important;
  transition:.16s;
}
.n26-donate .option-label > .pay-text:hover{
  border-color:var(--n26-blue-400)!important;background:var(--n26-blue-50)!important;
}
/* the legacy CSS never styled the selected state, so a picked amount looked
   identical to an unpicked one — this is the missing feedback */
.n26-donate .option-label > input:checked + .pay-text{
  border-color:var(--n26-navy-800)!important;background:var(--n26-navy-800)!important;color:#fff!important;
}
.n26-donate .option-label > input:focus-visible + .pay-text{outline:3px solid var(--n26-blue-500);outline-offset:3px}

/* ---------- frequency ---------- */
.n26-donate .how-often{margin-bottom:20px}
.n26-donate .how-often .row{margin:0;justify-content:flex-start!important}
.n26-donate .how-often .col-form-label{
  font-weight:600;font-size:14.4px;color:var(--n26-navy-800);padding:0;
}
.n26-donate .how-often .col-4{flex:0 0 auto;max-width:none;padding:0}

/* ---------- step panes ----------
   donations.css stacks both steps in one grid cell (.content{grid-row:1/-1;
   grid-column:1/-1}) and crossfades them, so the row is sized to the TALLER
   pane. The payment step is ~570px taller than the details step, which left
   that much blank card below Continue. Take the inactive pane out of flow so
   the card fits whichever step is showing; the fade still works. */
.n26-donate .content-wrapper{position:relative}
.n26-donate .content{position:absolute;top:0;left:0;width:100%}
.n26-donate .content.active{position:relative}
/* three bottom paddings stack at the end of the card — the wrapper's, the step
   form's and the card's. Keep the card's and drop the other two. */
.n26-donate .content-wrapper{padding-bottom:0}
.n26-donate #step_one_form{padding-bottom:0}
.n26-donate .content > form{margin-bottom:0}

/* ---------- amount field ---------- */
.n26-donate .main-big-input{position:relative;margin-bottom:18px}
/* common/css/donations.css (loaded for every Donation store, so always here)
   sets .main-big-input .inp-prefix/.inp-postfix{font-size:90px;font-weight:400;
   color:#333;text-align:right}. Equal specificity to these rules, so only source
   order was winning — and font-size was never declared here at all, which left
   the $ and .00 rendering 90px tall. Every property it sets is answered below. */
.n26-donate .inp-prefix,
.n26-donate .inp-postfix{
  top:50%;transform:translateY(-50%);
  font-size:1.05rem;line-height:1;font-weight:600;color:var(--n26-ink-soft);
  text-align:left;pointer-events:none;
}
.n26-donate .inp-prefix{left:16px}
.n26-donate .inp-postfix{right:16px}
.n26-donate input#amount{
  padding:16px 44px 16px 32px!important;
  font-family:var(--n26-font-display);font-weight:700;font-size:1.35rem!important;
  color:var(--n26-navy-800);
}

/* ---------- all fields ---------- */
.n26-donate .form-control,
.n26-donate input[type="text"],
.n26-donate input[type="email"],
.n26-donate input[type="tel"],
.n26-donate input[type="number"],
.n26-donate select,
.n26-donate textarea{
  width:100%;height:auto!important;
  padding:13px 15px!important;
  border:1.5px solid var(--n26-line)!important;border-radius:var(--n26-r-sm)!important;
  background:#fff;box-shadow:none!important;
  font-family:var(--n26-font-body);font-size:15.6px;color:var(--n26-ink);line-height:1.4;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.n26-donate textarea{min-height:110px!important;resize:vertical}
.n26-donate .form-control:focus,
.n26-donate select:focus,
.n26-donate textarea:focus{
  border-color:var(--n26-blue-500)!important;
  box-shadow:0 0 0 3px rgba(2,133,216,.14)!important;outline:none;
}
.n26-donate label:not(.option-label):not(.form-check-label){
  display:block;font-weight:600;font-size:14.4px;color:var(--n26-navy-800);margin-bottom:7px;
}
.n26-donate label.error{color:#e65353!important;font-weight:500;font-size:13.4px;margin-top:6px}
.n26-donate input.error,
.n26-donate select.error,
.n26-donate textarea.error{border-color:#e65353!important}

/* two-column rows the legacy markup builds with .lt / .rt */
/* donations.css sets .donate-div-main .form .form-group.lt/.rt{width:50%}, which
   was halving each field again inside this 2-column grid — hence 166px fields in
   a 332px column. The grid owns the columns now. */
.n26-donate .form{display:grid!important;grid-template-columns:1fr 1fr;gap:0 18px}
.n26-donate .form > .form-group{width:100%!important;max-width:none;padding-right:0!important;padding-left:0!important;padding-bottom:0!important}
.n26-donate .form > .ct,
.n26-donate .form > .form-group.ct{grid-column:1/-1}
@media (max-width:640px){.n26-donate .form{grid-template-columns:1fr}}

/* ---------- payment methods ---------- */
.n26-donate .payment-method{
  border:1.5px solid var(--n26-line);border-radius:var(--n26-r-md);padding:18px;margin-bottom:12px;
}
.n26-donate .form-check-label{font-weight:500;color:var(--n26-ink)}
.n26-donate .total_charge{font-family:var(--n26-font-display);font-weight:700;color:var(--n26-navy-800)}

/* ---------- buttons ---------- */
.n26-donate .myButton,
.n26-donate .btn-success,
.n26-donate input[type="submit"],
.n26-donate #donation-button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--n26-gold-500)!important;color:var(--n26-navy-900)!important;
  border:0!important;border-radius:999px!important;
  font-family:var(--n26-font-body);font-weight:600;font-size:16px;
  padding:16px 30px!important;cursor:pointer;
  box-shadow:0 6px 16px rgba(240,169,30,.34);transition:.16s;
}
.n26-donate .myButton:hover,
.n26-donate .btn-success:hover,
.n26-donate input[type="submit"]:hover,
.n26-donate #donation-button:hover{
  background:var(--n26-gold-600)!important;color:var(--n26-navy-900)!important;transform:translateY(-2px);
}
.n26-donate .submit-btn{margin-top:8px}

/* ---------- aside ---------- */
.n26-daside{display:flex;flex-direction:column;gap:20px;position:sticky;top:100px}
@media (max-width:1040px){.n26-daside{position:static}}

@media (prefers-reduced-motion:reduce){
  .n26-donate .myButton:hover,
  .n26-donate .btn-success:hover,
  .n26-donate input[type="submit"]:hover,
  .n26-donate #donation-button:hover{transform:none}
}