/* ══════════════════════════════════════════════════════════════════════════
   Warenkorb, Kasse und Kundenkonto im Duktus der neuen Website.

   Geladen nur, wenn der Schalter „Warenkorb und Kasse angleichen" auf `an`
   steht, und nur auf den WooCommerce-Seiten. Jede Regel hängt an `.tfs-shop`
   am `body` — außerhalb dieser Seiten kann hier nichts wirken.

   ── Die eine Regel, die man kennen muss ───────────────────────────────────
   Das Zahlungsfeld kommt von Stripe und liegt in einem eingebetteten Fenster.
   Stripe liest beim Einbinden die Farben der Umgebung aus und färbt sein Feld
   danach ein. Wird der Zahlungsbereich dunkel gestaltet, rendert Stripe dunkle
   Schrift auf dunklem Grund — der Kasten wirkt dann leer, und niemand kann
   seine IBAN eintragen. Am echten Shop nachgemessen.

   Deshalb: Der Zahlungsbereich bleibt eine HELLE Karte. Das ist kein
   Schönheitsfehler, sondern Absicht — er liest sich wie ein eingelegter Beleg.
   Wer hier Hintergrund oder Textfarbe ins Dunkle zieht, macht den Kauf kaputt.

   Ebenso unangetastet bleiben Auswahlpunkte und Kontrollkästchen. Sie werden
   nur eingefärbt (`accent-color`), niemals ersetzt: Ein früherer Versuch hat
   sie unsichtbar gemacht, und damit war nicht mehr erkennbar, welche
   Zahlungsart ausgewählt ist.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Rahmen des Themes entfernen ──
   Die eigene schlanke Kopfzeile ersetzt die des Themes; stünden beide da,
   sähe man zwei Menüs übereinander. Die Fußzeile fällt mit weg — Impressum,
   Datenschutz und AGB stellt die eigene Fußzeile wieder bereit (shop-design.php). */
.tfs-shop .l-header,
.tfs-shop .l-subheader,
.tfs-shop .l-footer,
.tfs-shop .w-header-show,
.tfs-shop .l-navigation,
.tfs-shop .w-toplink {
  display: none !important;
}

.tfs-shop .l-main {
  padding-top: 0 !important;
}

.tfs-shop .l-main > .l-section:first-child {
  padding-top: 28px !important;
}

/* Das Spaltenraster des Themes rückt seinen Inhalt um 45 px ein, die
   Seitenüberschrift steht aber am Rand — die Kasse begann dadurch nicht in
   einer Flucht mit „Kasse". Am laufenden Shop nachgemessen: vorher 38 px
   gegenüber 83 px, danach beides 38 px. */
.tfs-shop .l-main .g-cols {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Eigene Kopf- und Fusszeile (shop-design.php) ──
   Ersetzen, was oben ausgeblendet wurde. Die Fusszeile ist Pflicht: Impressum
   und Datenschutzerklärung müssen auf einer Kaufseite erreichbar bleiben. */
.tfs-shop .tfs-shop-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 32px;
  background: #0f0c26;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tfs-shop .tfs-shop-marke {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #fff;
}

.tfs-shop .tfs-shop-zurueck,
.tfs-shop .tfs-shop-fuss a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 14px;
}

.tfs-shop .tfs-shop-zurueck:hover,
.tfs-shop .tfs-shop-fuss a:hover {
  color: #5ac3b6;
}

.tfs-shop .tfs-shop-fuss {
  display: flex;
  justify-content: center;
  gap: 26px;
  padding: 30px 20px 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 48px;
}

@media (max-width: 600px) {
  .tfs-shop .tfs-shop-kopf {
    padding: 14px 18px;
  }
}

/* ── Grundton und Schrift ── */
.tfs-shop,
.tfs-shop .l-canvas {
  background: #17123a !important;
}

.tfs-shop,
.tfs-shop input,
.tfs-shop select,
.tfs-shop textarea,
.tfs-shop button {
  font-family: Poppins, system-ui, sans-serif !important;
}

/* Das Theme setzt die Seitenüberschrift kursiv und in Großbuchstaben —
   eine Form, die es im neuen Design nicht gibt. */
.tfs-shop h1.entry-title,
.tfs-shop .w-post-elm.post_title {
  font-size: 34px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 24px !important;
}

/* Das Theme setzt alle Überschriften in Großbuchstaben — „DEINE BESTELLUNG"
   statt „Deine Bestellung". Das gilt es überall zurückzunehmen. */
.tfs-shop h1,
.tfs-shop h2,
.tfs-shop h3,
.tfs-shop #order_review_heading,
.tfs-shop .woocommerce-billing-fields h3 {
  text-transform: none !important;
  font-style: normal !important;
}

.tfs-shop h3,
.tfs-shop #order_review_heading {
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Ohne eigenen Abstand klebt „Deine Bestellung" auf der Karte darunter.
   Die Überschrift trägt im Theme keine eigene Kennung, deshalb über den
   Zusammenhang adressiert. */
.tfs-shop .woocommerce-checkout h3,
.tfs-shop .woocommerce-billing-fields h3,
.tfs-shop .woocommerce-additional-fields h3 {
  margin: 0 0 18px !important;
}

.tfs-shop label {
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 13px !important;
}

/* ── Eingabefelder ──
   Ausdrücklich nur die Rechnungsdaten und das Gutscheinfeld. Der
   Zahlungsbereich ist hier bewusst nicht aufgeführt (siehe Kopf der Datei). */
.tfs-shop .woocommerce-billing-fields input[type='text'],
.tfs-shop .woocommerce-billing-fields input[type='email'],
.tfs-shop .woocommerce-billing-fields input[type='tel'],
.tfs-shop .woocommerce-additional-fields textarea,
.tfs-shop #coupon_code,
.tfs-shop .select2-selection {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  color: #fff !important;
  min-height: 48px !important;
}

.tfs-shop .woocommerce-billing-fields input:focus,
.tfs-shop .woocommerce-additional-fields textarea:focus,
.tfs-shop #coupon_code:focus {
  border-color: #5ac3b6 !important;
  box-shadow: 0 0 0 3px rgba(90, 195, 182, 0.18) !important;
  outline: none !important;
}

/* ── Bestellübersicht als Karte, wie die Paketkarten der neuen Seite ──
   `border-collapse: separate` ist kein Zierrat: An einer Tabelle mit
   zusammengefassten Rändern greifen runde Ecken nicht, die Karte bliebe eckig. */
.tfs-shop .woocommerce-checkout-review-order-table {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
}

.tfs-shop .woocommerce-checkout-review-order-table th,
.tfs-shop .woocommerce-checkout-review-order-table td {
  border: 0 !important;
  padding: 9px 4px !important;
}

.tfs-shop .woocommerce-checkout-review-order-table tr + tr th,
.tfs-shop .woocommerce-checkout-review-order-table tr + tr td {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Die Wiederholungszeilen sind Beiwerk — sie dürfen zurücktreten, damit die
   Gesamtsumme die auffälligste Zahl bleibt. */
.tfs-shop .recurring-totals th,
.tfs-shop .recurring-totals td,
.tfs-shop tr.recurring-total th,
.tfs-shop tr.recurring-total td,
.tfs-shop .woocommerce-checkout-review-order-table .first-payment-date {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Ohne das bricht „Erste Verlängerung: 12. September 2026" mitten im Datum um. */
.tfs-shop .woocommerce-checkout-review-order-table .first-payment-date small {
  white-space: nowrap !important;
}

.tfs-shop .woocommerce-checkout-review-order-table img {
  width: 46px !important;
  height: auto !important;
  border-radius: 8px !important;
  margin-right: 10px !important;
}

/* ── Zahlungsbereich: helle Karte, siehe Kopf der Datei ── */
.tfs-shop .woocommerce-checkout-payment {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 20px !important;
}

.tfs-shop .woocommerce-checkout-payment,
.tfs-shop .woocommerce-checkout-payment label,
.tfs-shop .woocommerce-checkout-payment p {
  color: #1c1830 !important;
}

.tfs-shop .woocommerce-checkout-payment a {
  color: #1a7f74 !important;
}

/* ── Bedienelemente: nur einfärben, nie ersetzen ── */
.tfs-shop input[type='checkbox'],
.tfs-shop input[type='radio'] {
  accent-color: #17123a !important;
  width: 17px !important;
  height: 17px !important;
}

/* ── Schaltflächen ── */
.tfs-shop #place_order,
.tfs-shop button[name='apply_coupon'] {
  background: #5ac3b6 !important;
  color: #0e1b2a !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  min-height: 52px !important;
}

.tfs-shop #place_order:hover,
.tfs-shop button[name='apply_coupon']:hover {
  background: #6fd0c3 !important;
}

/* ── Hinweiskästen von WooCommerce ── */
.tfs-shop .woocommerce-message,
.tfs-shop .woocommerce-info {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ── Handy ── */
@media (max-width: 768px) {
  .tfs-shop h1.entry-title,
  .tfs-shop .w-post-elm.post_title {
    font-size: 26px !important;
  }

  .tfs-shop .woocommerce-checkout-payment,
  .tfs-shop .woocommerce-checkout-review-order-table {
    padding: 16px !important;
  }
}