/* ============================================================
   Karibu Pay – Styling nach karibu-safaris.de
   Design-Tokens aus dem Site-CSS übernommen:
   Farben, Schriften (Queens / VTC Carrie / Founders Grotesk),
   Button-Stil, Selection-Farbe, Fokus-Ringe.
   ============================================================ */

/* ---------- Schriften (lokal) ----------
   Die vier .woff2-Dateien liegen im selben Ordner wie diese CSS. */
@font-face {
  font-family: "Queens";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(queens-air.woff2) format("woff2");
}
@font-face {
  font-family: "VTC Carrie";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(carrie-regular.woff2) format("woff2");
}
@font-face {
  font-family: "Founders Grotesk";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(founders-grotesk-light.woff2) format("woff2");
}
@font-face {
  font-family: "Founders Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(founders-grotesk-medium.woff2) format("woff2");
}

/* ---------- Farb-Tokens (aus dem Site-CSS) ---------- */
:root {
  --light-beige:  rgb(239 233 225);  /* Hintergrund */
  --medium-beige: rgb(230 220 206);  /* Flächen / Zeilen */
  --dark-beige:   rgb(216 200 179);  /* Selection, Akzentfläche */
  --bronze:       rgb(178 155 123);  /* Linien-Akzent */
  --dark-brown:   rgb(123 69 42);
  --red:          rgb(195 66 51);    /* Brand-Rot: Fehler, Hover */
  --black:        rgb(0 0 0);
  --black-40:     rgba(0 0 0 / .4);
  --white:        rgb(255 255 255);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--light-beige);
  color: var(--black);
  font-family: "Founders Grotesk", Arial, sans-serif;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 125%;
  letter-spacing: .015em;
}

::selection {
  background-color: var(--dark-beige);
  color: var(--white);
}

*:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

a { color: inherit; }

main, header, footer {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: .9375rem;
  padding-right: .9375rem;
}
@media (min-width: 834px) {
  main, header, footer { padding-left: 3.125rem; padding-right: 3.125rem; }
}

/* ---------- Typo-Stile (Site-Pendants) ---------- */

/* Headline (Queens, wie .type-headline-sm/-md) */
h1, h2 {
  font-family: "Queens", Arial, sans-serif;
  font-weight: 100;
  letter-spacing: .025em;
  margin: 0;
}
h1 { font-size: 2.25rem; line-height: 100%; }
h2 { font-size: 1.75rem; line-height: 100%; text-transform: uppercase; }
@media (min-width: 1024px) {
  h1 { font-size: 3.125rem; }
  h2 { font-size: 2.25rem; }
}

/* Label (VTC Carrie, wie .type-label / .type-headline-xs) */
.label,
#summary > p:first-child,
dt,
form label,
#pay-card > p:first-of-type {
  font-family: "VTC Carrie", Arial, sans-serif;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: .14em;
  text-transform: uppercase;
}

small {
  font-size: .9375rem;
  line-height: 120%;
  color: rgba(0 0 0 / .65);
}

/* ---------- Header / Footer ---------- */
header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--black);
}
header p {
  margin: 0;
  font-family: "VTC Carrie", Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
header p + p { font-size: .75rem; color: rgba(0 0 0 / .65); }

footer {
  margin-top: 5rem;
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--black-40);
}
footer p { margin: 0; font-size: .9375rem; color: rgba(0 0 0 / .65); }

/* ---------- Zusammenfassung ---------- */
#summary {
  padding: 2.5rem 0 2rem;
}
#summary p { margin: 0 0 .75rem; }
#summary h1 { margin-bottom: 1rem; }
#summary #amount-label {
  font-family: "Queens", Arial, sans-serif;
  font-weight: 100;
  font-size: 2.25rem;
  line-height: 100%;
  margin-top: 1.25rem;
}

/* ---------- Sektionen ---------- */
section { margin: 0; }
#pay-bank, #pay-card {
  padding: 2rem 0 2.5rem;
}
#pay-bank { border-top: 1px solid var(--bronze); }
hr {
  border: none;
  border-top: 1px solid var(--bronze);
  margin: 0;
}
#pay-bank h2, #pay-card h2 { margin-bottom: 1.25rem; }
p { margin: 0 0 1rem; }

/* ---------- Überweisung: QR links, Kontodaten rechts ---------- */
.bank-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 834px) {
  .bank-grid {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: 3.125rem;
  }
  .bank-details dl { margin-top: 0; }
  .bank-details > p:first-child { margin-top: 0; }
}

/* ---------- QR-Code ---------- */
#qr {
  display: inline-block;
  background: var(--white);
  padding: 1rem;
  border: 1px solid var(--black);
  margin: .5rem 0 1.5rem;
}
#qr img, #qr canvas { display: block; }

/* ---------- Bankdaten (dl) ---------- */
dl {
  margin: 1rem 0 1.5rem;
  border-top: 1px solid var(--black-40);
}
dl > dt {
  padding-top: .75rem;
  color: rgba(0 0 0 / .65);
}
dl > dd {
  margin: .35rem 0 0;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--black-40);
  font-size: 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
/* IBAN & Verwendungszweck leicht hervorheben */
#bank-iban, #bank-ref { letter-spacing: .04em; }

/* ---------- Buttons (Site-Button-Stil) ---------- */
button {
  font-family: "VTC Carrie", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--black);
  background: transparent;
  border: none;
  box-shadow: inset 0 0 0 1px var(--black); /* wie .ring-1 */
  padding: .75rem 1rem .8125rem;
  cursor: pointer;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
button:hover:not(:disabled) {
  background-color: var(--black);
  color: var(--white);
}
button:disabled { opacity: .4; cursor: default; }

/* Primärer Bezahl-Button: gefüllt, Hover Brand-Rot (wie is-alternate) */
#pay-btn {
  background-color: var(--black);
  color: var(--white);
  width: 100%;
  min-height: 3.25rem; /* wie .is-large */
}
#pay-btn:hover:not(:disabled) {
  background-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}
@media (min-width: 834px) {
  #pay-btn { width: auto; min-width: 21.25rem; }
}

/* Kopier-Buttons: kleine Label-Variante */
button.copy {
  font-size: .75rem;
  padding: .4rem .6rem .45rem;
  box-shadow: inset 0 0 0 1px var(--black-40);
  flex-shrink: 0;
}
button.copy:hover { box-shadow: inset 0 0 0 1px var(--black); }

/* ---------- Formular ---------- */
form, #card-form { margin: 0; }
#card-form { margin-top: 1.5rem; }
#card-form label { display: block; margin-bottom: .5rem; }

input[type="text"], input[type="email"] {
  font-family: "Founders Grotesk", Arial, sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: .015em;
  color: var(--black);
  width: 100%;
  max-width: 32rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--black-40);
  padding: .5rem 0 .6rem;
  border-radius: 0;
}
input[type="text"]:focus, input[type="email"]:focus {
  outline: none;
  border-bottom-color: var(--black);
}
input::placeholder { color: rgba(0 0 0 / .4); opacity: 1; }

/* Revolut-Kartenfeld: Rahmen im Site-Stil */
#card-field {
  max-width: 32rem;
  background: var(--white);
  border: 1px solid var(--black-40);
  padding: .875rem 1rem;
  min-height: 3.25rem;
  margin: .25rem 0 1.5rem;
}
#card-field:focus-within { border-color: var(--black); }

/* ---------- Kartentyp-Auswahl (Radios) ---------- */
#pay-card input[type="radio"] {
  accent-color: var(--black);
  width: 1.125rem;
  height: 1.125rem;
  margin-right: .5rem;
  vertical-align: -2px;
}
#pay-card label:has(input[type="radio"]) {
  font-family: "Founders Grotesk", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: .015em;
  text-transform: none;
  display: inline-block;
  padding: .35rem 0;
  cursor: pointer;
}

/* Amex-Hinweis: Fläche in Medium-Beige mit Bronze-Linie */
#amex-note {
  background: var(--medium-beige);
  border-left: 2px solid var(--bronze);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}
#amex-note p { margin-bottom: .75rem; }
#amex-note p:last-child { margin-bottom: 0; }
#amex-note a {
  font-family: "VTC Carrie", Arial, sans-serif;
  font-size: .875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- Meldungen ---------- */
#pay-msg { color: var(--red); min-height: 1.5rem; }
#qr-fallback { color: var(--red); }

/* ---------- Erfolg / Ungültig ---------- */
#view-success, #view-invalid {
  padding: 5rem 0 3rem;
  text-align: center;
}
#view-success h1, #view-invalid h1 {
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
#view-success #success-amount {
  font-family: "Queens", Arial, sans-serif;
  font-weight: 100;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
#view-success p, #view-invalid p {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}