/*
  donate.css — donate-page-only rules.
  Bootstrap handles layout, spacing, type weight and responsive behaviour.
  Only rules Bootstrap cannot express live here.
  Shared by all language variants via  <link rel="stylesheet" href="../donate.css">

  Headings use Bootstrap display-* classes directly in the HTML:
    display-4  3.5rem = 56 px  intro H1           (Figma: 56 px)
    display-5  3rem   = 48 px  form-intro H2       (Figma: 42 px, closest step)
    display-6  2.5rem = 40 px  "How it works" H2   (Figma: 40 px)
*/

/* ──────────────────────────────────────────────────────────────
   HERO PHOTO — fixed aspect ratio matching Figma (460 × 300 ≈ 3:2)
────────────────────────────────────────────────────────────── */
.donate-hero-photo {
  aspect-ratio: 460 / 300;
}

/* Invoice box + form card share the same background */
.donate-bg {
  background-color: #f2f4f5;
}

/* ──────────────────────────────────────────────────────────────
   TRANSPORT OPTION CARDS
────────────────────────────────────────────────────────────── */
.donate-transport-card {
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  user-select: none;
}

/* Hover — subtle red border tint */
.donate-transport-card:hover {
  border-color: rgba(225, 26, 39, 0.35) !important;
}

/* Selected — red border + very light red wash.
   :has() — Chrome 105+, Firefox 121+, Safari 15.4+ */
.donate-transport-card:has(input:checked) {
  border-color: var(--red) !important;
  background-color: #fff5f5;
}

/* ──────────────────────────────────────────────────────────────
   TRANSPORT INFO CARDS (static / non-interactive variant)
   Wrapping parent: .donate-transport-info
────────────────────────────────────────────────────────────── */
.donate-transport-info .donate-transport-card {
  cursor: default;
  pointer-events: none;
}
.donate-transport-info .donate-transport-card:hover {
  border-color: inherit !important;
  background-color: #fff !important;
}

/* Price figure inside each card */
.donate-price {
  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
}

/* ──────────────────────────────────────────────────────────────
   FORM ACCENT — red checked state and focus rings.
   Scoped to .form-srp so the rest of the page keeps Bootstrap's
   default blue accent.
────────────────────────────────────────────────────────────── */
.form-srp .form-check-input:checked {
  background-color: var(--red);
  border-color:     var(--red);
}
.form-srp .form-check-input:focus {
  border-color: var(--red);
  box-shadow: none;
}
.form-srp .form-control:focus {
  border-color: var(--red);
  box-shadow: none;
}

/* Not-allowed cursor on disabled Send button */
.form-srp button:disabled {
  cursor: not-allowed;
  pointer-events: auto; /* Bootstrap sets pointer-events:none; override so cursor shows */
}

/* Remove spinner arrows from the CHF amount field */
.form-srp input[type="number"]::-webkit-outer-spin-button,
.form-srp input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-srp input[type="number"] {
  -moz-appearance: textfield;
}