/* =========================================================
   checkout.css — wizard 3 pasos + summary sticky lateral.
   ========================================================= */

.checkout-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}
.checkout-head {
  margin-bottom: 24px;
}
.checkout-head__title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  color: var(--fg);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.checkout-head__sub {
  color: var(--fg-mute);
  font-size: 14px;
  margin: 0;
}

/* ─── Step indicator (top) ────────────────────── */

.step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 28px;
  flex-wrap: wrap;
}
.step-indicator__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--fg-mute);
  font-size: 13px;
  border: 1px solid var(--line-soft);
}
.step-indicator__item.is-active {
  background: var(--c-cyan-400);
  color: var(--c-blue-900);
  border-color: var(--accent-text);
  font-weight: 700;
}
.step-indicator__item.is-done {
  background: rgba(62, 230, 230, 0.15);
  color: var(--fg);
  border-color: var(--accent-text);
}
.step-indicator__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.step-indicator__item.is-active .step-indicator__num {
  background: var(--c-blue-900);
  /* Fixed cyan-400 (no --accent-text) porque el bg es dark
     intencional. En light theme --accent-text se vuelve teal
     oscuro y no contrastaría sobre el azul. */
  color: var(--c-cyan-400);
}
.step-indicator__item.is-done .step-indicator__num {
  background: var(--c-cyan-400);
  color: var(--c-blue-900);
}
.step-indicator__sep {
  flex: 1;
  height: 1px;
  background: var(--line-soft);
  min-width: 14px;
  max-width: 60px;
}
@media (max-width: 760px) {
  .step-indicator__label { display: none; }
  .step-indicator__item { padding: 6px; }
}

/* ─── Layout: form a la izquierda, summary derecha ─── */

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1024px) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
}

.checkout-main {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 28px;
}

.step__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
  margin: 0 0 4px;
}
.step__sub {
  color: var(--fg-mute);
  margin: 0 0 24px;
  font-size: 14px;
}
.step__sub-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 28px 0 14px;
}

/* ─── Form fields ──────────────────────────── */

.ck-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ck-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ck-field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-mute);
  letter-spacing: 0.02em;
}
.ck-field input,
.ck-field textarea,
.ck-field select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ck-field input:focus,
.ck-field textarea:focus,
.ck-field select:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgba(62, 230, 230, 0.2);
}
/* Error inline por campo (compartido con v2; acá la versión básica) */
.ck-field.has-error input,
.ck-field.has-error textarea,
.ck-field.has-error select { border-color: var(--error); }
.ck-field__error {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--error);
}
.ck-field input::placeholder,
.ck-field textarea::placeholder {
  color: var(--fg-dim);
}
.ck-field textarea {
  resize: vertical;
  font-family: inherit;
}

.ck-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ck-field-row--3-1 { grid-template-columns: 3fr 1fr; }
.ck-field-row--1-3 { grid-template-columns: 1fr 3fr; }
@media (max-width: 480px) {
  .ck-field-row,
  .ck-field-row--3-1,
  .ck-field-row--1-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Account toggle (radio cards) ──────────── */

.ck-account-toggle {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.ck-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--bg);
  border: 1.5px solid var(--line-soft);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ck-radio:hover { border-color: var(--accent-text); }
.ck-radio:has(input:checked) {
  border-color: var(--accent-text);
  background: rgba(62, 230, 230, 0.08);
}
.ck-radio input { display: none; }
.ck-radio__circle {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ck-radio:has(input:checked) .ck-radio__circle {
  border-color: var(--accent-text);
}
.ck-radio:has(input:checked) .ck-radio__circle::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--c-cyan-400);
  border-radius: 50%;
}
.ck-radio b { font-weight: 700; color: var(--fg); }
.ck-radio small { color: var(--fg-mute); font-size: 12px; }

/* ─── Shipping & Payment options (cards) ─────── */

.ck-shipping-options,
.ck-payment-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.ck-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1.5px solid var(--line-soft);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ck-opt:hover { border-color: var(--accent-text); }
.ck-opt.is-selected {
  border-color: var(--accent-text);
  background: rgba(62, 230, 230, 0.08);
}
.ck-opt input { display: none; }
.ck-opt__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ck-opt__title {
  font-weight: 700;
  color: var(--fg);
  font-size: 14px;
}
.ck-opt__desc {
  color: var(--fg-mute);
  font-size: 12px;
}
.ck-opt__check {
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ck-opt.is-selected .ck-opt__check {
  border-color: var(--accent-text);
  background: var(--c-cyan-400);
}
.ck-opt.is-selected .ck-opt__check::after {
  content: '✓';
  color: var(--c-blue-900);
  font-weight: 700;
  font-size: 14px;
}

/* ─── Pickup info card ────────────────────────── */
.ck-pickup-info {
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 8px;
}
.ck-pickup-info p {
  margin: 0;
  padding: 4px 0;
  color: var(--fg);
  font-size: 14px;
}
.ck-pickup-info p b { color: var(--accent-text); }
/* Aviso ámbar que resalta la coordinación del retiro (texto en tono cercano). */
.ck-pickup-info p.ck-pickup-info__warn {
  background: var(--warning-soft);
  border-left: 3px solid var(--warning);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.ck-pickup-info p.ck-pickup-info__warn b { color: var(--warning-text); }

/* ─── Installments grid ───────────────────────── */
.ck-installments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.ck-installment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  background: var(--bg);
  border: 1.5px solid var(--line-soft);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ck-installment:hover { border-color: var(--accent-text); }
.ck-installment.is-selected {
  border-color: var(--accent-text);
  background: rgba(62, 230, 230, 0.08);
}
.ck-installment input { display: none; }
.ck-installment__n {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-text);
}
.ck-installment__amount {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
}
.ck-installment__note {
  color: var(--fg-mute);
  font-size: 11px;
}

/* ─── Step 3 Review sections ──────────────────── */

.ck-review {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.ck-review__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ck-review__head h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}
.ck-review__edit {
  background: transparent;
  border: 0;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ck-review p {
  margin: 4px 0;
  color: var(--fg);
  font-size: 14px;
}
.ck-review p small { color: var(--fg-mute); font-size: 12px; }

.ck-review-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ck-review-items li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--fg);
}
.ck-review-items li:last-child { border-bottom: 0; }
.ck-review-items__qty { color: var(--fg-mute); }
.ck-review-items__price {
  color: var(--c-mag-500);
  font-weight: 700;
}

/* ─── Terms checkbox ─────────────────────────── */

.ck-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg);
}
.ck-terms input { display: none; }
.ck-terms__check {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ck-terms input:checked + .ck-terms__check {
  background: var(--c-cyan-400);
  border-color: var(--accent-text);
}
.ck-terms input:checked + .ck-terms__check::after {
  content: '✓';
  color: var(--c-blue-900);
  font-size: 13px;
  font-weight: 700;
}
.ck-terms a { color: var(--accent-text); text-decoration: underline; }

/* ─── Actions (botones final de cada step) ───── */

.ck-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.btn--confirm {
  background: var(--c-mag-500);
  color: var(--c-white);
  padding: 14px 24px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  border: 0;
  font-family: inherit;
}
.btn--confirm:hover:not(:disabled) { background: var(--c-mag-600); }
.btn--confirm:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Summary sidebar ────────────────────────── */

.ck-summary {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 22px;
  position: sticky;
  top: 90px;
}
@media (max-width: 1024px) {
  .ck-summary { position: static; }
}
.ck-summary__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 14px;
}
.ck-summary__items {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
}
.ck-summary__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}
.ck-summary__thumb {
  width: 44px;
  height: 44px;
  background: var(--c-white);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ck-summary__thumb svg,
.ck-summary__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ck-summary__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ck-summary__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ck-summary__meta {
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}
.ck-summary__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-mag-500);
}
.ck-summary__nudge {
  background: rgba(62, 230, 230, 0.1);
  border: 1px solid var(--c-cyan-400);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fg);
  margin: 0 0 12px;
}
.ck-summary__nudge b { color: var(--accent-text); }
.ck-summary__totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.ck-summary__totals > div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--fg);
}
.ck-summary__totals > div > span:last-child {
  font-weight: 600;
}
.ck-summary__totals-mute { color: var(--fg-dim) !important; font-size: 11px !important; }
.ck-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}
.ck-summary__total-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-mag-500);
}
.ck-summary__trust {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--fg-dim);
  text-align: center;
}

/* ─── Empty checkout (carrito vacío) ─────────── */

.checkout-empty {
  text-align: center;
  padding: 80px 24px;
  background: var(--bg-elevated);
  border-radius: 8px;
}
.checkout-empty__icon {
  display: block;
  font-size: 96px;
  color: var(--fg-dim);
  opacity: 0.4;
  margin-bottom: 14px;
}
.checkout-empty h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
  margin: 0 0 8px;
}
.checkout-empty p {
  color: var(--fg-mute);
  margin: 0 0 20px;
}

/* ─── Confirmación (orden.html) ──────────────── */

.orden-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px;
}
.orden-hero {
  text-align: center;
  padding: 40px 20px;
  background: var(--bg-elevated);
  border-radius: 8px;
  margin-bottom: 24px;
}
.orden-hero__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--c-cyan-400);
  color: var(--c-blue-900);
  border-radius: 50%;
  font-size: 44px;
  font-weight: 900;
  margin-bottom: 14px;
}
.orden-hero h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--fg);
  margin: 0 0 8px;
}
.orden-hero__id {
  display: inline-block;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 14px;
  color: var(--accent-text);
  margin: 6px 0 12px;
}
.orden-hero p {
  color: var(--fg-mute);
  margin: 4px 0;
  font-size: 14px;
}
.orden-hero p b { color: var(--fg); }

/* ─── Mandar el pedido por WhatsApp ───────────────────────
   Es LA acción de la página: hasta que el cliente no aprieta esto, del otro
   lado nadie se enteró de que compró. Por eso pesa más que cualquier otra cosa
   de la pantalla. Verde de WhatsApp porque es el botón de WhatsApp, no un CTA
   de la tienda — el cliente tiene que reconocer a dónde va. */
.orden-hero__aviso {
  max-width: 46ch;
  margin: 10px auto 16px;
  font-size: 15px;
  line-height: 1.55;
}
.orden-hero__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--wa-green);
  color: #0B2E13;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.28);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.orden-hero__wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.38);
}
.orden-hero__wa:focus-visible { outline: 3px solid var(--c-blue-600); outline-offset: 3px; }
.orden-hero__wa svg { width: 20px; height: 20px; flex-shrink: 0; }
.orden-hero__sub {
  max-width: 44ch;
  margin: 16px auto 0 !important;
  font-size: 13px !important;
}
@media (max-width: 520px) {
  .orden-hero__wa { width: 100%; justify-content: center; padding: 15px 18px; }
}

.orden-section {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
.orden-section__title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 12px;
  font-weight: 700;
}

.orden-tracking {
  display: flex;
  align-items: stretch;
  margin-bottom: 8px;
}
.orden-tracking__step {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0 10px;
}
.orden-tracking__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 60%;
  right: -40%;
  height: 2px;
  background: var(--line);
}
.orden-tracking__step.is-done:not(:last-child)::after {
  background: var(--c-cyan-400);
}
.orden-tracking__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 50%;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--fg-mute);
  position: relative;
  z-index: 2;
}
.orden-tracking__step.is-active .orden-tracking__dot {
  border-color: var(--accent-text);
  color: var(--accent-text);
  box-shadow: 0 0 0 4px rgba(62, 230, 230, 0.2);
}
.orden-tracking__step.is-done .orden-tracking__dot {
  background: var(--c-cyan-400);
  border-color: var(--accent-text);
  color: var(--c-blue-900);
}
.orden-tracking__label {
  font-size: 11px;
  color: var(--fg-mute);
  font-weight: 600;
  display: block;
}
.orden-tracking__step.is-active .orden-tracking__label,
.orden-tracking__step.is-done .orden-tracking__label {
  color: var(--fg);
}

.orden-items { list-style: none; padding: 0; margin: 0; }
.orden-items li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--fg);
}
.orden-items li:last-child { border-bottom: 0; }
.orden-items__qty { color: var(--fg-mute); }
.orden-items__price {
  color: var(--c-mag-500);
  font-weight: 700;
}

.orden-totals {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.orden-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 14px;
  color: var(--fg);
}
.orden-totals__total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-weight: 700;
  font-size: 16px;
}
.orden-totals__total span:last-child {
  font-size: 22px;
  color: var(--c-mag-500);
}

.orden-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Ayuda debajo de un campo. Existía `.ck-field__error` (el rojo cuando
   algo está mal) pero no la nota tranquila que explica QUÉ escribir —
   y esa es la que evita el error antes de que pase. */
.ck-field__hint {
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-dim);
}
.ck-field__label i { font-style: normal; font-weight: 400; color: var(--fg-dim); }