/**
 * ****************************************************************************************************
 *      TANDEMFACTORY UG (haftungsbeschränkt)
 *      Plugin: Tandemfactory
 *      Datei: css/gutscheinkaufen_v2_wizard.css
 *
 *      Zweck:
 *      Voucher-spezifische Styles für das modernisierte Gutschein-Kaufen Wizard v2.
 *      Baut auf dem Design-System von css/terminbuchen_v2.css auf und definiert zusätzlich
 *      Komponenten für Produktkarten, Mengen-Controls und Bestseller-Badge.
 *
 *      Komponenten:
 *      - .tf-products-grid               Gitter-Layout für Produkte
 *      - .tf-voucher-product-card       Produktkarte mit Funktionen, Preis, Menge
 *      - .tf-bestseller-badge           Bestseller-Abzeichen
 *      - .tf-quantity-control           Plus/Minus-Buttons und Display
 *      - .tf-quantity-btn               Plus/Minus-Button
 *      - .tf-quantity-display           Anzeige der aktuellen Menge
 *      - .tf-step-summary               Preisübersicht pro Schritt
 *      - .tf-shipping-options           Radio-Buttons für Versandarten
 *      - .tf-radio-option               Styling für Radio-Label
 *      - .tf-info-box                   Info-Box (z.B. Betriebsurlaub)
 *      - .tf-info-warning               Warning-Variante für Info-Box
 *      - .tf-price-summary              Preisübersicht Schritt 4
 *      - .tf-review                     Zusammenfassung Schritt 4
 *      - .tf-confirm-success            Erfolgsseite Schritt 5
 *
 *      Design-Prinzipien:
 *      - Alle Regeln scoped unter .tf-booking mit !important (Theme-Override)
 *      - Responsive: Desktop, Tablet (≤768px), Mobile (≤576px)
 *      - Nutzt CSS Custom Properties aus terminbuchen_v2.css
 *
 *      Zugehörige Dateien:
 *      - functions/gutschein_kaufen_v2.php
 *      - js/gutscheinkaufen_wizard_v2.js
 *      - css/terminbuchen_v2.css (Basis Design-System)
 *
 *      Autor:   Axel Frank
 *      Version: 2.0
 *      Stand:   2026
 *      (c) TANDEMFACTORY UG (haftungsbeschränkt)
 * ****************************************************************************************************
 */

/* -------------------------------------------------------
   Products Grid (Legacy-Wrapper, nicht mehr genutzt)
   ------------------------------------------------------- */
.tf-booking .tf-products-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-bottom: 32px !important;
}

/* -------------------------------------------------------
   Voucher Row (Zeilen-Layout mit integrierten Labels)
   ------------------------------------------------------- */
.tf-booking .tf-voucher-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 130px 160px 130px !important;
  align-items: stretch !important;
  gap: 16px !important;
  background: var(--tf-surface) !important;
  border: 1px solid var(--tf-border) !important;
  border-radius: var(--tf-r-md) !important;
  padding: 24px 20px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--tf-shadow-sm) !important;
  transition: var(--tf-ease) !important;
}

.tf-booking .tf-voucher-row:hover {
  box-shadow: var(--tf-shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Spalten-Container */
.tf-booking .tf-vr-col-product,
.tf-booking .tf-vr-col-price,
.tf-booking .tf-vr-col-qty,
.tf-booking .tf-vr-col-total {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.tf-booking .tf-vr-col-price,
.tf-booking .tf-vr-col-qty,
.tf-booking .tf-vr-col-total {
  align-items: center !important;
}

/* Spalten-Label (Überschrift in jeder Kachel) */
.tf-booking .tf-col-label {
  display: block !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--tf-text-muted, #64748B) !important;
  margin-bottom: 8px !important;
}

.tf-booking .tf-vr-product {
  min-width: 0 !important;
}

.tf-booking .tf-vr-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--tf-text) !important;
  margin: 0 0 12px 0 !important;
}

.tf-booking .tf-vr-features {
  margin: 0 0 0 1.4em !important;
  font-size: 0.95rem !important;
  color: var(--tf-text) !important;
  line-height: 1.4 !important;
}

.tf-booking .tf-vr-features li {
  margin-bottom: 2px !important;
}

.tf-booking .tf-vr-features .fa-li {
  color: var(--tf-success) !important;
}

.tf-booking .tf-vr-feature-media {
  font-weight: 600 !important;
}

.tf-booking .tf-media-icon {
  font-size: 1.3rem !important;
  vertical-align: middle !important;
  margin: 0 2px !important;
}

.tf-booking .tf-media-plus {
  font-weight: 800 !important;
  font-size: 1.1rem !important;
}

/* Spalten Einzelpreis / Anzahl / Gesamtpreis */
.tf-booking .tf-vr-col-price,
.tf-booking .tf-vr-col-qty,
.tf-booking .tf-vr-col-total {
  text-align: center !important;
}

.tf-booking .tf-vr-price-value {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--tf-text) !important;
  line-height: 1.1 !important;
}

.tf-booking .tf-vr-price h4 {
  margin: 4px 0 0 0 !important;
  font-size: 1rem !important;
}

.tf-booking .tf-vr-total-value {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--tf-primary) !important;
  line-height: 1.1 !important;
}
  color: var(--tf-text-muted, #64748B) !important;
  margin-bottom: 6px !important;
}

.tf-booking .tf-vr-price-value {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--tf-text) !important;
  line-height: 1.1 !important;
}

.tf-booking .tf-vr-price h4 {
  margin: 4px 0 0 0 !important;
  font-size: 1rem !important;
}

.tf-booking .tf-vr-total-value {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--tf-primary) !important;
  line-height: 1.1 !important;
}

/* -------------------------------------------------------
   Bestseller Badge (rotes Ribbon)
   ------------------------------------------------------- */
.tf-booking .tf-bestseller-badge {
  position: absolute !important;
  top: 16px !important;
  right: -10px !important;
  background: linear-gradient(135deg, #a1040c 0%, #e30613 60%, #f03a45 100%) !important;
  color: #fff !important;
  padding: 7px 14px !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.30) !important;
  z-index: 2 !important;
}

.tf-booking .tf-bestseller-badge i {
  margin-right: 5px !important;
  color: #FFCC33 !important;
}

.tf-booking .tf-bestseller-badge::before {
  content: "" !important;
  position: absolute !important;
  bottom: -7px !important;
  right: 0 !important;
  border-width: 0 5px 7px 0 !important;
  border-style: solid !important;
  border-color: transparent #7a030a transparent transparent !important;
}

/* -------------------------------------------------------
   Produkt-Typ Akzente
   ------------------------------------------------------- */
.tf-booking .tf-product-standard {
  border-color: var(--tf-border) !important;
}

.tf-booking .tf-product-premium {
  border: 2px solid #e30613 !important;
  box-shadow: 0 4px 14px rgba(227, 6, 19, 0.12) !important;
  padding-top: 32px !important;
}

.tf-booking .tf-product-premium .tf-vr-feature-media .tf-media-icon {
  color: #e30613 !important;
}

.tf-booking .tf-product-vip {
  border: 2px solid var(--tf-accent) !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.12) !important;
  overflow: visible !important;
  padding-top: 36px !important;
}

/* Bestseller-Badge für VIP – zentriert auf oberer Rahmenlinie */
.tf-booking .tf-product-vip .tf-bestseller-badge {
  top: 0 !important;
  right: auto !important;
  left: 20px !important;
  transform: translateY(-50%) !important;
  border-radius: 6px !important;
}

.tf-booking .tf-product-vip .tf-bestseller-badge::before {
  display: none !important;
}

.tf-booking .tf-vip-sticker {
  display: block !important;
  width: 340px !important;
  height: auto !important;
  max-width: 100% !important;
  margin-top: 12px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.22)) !important;
  transition: transform 0.3s ease !important;
}

.tf-booking .tf-product-vip:hover .tf-vip-sticker {
  transform: scale(1.06) rotate(-2deg) !important;
}

.tf-booking .tf-product-vip .tf-vr-feature-media .tf-media-icon {
  color: var(--tf-accent) !important;
}

.tf-booking .tf-product-vip .tf-media-plus {
  color: var(--tf-accent) !important;
}

/* -------------------------------------------------------
   Price Display (Legacy Karten – nicht mehr genutzt)
   ------------------------------------------------------- */
.tf-booking .tf-voucher-price {
  text-align: center !important;
  margin-bottom: 16px !important;
  padding: 12px !important;
  background: var(--tf-bg) !important;
  border-radius: 8px !important;
}

.tf-booking .tf-voucher-price-main {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--tf-primary) !important;
  line-height: 1 !important;
}

/* -------------------------------------------------------
   Quantity Control
   ------------------------------------------------------- */
.tf-booking .tf-voucher-quantity {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.tf-booking .tf-quantity-control {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--tf-bg) !important;
  border-radius: 8px !important;
  padding: 4px !important;
}

.tf-booking .tf-quantity-btn {
  background: var(--tf-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: var(--tf-ease) !important;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

.tf-booking .tf-quantity-btn:hover:not(:disabled) {
  background: var(--tf-primary-dk) !important;
}

.tf-booking .tf-quantity-btn:disabled {
  background: var(--tf-border) !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

.tf-booking .tf-quantity-display {
  width: 40px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--tf-text) !important;
}

/* -------------------------------------------------------
   Step Summary
   ------------------------------------------------------- */
.tf-booking .tf-step-summary {
  background: var(--tf-bg) !important;
  border-radius: var(--tf-r-md) !important;
  padding: 20px !important;
  text-align: center !important;
  margin-top: 32px !important;
  border: 2px solid var(--tf-primary) !important;
}

.tf-booking .tf-step-summary h4 {
  color: var(--tf-muted) !important;
  margin-bottom: 8px !important;
  font-size: 0.95rem !important;
}

.tf-booking .tf-step-summary-price {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: var(--tf-primary) !important;
  margin-bottom: 8px !important;
}

.tf-booking .tf-step-summary-info {
  font-size: 0.85rem !important;
  color: var(--tf-muted) !important;
  margin: 0 !important;
}

/* -------------------------------------------------------
   Shipping Options
   ------------------------------------------------------- */
.tf-booking .tf-shipping-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.tf-booking .tf-radio-option {
  display: flex !important;
  align-items: flex-start !important;
  padding: 12px !important;
  border: 1px solid var(--tf-border) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: var(--tf-ease) !important;
}

.tf-booking .tf-radio-option:hover {
  background: var(--tf-bg) !important;
  border-color: var(--tf-primary) !important;
}

.tf-booking .tf-radio-option input[type="radio"] {
  margin-right: 12px !important;
  margin-top: 2px !important;
  cursor: pointer !important;
}

.tf-booking .tf-radio-label {
  display: block !important;
  font-weight: 500 !important;
  color: var(--tf-text) !important;
  line-height: 1.4 !important;
}

/* -------------------------------------------------------
   Info Box
   ------------------------------------------------------- */
.tf-booking .tf-info-box {
  margin-top: 16px !important;
  padding: 12px !important;
  background: #FFF3CD !important;
  border: 1px solid #FFE69C !important;
  border-radius: 6px !important;
  color: #856404 !important;
  font-size: 0.9rem !important;
}

.tf-booking .tf-info-warning {
  background: #F8D7DA !important;
  border-color: #F5C6CB !important;
  color: #721C24 !important;
}

/* -------------------------------------------------------
   Price Summary (Step 4)
   ------------------------------------------------------- */
.tf-booking .tf-price-summary {
  background: var(--tf-bg) !important;
  border-radius: var(--tf-r-md) !important;
  padding: 20px !important;
  margin: 20px 0 !important;
}

.tf-booking .tf-price-summary-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--tf-border) !important;
  font-size: 0.95rem !important;
}

.tf-booking .tf-price-summary-item:last-child {
  border-bottom: none !important;
}

.tf-booking .tf-price-summary-item-label {
  color: var(--tf-text) !important;
  font-weight: 500 !important;
}

.tf-booking .tf-price-summary-item-value {
  color: var(--tf-primary) !important;
  font-weight: 600 !important;
}

.tf-booking .tf-price-summary-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 12px !important;
  margin-top: 12px !important;
  border-top: 2px solid var(--tf-primary) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}

.tf-booking .tf-price-summary-total-label {
  color: var(--tf-text) !important;
}

.tf-booking .tf-price-summary-total-value {
  color: var(--tf-primary) !important;
}

/* -------------------------------------------------------
   Review Block (Step 4)
   ------------------------------------------------------- */
.tf-booking .tf-review {
  background: var(--tf-surface) !important;
  border: 1px solid var(--tf-border) !important;
  border-radius: var(--tf-r-md) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.tf-booking .tf-review h4 {
  color: var(--tf-text) !important;
  font-size: 1.1rem !important;
  margin-bottom: 16px !important;
}

.tf-booking .tf-review-item {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--tf-border) !important;
}

.tf-booking .tf-review-item:last-child {
  border-bottom: none !important;
}

.tf-booking .tf-review-item-title {
  font-weight: 600 !important;
  color: var(--tf-text) !important;
  margin-bottom: 4px !important;
}

.tf-booking .tf-review-item-detail {
  font-size: 0.9rem !important;
  color: var(--tf-muted) !important;
}

/* -------------------------------------------------------
   Confirmation Section (Step 5)
   ------------------------------------------------------- */
.tf-booking .tf-confirm-wrapper {
  text-align: center !important;
  border: 2px solid var(--tf-success) !important;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(76, 175, 80, 0.02) 100%) !important;
}

.tf-booking .tf-confirm-header {
  padding: 32px 24px !important;
}

.tf-booking .tf-confirm-icon-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: var(--tf-success) !important;
  color: white !important;
  font-size: 2.5rem !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2) !important;
}

.tf-booking .tf-confirm-main-title {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--tf-text) !important;
  margin-bottom: 12px !important;
}

.tf-booking .tf-confirm-main-subtitle {
  font-size: 1rem !important;
  color: var(--tf-muted) !important;
  margin: 0 !important;
}

/* Nächste Schritte */
.tf-booking .tf-confirm-steps-wrapper {
  padding: 0 !important;
}

.tf-booking .tf-confirm-steps-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--tf-text) !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}

.tf-booking .tf-confirm-steps-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

.tf-booking .tf-confirm-steps-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--tf-border) !important;
  font-size: 0.95rem !important;
  color: var(--tf-text) !important;
  line-height: 1.6 !important;
}

.tf-booking .tf-confirm-steps-list li:last-child {
  border-bottom: none !important;
}

.tf-booking .tf-step-number {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--tf-primary) !important;
  color: white !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
}

.tf-booking .tf-step-text {
  padding-top: 4px !important;
}

/* Kontakt-Card */
.tf-booking .tf-confirm-contact-card {
  border-left: 4px solid var(--tf-primary) !important;
  background: linear-gradient(90deg, rgba(0, 51, 102, 0.03) 0%, transparent 100%) !important;
}

.tf-booking .tf-confirm-contact-content {
  text-align: left !important;
}

.tf-booking .tf-confirm-contact-content h4 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--tf-text) !important;
  margin-bottom: 16px !important;
}

.tf-booking .tf-confirm-contact-email {
  font-size: 1rem !important;
  color: var(--tf-text) !important;
  line-height: 1.8 !important;
  margin-bottom: 16px !important;
}

.tf-booking .tf-confirm-contact-email strong {
  font-weight: 700 !important;
  color: var(--tf-primary) !important;
}

.tf-booking .tf-confirm-spam-notice {
  font-size: 0.9rem !important;
  color: var(--tf-muted) !important;
  font-style: italic !important;
  margin: 0 !important;
}

/* -------------------------------------------------------
   Checkbox
   ------------------------------------------------------- */
.tf-booking .tf-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
}

.tf-booking .tf-checkbox input[type="checkbox"] {
  margin-top: 4px !important;
  cursor: pointer !important;
}

.tf-booking .tf-checkbox-label {
  color: var(--tf-text) !important;
  line-height: 1.4 !important;
}

/* AGB Checkbox Invalid State */
.tf-booking .tf-agb-checkbox.tf-invalid {
  outline: 2px solid #e30613 !important;
  outline-offset: 2px !important;
}

.tf-booking .tf-agb-error {
  display: none !important;
  color: #e30613 !important;
  font-size: 0.85rem !important;
  margin-top: 6px !important;
}

.tf-booking .tf-agb-error.visible {
  display: block !important;
}

/* -------------------------------------------------------
   Responsive
   ------------------------------------------------------- */
@media (max-width: 768px) {
  .tf-booking .tf-products-grid {
    grid-template-columns: 1fr !important;
  }

  .tf-booking .tf-vip-sticker {
    width: 200px !important;
  }

  /* Tabellenkopf ausblenden, Zeilen stapeln */
  .tf-booking .tf-voucher-table-head {
    display: none !important;
  }

  .tf-booking .tf-voucher-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 20px !important;
  }

  .tf-booking .tf-vr-product {
    margin-bottom: 16px !important;
  }

  /* Einzelpreis / Anzahl / Gesamtpreis als Zeilen mit Label */
  .tf-booking .tf-vr-price,
  .tf-booking .tf-vr-qty,
  .tf-booking .tf-vr-total {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    padding: 10px 0 !important;
    border-top: 1px solid var(--tf-border) !important;
  }

  .tf-booking .tf-vr-mlabel {
    display: block !important;
    margin-bottom: 0 !important;
  }

  .tf-booking .tf-step-summary-price {
    font-size: 1.8rem !important;
  }

  .tf-booking .tf-confirm-success {
    padding: 30px 16px !important;
  }

  .tf-booking .tf-confirm-icon {
    font-size: 3rem !important;
  }
}

@media (max-width: 576px) {
  .tf-booking .tf-voucher-row {
    padding: 16px !important;
  }

  .tf-booking .tf-vip-sticker {
    width: 190px !important;
  }

  .tf-booking .tf-vr-title {
    font-size: 1.1rem !important;
  }

  .tf-booking .tf-field-row {
    flex-direction: column !important;
  }

  .tf-booking .tf-field {
    flex: 1 !important;
    min-width: 100% !important;
  }
}