/* Mertherapy Checkout Perú v1.0.1
   Complemento del CSS WooCommerce de Mertherapy (no sustituir su CSS original).
   Aplicable SÓLO al carrito y checkout hechos con bloques. */

/* 1. +1.5 px a los textos pequeños, sin agrandar los encabezados de diseño. */
body.woocommerce-cart .wc-block-cart :is(
  .wc-block-components-product-name,
  .wc-block-components-product-price,
  .wc-block-components-product-metadata,
  .wc-block-components-product-details,
  .wc-block-components-product-badge,
  .wc-block-components-totals-item,
  .wc-block-components-totals-coupon,
  .wc-block-components-order-summary-item__description
),
body.woocommerce-checkout .wc-block-checkout :is(
  .wc-block-components-order-summary-item__description,
  .wc-block-components-product-name,
  .wc-block-components-product-metadata,
  .wc-block-components-totals-item,
  .wc-block-components-totals-coupon,
  .wc-block-components-payment-method-label
) {
  font-size: 14.5px !important; /* 13px + 1.5px */
  line-height: 1.65 !important;
}

body.woocommerce-cart .wc-block-cart :is(
  .wc-block-cart-items__header,
  .wc-block-components-product-details__name,
  .wc-block-components-product-details__value,
  .wc-block-components-totals-wrapper small
),
body.woocommerce-checkout .wc-block-checkout :is(
  .wc-block-components-checkbox__label,
  .wc-block-components-validation-error,
  .wc-block-components-address-form__address_2-toggle
) {
  font-size: 13.5px !important; /* 12px + 1.5px */
  line-height: 1.6 !important;
}

/* Campos del checkout: de 14px a 15.5px, y etiquetas pequeñas a 13.5px. */
body.woocommerce-checkout .wc-block-checkout :is(
  .wc-block-components-text-input input,
  .wc-block-components-combobox-control input,
  .wc-block-components-combobox-control select,
  .wc-block-components-select select
) {
  font-family: 'Manrope', Arial, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.4 !important;
  box-sizing: border-box;
  min-height: 62px !important;
}

/* 2. Restaurar espacio vertical para labels flotantes: evita superposición. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-select {
  min-width: 0;
  margin-bottom: 17px !important;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input.is-active input,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox-control input,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-select select {
  padding-top: 27px !important;
  padding-bottom: 9px !important;
}

/* Etiquetas que flotan encima de un valor, como País/Perú y Provincia/Lima. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input.is-active > label,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox-control.is-active > label,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox-control.has-value > label,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-select > label {
  top: 7px !important;
  left: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  transform: none !important;
  opacity: 1;
}

/* Etiquetas sin valor: conservar el centrado vertical de los placeholders. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input:not(.is-active) > label,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox-control:not(.is-active):not(.has-value) > label {
  font-size: 15.5px !important;
  line-height: 1.35 !important;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input:not(.is-active) input {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Mejor separación de filas y espacio entre documentos de pedido. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-address-form__first_name,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-address-form__last_name,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-address-form__address_1,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-address-form__city,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-address-form__state,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-address-form__phone {
  min-width: 0;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step {
  overflow: visible;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__container {
  padding-top: 9px;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__heading {
  margin-bottom: 17px;
}

/* 3. Responsive y accesibilidad: espacios seguros también en móvil. */
@media (max-width: 767px) {
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__container {
    padding-top: 6px;
  }
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input,
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox {
    margin-bottom: 15px !important;
  }
}


/* ==============================================================
   v1.0.1: CAMPOS CON DOS LINEAS REALES Y SIN TEXTO SUPERPUESTO
   WooCommerce usa DOS familias de selectores:
   wc-blocks-components-select (plural, selects nativos)
   wc-block-components-combobox (pais y provincia).
   No altera valores, validaciones, ni eventos de los controles.
   ============================================================== */

/* Separacion entre filas; evita campos apretados en escritorio y móvil. */
body.woocommerce-checkout .wc-block-checkout :is(
  .wc-blocks-components-select,
  .wc-block-components-select,
  .wc-block-components-combobox,
  .wc-block-components-text-input
) {
  box-sizing: border-box;
  margin-bottom: 18px !important;
}

/* Recuadro de los selectores nativos de boleta/factura/documento. */
body.woocommerce-checkout .wc-block-checkout :is(
  .wc-blocks-components-select__container,
  .wc-block-components-select__container
) {
  position: relative;
  min-height: 72px !important;
}

/* Dos lineas dentro del mismo control, con aire entre etiqueta y valor. */
body.woocommerce-checkout .wc-block-checkout :is(
  .wc-blocks-components-select__label,
  .wc-block-components-select__label
) {
  position: absolute !important;
  top: 9px !important;
  left: 15px !important;
  right: 44px !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Manrope', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  pointer-events: none;
  z-index: 2;
}

body.woocommerce-checkout .wc-block-checkout :is(
  .wc-blocks-components-select__select,
  .wc-block-components-select__select
) {
  display: block;
  box-sizing: border-box;
  height: 72px !important;
  min-height: 72px !important;
  width: 100%;
  padding: 33px 46px 9px 15px !important;
  font-family: 'Manrope', Arial, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  line-height: 23px !important;
  text-overflow: ellipsis;
}

/* País / Región y Provincia / Condado: campos de búsqueda autocompletada. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox-control {
  position: relative;
  min-height: 72px !important;
}
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox-control input {
  display: block;
  box-sizing: border-box;
  height: 72px !important;
  min-height: 72px !important;
  padding: 33px 46px 9px 15px !important;
  font-size: 15.5px !important;
  line-height: 23px !important;
}
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox-control:is(.is-active,.has-value,.has-focus) > label {
  position: absolute !important;
  top: 9px !important;
  left: 15px !important;
  right: 45px !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  white-space: normal !important;
  z-index: 2;
}
/* WooCommerce a veces marca el estado en el padre en vez del control. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox:is(.is-active,.has-value) .wc-block-components-combobox-control > label {
  top: 9px !important;
  font-size: 12px !important;
  line-height: 16px !important;
  transform: none !important;
}
/* Las etiquetas de entradas vacías siguen centradas como placeholders. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox-control:not(.is-active):not(.has-value) > label {
  font-size: 15.5px !important;
}

@media (max-width: 600px) {
  body.woocommerce-checkout .wc-block-checkout :is(
    .wc-blocks-components-select__select,
    .wc-block-components-select__select,
    .wc-block-components-combobox-control input
  ) {
    font-size: 15px !important;
    padding-right: 40px !important;
  }
  body.woocommerce-checkout .wc-block-checkout :is(
    .wc-blocks-components-select__label,
    .wc-block-components-select__label
  ) {
    left: 13px !important;
  }
}


/* ====================================================================
   CHECKOUT CLÁSICO / IZIPAY — MERTHERAPY v1.1.0
   Complementa el CSS premium existente, sin tocar Izipay ni el carrito.
   ==================================================================== */
body.woocommerce-checkout:not(.woocommerce-order-received) #page .site-content form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.07fr) minmax(330px, .93fr);
    gap: 0 28px;
    align-items: start;
    overflow: visible;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout > .col2-set {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: clamp(21px, 2.2vw, 32px);
    border: 1px solid #e9e2da;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(32,41,54,.045);
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout > #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    z-index: 2;
    align-self: start;
    margin: 0;
    padding: 28px 27px 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout > #order_review {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 0;
    padding: 88px 27px 27px;
    border: 1px solid #e9e2da;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(32,41,54,.045);
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout .woocommerce-additional-fields {
    margin-top: 24px;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout .woocommerce-additional-fields > h3 {
    margin-bottom: 14px;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout .mertherapy-document-heading {
    margin: 0 0 7px;
    color: #202936;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(26px, 2.5vw, 32px);
    font-weight: 500;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout .mertherapy-document-help {
    margin: 0 0 17px;
    color: #64717b;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.65;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout .mertherapy-checkout-field {
    clear: both;
    width: 100%;
    margin-bottom: 17px;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout :is(.mertherapy-checkout-field input.input-text, .mertherapy-checkout-field select) {
    width: 100%;
    min-height: 54px;
    padding: 12px 14px;
    border: 1px solid #dcd5ce;
    border-radius: 6px;
    background: #fff;
    color: #202936;
    font: 400 15px/1.5 'Manrope', Arial, sans-serif;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout .mertherapy-checkout-field label {
    display: block;
    margin-bottom: 8px;
    color: #202936;
    font-size: 13px;
    font-weight: 700;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout .mertherapy-razon-social[hidden] { display: none !important; }
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    display: block;
    min-width: 0;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout #payment {
    border-radius: 8px;
    overflow: hidden;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout #payment .payment_box {
    margin: 10px 0 3px;
    padding: 15px;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout #payment button#place_order {
    min-height: 55px;
    background: #087e8a !important;
    border-color: #087e8a !important;
    color: #fff !important;
}
body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout #payment button#place_order:hover {
    background: #066770 !important;
    border-color: #066770 !important;
}
@media (max-width: 900px) {
    body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout {
        grid-template-columns: minmax(0, 1fr) minmax(295px, .88fr);
        gap: 0 18px;
    }
    body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout > #order_review_heading { padding: 24px 20px 10px; }
    body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout > #order_review { padding: 80px 20px 20px; }
}
@media (max-width: 767px) {
    body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout { display: block; }
    body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout > .col2-set { margin-bottom: 20px; padding: 20px; }
    body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout > #order_review_heading {
        padding: 23px 21px 8px;
        border: 1px solid #e9e2da;
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
        background: #fff;
    }
    body.woocommerce-checkout #page .site-content form.checkout.woocommerce-checkout > #order_review {
        padding: 10px 21px 22px;
        border-top: 0;
        border-radius: 0 0 12px 12px;
        margin-bottom: 30px;
    }
}
