/* ============================================================
   OCEANIKA · Carrito, checkout y botones de compra
   Misma identidad (rojo + negro + dorado). Mobile first.
   ============================================================ */

/* ---------------------- Botón "+" en la tarjeta ---------------------- */
.add-btn {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-strong);
  color: var(--white-warm); display: grid; place-items: center;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.add-btn:hover { background: var(--grad-red); border-color: transparent; color: #fff; box-shadow: var(--shadow-red); }
.add-btn:active { transform: scale(0.92); }
.product-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------------------- Botón flotante del carrito ---------------------- */
.cart-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 350; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 17px; border-radius: var(--radius-pill);
  background: var(--grad-red); color: #fff; font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 10px 30px rgba(215,25,32,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cart-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,31,45,0.5); }
.cart-fab:active { transform: scale(0.96); }
.cart-fab.is-bump { animation: fabBump 420ms var(--ease-out); }
@keyframes fabBump {
  0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); }
}
.cart-fab-count {
  position: absolute; top: -6px; left: -6px; min-width: 24px; height: 24px; padding: 0 6px;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--white-warm); color: var(--black-deep);
  font-size: 0.78rem; font-weight: 700; box-shadow: var(--shadow-sm);
}
.cart-fab-total { letter-spacing: 0.01em; }

/* ---------------------- Panel lateral del carrito ---------------------- */
.cart-overlay {
  position: fixed; inset: 0; z-index: 500; display: flex; justify-content: flex-end;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
}
.cart-overlay.open { opacity: 1; }

.cart-drawer {
  position: relative; display: flex; flex-direction: column;
  width: min(420px, 100%); max-width: 100%; height: 100%;
  background: linear-gradient(170deg, #151515 0%, #0b0b0b 100%);
  border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform var(--t-mid) var(--ease-out);
}
.cart-overlay.open .cart-drawer { transform: none; }

.cart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 20px 16px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.cart-title { font-family: var(--font-display); font-size: 1.45rem; }
.cart-close { position: static; width: 38px; height: 38px; font-size: 1.5rem; }

/* Estado vacío */
.cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 40px 26px; text-align: center; }
.cart-empty-mark { font-size: 2.4rem; opacity: 0.6; }
.cart-empty-title { font-size: 1.05rem; font-weight: 600; }
.cart-empty-text { color: var(--white-dim); font-size: 0.9rem; margin-bottom: 14px; }

/* Líneas del pedido */
.cart-list { list-style: none; flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.cart-line {
  position: relative; display: flex; gap: 12px; padding: 12px 34px 12px 12px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md);
}
.cart-line-img {
  flex-shrink: 0; width: 62px; height: 62px; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--gray-dark);
}
.cart-line-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-line-name { font-size: 0.94rem; font-weight: 600; line-height: 1.3; }
.cart-line-option {
  font-size: 0.74rem; color: var(--gold-soft); background: rgba(199,169,107,0.12);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  padding: 2px 9px; align-self: flex-start;
}
.cart-line-unit { font-size: 0.78rem; color: var(--white-dim); }
.cart-line-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.cart-line-subtotal { font-size: 1rem; font-weight: 700; }
.cart-line-remove {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: var(--white-faint); font-size: 1.25rem; line-height: 1;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cart-line-remove:hover { color: #fff; background: var(--brand-red); }

/* Control de cantidad (reutilizado en el modal de producto) */
.qty-stepper {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 3px;
}
.qty-btn {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: var(--white-warm); font-size: 1.1rem; line-height: 1;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.qty-btn:hover:not(:disabled) { background: var(--brand-red); color: #fff; }
.qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qty-value { min-width: 26px; text-align: center; font-weight: 700; font-size: 0.95rem; }

/* Pie del carrito */
.cart-foot {
  flex-shrink: 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-subtle); background: rgba(5,5,5,0.5);
  display: flex; flex-direction: column; gap: 10px;
}
.cart-total-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 1rem; }
.cart-total-row strong { font-size: 1.5rem; font-family: var(--font-display); }
.cart-note { font-size: 0.76rem; color: var(--white-faint); line-height: 1.4; }

/* ---------------------- Modal de checkout ---------------------- */
.checkout-overlay { z-index: 600; align-items: center; }
.checkout-modal {
  position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(170deg, #151515 0%, #0c0c0c 100%);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(0.98); opacity: 0;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-mid) var(--ease);
}
.checkout-overlay.open .checkout-modal { transform: none; opacity: 1; }

.checkout-form { padding: 26px 22px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
.ck-title { font-family: var(--font-display); font-size: 1.6rem; padding-right: 40px; }
.ck-sub { color: var(--white-dim); font-size: 0.88rem; margin-top: -8px; }

.ck-group { border: none; }
.ck-legend {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.ck-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ck-mode-box {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 14px 8px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ck-mode:hover .ck-mode-box { border-color: var(--border-strong); }
.ck-mode input:checked + .ck-mode-box {
  border-color: var(--red-intense); background: rgba(215,25,32,0.12); box-shadow: var(--shadow-red);
}
.ck-mode input:focus-visible + .ck-mode-box { outline: 2px solid var(--gold); outline-offset: 2px; }
.ck-mode-icon { font-size: 1.4rem; }
.ck-mode-name { font-size: 0.88rem; font-weight: 600; }

.ck-field { display: flex; flex-direction: column; gap: 6px; }
.ck-field label { font-size: 0.8rem; font-weight: 600; color: var(--white-dim); }
.ck-field input, .ck-field select {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);
  color: var(--white-warm); outline: none; font-size: 0.95rem;
  transition: border-color var(--t-fast) var(--ease);
}
.ck-field input::placeholder { color: var(--white-faint); }
.ck-field input:focus, .ck-field select:focus { border-color: var(--red-intense); }
.ck-field input.has-error, .ck-field select.has-error { border-color: var(--red-intense); background: rgba(255,31,45,0.07); }
.ck-field select option { background: var(--gray-dark); color: var(--white-warm); }

.ck-error { color: #ff8a91; font-size: 0.8rem; }
.ck-error-form {
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(255,31,45,0.1); border: 1px solid rgba(255,31,45,0.3);
}
.ck-notice {
  margin-top: 4px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: rgba(199,169,107,0.1); border: 1px solid var(--hairline);
  color: var(--gold-soft); font-size: 0.83rem; line-height: 1.45;
}
#ckDeliveryFields { display: flex; flex-direction: column; gap: 14px; }

.ck-summary { padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.ck-summary-row { display: flex; align-items: baseline; justify-content: space-between; color: var(--white-dim); font-size: 0.9rem; }
.ck-summary-row strong { font-size: 1.4rem; font-family: var(--font-display); color: var(--white-warm); }

.ck-actions { display: flex; gap: 10px; }
.ck-actions .btn { flex: 1; }
.ck-actions .btn:disabled { opacity: 0.7; cursor: wait; }

/* ---------------------- Modal de producto: agregar al pedido ---------------------- */
.pm-add {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  padding-top: 20px; border-top: 1px solid var(--border-subtle);
}
.pm-add .btn { flex: 1; }
.pm-add .qty-stepper { flex-shrink: 0; }

/* Opción seleccionable dentro del modal (cuando el producto trae opciones) */
.pm-opt-item.is-selectable { cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.pm-opt-item.is-selectable:hover { border-color: var(--border-strong); }
.pm-opt-radio { position: absolute; opacity: 0; pointer-events: none; }
.pm-opt-item.is-checked { border-color: var(--red-intense); background: rgba(215,25,32,0.12); }
.pm-opt-mark {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-strong); display: grid; place-items: center;
}
.pm-opt-item.is-checked .pm-opt-mark { border-color: var(--red-intense); }
.pm-opt-item.is-checked .pm-opt-mark::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--red-intense);
}

/* ---------------------- Responsive ---------------------- */
@media (max-width: 560px) {
  .cart-drawer { width: 100%; border-left: none; }
  .cart-fab { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 12px 18px 12px 15px; }
  .checkout-overlay { padding: 12px; }
  .checkout-modal { max-height: calc(100dvh - 24px); }
  .ck-title { font-size: 1.4rem; }
}

/* El carrito flotante no debe tapar los toasts inferiores */
@media (max-width: 480px) {
  .toast-container { bottom: 84px; }
}