/* ============================================================
   Druckzeug Checkout & Basket Styling
   Passt Warenkorb + Kaufabwicklung an die aktuelle Designsprache an.
   Nur Selektoren der NOVA-Templates, keine Template-Overrides.
   ============================================================ */

/* ----- Design Tokens (lokal zum Nachvollziehen) -----
   Primary:         #2465f5
   Primary Hover:   #1a4fd6
   Primary Light:   #e8effd
   CTA Orange:      #f97316 / Hover #ea580c
   Dark:            #1a1a1a
   Muted:           #6b7280
   Border:          #e5e7eb
   Bg Soft:         #f5f7fa
   Success:         #1C871E
*/

/* ============================================================
   1) CONTAINER & HEADINGS
   ============================================================ */
#checkout,
.basket {
  font-family: 'Open Sans', sans-serif;
}

#checkout h1,
.basket h1,
.basket .basket-heading,
.checkout-confirmation h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #1a1a1a;
  margin-bottom: 24px;
}

.basket .basket-heading,
#checkout .checkout-confirmation-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #1a1a1a;
}

/* ============================================================
   2) STEP INDICATOR (.stepper.checkout-steps)
   NOVA baut Pfeil-Formen mit border-trick via ::before/::after
   -- wir schalten alle Pseudo-Elemente aus und bauen sauber neu.
   ============================================================ */

/* NOVA-Arrow-Shapes komplett neutralisieren */
.stepper.checkout-steps,
.stepper {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin: 24px 0 36px 0 !important;
  overflow: visible !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  list-style: none;
}

.stepper.checkout-steps .step::before,
.stepper.checkout-steps .step::after,
.stepper .step::before,
.stepper .step::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
}

.stepper.checkout-steps .step-active,
.stepper .step-active {
  background: transparent !important;
}

.stepper.checkout-steps .step-active .step-content::after,
.stepper.checkout-steps .step-current .step-content::after,
.stepper .step-active .step-content::after,
.stepper .step-current .step-content::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
}

/* Struktur der einzelnen Steps */
.stepper.checkout-steps .step {
  flex: 1 1 0;
  position: relative;
  padding: 0 12px;
  min-width: 0;
  background: transparent !important;
}

.stepper.checkout-steps .step .step-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  min-height: auto !important;
  position: relative;
  text-align: center;
}

.stepper.checkout-steps .step a,
.stepper.checkout-steps .step a:hover {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Step-Badge (die Nummer) -- NOVAs margin-left:auto killen */
.stepper.checkout-steps .step .badge,
.stepper.checkout-steps .step .badge-pill,
.checkout-steps .badge-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px !important;
  font-weight: 700;
  background-color: #e5e7eb !important;
  color: #9b9b9b !important;
  border: 2px solid #e5e7eb !important;
  transition: all 0.2s;
  flex-shrink: 0;
}

.stepper.checkout-steps .step .badge .badge-count,
.stepper .badge-count {
  color: inherit !important;
  font-size: 15px !important;
  line-height: 1;
}

/* Step-Text */
.stepper.checkout-steps .step .step-text,
.checkout-steps .step-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px !important;
  font-weight: 600;
  color: #9b9b9b;
  transition: color 0.2s;
  margin: 0 !important;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Aktive & abgeschlossene Steps */
.stepper.checkout-steps .step.step-active .badge,
.stepper.checkout-steps .step.step-active .badge-pill {
  background-color: #2465f5 !important;
  color: #fff !important;
  border-color: #2465f5 !important;
}

.stepper.checkout-steps .step.step-active .step-text {
  color: #1a1a1a;
}

.stepper.checkout-steps .step.step-current .badge,
.stepper.checkout-steps .step.step-current .badge-pill {
  background-color: #2465f5 !important;
  color: #fff !important;
  border-color: #2465f5 !important;
  box-shadow: 0 0 0 4px rgba(36, 101, 245, 0.15);
}

.stepper.checkout-steps .step.step-current .step-text {
  color: #2465f5;
  font-weight: 700;
}

.stepper.checkout-steps .step .step-check,
.checkout-steps .step-check {
  margin-left: 4px !important;
  color: #2465f5 !important;
  font-size: 13px;
}

/* Verbindungslinie zwischen den Badges (auf Höhe Badge-Mitte = 26px vom top) */
.stepper.checkout-steps .step:not(:last-child) .step-content::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  top: 26px; /* padding 8 + badge-radius 18 */
  left: calc(50% + 22px); /* 50% + badge-radius + kleiner gap */
  right: calc(-50% + 22px);
  height: 2px;
  background: #e5e7eb !important;
  border: none !important;
  z-index: 0;
  transform: none !important;
}

.stepper.checkout-steps .step.step-active:not(:last-child) .step-content::before {
  background: #2465f5 !important;
}

/* Text unter dem Badge (Umbruch erlauben, da sonst Überlauf) */
.stepper.checkout-steps .step .step-text,
.checkout-steps .step-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
  padding: 0 4px;
}

/* Mobile */
@media (max-width: 767px) {
  .stepper.checkout-steps {
    padding: 14px 12px !important;
  }
  .stepper.checkout-steps .step {
    padding: 0 6px;
  }
  .stepper.checkout-steps .step .step-content {
    gap: 8px;
  }
  .stepper.checkout-steps .step .badge,
  .stepper.checkout-steps .step .badge-pill,
  .checkout-steps .badge-pill {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    font-size: 13px !important;
  }
  .stepper.checkout-steps .step .step-text {
    font-size: 12px !important;
  }
  .stepper.checkout-steps .step:not(:last-child) .step-content::before {
    top: 23px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
  }
}

/* ============================================================
   3) BASKET (Warenkorb-Seite)
   ============================================================ */
.basket {
  padding: 24px 0;
}

/* Positionsliste */
.basket .basket_wrapper {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.basket .basket-items {
  padding: 0;
}

/* Cart-Items: einzelne Zeile als Karten-Look */
.basket .basket-items .cart-item,
.basket .basket-items .cart-row,
.basket .basket-items tr {
  border-bottom: 1px solid #f0f2f5;
  transition: background 0.15s;
}

.basket .basket-items .cart-item:last-child,
.basket .basket-items tr:last-child {
  border-bottom: none;
}

.basket .basket-items .cart-item:hover,
.basket .basket-items tr:hover {
  background: #fafbfc;
}

.basket .basket-items img {
  border-radius: 8px;
  border: 1px solid #f0f2f5;
}

.basket .basket-items .product-name,
.basket .basket-items a.product-name,
.basket .basket-items .item-name a {
  color: #1a1a1a;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
}

.basket .basket-items a:hover {
  color: #2465f5;
}

.basket .basket-items .price,
.basket .basket-items .item-price {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #1a1a1a;
}

/* Mengen-Input im Warenkorb */
.basket input[type="number"],
.basket .input-group input {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: 'Open Sans', sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.basket input[type="number"]:focus,
.basket .input-group input:focus {
  border-color: #2465f5;
  box-shadow: 0 0 0 3px rgba(36, 101, 245, 0.1);
  outline: none;
}

/* Entfernen-Button */
.basket .btn-delete,
.basket a.btn-delete,
.basket button[name="delete"],
.basket .item-remove {
  color: #9b9b9b;
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.basket .btn-delete:hover,
.basket a.btn-delete:hover,
.basket button[name="delete"]:hover,
.basket .item-remove:hover {
  color: #b90000;
  background: rgba(185, 0, 0, 0.08);
}

/* ============================================================
   4) CART-SUMMARY (Sidebar-Zusammenfassung)
   ============================================================ */
.basket .cart-summary,
#checkout .cart-summary {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  font-family: 'Open Sans', sans-serif;
}

.basket .cart-summary .basket-heading,
#checkout .cart-summary .basket-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1a1a1a;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.basket .cart-summary .row,
#checkout .cart-summary .row {
  margin-bottom: 8px;
}

.basket .cart-summary .price_label,
.basket .cart-summary .tax_label,
#checkout .cart-summary .price_label,
#checkout .cart-summary .tax_label {
  color: #6b7280;
  font-size: 14px;
}

.basket .cart-summary .price,
.basket .cart-summary .total-sum,
#checkout .cart-summary .price,
#checkout .cart-summary .total-sum {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #1a1a1a;
}

/* Summe */
.basket .cart-summary .basket-summary-total,
#checkout .cart-summary .basket-summary-total {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid #1a1a1a;
}

.basket .cart-summary .basket-summary-total .price_label,
#checkout .cart-summary .basket-summary-total .price_label {
  font-size: 16px;
  color: #1a1a1a;
  font-weight: 600;
}

.basket .cart-summary .basket-summary-total .total-sum,
#checkout .cart-summary .basket-summary-total .total-sum {
  font-size: 22px;
  color: #2465f5;
}

/* Kupon-Card innerhalb der Summary */
.basket .cart-summary .card-gray,
#checkout .cart-summary .card-gray {
  background: #f5f7fa;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  margin-bottom: 16px;
  box-shadow: none !important;
}

.basket .cart-summary .card-gray .card-header,
#checkout .cart-summary .card-gray .card-header {
  background: transparent;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 16px;
}

.basket .cart-summary .card-gray .card-header .btn-link,
#checkout .cart-summary .card-gray .card-header .btn-link {
  color: #2465f5;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.basket .cart-summary .card-gray .card-body,
#checkout .cart-summary .card-gray .card-body {
  padding: 16px;
}

/* Versand-/Gewicht-Hinweis */
.basket .cart-summary .basket-summary-notice-weight-wrapper,
#checkout .cart-summary .basket-summary-notice-weight-wrapper {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f2f5;
  font-size: 13px;
  color: #6b7280;
}

/* Checkout-Button zum nächsten Schritt */
.basket #cart-checkout-btn,
.basket .cart-summary a.btn-primary,
.basket .cart-summary .btn-primary {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 20px;
  background: #f97316 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
  text-align: center;
}

.basket #cart-checkout-btn:hover,
.basket .cart-summary a.btn-primary:hover,
.basket .cart-summary .btn-primary:hover {
  background: #ea580c !important;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.35);
  transform: translateY(-1px);
  color: #fff !important;
}

/* Leerer Warenkorb */
.basket .basket-empty .alert {
  background: #f5f7fa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
}

.basket .basket-empty .alert .bubble {
  background: #e8effd !important;
  color: #2465f5 !important;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.basket .basket-empty .btn-primary {
  background: #2465f5 !important;
  border-color: #2465f5 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.basket .basket-empty .btn-primary:hover {
  background: #1a4fd6 !important;
  border-color: #1a4fd6 !important;
}

/* ============================================================
   5) CHECKOUT: Karten-Grundstil
   ============================================================ */
#checkout .card,
#checkout .card-gray {
  background: #fff;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 20px;
  overflow: hidden;
}

#checkout .card-header,
#checkout .cardheader {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 18px 24px;
}

#checkout .card-header .card-title,
#checkout .card-header h3,
#checkout .card-header .h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1a1a1a;
  margin: 0;
}

#checkout .card-body,
#checkout .cardbody {
  padding: 24px;
}

/* ============================================================
   6) STEP 0 (Login / Register Auswahl)
   ============================================================ */
#order_register_or_login {
  margin-bottom: 24px;
}

#order_register_or_login .card-gray,
#existing-customer,
#register-customer {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 24px;
  height: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#order_register_or_login .card-gray:hover,
#existing-customer:hover,
#register-customer:hover {
  border-color: #2465f5 !important;
  box-shadow: 0 4px 16px rgba(36, 101, 245, 0.1) !important;
}

#order_register_or_login .card-title,
.checkout-existing-customer .card-title,
.checkout-register-form .card-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.checkout-existing-customer-hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 20px 0;
}

.checkout-button-row {
  margin-top: 20px;
}

/* ============================================================
   7) FORMULARE (allgemein für Checkout)
   ============================================================ */
#checkout label,
.basket label,
#checkout .form-group label,
.basket .form-group label {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #525252;
  margin-bottom: 6px;
}

#checkout input[type="text"],
#checkout input[type="email"],
#checkout input[type="password"],
#checkout input[type="tel"],
#checkout input[type="number"],
#checkout select,
#checkout textarea,
#checkout .form-control,
.basket .form-control {
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  height: auto;
}

#checkout input:focus,
#checkout select:focus,
#checkout textarea:focus,
#checkout .form-control:focus,
.basket .form-control:focus {
  border-color: #2465f5 !important;
  box-shadow: 0 0 0 3px rgba(36, 101, 245, 0.1) !important;
  outline: none !important;
}

#checkout .form-group {
  margin-bottom: 16px;
}

#checkout .has-error input,
#checkout .has-error select,
#checkout .has-error .form-control {
  border-color: #b90000 !important;
  box-shadow: 0 0 0 3px rgba(185, 0, 0, 0.08) !important;
}

#checkout .invalid-feedback,
#checkout .form-text.text-danger {
  color: #b90000;
  font-size: 12px;
  margin-top: 4px;
}

/* Checkboxen und Radios (Bootstrap-Custom) */
#checkout .custom-control-label,
.basket .custom-control-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
}

#checkout .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #2465f5 !important;
  border-color: #2465f5 !important;
}

#checkout .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(36, 101, 245, 0.15) !important;
}

/* ============================================================
   8) STEP 3: Versand- & Zahlungsoptionen als Karten
   ============================================================ */
.checkout-shipping-form-options,
#fieldset-payment .row,
.checkout-payment-options {
  display: block;
}

/* Einzelne Versand-Option */
.checkout-shipping-form-options-radio,
#fieldset-payment .custom-control,
.checkout-payment-options .custom-control {
  position: relative;
  display: block;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 20px 16px 56px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.checkout-shipping-form-options-radio:hover,
#fieldset-payment .custom-control:hover,
.checkout-payment-options .custom-control:hover {
  border-color: #2465f5;
  background: #fafbff;
}

.checkout-shipping-form-options-radio .custom-control-input:checked ~ *,
#fieldset-payment .custom-control-input:checked ~ *,
.checkout-payment-options .custom-control-input:checked ~ * {
  color: #1a1a1a;
}

.checkout-shipping-form-options-radio:has(.custom-control-input:checked),
#fieldset-payment .custom-control:has(.custom-control-input:checked),
.checkout-payment-options .custom-control:has(.custom-control-input:checked) {
  border-color: #2465f5;
  background: #f5f8ff;
  box-shadow: 0 2px 8px rgba(36, 101, 245, 0.1);
}

.checkout-shipping-form-options-radio label,
#fieldset-payment .custom-control-label,
.checkout-payment-options .custom-control-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
  display: block;
}

.checkout-shipping-form-options-specific-cost {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #2465f5;
  margin-left: auto;
}

.checkout-shipping-form-packaging {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 12px;
}

.checkout-shipping-form-packaging-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
}

.checkout-shipping-form-packaging-desc {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

.checkout-shipping-form-packaging-cost {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #2465f5;
}

/* Payment-Logos in den Optionen */
#fieldset-payment .custom-control img,
.checkout-payment-options img {
  max-height: 28px;
  margin-right: 12px;
  vertical-align: middle;
}

/* ============================================================
   9) STEP 5: Bestätigungs-Seite
   ============================================================ */
.checkout-confirmation {
  margin-top: 8px;
}

.checkout-confirmation .card {
  height: 100%;
}

.checkout-confirmation .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout-confirmation-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1a1a1a;
}

.checkout-confirmation .checkout-confirmation-change {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #2465f5;
  margin-right: 6px;
}

.checkout-confirmation .btn-link {
  color: #2465f5 !important;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.checkout-confirmation .btn-link:hover {
  background: #e8effd;
  text-decoration: none;
}

.checkout-confirmation .card-body p {
  margin-bottom: 8px;
  font-size: 14px;
  color: #525252;
}

.checkout-confirmation .card-body p.title,
.checkout-confirmation .card-body strong.title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #9b9b9b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
}

/* AGB / Bestell-Button Bereich */
#checkout .checkout-submit,
#checkout .order-finalize,
#checkout form[name="formBestaetigung"] .btn-primary,
#checkout button[name="abschluss"],
#checkout input[name="abschluss"] {
  background: #f97316 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 16px 28px !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  width: 100%;
  text-align: center;
}

#checkout button[name="abschluss"]:hover,
#checkout input[name="abschluss"]:hover,
#checkout form[name="formBestaetigung"] .btn-primary:hover {
  background: #ea580c !important;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.35);
  transform: translateY(-1px);
}

/* ============================================================
   10) CHECKOUT BUTTONS (allgemein)
   ============================================================ */
#checkout .btn-primary,
.basket .btn-primary {
  background: #2465f5;
  border-color: #2465f5;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

#checkout .btn-primary:hover,
.basket .btn-primary:hover {
  background: #1a4fd6;
  border-color: #1a4fd6;
}

#checkout .btn-outline-primary,
.basket .btn-outline-primary {
  color: #2465f5;
  border: 1.5px solid #2465f5;
  background: transparent;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

#checkout .btn-outline-primary:hover,
.basket .btn-outline-primary:hover {
  background: #2465f5;
  color: #fff;
}

#checkout .btn-secondary,
.basket .btn-secondary {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #525252;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

#checkout .btn-secondary:hover,
.basket .btn-secondary:hover {
  background: #f5f7fa;
  border-color: #e5e7eb;
  color: #1a1a1a;
}

/* Bestellvorgang Zurück-Link */
#checkout .checkout-button-row {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   11) ALERTS innerhalb des Checkouts
   ============================================================ */
#checkout .alert,
.basket .alert {
  border-radius: 10px;
  border-width: 1px;
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 20px;
}

#checkout .alert-danger,
.basket .alert-danger {
  background: #fdecea;
  border-color: #f5c2c0;
  color: #b90000;
}

#checkout .alert-success,
.basket .alert-success {
  background: #e6f6ed;
  border-color: #b9e4c7;
  color: #0f5d1b;
}

#checkout .alert-info,
.basket .alert-info {
  background: #e8effd;
  border-color: #c5d5fa;
  color: #1a4fd6;
}

/* ============================================================
   12) ORDER-ITEMS TABELLE (in Bestätigungsseite)
   ============================================================ */
#checkout .table,
#checkout table.order-items {
  border-radius: 10px;
  overflow: hidden;
}

#checkout .table thead th {
  background: #f5f7fa;
  border-bottom: 1px solid #e5e7eb;
  color: #6b7280;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
}

#checkout .table td {
  padding: 14px 16px;
  border-color: #f0f2f5;
  vertical-align: middle;
}

#checkout .table tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   13) STICKY SUMMARY auf kleineren Bildschirmen
   ============================================================ */
@media (max-width: 991px) {
  .basket .sticky-top.cart-summary,
  #checkout .sticky-top.cart-summary {
    position: static !important;
    margin-top: 24px;
  }
}