/*
 * BOOSTIFY MARKET — CHECKOUT (zona de carrito / resumen / pago) · Halloween Edition
 *
 * Estiliza components/cart-page.njk: encabezado + pasos, lista de productos,
 * controles de cantidad, resumen del pedido, alertas, estado vacío y botón de pago.
 * No toca marcado ni lógica (Alpine, API, stock, precios): solo presentación.
 *
 * Instalación: en layouts/master.njk, justo después de halloween.css:
 *   <link href="{{ 'checkout.css' | assetUrl }}" rel="stylesheet"/>
 *
 * Todo va dentro de `.boost-checkout`, así no afecta a otras páginas.
 * Nota: la pantalla de pago que abre la API de SellAuth (Create Checkout Session)
 * es un checkout alojado en su dominio y no admite CSS del tema.
 */

/* ═══ Tokens locales (usan los de halloween.css si existen) ═══════ */
.boost-checkout {
  --ck-orange: var(--hw-orange, #ff7a1a);
  --ck-orange-soft: var(--hw-orange-soft, #ff9a3d);
  --ck-amber: var(--hw-amber, #ffb347);
  --ck-violet: var(--hw-violet, #8b5cf6);
  --ck-night: var(--hw-night, #07040d);
  --ck-panel: #130a22;
  --ck-panel-2: #1a0f2e;
  --ck-field: #0d0618;
  --ck-line: rgba(139, 92, 246, .26);
  --ck-line-hot: rgba(255, 122, 26, .6);
  --ck-text: #f4ecff;
  --ck-muted: #a99bc0;
  --ck-orange-rgb: 255, 122, 26;
  --ck-violet-rgb: 139, 92, 246;
  --ck-radius: 16px;
}

/* ═══ Encabezado ══════════════════════════════════════════════════ */
html .boost-checkout .boost-checkout__heading {
  align-items: flex-end;
  gap: 1.25rem 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--ck-line-hot), var(--ck-line) 45%, transparent) 1;
}
html .boost-checkout .boost-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ck-orange-soft) !important;
  letter-spacing: .16em;
}
html .boost-checkout .boost-kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ck-orange);
  box-shadow: 0 0 10px 2px rgba(var(--ck-orange-rgb), .7);
}
html .boost-checkout .boost-checkout__heading h1 {
  color: var(--ck-text);
  text-shadow: 0 0 34px rgba(var(--ck-violet-rgb), .38);
}
html .boost-checkout .boost-checkout__heading p:last-child { color: var(--ck-muted); }

/* ═══ Pasos (1 Carrito · 2 Pago · 3 Confirmación) ═════════════════ */
html .boost-checkout .boost-checkout__steps {
  counter-reset: ck-step;
  gap: .5rem;
  align-items: center;
}
html .boost-checkout .boost-checkout__steps li {
  padding: .45rem .8rem;
  color: #8f80aa;
  background: rgba(13, 6, 24, .6);
  border-color: var(--ck-line);
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
html .boost-checkout .boost-checkout__steps .is-current {
  color: #1c0a02;
  background: linear-gradient(130deg, var(--ck-orange), var(--ck-amber));
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(var(--ck-orange-rgb), .35);
}

/* ═══ Lista de productos ══════════════════════════════════════════ */
html .boost-checkout .product {
  position: relative;
  padding: .9rem !important;
  background: linear-gradient(180deg, var(--ck-panel-2), var(--ck-panel)) !important;
  border: 1px solid var(--ck-line) !important;
  border-radius: var(--ck-radius) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
html .boost-checkout .product:hover {
  border-color: var(--ck-line-hot) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .5), 0 0 28px rgba(var(--ck-orange-rgb), .16);
}
html .boost-checkout .product img {
  border: 1px solid var(--ck-line);
  border-radius: 12px;
  background: var(--ck-field);
}
html .boost-checkout .product .bi-box { font-size: 1.8rem; color: var(--ck-violet); }
html .boost-checkout .product a { color: var(--ck-text) !important; transition: color .2s ease; }
html .boost-checkout .product a:hover { color: var(--ck-orange-soft) !important; }
html .boost-checkout .product .border-top { border-color: var(--ck-line) !important; }
html .boost-checkout .product .text-muted { color: var(--ck-muted) !important; }
html .boost-checkout .product .fw-medium {
  background: linear-gradient(100deg, #cdb0ff, #ffb067);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
}

/* Eliminar producto */
html .boost-checkout .product .btn.text-danger {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #ff6b5a !important;
  transition: background .2s ease, box-shadow .2s ease;
}
html .boost-checkout .product .btn.text-danger:hover {
  background: rgba(255, 77, 31, .14);
  box-shadow: 0 0 16px rgba(255, 77, 31, .25);
}

/* Cantidad */
html .boost-checkout .input-group .btn-outline-primary {
  min-width: 38px;
  color: var(--ck-orange-soft) !important;
  background: rgba(var(--ck-orange-rgb), .06) !important;
  border-color: var(--ck-line) !important;
  box-shadow: none !important;
}
html .boost-checkout .input-group .btn-outline-primary:hover:not(:disabled) {
  background: rgba(var(--ck-orange-rgb), .2) !important;
  border-color: var(--ck-line-hot) !important;
  color: #fff !important;
  transform: none;
}
html .boost-checkout .input-group .btn-outline-primary:disabled { opacity: .35; }
html .boost-checkout .input-group .form-control {
  background: var(--ck-field) !important;
  border-color: var(--ck-line) !important;
  color: var(--ck-text) !important;
  font-weight: 700;
}
html .boost-checkout .input-group .form-control:focus {
  border-color: var(--ck-orange) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--ck-orange-rgb), .22) !important;
  z-index: 3;
}

/* ═══ Resumen del pedido ══════════════════════════════════════════ */
html .boost-checkout .boost-order-summary {
  position: sticky;
  top: 96px;
  overflow: hidden;
  padding: 1.5rem !important;
  background: linear-gradient(165deg, #1b0d30 0%, #0f0819 100%) !important;
  border: 1px solid rgba(var(--ck-orange-rgb), .3) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .55), 0 0 40px rgba(var(--ck-orange-rgb), .08);
}
/* hilo de luz superior + telaraña de esquina */
html .boost-checkout .boost-order-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ck-orange), transparent);
  opacity: .85;
  pointer-events: none;
}
html .boost-checkout .boost-order-summary::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 84px;
  height: 84px;
  opacity: .14;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cg fill='none' stroke='%23e6d4ff' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M54 0L0 0M54 0L0 14M54 0L4 34M54 0L22 54M54 0L54 54'/%3E%3Cpath d='M40 0Q42 12 54 14M26 0Q30 22 54 26M12 0Q18 32 54 40'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
html .boost-checkout .boost-summary-label {
  color: var(--ck-orange-soft);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}
html .boost-checkout .boost-order-summary .form-label {
  margin-bottom: .9rem;
  color: var(--ck-text);
  font-size: 1.25rem;
  font-weight: 800;
}
html .boost-checkout .boost-order-summary .border-bottom { border-color: var(--ck-line) !important; }
html .boost-checkout .boost-order-summary .text-muted { color: var(--ck-muted) !important; }
html .boost-checkout .boost-order-summary .fw-bold {
  color: var(--ck-text);
  font-size: 1.15rem;
}

/* Botón principal: "Continuar al pago" */
html .boost-checkout .boost-order-summary button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(130deg, var(--ck-orange), var(--ck-amber)) !important;
  color: #1c0a02 !important;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 10px 32px rgba(var(--ck-orange-rgb), .36);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
html .boost-checkout .boost-order-summary button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 42px rgba(var(--ck-orange-rgb), .55);
}
html .boost-checkout .boost-order-summary button[type="submit"]:active:not(:disabled) { transform: translateY(0); }
html .boost-checkout .boost-order-summary button[type="submit"]:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  filter: saturate(.6);
}
html .boost-checkout .boost-order-summary button[type="submit"] svg { width: 1.15rem; height: 1.15rem; }
html .boost-checkout .boost-order-summary button[type="submit"] .animate-spin {
  animation: ck-spin 1s linear infinite;
}

/* ═══ Estados: alertas, carga, vacío ══════════════════════════════ */
html .boost-checkout .alert {
  border-radius: 14px !important;
  border-width: 1px;
  font-size: .92rem;
}
html .boost-checkout .alert p:last-child { margin-bottom: 0; }
html .boost-checkout .alert-warning {
  color: #ffd9a8;
  background: rgba(var(--ck-orange-rgb), .1);
  border-color: rgba(var(--ck-orange-rgb), .4);
}
html .boost-checkout .alert-danger {
  color: #ffc2b8;
  background: rgba(255, 77, 31, .1);
  border-color: rgba(255, 77, 31, .42);
}
html .boost-checkout .spinner-border.text-primary { color: var(--ck-orange) !important; }
html .boost-checkout .p-4.border.rounded.text-center {
  background: var(--ck-panel) !important;
  border-color: var(--ck-line) !important;
  border-radius: var(--ck-radius) !important;
}
html .boost-checkout .boost-empty-state {
  padding: 3rem 1.5rem !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--ck-orange-rgb), .1), transparent 65%), var(--ck-panel) !important;
}
html .boost-checkout .boost-empty-state i {
  color: var(--ck-orange-soft);
  font-size: 2.4rem;
  filter: drop-shadow(0 0 14px rgba(var(--ck-orange-rgb), .55));
}
html .boost-checkout .boost-empty-state h2 { color: var(--ck-text); }
html .boost-checkout .boost-empty-state .btn-primary {
  border: 0;
  border-radius: 12px;
  background: linear-gradient(130deg, var(--ck-orange), var(--ck-amber)) !important;
  color: #1c0a02 !important;
  font-weight: 800;
  box-shadow: 0 8px 26px rgba(var(--ck-orange-rgb), .32);
}

@keyframes ck-spin { to { transform: rotate(360deg); } }

/* ═══ Responsive ══════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  html .boost-checkout .boost-order-summary { position: static; top: auto; }
  html .boost-checkout .boost-checkout__heading { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
  html .boost-checkout .boost-checkout__heading h1 { font-size: 2rem; }
  html .boost-checkout .boost-checkout__steps {
    width: 100%;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: none;
  }
  html .boost-checkout .boost-checkout__steps::-webkit-scrollbar { display: none; }
  html .boost-checkout .boost-checkout__steps li { padding: .4rem .65rem; font-size: .72rem; }
  html .boost-checkout .boost-order-summary { padding: 1.15rem !important; }
  html .boost-checkout .product .btn.text-danger { width: 44px; height: 44px; }
  html .boost-checkout .input-group .btn-outline-primary { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html .boost-checkout .product,
  html .boost-checkout .boost-order-summary button[type="submit"] { transition: none; }
  html .boost-checkout .boost-order-summary button[type="submit"] .animate-spin { animation: none; }
}