/*************************************************
 * Exámenes Genéticos — FINALIZAR COMPRA (Checkout)
 * Archivo: assets/css/cart-pay.css
 *************************************************/

/* ======= Layout: 2 columnas (datos izq / resumen der) ======= */
body.woocommerce-checkout form.checkout{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(320px,35vw);
  grid-template-rows: 4rem;     /* F1: título  |  F2: resumen */
  gap: 28px;
  align-items: start;
}

/* Izquierda: datos del cliente ocupa ambas filas */
body.woocommerce-checkout #customer_details{
  grid-column: 1 !important;
  grid-row: 1 / span 2;
  margin: 0;
}
body.woocommerce-checkout #customer_details.col2-set{
  width: 80% !important;      /* si quieres, cámbialo por 60%, 62%, etc. */
}
/* Derecha: título y bloque de pedido */
body.woocommerce-checkout #order_review_heading{
  grid-column: 2 !important;
  grid-row: 1;
  margin: 0 0 .5rem 0;
  font-size: 1.25rem;
  color: #033840;
  font-weight: 700;
  border: 0;
}
body.woocommerce-checkout #order_review{
  grid-column: 2 !important;
  grid-row: 2;
  background: var(--eg-card-bg,#fff);
  border: 1px solid rgba(3,56,64,.08);
  border-radius: var(--eg-radius,16px);
  box-shadow: 0 6px 20px var(--eg-soft,rgba(3,56,64,.08));
  padding: 18px;
  position: sticky; top: 96px;       /* fija el resumen en scroll */
}
body.woocommerce-checkout form.checkout #order_review_heading,
  body.woocommerce-checkout form.checkout #order_review{
    width: 90%!important;
  }

body.woocommerce-checkout form.checkout
#order_review:not(.elementor-widget-woocommerce-checkout-page #order_review){
  border-width: 2px; /* cambia a 1px, 2px, etc. o usa "1px 0" para top/bottom */
}
/* ======= Titulares de secciones ======= */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3{
  font-size: 1.15rem;
  margin-bottom: .6rem;
  color: #033840;
  font-weight: 700;
}

/* ======= Campos de formulario ======= */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row{
  margin-bottom: .9rem;
}
body.woocommerce-checkout .input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea{
  border-radius: 10px !important;
  background: #fff;
}

/* ======= Tabla “Tu pedido” ======= */
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table{
  width: 100%;
  border: 0;
  background: transparent;
}
body.woocommerce-checkout .shop_table thead th{
  border: 0;
  padding: 10px 0;
  color: #033840;
}
body.woocommerce-checkout .shop_table tbody td,
body.woocommerce-checkout .shop_table tfoot th,
body.woocommerce-checkout .shop_table tfoot td{
  border: 0;
  padding: 10px 0;
}
body.woocommerce-checkout .shop_table tbody tr+tr td,
body.woocommerce-checkout .shop_table tfoot tr+tr td,
body.woocommerce-checkout .shop_table tfoot tr+tr th{
  border-top: 1px solid rgba(3,56,64,.08);
}
body.woocommerce-checkout form.checkout #order_review_heading {
  border: 0 !important;
  background-color: #033840;
  color: white;
  border-radius: 12px;
}

/* ======= Métodos de pago ======= */
body.woocommerce-checkout #payment{
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 12px;
}
body.woocommerce-checkout #payment .payment_methods > .wc_payment_method{
  background: var(--eg-card-bg,#fff);
  border: 1px solid rgba(3,56,64,.08);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
body.woocommerce-checkout #payment .payment_methods label{
  font-weight: 600;
}
body.woocommerce-checkout #payment .payment_box{
  background: transparent;
  margin: 8px 0 0 28px;
  padding: 0;
}

/* ======= Botón “Realizar el pedido” ======= */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .woocommerce-checkout .button.alt{
  border-radius: 10px;
  padding: .9rem 1.25rem;
  font-weight: 700;
  background: #033840;
  color: #fff;
  width: 100%;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout .woocommerce-checkout .button.alt:hover{
  filter: brightness(1.08);
}

/* ======= Aviso/Toggle de cupón ======= */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  background: var(--eg-card-bg,#fff);
  border-radius: 10px;
  border: 1px solid rgba(3,56,64,.08);
}
body.woocommerce-checkout .showcoupon{
  font-weight: 600;
  text-decoration: underline;
}

/* ======= Textos legales ======= */
body.woocommerce-checkout .woocommerce-privacy-policy-text{
  font-size: .92rem;
  color: #334155;
}
body.woocommerce-checkout .woocommerce .woocommerce-notices-wrapper:not(:empty),
body.woocommerce-checkout .woocommerce .woocommerce-error,
body.woocommerce-checkout .woocommerce .woocommerce-info,
body.woocommerce-checkout .woocommerce .woocommerce-message,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  margin-top: 5rem !important;
}
/* ======= Responsive ======= */
/* ---------- ≤ 1280px: respiración y sticky más bajo ---------- */
@media (max-width: 1280px){
  body.woocommerce-checkout form.checkout{
    grid-template-columns: minmax(0,1fr) minmax(320px,28vw);
    gap: 24px;
    padding: 0 16px;
  }
  body.woocommerce-checkout #customer_details.col2-set{
    width: 86% !important;
  }
  body.woocommerce-checkout #order_review{
    top: 84px;
  }
  /* evita estrechar demasiado el título/resumen */
  body.woocommerce-checkout form.checkout #order_review_heading,
  body.woocommerce-checkout form.checkout #order_review{
    width: 100% !important;
  }
}

/* ---------- ≤ 1024px: sidebar más angosto y campos touch ---------- */
@media (max-width: 1024px){
  body.woocommerce-checkout form.checkout{
    grid-template-columns: 1fr 340px;
    gap: 22px;
  }
  body.woocommerce-checkout #customer_details.col2-set{
    width: 100% !important;
  }
  body.woocommerce-checkout #order_review{
    min-width: 0;
    top: 76px;
    padding: 16px;
  }
  /* inputs cómodos para dedo */
  body.woocommerce-checkout .input-text,
  body.woocommerce-checkout select,
  body.woocommerce-checkout textarea{
    min-height: 44px;
    font-size: 16px;
    padding: .85rem .95rem;
  }
  /* dos columnas suaves dentro de billing si tu HTML lo permite */
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  body.woocommerce-checkout .form-row-wide{ grid-column: 1 / -1; }
}

/* ---------- ≤ 900px: 1 columna (resumen debajo) ---------- */
@media (max-width: 900px){
  body.woocommerce-checkout form.checkout{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 18px;
    margin-top: 4rem;
    padding: 0 14px;
  }

  /* orden: datos → título → resumen */
  body.woocommerce-checkout #customer_details{
    grid-column: 1 !important;
    grid-row: 1;
  }
  body.woocommerce-checkout #order_review_heading{
    grid-column: 1 !important;
    grid-row: 2;
    margin-top: .25rem;
    font-size: 1.15rem;
    border-radius: 10px;
    padding: .6rem .8rem;
  }
  body.woocommerce-checkout #order_review{
    grid-column: 1 !important;
    grid-row: 3;
    position: static;
    width: 100% !important;
    padding: 14px;
  }

  /* billing en 1 columna */
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* tabla de pedido más compacta */
  body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table thead{
    display: none;
  }
  body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tbody tr{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    padding: 8px 0;
  }
  body.woocommerce-checkout .shop_table .product-name{
    grid-column: 1; font-size: .98rem;
  }
  body.woocommerce-checkout .shop_table .product-total{
    grid-column: 2; text-align: right; font-weight: 600;
  }
  body.woocommerce-checkout .shop_table tfoot th,
  body.woocommerce-checkout .shop_table tfoot td{
    padding: 8px 0;
  }

  /* métodos de pago y botón */
  body.woocommerce-checkout #payment .payment_methods > .wc_payment_method{
    padding: 10px 12px;
  }
  body.woocommerce-checkout #place_order{
    width: 100%;
    font-size: 1.05rem;
    padding: 1rem 1.1rem;
  }

  /* avisos / cupón */
  body.woocommerce-checkout .woocommerce .woocommerce-error,
  body.woocommerce-checkout .woocommerce .woocommerce-info,
  body.woocommerce-checkout .woocommerce .woocommerce-message{
    margin-top: 2rem !important;
    padding: .9rem 1rem;
    font-size: .98rem;
  }
}

/* ---------- ≤ 560px: micro-ajustes tipográficos y espacios ---------- */
@media (max-width: 560px){
  body.woocommerce-checkout .woocommerce-billing-fields h3,
  body.woocommerce-checkout .woocommerce-additional-fields h3{
    font-size: 1.05rem;
  }
  body.woocommerce-checkout #order_review_heading{
    font-size: 1.05rem;
    text-align: center;
  }
  /* resumen: imágenes chicas si Woo muestra miniaturas */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name img{
    width: 52px; height: 52px; margin-right: .5rem;
  }
  /* caja de cupón más amigable */
  body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
    padding: .75rem .9rem;
  }
}

/* ---------- ≤ 400px: ultra compacto ---------- */
@media (max-width: 400px){
  body.woocommerce-checkout .input-text,
  body.woocommerce-checkout select,
  body.woocommerce-checkout textarea{
    font-size: 15px;
    padding: .8rem .85rem;
  }
  body.woocommerce-checkout #place_order{
    font-size: 1rem;
    padding: .85rem 1rem;
  }
}
@media (min-width: 1200px) {
  .ast-plain-container.ast-no-sidebar #primary {
    margin-top: 0px;
    margin-bottom: 60px;
  }
}
@media (min-width: 1201px) {
    .ast-separate-container .entry-content[data-ast-blocks-layout] > .alignwide, .ast-plain-container .entry-content[data-ast-blocks-layout] > .alignwide {
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
    }
}