/* ==========================================================
   HTS Commerce Theme
   Shared Commerce styling for UniPulse.
   Uses existing site variables:
   --hts-primary  = sit_primary_color
   --hts-accent   = sit_secondary_color
   ========================================================== */

:root {
  --commerce-primary: var(--hts-primary, #152D75);
  --commerce-accent: var(--hts-accent, #CD1719);
  --commerce-surface: var(--surface-color, #ffffff);
  --commerce-bg: color-mix(in srgb, var(--commerce-primary), white 97%);
  --commerce-border: color-mix(in srgb, var(--commerce-primary), transparent 88%);
  --commerce-border-strong: color-mix(in srgb, var(--commerce-primary), transparent 72%);
  --commerce-muted: color-mix(in srgb, var(--default-color, #394757), transparent 28%);
  --commerce-soft-primary: color-mix(in srgb, var(--commerce-primary), white 93%);
  --commerce-soft-accent: color-mix(in srgb, var(--commerce-accent), white 92%);
  --commerce-radius: 18px;
  --commerce-radius-sm: 12px;
  --commerce-shadow: 0 12px 34px color-mix(in srgb, var(--commerce-primary), transparent 91%);
  --commerce-shadow-hover: 0 16px 42px color-mix(in srgb, var(--commerce-primary), transparent 86%);
}


/* ==========================================================
   Shared page shell
   ========================================================== */

#commerce-cart,
#commerce-checkout,
#commerce-checkout-review,
#commerce-checkout-payment,
#commerce-checkout-pay,
#commerce-checkout-prepay,
#commerce-checkout-stripe-return,
.ticket-commerce {
  --bs-primary: var(--commerce-accent);
  --bs-primary-rgb: 205, 23, 25;
}

#commerce-cart,
#commerce-checkout,
#commerce-checkout-review,
#commerce-checkout-payment,
#commerce-checkout-pay,
#commerce-checkout-prepay,
#commerce-checkout-stripe-return {
  background:
    linear-gradient(
      180deg,
      var(--commerce-bg) 0,
      color-mix(in srgb, var(--commerce-bg), white 45%) 190px,
      #fff 520px
    );
}

#commerce-cart h1,
#commerce-checkout h1,
#commerce-checkout-review h1,
#commerce-checkout-payment h1,
#commerce-checkout-pay h1,
#commerce-checkout-prepay h1,
#commerce-checkout-stripe-return h1,
.ticket-commerce h2,
.ticket-commerce h3 {
  color: var(--commerce-primary);
}


/* ==========================================================
   Cards
   ========================================================== */

#commerce-cart .card,
#commerce-checkout .card,
#commerce-checkout-review .card,
#commerce-checkout-payment .card,
#commerce-checkout-pay .card,
#commerce-checkout-prepay .card,
#commerce-checkout-stripe-return .card,
.ticket-commerce .card {
  border: 1px solid var(--commerce-border) !important;
  border-radius: var(--commerce-radius);
  background: var(--commerce-surface);
  box-shadow: var(--commerce-shadow);
}

#commerce-cart .card-body,
#commerce-checkout .card-body,
#commerce-checkout-review .card-body,
#commerce-checkout-payment .card-body,
#commerce-checkout-pay .card-body,
#commerce-checkout-prepay .card-body,
#commerce-checkout-stripe-return .card-body {
  padding: clamp(1.2rem, 2.4vw, 2rem);
}

.commerce-cart-summary,
.commerce-checkout-summary {
  background:
    linear-gradient(
      145deg,
      var(--commerce-soft-primary),
      #fff 58%
    ) !important;
  border-top: 4px solid var(--commerce-accent) !important;
}


/* ==========================================================
   Buttons
   ========================================================== */

#commerce-cart .btn-primary,
#commerce-checkout .btn-primary,
#commerce-checkout-review .btn-primary,
#commerce-checkout-payment .btn-primary,
#commerce-checkout-pay .btn-primary,
#commerce-checkout-prepay .btn-primary,
#commerce-checkout-stripe-return .btn-primary,
.ticket-commerce .btn-primary {
  background: var(--commerce-accent);
  border-color: var(--commerce-accent);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  padding: .72rem 1.35rem;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--commerce-accent), transparent 76%);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#commerce-cart .btn-primary:hover,
#commerce-checkout .btn-primary:hover,
#commerce-checkout-review .btn-primary:hover,
#commerce-checkout-payment .btn-primary:hover,
#commerce-checkout-pay .btn-primary:hover,
#commerce-checkout-prepay .btn-primary:hover,
#commerce-checkout-stripe-return .btn-primary:hover,
.ticket-commerce .btn-primary:hover {
  background: color-mix(in srgb, var(--commerce-accent), black 12%);
  border-color: color-mix(in srgb, var(--commerce-accent), black 12%);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--commerce-accent), transparent 68%);
}

#commerce-cart .btn-primary:disabled,
#commerce-checkout .btn-primary:disabled,
#commerce-checkout-review .btn-primary:disabled,
#commerce-checkout-payment .btn-primary:disabled,
.ticket-commerce .btn-primary:disabled {
  transform: none;
  box-shadow: none;
  opacity: .58;
}

#commerce-cart .btn-outline-secondary,
#commerce-checkout .btn-outline-secondary,
#commerce-checkout-review .btn-outline-secondary,
#commerce-checkout-payment .btn-outline-secondary,
.ticket-commerce .btn-outline-secondary {
  border-color: var(--commerce-border-strong);
  color: var(--commerce-primary);
  background: #fff;
}

#commerce-cart .btn-outline-secondary:hover,
#commerce-checkout .btn-outline-secondary:hover,
#commerce-checkout-review .btn-outline-secondary:hover,
#commerce-checkout-payment .btn-outline-secondary:hover,
.ticket-commerce .btn-outline-secondary:hover {
  border-color: var(--commerce-primary);
  background: var(--commerce-soft-primary);
  color: var(--commerce-primary);
}


/* ==========================================================
   Forms
   ========================================================== */

#commerce-checkout .form-control,
#commerce-checkout .form-select,
#commerce-checkout-review .form-control,
#commerce-checkout-payment .form-control,
.ticket-commerce .form-control,
.ticket-commerce .form-select {
  min-height: 48px;
  border-radius: var(--commerce-radius-sm);
  border-color: var(--commerce-border-strong);
  background-color: #fff;
  padding: .7rem .9rem;
}

#commerce-checkout .form-control:focus,
#commerce-checkout .form-select:focus,
#commerce-checkout-review .form-control:focus,
#commerce-checkout-payment .form-control:focus,
.ticket-commerce .form-control:focus,
.ticket-commerce .form-select:focus {
  border-color: var(--commerce-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--commerce-accent), transparent 88%);
}

#commerce-checkout .form-label,
#commerce-checkout-payment .form-label {
  color: var(--commerce-primary);
  font-weight: 650;
}


/* ==========================================================
   Payment selection
   ========================================================== */

.checkout-payment-option {
  display: block;
  position: relative;
  padding: 1rem 1.1rem;
  border: 1px solid var(--commerce-border-strong);
  border-radius: var(--commerce-radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.checkout-payment-option + .checkout-payment-option {
  margin-top: .75rem;
}

.checkout-payment-option:hover {
  border-color: var(--commerce-accent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--commerce-primary), transparent 91%);
  transform: translateY(-1px);
}

.checkout-payment-option:has(input:checked) {
  border-color: var(--commerce-accent);
  background: var(--commerce-soft-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--commerce-accent), transparent 88%);
}

.checkout-payment-option .form-check-input {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  margin: 0;
  border-color: var(--commerce-border-strong);
}

.checkout-payment-option .form-check-input:checked {
  background-color: var(--commerce-accent);
  border-color: var(--commerce-accent);
}

.checkout-payment-option i {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--commerce-primary);
  background: var(--commerce-soft-primary);
}


/* ==========================================================
   Cart
   ========================================================== */

.commerce-cart-item {
  border: 1px solid var(--commerce-border) !important;
  border-radius: var(--commerce-radius);
  background: #fff;
  box-shadow: 0 7px 22px color-mix(in srgb, var(--commerce-primary), transparent 94%);
  overflow: hidden;
}

.commerce-cart-item:hover {
  box-shadow: var(--commerce-shadow);
}

.commerce-cart-qty,
.ticket-commerce .commerce-qty {
  border-color: var(--commerce-border-strong) !important;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}

.commerce-cart-qty button,
.ticket-commerce .commerce-qty button {
  color: var(--commerce-primary);
  transition: background .15s ease, color .15s ease;
}

.commerce-cart-qty button:hover,
.ticket-commerce .commerce-qty button:hover {
  background: var(--commerce-soft-accent);
  color: var(--commerce-accent);
}

#commerce-cart-total,
#checkout-review-total {
  color: var(--commerce-primary);
}


/* ==========================================================
   Ticket booking widget
   ========================================================== */

.ticket-commerce .card {
  border-top: 4px solid var(--commerce-accent) !important;
}

.ticket-commerce .bi-ticket-perforated {
  color: var(--commerce-accent) !important;
}

.ticket-commerce .commerce-weekdays {
  color: var(--commerce-primary);
  font-weight: 700 !important;
}

.ticket-commerce .commerce-day {
  border-radius: 11px !important;
  border-color: transparent !important;
}

.ticket-commerce .commerce-day:not(:disabled):hover {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--commerce-primary), transparent 84%) !important;
}

.ticket-commerce .commerce-day.is-selected {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--commerce-accent), transparent 72%) !important;
  border-color: #fff !important;
}

.ticket-commerce .commerce-time-option {
  border-radius: 12px;
}

.ticket-commerce .commerce-time-option:has(input:checked) {
  border-color: var(--commerce-accent) !important;
  background: var(--commerce-soft-accent) !important;
}

.ticket-commerce .form-check-input:checked {
  background-color: var(--commerce-accent);
  border-color: var(--commerce-accent);
}


/* ==========================================================
   Alerts / success states
   ========================================================== */

#commerce-cart .alert,
#commerce-checkout .alert,
#commerce-checkout-review .alert,
#commerce-checkout-payment .alert,
#commerce-checkout-prepay .alert,
#commerce-checkout-stripe-return .alert,
.ticket-commerce .alert {
  border-radius: var(--commerce-radius-sm);
}

#commerce-checkout-prepay .alert-info,
#commerce-checkout-stripe-return .alert-success {
  border-left: 4px solid var(--commerce-accent);
}


/* ==========================================================
   Checkout progress line
   Uses page body classes already stored in cfg_pages.
   ========================================================== */

.commerce-cart-page #commerce-cart > .container::before,
.commerce-checkout-page #commerce-checkout > .container::before,
.commerce-checkout-page #commerce-checkout-review > .container::before,
.commerce-checkout-page #commerce-checkout-payment > .container::before,
.commerce-checkout-page #commerce-checkout-pay > .container::before,
.commerce-checkout-page #commerce-checkout-prepay > .container::before,
.commerce-checkout-page #commerce-checkout-stripe-return > .container::before {
  content: "Warenkorb   ›   Kundendaten   ›   Prüfen   ›   Zahlung";
  display: block;
  margin: 0 0 1.5rem;
  padding: .85rem 1rem;
  border: 1px solid var(--commerce-border);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--commerce-muted);
  font-size: .84rem;
  font-weight: 650;
  letter-spacing: .01em;
  text-align: center;
  box-shadow: 0 5px 18px color-mix(in srgb, var(--commerce-primary), transparent 95%);
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 767.98px) {
  :root {
    --commerce-radius: 14px;
    --commerce-radius-sm: 10px;
  }

  .commerce-cart-page #commerce-cart > .container::before,
  .commerce-checkout-page #commerce-checkout > .container::before,
  .commerce-checkout-page #commerce-checkout-review > .container::before,
  .commerce-checkout-page #commerce-checkout-payment > .container::before,
  .commerce-checkout-page #commerce-checkout-pay > .container::before,
  .commerce-checkout-page #commerce-checkout-prepay > .container::before,
  .commerce-checkout-page #commerce-checkout-stripe-return > .container::before {
    content: "Warenkorb  ›  Checkout  ›  Zahlung";
    border-radius: 12px;
    font-size: .78rem;
  }

  .checkout-payment-option {
    padding-right: 3rem;
  }
}