/* ============================================================
   JH Checkout Page - Rediseno completo
   Paleta: negro #111, dorado #f6c34f, grises #f4f4f4 / #666
   ============================================================ */

/* Reset body / hide header del theme normal (lo reemplazamos por minimal).
   body#checkout es el id que PrestaShop pone en el body en pagina /pedido. */
body#checkout #header,
body#checkout .header-nav,
body#checkout .header-top,
body#checkout #stsb-header,
body#checkout [data-jh-header],
body.page-order #header,
body.page-order #stsb-header,
body.page-order [data-jh-header] {
  display: none !important;
}
/* Wrapper sin padding, fondo gris full-width */
body#checkout,
body.page-order {
  background: #fafafa !important;
  margin: 0 !important;
  padding: 0 !important;
}
body#checkout #wrapper,
body.page-order #wrapper,
body#checkout #content-wrapper,
body.page-order #content-wrapper,
body#checkout #content,
body.page-order #content,
body#checkout #main,
body.page-order #main {
  padding: 0 !important;
  margin: 0 !important;
  background: #fafafa !important;
  max-width: none !important;
  width: 100% !important;
}
body#checkout .container,
body.page-order .container {
  max-width: none !important;
  padding: 0 !important;
}
/* Asegurar que header del checkout queda pegado arriba */
.jh-checkout-header {
  margin: 0;
  width: 100%;
}

/* ============================================================
   Header minimal del checkout (full viewport width)
   ============================================================ */
.jh-checkout-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  position: relative;
  z-index: 100;
  /* Salir del wrapper limitado por max-width y ocupar todo el viewport */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  max-width: 100vw;
  margin-bottom: 24px;
}
.jh-checkout-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
}
.jh-checkout-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.jh-checkout-header__logo img,
.jh-checkout-header__logo .logo,
.jh-checkout-header img,
body#checkout .jh-checkout-header img,
body.page-order .jh-checkout-header img {
  max-height: 60px !important;
  height: 60px !important;
  width: auto !important;
  max-width: 400px !important;
  display: block !important;
  object-fit: contain !important;
}
/* Pago seguro indicator (ahora en stepper-row, no en header) */
.jh-checkout-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #16a34a;
  font-weight: 600;
  white-space: nowrap;
}
/* Wrapper de stepper + pago seguro */
.jh-checkout-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-right: 22px;
  flex-wrap: wrap;
}
.jh-checkout-stepper-row .jh-checkout-stepper {
  margin-bottom: 0;
}

/* ============================================================
   Page layout
   ============================================================ */
.jh-checkout-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 120px;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Stepper visual (dorado, paleta de marca) */
.jh-checkout-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  /* Alinear con el padding interno de .jh-ck-section__head (que es 22px) */
  padding-left: 22px;
}
.jh-checkout-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #999;
  font-weight: 500;
  text-decoration: none;
}
.jh-checkout-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #f4f4f4;
  color: #999;
  font-size: 12px;
  font-weight: 700;
}
/* Estado activo: dorado de marca */
.jh-checkout-step--active { color: #111; font-weight: 700; }
.jh-checkout-step--active .jh-checkout-step__num {
  background: #f6c34f;
  color: #111;
}
/* Estado completado: dorado oscuro con check */
.jh-checkout-step--done { color: #d4a040; }
.jh-checkout-step--done .jh-checkout-step__num {
  background: #d4a040;
  color: #fff;
}
.jh-checkout-step__sep {
  flex: 0 0 24px;
  height: 1px;
  background: #ddd;
}

.jh-checkout-page__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}
.jh-checkout-page__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.jh-checkout-page__summary {
  position: sticky;
  top: 90px;
}

/* ============================================================
   Sections (1. Contacto, 2. Direccion, 3. Envio, 4. Pago)
   ============================================================ */
.jh-ck-section {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.jh-ck-section--active {
  border-color: #e8e8e8;
  box-shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.03);
}
.jh-ck-section--locked { opacity: .5; }
.jh-ck-section--locked .jh-ck-section__num {
  background: #ddd;
  color: #999;
}
.jh-ck-section--done .jh-ck-section__num {
  background: #16a34a;
  color: #fff;
}

.jh-ck-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}
.jh-ck-section--active .jh-ck-section__head {
  border-bottom: 1px solid #eee;
}
.jh-ck-section--done .jh-ck-section__head {
  border-bottom: 1px solid #eee;
  background: #f9f9f9;
}
.jh-ck-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.jh-ck-section__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  flex: 1;
}
.jh-ck-section__edit {
  background: transparent;
  border: 0;
  color: #666;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  font-family: inherit;
}
.jh-ck-section__edit:hover { background: #f4f4f4; color: #111; }
.jh-ck-section__lock { color: #999; flex-shrink: 0; }

.jh-ck-section__body {
  padding: 20px 22px;
}
.jh-ck-section--locked .jh-ck-section__body { display: none; }
/* Cuando ya esta completo y no activo, el body queda oculto y se muestra el summary edit */
.jh-ck-section--done:not(.jh-ck-section--active) .jh-ck-section__body { display: none; }
/* EXCEPCION: si el body contiene un form de edicion de direccion (#delivery-address o
   #invoice-address con un form dentro), mostrar siempre. PS al editar direccion no
   siempre marca el step como current y sin esto el form queda oculto. */
.jh-ck-section:has(#delivery-address form, #invoice-address form) .jh-ck-section__body {
  display: block !important;
}

/* Sobreescribir clases nativas de PrestaShop dentro del body */
.jh-ck-section__body .step-title { display: none; }
.jh-ck-section__body .content { padding: 0; }

/* ============================================================
   Form fields (sobre los de PrestaShop)
   ============================================================ */
/* Centrar el contenido del form y darle ancho máximo para que respire */
.jh-ck-section__body form {
  max-width: 600px;
  margin: 0 auto;
}
.jh-ck-section__body .form-group {
  margin-bottom: 14px;
}
.jh-ck-section__body .forgotten-password,
.jh-ck-section__body .text-muted,
.jh-ck-section__body .form-text {
  max-width: 600px;
  margin: 8px auto 16px;
  text-align: left;
}
/* Mas espacio antes del boton submit */
.jh-ck-section__body button[type="submit"],
.jh-ck-section__body button.continue,
.jh-ck-section__body .continue.btn,
.jh-ck-section__body .form-footer {
  margin-top: 28px !important;
}
/* Aire entre secciones del form (ej. "Crea tu cuenta (opcional)") */
.jh-ck-section__body form h1,
.jh-ck-section__body form h2,
.jh-ck-section__body form h3,
.jh-ck-section__body form h4,
.jh-ck-section__body form legend,
.jh-ck-section__body .create-account-title,
.jh-ck-section__body .optional-account-content {
  margin-top: 28px !important;
  margin-bottom: 4px !important;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}
.jh-ck-section__body form h1:first-child,
.jh-ck-section__body form h2:first-child,
.jh-ck-section__body form h3:first-child,
.jh-ck-section__body form h4:first-child,
.jh-ck-section__body form legend:first-child {
  margin-top: 0 !important;
  padding-top: 0;
  border-top: 0;
}
.jh-ck-section__body .form-control-label {
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
}
.jh-ck-section__body input[type="text"],
.jh-ck-section__body input[type="email"],
.jh-ck-section__body input[type="password"],
.jh-ck-section__body input[type="tel"],
.jh-ck-section__body input[type="number"],
.jh-ck-section__body select,
.jh-ck-section__body textarea {
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.jh-ck-section__body input:focus,
.jh-ck-section__body select:focus,
.jh-ck-section__body textarea:focus {
  outline: none;
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17,17,17,.06);
}

/* Buttons "continuar" del checkout — solo los grandes de avanzar paso, no
   cualquier .btn-primary (que puede ser de un módulo de pago, etc.) */
.jh-ck-section__body button.continue,
.jh-ck-section__body .continue.btn,
.jh-ck-section__body button[name="confirm-addresses"],
.jh-ck-section__body button[type="submit"][name="continue"],
.jh-ck-section__body #payment-confirmation button {
  background: #111 !important;
  color: #fff !important;
  border: 0 !important;
  padding: 14px 22px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: inherit !important;
  text-transform: none !important;
  min-width: 180px;
  justify-content: center;
}
.jh-ck-section__body button.continue:hover,
.jh-ck-section__body .continue.btn:hover,
.jh-ck-section__body button[name="confirm-addresses"]:hover,
.jh-ck-section__body #payment-confirmation button:hover {
  background: #000 !important;
  transform: translateY(-1px);
}

/* Address selection cards */
.jh-ck-section__body .address-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .15s ease;
}
.jh-ck-section__body .address-item:hover { border-color: #999; }
.jh-ck-section__body .address-item.selected,
.jh-ck-section__body .address-selected {
  border-color: #111;
  background: #fafafa;
}

/* Radio cards de envío y pago */
.jh-ck-section__body .delivery-option,
.jh-ck-section__body .payment-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s ease;
}
.jh-ck-section__body .delivery-option:hover,
.jh-ck-section__body .payment-option:hover { border-color: #999; }
.jh-ck-section__body .delivery-option label,
.jh-ck-section__body .payment-option label {
  cursor: pointer;
  margin: 0;
}

/* Logo del carrier: acotarlo, no que ocupe media pantalla */
.jh-ck-section__body .delivery-option img,
.jh-ck-section__body .carrier-logo,
.jh-ck-section__body .delivery-option .carrier-extra-content img {
  max-width: 60px !important;
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}
/* Layout interno: logo izquierda chico, nombre+delay en el medio, precio derecha */
.jh-ck-section__body .delivery-option .row,
.jh-ck-section__body .delivery-option .carrier-name-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.jh-ck-section__body .delivery-option .carrier-name {
  font-weight: 600;
  font-size: 14px;
}
.jh-ck-section__body .delivery-option .carrier-delay {
  font-size: 12px;
  color: #888;
}
.jh-ck-section__body .delivery-option .carrier-price,
.jh-ck-section__body .delivery-option strong:has(+ small) {
  font-weight: 700;
  font-size: 14px;
  margin-left: auto;
  white-space: nowrap;
}

/* ============================================================
   Right sidebar — summary
   ============================================================ */
.jh-ck-summary { position: relative; }
.jh-ck-summary__inner {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eee;
  padding: 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
}
.jh-ck-summary__details { margin-bottom: 16px; }
.jh-ck-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  list-style: none;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}
.jh-ck-summary__head::-webkit-details-marker { display: none; }
.jh-ck-summary__head::after {
  content: '▼';
  font-size: 10px;
  color: #999;
  transition: transform .2s ease;
  margin-left: 8px;
}
.jh-ck-summary__details:not([open]) .jh-ck-summary__head::after {
  transform: rotate(-90deg);
}
.jh-ck-summary__count {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}
.jh-ck-summary__list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.jh-ck-summary__list-item { display: block; }

.jh-ck-summary-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
}
.jh-ck-summary-item__img {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f4f4;
}
.jh-ck-summary-item__img img { width: 100%; height: 100%; object-fit: cover; }
.jh-ck-summary-item__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.jh-ck-summary-item__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jh-ck-summary-item__name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #111;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jh-ck-summary-item__name:hover { color: #d4a040; }
.jh-ck-summary-item__attr {
  font-size: 11px;
  color: #999;
}
.jh-ck-summary-item__price {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.jh-ck-summary__voucher {
  margin: 16px 0;
  padding: 16px 0 0;
  border-top: 1px solid #eee;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .jh-checkout-page { padding: 16px 16px 120px; }
  .jh-checkout-page__layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .jh-checkout-page__summary {
    position: static;
    order: -1;
  }
  .jh-checkout-stepper { font-size: 11px; }
  .jh-checkout-step__label { display: none; }
  .jh-checkout-step__sep { flex-basis: 16px; }
  .jh-ck-section__head { padding: 14px 16px; }
  .jh-ck-section__body { padding: 16px; }
}

/* ============================================================
   Legal disclaimer en el checkout
   ============================================================ */
.jh-checkout-legal {
  margin-top: 4px;
  padding: 18px 22px;
  background: #f9f9f9;
  border-radius: 12px;
  border: 1px solid #eee;
}
.jh-checkout-legal h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.jh-checkout-legal p {
  margin: 0;
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}
.jh-checkout-legal a { color: #111; text-decoration: underline; }
.jh-checkout-legal a:hover { color: #d4a040; }
.jh-checkout-legal strong { font-weight: 700; color: #111; }
.jh-checkout-legal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jh-checkout-legal__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #555;
}
.jh-checkout-legal__list svg { color: #16a34a; flex-shrink: 0; }
.jh-checkout-legal__links {
  margin-top: 10px !important;
  font-size: 12px;
  color: #888;
  display: flex;
  gap: 6px;
  align-items: center;
}