/* Total del pedido en checkout */
.woocommerce-checkout table.shop_table tfoot .order-total td strong{
  font-size: 20px;           /* Importe grande */
  line-height: 1.15;
}

.woocommerce-checkout table.shop_table tfoot .order-total td{
  font-size: 16px;           /* Texto base de la celda */
}

/* Mensaje "(incluye … IVA)" más pequeño y gris */
.woocommerce-checkout .order-total .includes_tax{
  display: block;            /* a línea nueva */
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;
}

/* Labels checkout */
body.woocommerce-checkout .woocommerce form .form-row label{
  display:block;
  margin:0 0 6px;
  font-size:14px;
  font-weight:600;
  color:#111827; /* gris oscuro */
}
body.woocommerce-checkout .woocommerce form .required{
  color:#DC2626; /* rojo para asterisco */
}

/* Inputs checkout */
body.woocommerce-checkout .woocommerce form .input-text,
body.woocommerce-checkout .woocommerce form select,
body.woocommerce-checkout .woocommerce form textarea{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #e5e7eb;   /* gris claro */
  border-radius:10px;
  background:#fff;
  font-size:16px;
  color:#111827;              /* gris oscuro */
}

/* ========================================================= 
Checkout: layout global (móvil + desktop) con grid y áreas 
============================================================ */

/* 1) Wrapper en grid de 2 columnas */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  grid-template-areas:
    "first    last"
    "nif      phone"
    "country  state"
    "addr1    addr2"
    "postcode city"
    "email    email";
}

/* 2) Anular floats/ancho heredados de Astra/Woo */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row{
  float:none !important;
  width:auto !important;
  margin:0 !important;          /* el gap controla el espaciado */
  grid-column:auto;
}

/* 3) Asignación de cada campo a su área */
#billing_first_name_field { grid-area: first; }
#billing_last_name_field  { grid-area: last;  }
#billing_nif_field        { grid-area: nif;   }
#billing_phone_field      { grid-area: phone; }
#billing_country_field    { grid-area: country; }
#billing_state_field      { grid-area: state;   }
#billing_address_1_field  { grid-area: addr1; }
#billing_address_2_field  { grid-area: addr2; }
#billing_postcode_field   { grid-area: postcode; }
#billing_city_field       { grid-area: city;     }
#billing_email_field      { grid-area: email; }

/* 4) (Opcional) si el select2 se recorta, garantizamos ancho completo del control */
body.woocommerce-checkout .select2-container{ width:100% !important; }

/* 5) Ocultar el saludo largo por CSS (varias plantillas) */
/*.woocommerce-checkout p.logged-in-as,
.woocommerce-checkout #customer_info p,
.woocommerce-checkout .ast-customer-info p{
  display:none !important;
}*/

/* Checkout: esconder saludo largo por defecto de Astra/Woo */
.woocommerce-checkout .ast-logged-in-customer-info{
  display:none !important;
}

/* Cinturón y tirantes por si otras plantillas lo imprimen distinto */
.woocommerce-checkout #customer_info p,
.woocommerce-checkout p.logged-in-as{
  display:none !important;
}

/* Checkout: ocultar el título redundante "Datos del Cliente" de Astra */
.woocommerce-checkout form.checkout .ast-checkout-form-heading{
  display: none !important;
}

/* Ajustar espaciado: saludo + siguiente h3 */
.woocommerce-checkout .om-checkout-greeting{
  margin: 0 0 12px;
  font-weight: 600;
}
.woocommerce-checkout #customer_details .woocommerce-billing-fields > h3{
  margin-top: 0; /* evita hueco extra antes de “Detalles de facturación” */
}

/*
============================================================================
 * Estilos para la Selección de Forma de Pago en el Checkout
 * Transforma la lista por defecto en un selector de tarjetas interactivo.
============================================================================
*/

/* Ocultar campo "codigo_oficina" en checkout */
#codigo_oficina_field {
  display: none !important;
}

/* 1. Contenedor principal de los métodos de pago */
#payment .wc_payment_methods {
    padding: 0;
    border: none;
}

/* Elimina el borde y fondo del contenedor principal de métodos de pago */
#payment,
#payment .wc_payment_methods {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 2. Estilo base de cada 'tarjeta' de método de pago */
#payment .wc_payment_method {
    background-color: #f9f9f9;
    border: 1px solid #e5e7eb; /* Borde gris claro */
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 3. Estructura interna de la tarjeta (label, logo) */
#payment .wc_payment_method label {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    width: 100%;
}

/* Ocultar el radio button original */
#payment .wc_payment_method input[type="radio"] {
    display: none;
}

/* Crear un radio button personalizado y más grande */
#payment .wc_payment_method label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 15px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    background-color: #fff;
    flex-shrink: 0; /* Evita que el círculo se encoja */
}

/* Estilo del círculo interior cuando el radio está seleccionado */
#payment .wc_payment_method input[type="radio"]:checked + label::before {
    border-color: #005bd4; /* Color de tu marca */
    background-color: #005bd4; /* Color de tu marca */
    box-shadow: inset 0 0 0 3px #fff; /* Círculo interior blanco */
}

/* 4. Estilo de los logos de las pasarelas */
#payment .wc_payment_method label img {
    margin-left: auto; /* Empuja el logo a la derecha */
    max-height: 24px;
    width: auto;
}

/* 5. Estilo para la tarjeta SELECCIONADA */
#payment .wc_payment_method.chosen {
    border-color: #005bd4; /* Borde de color para destacar */
    background-color: #f0f6fe; /* Fondo sutil para indicar selección */
}

/* 6. Estilo para la caja de descripción del método seleccionado */
#payment .payment_box {
    background-color: #fff; /* Fondo blanco para que resalte */
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-top: 1rem;
    padding: 1rem;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Pequeño triángulo para conectar la caja con la tarjeta */
#payment .payment_box::before {
    content: "";
    display: block;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    position: absolute;
    top: -19px;
    left: 20px;
    z-index: 1;
}

/* Borde para el triángulo */
#payment .payment_box::after {
    content: "";
    display: block;
    border: 11px solid transparent;
    border-bottom-color: #e5e7eb;
    position: absolute;
    top: -22px;
    left: 19px;
    z-index: 0;
}

/*
============================================================================
 * Ajustes y Correcciones para los Métodos de Pago
 * Soluciona problemas de especificidad con el tema padre (Astra).
============================================================================
*/

/*
 * 1. FORZAR EL ESPACIADO ENTRE TARJETAS
 * Aumentamos la especificidad para asegurar que el margen inferior se aplique
 * a todos los elementos, excepto al último.
*/
body.woocommerce-checkout #payment .wc_payment_method {
    margin-bottom: 0.75rem !important;
}

body.woocommerce-checkout #payment .wc_payment_method:last-child {
    margin-bottom: 0 !important;
}

/*
 * 2. CORREGIR BORDER-RADIUS DEL PRIMER ELEMENTO
 * Forzamos a que el primer elemento también tenga las esquinas
 * inferiores redondeadas, anulando el estilo por defecto del tema.
*/
body.woocommerce-checkout #payment .wc_payment_method:first-child {
    border-radius: 10px !important;
}
/****************************************************************************************/

/* === Checkout móvil: CTA fijo, perfectamente centrado === */
@media (max-width: 768px){
  /* reserva espacio al final para que no tape nada */
  body.woocommerce-checkout { padding-bottom: 96px; }

  /* el contenedor vuelve a fluir normal */
  .woocommerce-checkout #payment .place-order{
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    border-top: 0 !important;
    padding: 0 !important;
  }

  /* BOTÓN fijo y centrado al viewport */
  .woocommerce-checkout #place_order{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 9999;

    display: block;
    width: calc(100vw - 28px);    /* margen visual 14px por lado */
    max-width: 720px;             /* opcional, limita el ancho en pantallas grandes */
    height: 48px;
    border-radius: 999px;
    box-shadow: 0 10px 18px rgba(0,0,0,.12);
  }

  /* por si algún elemento crea scroll horizontal */
  body.woocommerce-checkout { overflow-x: hidden; }
}

  /* Más espacio entre la última tarjeta de pago y el texto de privacidad */
.woocommerce-checkout .wc_payment_methods .wc_payment_method {
  margin-bottom: 14px;             /* separación normal entre métodos */
}
.woocommerce-checkout .wc_payment_methods .wc_payment_method:last-child {
  margin-bottom: 22px;             /* un pelín más bajo el último */
}

/* Asegura separación por si algún tema comprime el margen */
.woocommerce-checkout .woocommerce-privacy-policy-text {
  margin-top: 18px;
  line-height: 1.5;
}

/* Más aire alrededor de los notices en checkout */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message{
  margin-top: 12px;
  margin-bottom: 16px;
}

/* 1) Resalta la etiqueta del primer nivel cuando el campo es inválido */
.woocommerce form .form-row.woocommerce-invalid > label,
.woocommerce .woocommerce-billing-fields__field-wrapper .form-row.woocommerce-invalid > label {
  background: #FFF4E5 !important;
  color: #7A2E10 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  display: inline-block; /* por si el tema la tiene inline */
}

/* 2) Alternativa / además: resalta el wrapper del control (muy visible) */
.woocommerce form .form-row.woocommerce-invalid .woocommerce-input-wrapper {
  background: #FFF4E5 !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
}

/* === Evitar que el bloque de checkout se pegue al footer en resoluciones medianas === */
body.woocommerce-checkout .entry-content .woocommerce {
  margin-bottom: 60px; /* espacio global */
}

/* En pantallas grandes podemos reducir un poco si quieres */
@media (min-width: 1200px) {
  body.woocommerce-checkout .entry-content .woocommerce {
    margin-bottom: 80px;
  }
}

/* === Ajustes botones PayPal en Checkout === */
.woocommerce-checkout .payment_box .paypal-buttons,
.woocommerce-checkout .payment_box .paypal-buttons iframe {
  width: 100% !important;      /* que ocupen todo el ancho */
  max-width: 100% !important;
  display: block !important;
}

.woocommerce-checkout .payment_box .paypal-buttons iframe {
  min-height: 48px !important; /* más altos y cómodos */
  border: none !important;     /* quita líneas raras */
  margin: 8px 0 !important;    /* aire vertical entre botones */
}

.woocommerce-checkout .payment_box {
  padding-bottom: 16px;        /* extra espacio para que no se monten */
}