/* =========================================
   VARIABLES
========================================= */
:root {
  --pi-bg: #f4fbf6;
  --pi-card-bg: #fff;
  --pi-accent: #3f923d;
  --pi-accent-600: #15803d;
  --pi-text: #05222a;
  --pi-muted: #05222a;
  --pi-border: #f8f8f8;
  --pi-soft: #f8f8f8;
  --pi-radius: 12px;
  --pi-ring: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* =========================================
   LAYOUT / HEADER
========================================= */
#checkout,
.checkout {
  background: var(--pi-bg);
}


.pi-card {
  margin: 16px auto;
  overflow: hidden;
}

.pi-card__header {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
}
.pi-step-index {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--pi-accent);
  color: var(--pi-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.pi-title {
  margin: 0;
  font-size: 24px;
  color: var(--pi-text);
  font-weight: 700;
}

.pi-login-inline {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 16px;
  color: var(--pi-muted);
  padding: 2px 16px 10px;
  margin: 32px auto 0;
  font-weight: 400;
}
.pi-login-inline .pi-login-link {
  color: #3f923d;
  text-decoration: none;
}
.pi-login-inline .pi-login-link:hover {
  text-decoration: underline !important;
  color: #3f923d !important;
}
body#checkout section.checkout-step.-current + .checkout-step .step-title {
  border-top: none;
  padding-bottom: 2rem !important;
}
body#checkout section.checkout-step.-unreachable .step-title {
  padding-bottom: 2rem !important;
}
h1.step-title.js-step-title.h3 {
  padding-bottom: 2rem !important;
}

body#checkout article.js-alert-payment-conditions a{
  color: #a94442;
  text-decoration: underline;
}

.pi-login-inline {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 16px;
  color: var(--pi-muted);
  padding: 2px 16px 10px;
  margin: 32px auto 0;
  font-weight: 400;
}
.pi-login-inline .pi-login-link {
  color: #3f923d;
  text-decoration: none;
}
.pi-login-inline .pi-login-link:hover {
  text-decoration: underline !important;
  color: #3f923d !important;
}
body#checkout section.checkout-step.-current + .checkout-step .step-title {
  border-top: none;
  padding-bottom: 2rem !important;
}
body#checkout section.checkout-step.-unreachable .step-title {
  padding-bottom: 2rem !important;
      text-transform: math-auto !important;
}
h1.step-title.js-step-title.h3 {
  padding-bottom: 2rem !important;
}

/* =========================================
   FORM / INPUTS
========================================= */
.pi-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pi-label {
  display: block;
  font-size: 14px;
  color: var(--pi-muted);
  margin: 2px 0 6px;
  text-align: left;
  font-weight: 400;
}

.pi-input {
  width: 100%;
  appearance: none;
  border: 1px solid var(--pi-border);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--pi-text);
  background: var(--pi-soft);
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
  border:none;
}
.pi-input::placeholder {
  color: #9aa3af;
}
.pi-input:focus {
  border-color: #cdd5df;
  box-shadow: var(--pi-ring);
  background: #fff;
}

/* Wrapper + ojo contraseña */
.pi-inputwrap {
  position: relative;
}
.pi-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none !important;
}
.pi-eye svg {
  width: 18px;
  height: 18px;
}
.pi-eye:hover {
  background: #f8fafc;
}

/* Mostrar/ocultar bloques de password */
.pi-password {
  display: none;
}
.pi-password.is-visible {
  display: block;
}
body#authentication p.password-requirements-length{
  display:none;
}
/* =========================================
   CHECKBOXES (dos variantes)
========================================= */
/* A) Variante .pi-check (estructura: .pi-check > input.pi-check__input + label.pi-check__label) */
.pi-check {
  position: relative;
  display: block;
  margin: 0.6rem 0;
  line-height: 1.4;
  user-select: none;
  cursor: pointer;
  padding-left:0.75rem;
}
.pi-check__input {
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  pointer-events: auto; /* clicable en su caja */
  flex: 0 0 auto;
  accent-color: var(--pi-accent);   /* ✔️ Chrome/Edge/Firefox modernos */
  border-radius: 6px;  
}
.pi-check__input__factur {
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 1;
  pointer-events: auto;
  margin-top: 5%;
}
.pi-check__label {
  display: block;
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
  font-weight: 400;
  color: #05222A;
  line-height: 1.5rem;
  text-align: left !important;
}
.pi-check__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.pi-check__label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: 2px solid transparent;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
  opacity: 0;
}
.pi-check:hover .pi-check__label::before {
  border-color: #94a3b8;
}
.pi-check__input:focus + .pi-check__label::before {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  border-color: #60a5fa;
}
.pi-check__input:checked + .pi-check__label::before {
  background: #3f923d;
  border-color: #3f923d;
}
.pi-check__input:checked + .pi-check__label::after {
  border-color: #fff;
  opacity: 1;
  padding-left: 5px;
}
.pi-check + .pi-check {
  margin-top: 0.35rem;
}

.form-control-comment {
  display: none;
}

/* B) Variante label.custom-checkbox (estructura: label.custom-checkbox > input + span(caja) + span.texto) */
.custom-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
.custom-checkbox > input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  z-index: 1;
}
.custom-checkbox > span:first-of-type {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.custom-checkbox:hover > span:first-of-type {
  border-color: #94a3b8;
}
.custom-checkbox > input[type="checkbox"]:focus + span:first-of-type {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  border-color: #60a5fa;
}
.custom-checkbox > input[type="checkbox"]:checked + span:first-of-type {
  background: #3f923d;
  border-color: #3f923d;
}
.custom-checkbox > input[type="checkbox"]:checked + span:first-of-type::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}
.custom-checkbox .form-control-comment {
  display: inline-block;
  margin: 0;
  color: #111827;
  font-size: 14px;
  line-height: 1.45;
}
.pi-field .custom-checkbox + .custom-checkbox {
  margin-top: 0.35rem;
}

/* =========================================
   CTA
========================================= */
.pi-actions {
  margin-top: 6px;
}
.pi-btn {
  width: 100%;
  height: 48px;
  padding: 16px 24px;
  border-radius: 12px;
  border: none !important;
  background: #98f060;
  color: #05222a;
  font-weight: 500;
  font-size: 18px;
  cursor: pointer;
  margin-top:1rem;
  line-height: 0;
}
.pi-btn:focus,
.pi-btn:active,
.pi-btn:focus:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}


/* =========================================
   AUTOFILL (Chrome)
========================================= */
input.pi-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--pi-text);
}

/* =========================================
   STEP HEADER (PS)
========================================= */
.step-number {
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  font-size: 1rem;
  color: #3f923d !important;
  background-color: transparent !important;
  border: 2px solid #3f923d !important;
  border-radius: 50%;
  vertical-align: middle;
}
.step-title {
  grid-column: 1 / -1 !important;
  display: flex;
  gap: 6px !important;
  align-items: center !important;
  font-size: 24px !important;
  color: var(--pi-muted) !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
}
form .form-control-label {
  display: block;
  font-size: 14px;
  color: var(--pi-muted);
  margin: 2px 0 6px;
  text-align: left;
  font-weight: 400;
}

/* =========================================
   STEP 2 — DIRECCIONES
========================================= */

body#checkout section.checkout-step .address-item {
  border: none;
  border-radius: 12px !important;
}
body#checkout section.checkout-step .address-item.selected {
  border: none;
  background: #e0fbcc;
  border-radius: 12px;
}
body#checkout section.checkout-step .address {
  font-weight: 400 !important;
  line-height: 24px;
  margin-left: auto;
}
body#checkout .custom-radio{
  margin-top:5px;
}
body#checkout .custom-radio input[type="radio"]:checked + span {
  background-color: #3f923d;
}
body#checkout section.checkout-step hr {
  margin: 0 10%;
}
body#checkout section.checkout-step .radio-block {
  margin-left: 5%;
}
body#checkout section.checkout-step .edit-address {
  margin: 0 1rem;
}
.btn-direcciones {
  vertical-align: super !important;
}
span.address-alias.h4 {
  font-size: 16px;
  color: #000;
  line-height: 24px;
}
a.edit-address.text-muted,
a.delete-address.text-muted {
  font-size: 16px;
  font-weight: 400;
  color: #05222a !important;
}
i.material-icons.edit,
i.material-icons.delete {
  font-size: 24px;
}
p.add-address {
  font-size: 16px;
  font-weight: 400;
  color: #05222a;
}
body#checkout section.checkout-step .add-address a i {
  font-size: 24px;
}


.js-address-form p > a {
  color: #05222a !important;
}

/* =========================================
   STEP 3 — ENVÍO
========================================= */
body#checkout section.checkout-step .delivery-options .delivery-option {
  background: #f8f8f8 !important;
  border-radius: 12px;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}

body#checkout section.checkout-step .delivery-options .delivery-option:has(input[type="radio"]:checked),
body#checkout section.checkout-step .delivery-options .delivery-option.selected {
  background: #e0fbcc !important;
  border-color: #cfefb1;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.1);
}
body#checkout section.checkout-step .delivery-options .delivery-option img {
  display: none;
}
body#checkout section.checkout-step .carrier-delay {
  display: none;
}
span.h6.carrier-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
body#checkout #delivery textarea {
  max-width: 100%;
  margin-bottom: 10px;
  padding: 8px 12px;
  opacity: 1;
  border-radius: 12px;
  border: 1px solid #f8f8f8;
  background-color: #f8f8f8;
}

body#checkout section.checkout-step .delivery-options > .row {
  border-right: none !important;
  background: transparent;
}
body#checkout section.checkout-step .delivery-options .delivery-option img {
  display: none;
}
body#checkout section.checkout-step .carrier-delay {
  display: none;
}
span.h6.carrier-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
body#checkout #delivery textarea {
  max-width: 100%;
  margin-bottom: 10px;
  padding: 8px 12px;
  opacity: 1;
  border-radius: 12px;
  border: 1px solid #f8f8f8;
  background-color: #f8f8f8;
}
body#checkout section.checkout-step .carrier-name{
  padding-bottom:0.5rem;
}

/* =========================================
   RESUMEN DEL CHECKOUT — productos visibles
   (versión final: bloque simple + .iagt-line)
========================================= */
#js-checkout-summary #cart-summary-product-list.collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  overflow: visible !important;
  margin-bottom: -7%;
}
#js-checkout-summary .cart-summary-products a[data-toggle="collapse"],
#js-checkout-summary .cart-summary-products .btn-link {
  display: none !important;
}
#js-checkout-summary #cart-summary-product-list .media-left,
#js-checkout-summary #cart-summary-product-list img,
#js-checkout-summary #cart-summary-product-list .product-image {
  display: none !important;
}

#js-checkout-summary #cart-summary-product-list .media {
  display: block !important;
  border: 0;
}
#js-checkout-summary #cart-summary-product-list .product-name,
#js-checkout-summary #cart-summary-product-list .product-line-name,
#js-checkout-summary #cart-summary-product-list a.product-name {
  color: var(--pi-text);
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
}
#js-checkout-summary #cart-summary-product-list .product-quantity,
#js-checkout-summary #cart-summary-product-list .qty {
  font-size: 16px;
  color: #05222a;
  margin-top: 2px;
  display: none;
}
#js-checkout-summary #cart-summary-product-list .media-right,
#js-checkout-summary #cart-summary-product-list .product-price,
#js-checkout-summary #cart-summary-product-list .price {
  justify-self: end;
  white-space: nowrap;
  color: var(--pi-text);
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 5%;
}
.cart-summary-products.js-cart-summary-products > p {
  display: none;
}
.product-name {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
}
.product-name a {
  color: #05222a !important;
}
div#order-items {
  display: none;
}

.iagt-footer-image {
  margin: 0 !important;
  padding: 0 !important;
}
.iagt-footer-image img {
  display: block;
  width: 110%;
  height: auto;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent;
  margin-left: -5%;
  margin-bottom: -10%;
}

/* Flush móvil dentro de cards */
@media (max-width: 575.98px) {
  #js-checkout-summary .card-block .iagt-footer-image.iagt-flush,
  #js-checkout-summary .card-body .iagt-footer-image.iagt-flush {
    margin-left: -1.25rem !important;
    margin-right: -1.25rem !important;
    margin-bottom: -1.25rem !important;
    width: calc(100% + 2.5rem) !important;
    max-width: calc(100% + 2.5rem) !important;
  }
  #js-checkout-summary .card-block .iagt-footer-image.iagt-flush img,
  #js-checkout-summary .card-body .iagt-footer-image.iagt-flush img {
    width: 100%;
  }
  #content-wrapper
    .container
    .row
    > [class*="col-"]
    .iagt-footer-image.iagt-flush {
    margin-left: calc(-1 * (1.25rem + 15px)) !important;
    margin-right: calc(-1 * (1.25rem + 15px)) !important;
    width: calc(100% + 2 * (1.25rem + 15px)) !important;
    max-width: calc(100% + 2 * (1.25rem + 15px)) !important;
  }
}
#content-wrapper .iagt-footer-image.iagt-flush:last-child {
  margin-bottom: 0 !important;
}

/* Línea nombre/precio */
#js-checkout-summary #cart-summary-product-list .product-name.iagt-line {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
#js-checkout-summary
  #cart-summary-product-list
  .product-name.iagt-line
  .iagt-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--pi-text);
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}
#js-checkout-summary
  #cart-summary-product-list
  .product-name.iagt-line
  .iagt-price {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--pi-text);
  font-weight: 400;
  font-size: 16px;
  margin-left: 12px;
}
body#checkout
  .cart-grid-right
  .card
  .cart-summary-subtotals-container
  .cart-summary-line
  .value {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--pi-text);
  font-weight: 400;
  font-size: 16px;
  margin-left: 12px;
}
.card-block.cart-summary-totals .cart-summary-line.cart-total .label {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--pi-text);
  font-weight: 600;
  font-size: 16px;
}
.card-block.cart-summary-totals .cart-summary-line.cart-total .value {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--pi-text);
  font-weight: 600;
  font-size: 16px;
  margin-left: 12px;
}
#js-checkout-summary #cart-summary-product-list .float-xs-right {
  float: none !important;
}
#js-checkout-summary {
  background-color: #f8f8f8;
  width: 360;
  height: 214;
  gap: 10px;
  opacity: 1;
  border-radius: 4px;
  padding: 16px;
}
body#checkout section.checkout-step .address-item
/* =========================================
   PAGO – tarjetas método de pago (solo CSS)
   Radio nativo + fix “aro” fantasma
========================================= */

/* Grid contenedor de métodos */
.payment-options {
  display: grid;
  gap: 12px;
}


/* Tarjeta base */
#checkout-payment-step .payment-option {
  position: relative;
  display: grid !important;
  grid-template-columns: 24px 1fr auto; /* radio | texto | logo */
  align-items: center;
  gap: 12px;
  padding: 16px 24px 16px 24px;
  background: #f8f8f8 !important;
  /*border:1px solid var(--pi-border, #e5e7eb);*/
  border-radius: 12px;
  /*transition:background .15s, border-color .15s, box-shadow .15s;*/
  overflow: hidden;
}

/* Hover */
#checkout-payment-step .payment-option:hover {
  background: #f3f4f6 !important;
}

/* Estado seleccionado (soporte :has) + fallback por clase .selected */
#checkout-payment-step .payment-option:has(input[type="radio"]:checked),
#checkout-payment-step .payment-option.selected {
  background: #e0fbcc !important;
  border-color: #cfefb1 !important;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.1);
}

/* ===== Radios nativos (sin duplicado) ===== */
#checkout-payment-step .payment-option .custom-radio {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  float: none !important;
}

/* Mantener input nativo visible y funcional */
#checkout-payment-step .payment-option .custom-radio input[type="radio"] {
  position: static !important;
  opacity: 1 !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  pointer-events: auto;
  box-shadow: none !important;
  background: transparent !important;
  accent-color: var(--pi-accent, #16a34a); /* color nativo compatible */
}

/* Oculta el círculo “fake” que añade el core */
#checkout-payment-step .payment-option .custom-radio > span {
  display: none !important;
}

/* Neutraliza cualquier regla hacia el span decorativo del core */
#checkout-payment-step .payment-option .custom-radio input[type="radio"] + span,
#checkout-payment-step
  .payment-option
  .custom-radio
  input[type="radio"]
  + span::before,
#checkout-payment-step
  .payment-option
  .custom-radio
  input[type="radio"]
  + span::after {
  all: unset !important;
  display: none !important;
}

/* ===== FIX: eliminar “aro”/pseudo-elementos del tema ===== */
#checkout-payment-step .payment-option .custom-radio::before,
#checkout-payment-step .payment-option .custom-radio::after,
#checkout-payment-step .payment-option label::before,
#checkout-payment-step .payment-option label::after,
#checkout-payment-step .payment-option::before,
#checkout-payment-step .payment-option::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

/* ===== Label / texto ===== */
#checkout-payment-step .payment-option label {
  font-size: 16px;
  font-weight: 600;
  grid-column: 2;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
  line-height: 24px;
}

/* Evita marcas del core en el label */
#checkout-payment-step .payment-option label::before,
#checkout-payment-step .payment-option label::after {
  content: none !important;
  display: none !important;
}

/* Texto largo en una línea legible */
#checkout-payment-step .payment-option label > span {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Logos ===== */
/* Logo embebido en el label */
#checkout-payment-step .payment-option label img,
#checkout-payment-step .payment-option label .payment-option-logo {
  max-height: 22px;
  width: auto;
  display: inline-block;
  margin: 0;
}

/* Logo fuera del label (algunos módulos) a la derecha */
#checkout-payment-step .payment-option > img,
#checkout-payment-step .payment-option > .payment-option-logo {
  grid-column: 3;
  justify-self: end;
  max-height: 22px;
  width: auto;
}

/* ===== Bloques auxiliares ===== */
/* Oculta el fallback sin JS dentro de la tarjeta */
#checkout-payment-step .payment-option .ps-hidden-by-js {
  display: none !important;
}

/* Información adicional del método (bajo la tarjeta activa) */
#checkout-payment-step .additional-information {
  margin: 8px 0 0 36px; /* alineado tras el radio */
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
}

/* ===== Accesibilidad ===== */
#checkout-payment-step .payment-option input[type="radio"]:focus-visible {
  outline: auto; /* respeta foco nativo */
  outline-offset: 2px;
}

/* ===== Responsive ===== */
@media (max-width: 420px) {
  #checkout-payment-step .payment-option {
    grid-template-columns: 22px 1fr auto;
    padding: 14px 14px;
  }
}
/* ========= KILL RING FANTASMA (tema/override) ========= */

/* 0) columna del radio */
#checkout-payment-step .payment-option {
  grid-template-columns: 24px 1fr auto;
}

/* 1) limpia contenedor del radio */
#checkout-payment-step .payment-option .custom-radio {
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

/* 2) muestra SOLO el radio nativo */
#checkout-payment-step .payment-option .custom-radio input[type="radio"] {
  position: static !important;
  opacity: 1 !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important; /* si el tema forzó un borde */
  box-shadow: none !important; /* fuera halo extra */
  outline: none !important; /* quitamos outline no deseado */
  accent-color: var(--pi-accent, #16a34a);
}

/* 3) elimina cualquier “fake radio” y pseudoelementos */
#checkout-payment-step .payment-option .custom-radio > span,
#checkout-payment-step .payment-option .custom-radio > span::before,
#checkout-payment-step .payment-option .custom-radio > span::after,
#checkout-payment-step .payment-option .custom-radio::before,
#checkout-payment-step .payment-option .custom-radio::after,
#checkout-payment-step .payment-option label::before,
#checkout-payment-step .payment-option label::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* 4) por si el tema aplica estilos a *dentro* del custom-radio */
#checkout-payment-step .payment-option .custom-radio *,
#checkout-payment-step .payment-option .custom-radio *::before,
#checkout-payment-step .payment-option .custom-radio *::after {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 5) foco accesible (solo cuando realmente hay foco) */
#checkout-payment-step
  .payment-option
  .custom-radio
  input[type="radio"]:focus-visible {
  outline: 2px solid rgba(22, 163, 74, 0.35) !important;
  outline-offset: 2px !important;
}

/* 6) por si algún módulo pinta el aro en el contenedor */
#checkout-payment-step .payment-option::before,
#checkout-payment-step .payment-option::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
}
/* ===== Radios de MÉTODOS DE PAGO — igual que ENVÍO ===== */

/* Usa el radio nativo, sin “fake” ni halos */
#checkout-payment-step .payment-option .custom-radio {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#checkout-payment-step .payment-option .custom-radio > span {
  display: none !important;
} /* quita el fake */
#checkout-payment-step .payment-option .custom-radio::before,
#checkout-payment-step .payment-option .custom-radio::after {
  content: none !important;
  display: none !important;
}

/* Radio nativo: tamaño, color y sin sombras raras */
#checkout-payment-step .payment-option .custom-radio input[type="radio"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  accent-color: var(--pi-accent, #3f923d); /* punto verde como Envío */
}

/* Foco accesible discreto */
#checkout-payment-step
  .payment-option
  .custom-radio
  input[type="radio"]:focus-visible {
  outline: 2px solid rgba(22, 163, 74, 0.35) !important;
  outline-offset: 2px !important;
}

/* Si algún módulo mete el aro en el label/contenedor, lo anulamos */
#checkout-payment-step .payment-option label::before,
#checkout-payment-step .payment-option label::after,
#checkout-payment-step .payment-option::before,
#checkout-payment-step .payment-option::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: none !important;
}
.custom-checkbox input[type="checkbox"] + span .checkbox-checked {
  color: #ffffff;
}

/* =========================================
   VARIOS
========================================= */
section#order-summary-content {
  display: none;
}
body#checkout .cart-grid-right .card .cart-summary-subtotals-container {
  padding: 0;
  border-top: unset;
  border-bottom: unset;
}
body#checkout .condition-label {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  text-decoration: underline;
  color: #05222a;
}
a#cta-terms-and-conditions-0 {
  color: #05222a;
}

/* Utilidades / ajustes responsivos */
@media (min-width: 576px) {
  .pi-card {
    margin: 0;
  }
  .pi-title {
    font-size: 19px;
  }

  .pi-input {
    height: 48px;
  }
  .pi-btn {
    height: 48px;
  }
  #checkout #wrapper .container{
    width: 100%;
  }

  #checkout #wrapper .cart-grid-body, #checkout #wrapper .cart-grid-right{
    padding-left: 10%;
    padding-right: 10%;
    float: left;
    display: block;
  }

  #checkout #wrapper #checkout-payment-step .cart-grid-right{
    display: none;
  }

  #checkout #wrapper #checkout-addresses-step .address-selector{
    flex-direction: row;
    align-items:flex-start;
    gap: 0.5em;
  }

}

@media (max-width: 576px) {

  .payment-option > label {
    text-align: left !important;
  }

  #checkout #wrapper #checkout-addresses-step .address-selector{
    flex-direction: column;
    align-items: stretch;
  }

  #checkout #wrapper .cart-grid-body, #checkout #wrapper .cart-grid-right{
    padding-left: 0;
    padding-right: 0;

  }

  #checkout #wrapper .cart-grid-right{
    padding-left: 0;
    padding-right: 0;
    display:none
  }

  #checkout #wrapper #checkout-payment-step .cart-grid-right{
    display: block;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  #summary-mobile-target #js-checkout-summary .card-block{
    padding: 0;
  }

}



/* Core helpers integrados a tu estilo */
#customer-form .pi-field:has([name="id_gender"]) {
  display: none !important;
}
#customer-form .pi-field.is-visible {
  display: block;
}
#customer-form .pi-field__error {
  color: #e03131;
  font-size: 12px;
  margin-top: 6px;
}
#customer-form .is-invalid.pi-input {
  border-color: #e03131;
  background: #fff;
}
body#checkout section.checkout-step #conditions-to-approve {
  margin-left: 4%;
}
/* =========================================
   CÓDIGO PROMOCIONAL – acordeón + form inline
========================================= */

/* Contenedor (cart-voucher en PS 1.7/8) */
#checkout .cart-voucher,
.cart-voucher {
  background: #fff;
  border: 1px solid var(--pi-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
}

/* Cabecera clickable */
.cart-voucher .cart-voucher-heading {
  margin: 0;
}
.cart-voucher .cart-voucher-heading a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 16px;
  color: var(--pi-text, #05222a);
  text-decoration: none;
}

/* Chevron (pseudo) */
.cart-voucher .cart-voucher-heading a::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--pi-accent, #3f923d);
  border-bottom: 2px solid var(--pi-accent, #3f923d);
  transform: rotate(-45deg); /* chevron ↓ */
  transition: transform 0.15s ease, opacity 0.15s ease;
  opacity: 0.85;
}
.cart-voucher .cart-voucher-heading a[aria-expanded="true"]::after {
  transform: rotate(135deg); /* chevron ↑ */
}

/* Panel expandido */
.cart-voucher #promo-code {
  padding: 12px 14px 14px;
  border-top: 1px dashed #e5e7eb;
  background: #f8f8f8 !important;
}

/* Layout del formulario (input + botón en una línea) */
.cart-voucher #promo-code form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

/* Input */
.cart-voucher #promo-code input[name="discount_name"],
.cart-voucher #promo-code .promo-input {
  width: 100%;
  border: 1px solid var(--pi-border, #d6d6d6);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--pi-text, #05222a);
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
.cart-voucher #promo-code input[name="discount_name"],
.cart-voucher #promo-code .promo-input {
  background: #fff !important;
}
.cart-voucher #promo-code input[name="discount_name"]:focus {
  border-color: #cdd5df;
  box-shadow: var(--pi-ring, 0 0 0 3px rgba(22, 163, 74, 0.15));
  background: #fff;
}

/* Botón aplicar (coherente con tu CTA) */
.cart-voucher #promo-code button[type="submit"],
.cart-voucher #promo-code .btn-primary {
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--pi-accent, #3f923d);
  background: #98f060;
  color: #05222a;
  font-weight: 600;
  line-height: 40px;
}

/* Enlace cancelar / cerrar */
.cart-voucher #promo-code .btn-link,
.cart-voucher #promo-code .btn-secondary {
  order: 2;
  justify-self: start;
  padding: 0;
  margin-left: 2px;
  border: 0;
  background: none;
  color: #6b7280;
  text-decoration: underline;
}

/* Mensajes (éxito/error) dentro del panel */
.cart-voucher #promo-code .alert {
  margin: 8px 0 0;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}
.block-promo .promo-code-button {
  text-align: left;
}
#checkout .cart-voucher,
.cart-voucher {
  background: #f8f8f8 !important;
  border: none;
  border-radius: 0px;
}
#checkout a.collapse-button {
  color: #05222a;
  margin-left: 5%;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
}
#checkout a.collapse-button:hover {
  color: #3f923d;
}
/* Responsive */
@media (max-width: 420px) {
  .cart-voucher .cart-voucher-heading a {
    padding: 12px;
  }
  .cart-voucher #promo-code {
    padding: 12px;
  }
  .cart-voucher #promo-code form {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
}
/* ===== Promo code — botón como enlace centrado ===== */
.cart-voucher #promo-code {
  background: #f8f8f8 !important;
}

/* 1) Formato del formulario: input arriba, botón debajo centrado */
.cart-voucher #promo-code form {
  display: grid;
  grid-template-columns: 1fr; /* una sola columna */
  row-gap: 10px;
  align-items: center;
}

/* 2) Botón con apariencia de enlace */
.cart-voucher #promo-code button[type="submit"],
.cart-voucher #promo-code .btn-primary {
  grid-column: 1 / -1;
  justify-self: center;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  height: auto;
  padding: 0 !important;
  line-height: 1.4;
  color: var(--pi-accent-600, #15803d) !important;
  font-weight: 600;
  text-decoration: underline;

  /* quita transformaciones que ponga el tema */
  text-transform: none !important;
  border-radius: 0 !important;
}

/* Hover/focus del “enlace” */
.cart-voucher #promo-code button[type="submit"]:hover {
  color: var(--pi-accent, #3f923d) !important;
  text-decoration: underline;
}
.cart-voucher #promo-code button[type="submit"]:focus-visible {
  outline: 2px solid rgba(22, 163, 74, 0.35);
  outline-offset: 2px;
}

/* 3) Input */
.cart-voucher #promo-code .promo-input,
.cart-voucher #promo-code input[name="discount_name"] {
  border: 1px solid var(--pi-border, #d6d6d6);
  border-radius: 12px;
  background: #fff !important;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--pi-text, #05222a);
}
.cart-voucher #promo-code .promo-input:focus {
  border-color: #cdd5df;
  box-shadow: var(--pi-ring, 0 0 0 3px rgba(22, 163, 74, 0.15));
}

/* (Opcional) Ocultar el enlace “Close” si no lo quieres */
.cart-voucher .cancel-promo {
  display: none !important;
}

@media (max-width: 420px) {
  .cart-voucher #promo-code form {
    row-gap: 8px;
  }
}
.iagt-applicate-coupon {
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  letter-spacing: 0px;
  text-align: center;
}
/* =========================================
   PASSWORD UI — como Figma (sin barra)
========================================= */

/* 1) Oculta barras nativas de “fuerza” (PS/WC) */
#password-strength,
#password-strength-meter,
.woocommerce-password-strength,
.strength-indicator,
.password-strength,
.ps-password-strength {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 2) PRESTASHOP — muestra el hint con check verde */
#customer-form input[type="password"][name*="password"] ~ .form-control-comment,
#customer-form input[type="password"][id*="password"] ~ .form-control-comment {
  display: block !important; /* sobrescribe tu regla global de ocultar */
  position: relative;
  margin-top: 10px;
  padding-left: 28px; /* espacio para el icono */
  color: var(--pi-accent-600, #15803d);
  font-size: 16px;
  line-height: 1.35;
  text-decoration: none; /* por si el tema subraya */
}

/* Icono check (círculo + tick) */
#customer-form
  input[type="password"][name*="password"]
  ~ .form-control-comment::before,
#customer-form
  input[type="password"][id*="password"]
  ~ .form-control-comment::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--pi-accent, #3f923d);
}
#customer-form
  input[type="password"][name*="password"]
  ~ .form-control-comment::after,
#customer-form
  input[type="password"][id*="password"]
  ~ .form-control-comment::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 6px;
  height: 10px;
  border: 2px solid var(--pi-accent, #3f923d);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

/* 3) WOOCOMMERCE — mismo look para el hint */
.woocommerce-password-hint,
.woocommerce form .woocommerce-password-hint,
.woocommerce-account .woocommerce-password-hint {
  display: block !important;
  position: relative;
  margin-top: 10px;
  padding-left: 28px;
  color: var(--pi-accent-600, #15803d);
  font-size: 16px;
  line-height: 1.35;
}
.woocommerce-password-hint::before,
.woocommerce-password-hint::after {
  content: "";
  position: absolute;
}
.woocommerce-password-hint::before {
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--pi-accent, #3f923d);
}
.woocommerce-password-hint::after {
  left: 5px;
  top: 6px;
  width: 6px;
  height: 10px;
  border: 2px solid var(--pi-accent, #3f923d);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

/* 4) Ajuste del input/eye para coherencia visual (opcional) */
.pi-input:focus {
  border-color: #cdd5df;
  box-shadow: var(--pi-ring, 0 0 0 3px rgba(22, 163, 74, 0.15));
  background: #fff;
  outline: none;
}
.pi-eye svg {
  stroke: var(--pi-accent, #3f923d);
}


p.password-requirements-score {
  display: none;
}
.page-content.page-cms ul,
p {
  font-weight: 400;
  color: #3f923d;
  font-size: 16px;
  line-height: 24px;
}
/* 5) Responsive fino */
@media (max-width: 420px) {
  #customer-form
    input[type="password"][name*="password"]
    ~ .form-control-comment,
  .woocommerce-password-hint {
    font-size: 15px;
  }
}
/* ===== CÓDIGO PROMOCIONAL: icono izquierda + chevrón derecha ===== */
/* Target real del TPL: <p class="promo-code-button"><a class="collapse-button">… */

.cart-voucher .promo-code-button {
  margin: 0;
}
.cart-voucher .promo-code-button .collapse-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 5px;
  font-weight: 600;
  font-size: 20px; /* ajusta si tu Figma pide 20px/16px */
  color: var(--pi-text, #05222a);
  text-decoration: none;
  line-height: 1.25;
}

/* Chevrón a la derecha (verde), rota al abrir */
.cart-voucher .promo-code-button .collapse-button::after {
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--pi-accent, #3f923d);
  border-bottom: 2px solid var(--pi-accent, #3f923d);
  transform: rotate(45deg);
  transition: transform 0.15s ease, opacity 0.15s ease;
  opacity: 0.9;
}
.cart-voucher .promo-code-button .collapse-button[aria-expanded="true"]::after {
  transform: rotate(223deg);
}
.block-promo {
  margin-bottom: 0px;
}
/* Caja del bloque (bordes/redondeado como el resto del checkout, por si no lo tienes) */
.block-promo .cart-voucher {
  background: #fff;
  border: 1px solid var(--pi-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
}

/* Panel expandido coherente */
#promo-code {
  padding: 12px 14px 14px;
  border-top: 1px dashed #e5e7eb;
  background: #fff;
}
#promo-code form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
/* ===== Cupón — chevrón pegado a la derecha ===== */
.block-promo .promo-code-button {
  padding: 0;
} /* el padding va en el <a> */

.block-promo .promo-code-button .collapse-button {
  position: relative;
  display: flex; /* chevrón participa como flex-item */
  align-items: center;
  width: 100%; /* ocupa todo el ancho del bloque */
  padding: 12px 14px; /* r = 14px: separación al borde */ /* hueco para el icono izquierdo */
  gap: 12px;
  text-decoration: none;
  color: #05222a;
  font-weight: 600;
  font-size: 18px;
}

/* Chevrón: va como último flex-item y se “pega” al borde derecho */
.block-promo .promo-code-button .collapse-button::after {
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2px solid #3f923d;
  border-bottom: 2px solid #3f923d;
  transform: rotate(45deg); /* estado cerrado */
  margin-left: auto; /* empuja hasta la derecha */
  /* queda a 14px del borde por el padding del <a> */
  transition: transform 0.15s ease;
}

/* Rota al abrir (si usas aria-expanded) */
.block-promo .promo-code-button .collapse-button[aria-expanded="true"]::after {
  transform: rotate(223deg);
}
/* Fallback si el panel usa .in/.show */
.block-promo:has(#promo-code.in) .promo-code-button .collapse-button::after,
.block-promo:has(#promo-code.show) .promo-code-button .collapse-button::after {
  transform: rotate(223deg);
}

/*====================================
        CHECKOUT HEADER
=====================================*/

#checkout section#content {
  max-width: 1280px;
  margin: 0 auto;
}

.checkout-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 16px 20px;
  box-shadow: 0px -2px 8px 0px #0000001A;

}
/* ===== Layout columna del título ===== */
.pi-step--col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0.25rem;
  width: 100%;
}
.pi-step__head {
  width: 100%;
  pointer-events: none;
}

/* Título del step */
.pi-step__title {
  display:inline-block; 
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  vertical-align: bottom;
  text-transform: lowercase;
}
.pi-step__title::first-letter {
  text-transform: uppercase;
}

/* Check del step */
.iagt-icon-check {
  margin-right: 12px;
  margin-top: 5px;
}

/* Meta (línea gris de resumen: usuario, dirección, envío, pago) */
.pi-step__meta {
  width: 100%;
  font-size: 16px;
  color: #05222a;
  line-height: 24px;
  margin-top: 0.125rem;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-weight: 400;
  text-transform: initial;
}
.pi-step__meta strong {
  color: #05222a; /* tu color de texto principal */
  font-weight: 600;
}

/* Botón “Modificar” con aspecto de enlace, alineado a la izquierda */
.pi-step__edit {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 16px;
  color: #05222a;
  cursor: pointer;
  margin-top: 0.25rem;
  text-decoration: none;
  width: 100%;
  font-weight: 400;
  line-height: 24px;
}
.pi-step__edit:hover {
  text-decoration: underline;
}
.pi-step__edit svg {
  flex: 0 0 auto;
}

/* Oculta solo el número del paso en Datos personales */
#personal-information .step-number {
  display: none !important;
}

/* Acordeón visible cuando está “current” (por si el tema lo colapsa) */
.checkout-step.-current .content {
  display: block;
}

/* Accesibilidad: foco visible */
.pi-step__edit:focus {
  outline: 2px solid rgba(22, 163, 74, 0.35);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Responsive */
@media (max-width: 480px) {
  .pi-step--col {
    max-width: 100%;
  }
  .pi-step__title {
    font-size: 1.5rem;
  }
  .pi-step__meta,
  .pi-step__edit {
    font-size: 0.8125rem;
  }
}

/*=================================
   STICKY SUMMARY (sin #checkout)
=================================*/
:root {
  --checkout-sticky-top: 100px;
} /* cambia si tu header mide otro valor */

.cart-grid,
.cart-grid .row,
.cart-grid-right {
  overflow: visible !important; /* requerido para sticky */
}

@media (min-width: 992px) {
  .cart-grid-right {
    position: relative; /* límite inferior del sticky */
    align-self: flex-start;
  }
  #sticky-checkout-summary {
    position: sticky;
    top: var(--checkout-sticky-top);
    z-index: 3;
    max-height: calc(100vh - var(--checkout-sticky-top) - 16px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 8px;
    box-shadow: none !important;
  }
  #checkout #wrapper .cart-grid-right{
    padding-left: 0;
    padding-right: 0;
  }
  body#checkout section.checkout-step .step-title{
    padding-bottom: 1rem;
  }
  body#checkout #wrapper section.checkout-step {
  padding: 0;
  }
  .iagt-icon-check {
    margin-top: 5px;
  }
}

@media (max-width: 992px) {
  #sticky-checkout-summary {
    position: static;
    max-height: none;
    overflow: visible;
  }
}


/* fixes containers */
.row .cart-grid-body .checkout-step .pi-card{
  max-width: 100%;
}

body#checkout section.checkout-step .content{
  padding: 0;
  padding-top: 1rem;
}

#checkout .container .row{
  margin: 0;
  padding: 0;
  max-width: 100%;
}

#checkout #wrapper .container{
  padding: 0;
}

#checkout #wrapper .delivery-option .delivery-option-2 .row{
  flex-direction: column;
  align-items: flex-start;
}

#checkout #wrapper .delivery-option .delivery-option-2 .row .col-xs-12 {
  width: 100%;
}
body#checkout #wrapper section.checkout-step {
  padding: 0.8rem;
  width: 100%;
  max-width: 520px;
  height: auto;
}

#checkout #wrapper .delivery-option .carriere-name-container{
  padding: 0;
}

#checkout #wrapper section.-current button.pi-step__edit{
  display:none;
}

/*==================================
              MOVIL
===================================*/
@media (max-width: 576px) {
  #checkout #wrapper {
    padding: 0px;
  }

  section#checkout-payment-step {
    width: unset;
  }
  #checkout-payment-step .payment-option {
    width: 100%;
  }
  .iagt-icon-check {
    vertical-align: sub;
  }
  .pi-card {
    width: unset;
  }
  .js-address-form{
    width: unset;
  }
  body#checkout .delivery-options-list{
    width: unset;
  }
  body#checkout section.checkout-step .delivery-options .delivery-option{
    width: unset;
  }
  body#checkout .order-options{
    width: unset;
  }
  body#checkout section.checkout-step .step-title{
    padding-bottom:1rem;
  }
}

.pi-step--col {
  cursor: default;
}

.pi-step__edit {
  cursor: pointer;
}
.pi-step__meta.is-hidden{ display:none !important; }


/* elena fixes 2 */
#checkout-login-form #login-form .form-footer{
  margin-top: 1rem;
}

body#checkout section.checkout-step #login-form .login-checkout-button{
  line-height: 0;
}

body#checkout section.checkout-step #login-form .forgot-password{
  margin-left: 0.2rem;
  margin-top: 0.2rem;

}

body#checkout section.checkout-step #login-form .forgot-password a{
  color: #3F923D;
  font-size: 12px;
  text-decoration: underline;
}

body#checkout section.checkout-step .password-requirements-length{
  color:#575757;
  font-size: 14px;
  margin-bottom: 0;
  line-height: 21px;
}

body#checkout section.checkout-step .password-requirements{
  display:flex;
  align-items: center;
  gap:8px;
  background-color: #F8F8F8;
  border-radius: 12px;
  padding: 0.5rem;
}

body#checkout section.checkout-step .password-requirements svg{
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
}

body#checkout section.checkout-step .iagt-identity-container  .pi-check__label{
  margin-top: 1rem;
}

body#checkout section.checkout-step .iagt-identity-container .progress-container .progress{
  border-radius: 40px;
  height: 0.5rem;
  overflow: hidden;
}

body#checkout section.checkout-step .iagt-identity-container .progress-container .progress-bar{
  border-radius: 40px 0 0 40px;
}

body#checkout #checkout-personal-information-step .identity, body#checkout #checkout-personal-information-step .identity + p {
  color: #05222A;
}

body#checkout #checkout-personal-information-step .identity + p {
  color: #05222A;
  margin-bottom: 0;
}

body#checkout #checkout-personal-information-step .identity a, body#checkout #checkout-personal-information-step .identity + p a{
  color: #3F923D;
}

body#checkout .pi-step__head{
  display: flex;
  align-items: center;
}

body#checkout section.checkout-step .step-number {
  margin-right: 0.5rem;
  margin-left: 0;
}

body#checkout #checkout-personal-information-step .nav-inline{
  display: flex;
  justify-content: center;
}
body#checkout #checkout-personal-information-step .nav-inline .nav-item{
  width: 100%;
  text-align: center;
}

body#checkout #checkout-personal-information-step .nav-inline .nav-item a{
  width: 100%;
  font-weight: 400;
  padding: 0.5rem;
  border-radius: 4px;
  color: #3F923D;
}

body#checkout #checkout-personal-information-step .nav-inline .nav-item a.active{
  background-color: #3F923D;
  color: #FFFFFF;
}

body#checkout #checkout-personal-information-step .nav-inline .nav-item + .nav-item{
  margin-left: 0;
}

body#checkout #content{
  min-height: 70.5vh;
}

body#checkout #content .form-control-label{
  padding-left: 12px;
}

body#checkout #content-wrapper section.checkout-step #customer-form{
  margin-left:0;
}

body#checkout section.checkout-step.-reachable.-current .step-number{
  margin-right: 12px;
}


/* Ojo ABIERTO */

form .pi-eye[data-action="hide-password"]{
  /* tamaño del contenedor si lo necesitas */
  width:24px;
  height:24px;

  background-repeat:no-repeat;
  background-position:center;
  background-size:24px auto; /* respeta la relación 23×15 */
  background-image:url('data:image/svg+xml;utf8,<svg width="23" height="15" viewBox="0 0 23 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.4353 7.19625C22.4025 7.12219 21.6084 5.36062 19.8431 3.59531C17.4909 1.24312 14.52 0 11.25 0C7.97999 0 5.00905 1.24312 2.65687 3.59531C0.891554 5.36062 0.093741 7.125 0.0646785 7.19625C0.0220346 7.29217 0 7.39597 0 7.50094C0 7.60591 0.0220346 7.70971 0.0646785 7.80562C0.097491 7.87969 0.891554 9.64031 2.65687 11.4056C5.00905 13.7569 7.97999 15 11.25 15C14.52 15 17.4909 13.7569 19.8431 11.4056C21.6084 9.64031 22.4025 7.87969 22.4353 7.80562C22.4779 7.70971 22.5 7.60591 22.5 7.50094C22.5 7.39597 22.4779 7.29217 22.4353 7.19625ZM11.25 13.5C8.36437 13.5 5.84343 12.4509 3.75655 10.3828C2.90028 9.53128 2.17179 8.56027 1.59374 7.5C2.17164 6.43963 2.90014 5.4686 3.75655 4.61719C5.84343 2.54906 8.36437 1.5 11.25 1.5C14.1356 1.5 16.6566 2.54906 18.7434 4.61719C19.6014 5.4684 20.3315 6.43942 20.9109 7.5C20.235 8.76188 17.2903 13.5 11.25 13.5ZM11.25 3C10.36 3 9.48995 3.26392 8.74993 3.75839C8.0099 4.25285 7.43313 4.95566 7.09253 5.77792C6.75194 6.60019 6.66282 7.50499 6.83646 8.37791C7.01009 9.25082 7.43867 10.0526 8.06801 10.682C8.69735 11.3113 9.49917 11.7399 10.3721 11.9135C11.245 12.0872 12.1498 11.9981 12.9721 11.6575C13.7943 11.3169 14.4971 10.7401 14.9916 10.0001C15.4861 9.26005 15.75 8.39002 15.75 7.5C15.7488 6.30691 15.2742 5.16303 14.4306 4.31939C13.587 3.47575 12.4431 3.00124 11.25 3ZM11.25 10.5C10.6566 10.5 10.0766 10.3241 9.58328 9.99441C9.08993 9.66476 8.70542 9.19623 8.47835 8.64805C8.25129 8.09987 8.19188 7.49667 8.30764 6.91473C8.42339 6.33279 8.70911 5.79824 9.12867 5.37868C9.54823 4.95912 10.0828 4.6734 10.6647 4.55764C11.2467 4.44189 11.8499 4.5013 12.398 4.72836C12.9462 4.95542 13.4148 5.33994 13.7444 5.83329C14.074 6.32664 14.25 6.90666 14.25 7.5C14.25 8.29565 13.9339 9.05871 13.3713 9.62132C12.8087 10.1839 12.0456 10.5 11.25 10.5Z" fill="%2341A10F"/></svg>');
}

/* Ojo CERRADO */

form .pi-eye[data-action="show-password"]{
  width:24px;
  height:24px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;

  /* Inside auto layout (según Figma) */
  flex:none;
  order:1;
  flex-grow:0;

  background-image:url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 3L21 21" stroke="%2341A10F" stroke-width="2" stroke-linecap="round"/><path d="M21 12S17.5 6 12 6 3 12 3 12s3.5 6 9 6c2.08 0 3.88-.62 5.36-1.63" stroke="%2341A10F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" stroke="%2341A10F" stroke-width="2"/></svg>');
}