/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Description: Tema hijo para Twenty Twenty-Five
Author: JBarreiroF
Author URI: https://quebranta.com
Template: twentytwentyfive
Version: 1.0.0
*/

/* ==========================================================================
   1. CONFIGURACIÓN DE BARRA DE DESPLAZAMIENTO (SCROLLBAR)
   ========================================================================== */

/* Define la navegación fluida y la apariencia básica de la barra de scroll para Firefox y el estándar W3C */
html, :root {
  scroll-behavior: smooth;             /* Activa el desplazamiento fluido al pulsar en enlaces ancla */
  scrollbar-color: #71717a #f4f4f5;  /* Ajusta colores nativos en Firefox: [Gris medio para tirador] [Gris claro para fondo] */
  scrollbar-width: thin;              /* Fija el grosor delgado de la barra en Firefox */
}

/* Establece el tamaño de las barras de desplazamiento en motores Chromium y WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;                        /* Ancho exacto de 10px para la barra vertical */
  height: 10px;                       /* Alto exacto de 10px para la barra horizontal */
}

/* Define la pista/carril por donde se desliza la barra en navegadores WebKit */
::-webkit-scrollbar-track {
  background: #f4f4f5;                /* Fondo gris claro minimalista para la pista */
}

/* Estiliza el tirador interactivo que arrastra el usuario en WebKit */
::-webkit-scrollbar-thumb {
  background: #71717a;                /* Color gris neutro base */
  border-radius: 6px;                 /* Esquinas redondeadas para un estilo suave */
  border: 2px solid #ffffff;          /* Borde blanco que separa visualmente el tirador del carril */
  transition: background 0.3s ease;  /* Transición suave al cambiar de estado */
}

/* Cambia el color del tirador cuando el usuario pasa el cursor por encima (Hover) */
::-webkit-scrollbar-thumb:hover { 
  background: #3f3f46;                /* Gris más oscuro para indicar interactividad */
}

/* Cambia el color del tirador mientras se mantiene presionado para arrastrar (Active) */
::-webkit-scrollbar-thumb:active { 
  background: #18181b;                /* Gris casi negro para confirmar la interacción directa */
}

/* Elimina los botones con flechas en los extremos superior e inferior del scrollbar */
::-webkit-scrollbar-button { 
  display: none;                      /* Desactiva por completo la visualización de flechas */
}


/* ==========================================================================
   2. CONTROL DE ANCHO GLOBAL Y PREVENCIÓN DE DESPLAZAMIENTO HORIZONTAL
   ========================================================================== */

/* Asegura que el elemento raíz respete el límite horizontal del navegador */
html {
  max-width: 100%;                    /* Impide que el elemento HTML supere el ancho de la ventana */
}

/* Bloquea el desbordamiento lateral a nivel global en la página */
body {
  max-width: 100% !important;        /* Fuerza al cuerpo a adaptarse exactamente al 100% del viewport */
  overflow-x: hidden !important;      /* Recorta y oculta cualquier elemento que sobresalga horizontalmente */
}


/* ==========================================================================
   3. SUSTITUCIÓN Y PERSONALIZACIÓN DE ICONOS SVG EN CABECERA Y PANELES
   ========================================================================== */

/* 3.1 Sustitución visual del icono del Mini Carrito en la cabecera */
.wc-block-mini-cart__button svg {
  display: inline-block !important;  /* Mantiene el contenedor como bloque en línea visible */
  width: 30px !important;            /* Ancho fijo de 30px */
  height: 30px !important;           /* Altura fija de 30px */
  mask: none !important;              /* Cancela máscaras de color aplicadas por WooCommerce */
  -webkit-mask: none !important;      /* Cancela máscaras en motores WebKit/Safari */
  background: url('https://quebranta.com/wp-content/uploads/2026/09/Cart-1.svg') no-repeat center center / contain !important; /* Carga la imagen SVG propia */
}

/* Oculta los trazados vectoriales originales del tema dentro del SVG */
.wc-block-mini-cart__button svg * {
  display: none !important;          /* Esconde las líneas internas para mostrar exclusivamente el fondo configurado */
}

/* 3.2 Ocultación del icono original del botón de cierre del carrito lateral */
.wc-block-mini-cart__drawer-close-button svg,
.wc-block-mini-cart__drawer button[aria-label*="Cerrar"] svg,
.wc-block-mini-cart__drawer button[aria-label*="Close"] svg {
  display: none !important;          /* Oculta la aspa predeterminada para evitar duplicidad gráfica */
}

/* Reemplazo y posicionamiento del botón interactivo de cierre en el panel desplegable */
.wc-block-mini-cart__drawer .wc-block-mini-cart__drawer-close-button,
.wc-block-mini-cart__drawer button[aria-label*="Cerrar"],
.wc-block-mini-cart__drawer button[aria-label*="Close"] {
  display: block !important;          /* Transforma el botón en un contenedor en bloque */
  position: absolute !important;      /* Posicionamiento absoluto respecto al panel lateral */
  top: 32px !important;               /* Distancia de 32px desde el borde superior */
  right: 32px !important;             /* Distancia de 32px desde el borde derecho */
  width: 24px !important;             /* Ancho fijo de 24px */
  height: 24px !important;            /* Altura fija de 24px */
  background-image: url('https://quebranta.com/wp-content/uploads/2026/09/cerrar-svg.svg') !important; /* Imagen SVG personalizada para cerrar */
  background-repeat: no-repeat !important; /* Evita repeticiones del patrón de imagen */
  background-position: center !important;  /* Centra el icono en el espacio disponible */
  background-size: contain !important;      /* Ajusta proporcionalmente la imagen al tamaño 24x24px */
  border: none !important;            /* Elimina bordes o estilos de botón nativos */
  background-color: transparent !important; /* Mantiene fondo transparente */
  z-index: 9999 !important;           /* Coloca el botón por encima del contenido del panel */
  cursor: pointer !important;         /* Activa el icono de mano al pasar el cursor */
}


/* ==========================================================================
   4. CONTROL Y BLOQUEO DE SCROLL EN EL PANEL LATERAL DEL MINI CARRITO
   ========================================================================== */

/* Bloquea el desplazamiento vertical de la web mientras el carrito lateral permanece abierto */
html:has(.wc-block-mini-cart__overlay),
html:has(.wc-block-mini-cart__drawer.is-open),
html:has(.wc-block-mini-cart__drawer[aria-hidden="false"]),
body:has(.wc-block-mini-cart__overlay),
body:has(.wc-block-mini-cart__drawer.is-open),
body:has(.wc-block-mini-cart__drawer[aria-hidden="false"]) {
  overflow: hidden !important;        /* Inmoviliza el scroll de fondo cuando el panel desplegable está activo */
}

/* Oculta suavemente el botón del carrito en la cabecera cuando el panel ya está desplegado */
body:has(.wc-block-mini-cart__overlay) .wc-block-mini-cart__button,
body:has(.wc-block-mini-cart__drawer.is-open) .wc-block-mini-cart__button,
body:has(.wc-block-mini-cart__drawer[aria-hidden="false"]) .wc-block-mini-cart__button {
  opacity: 0 !important;              /* Vuelve totalmente transparente el icono de cabecera */
  visibility: hidden !important;     /* Lo retira del árbol de renderizado */
  pointer-events: none !important;   /* Desactiva clics accidentales mientras permanece oculto */
  transition: opacity 0.15s ease, visibility 0.15s ease !important; /* Animación rápida para ocultar/mostrar */
}


/* ==========================================================================
   5. ADAPTACIÓN RESPONSIVA PARA DISPOSITIVOS MÓVILES Y TABLETS
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* Permite que la altura de la página se adapte dinámicamente en navegadores móviles */
  html, body {
    height: auto !important;          /* Cancela alturas fijas para fluidez en pantallas pequeñas */
    min-height: 100% !important;      /* Mantiene una cobertura mínima del 100% de la ventana */
  }

  /* Ajusta contenedores principales de WordPress a la altura total disponible */
  .wp-site-blocks,
  #page,
  .site {
    min-height: 100% !important;      /* Extiende los contenedores base a toda la pantalla */
    display: block !important;        /* Garantiza comportamiento de bloque estándar */
  }

  /* Añade margen de seguridad en la parte inferior para librar barras de navegación móviles */
  footer,
  .wp-block-template-part-footer {
    padding-bottom: 70px !important; /* Espacio extra inferior de 70px */
    margin-bottom: 0 !important;      /* Elimina márgenes exteriores sobrantes */
  }
}


/* ==========================================================================
   6. HOMOGENEIZACIÓN DE CAMPOS DE ENTRADA, SELECTS Y ETIQUETAS
   ========================================================================== */

/* Prepara la estructura de los formularios para soportar posicionamiento de etiquetas */
.woocommerce-address-fields .form-row,
.woocommerce-EditAccountForm .form-row,
.woocommerce-checkout .form-row {
  position: relative !important;      /* Establece el contenedor como referencia relativa para las etiquetas */
  margin-bottom: 20px !important;    /* Espaciado vertical constante de 20px entre filas */
}

/* Estilizado unificado para todas las cajas de entrada de texto y selectores (58px de altura estándar) */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select,
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper select {
  height: 58px !important;           /* Altura fija homologada para todas las cajas */
  border-radius: 12px !important;    /* Redondeado de esquinas de 12px */
  font-family: inherit !important;   /* Hereda la tipografía global definida en el sitio */
  font-size: 15px !important;        /* Tamaño del texto introducido por el usuario */
  font-weight: 600 !important;       /* Grosor de texto en negrita negra */
  color: #000000 !important;         /* Color de texto negro puro */
  background-color: transparent !important; /* Fondo transparente integrado */
  border: 1px solid #cccccc !important; /* Borde sutil de 1px en gris claro */
  padding: 22px 16px 6px 16px !important; /* Relleno interno para acomodar la etiqueta en la parte superior */
  outline: none !important;          /* Elimina bordes o resplandores nativos al enfocar */
  box-shadow: none !important;       /* Desactiva sombras predeterminadas del navegador */
  transition: all 0.25s ease-in-out !important; /* Transición suave para eventos de enfoque */
  box-sizing: border-box !important; /* Asegura que el padding y border se incluyan dentro de los 58px */
}

/* Caso especial para áreas de texto multilínea (Comentarios / Notas del pedido) */
textarea {
  height: auto !important;           /* Permite crecer verticalmente según sea necesario */
  padding-top: 24px !important;      /* Aumenta el padding superior para no tapar la etiqueta flotante */
}

/* Ajuste de altura fina únicamente para la segunda línea de dirección (Apartamento, habitación, etc.) */
#billing_address_2,
#shipping_address_2 {
  height: 44px !important;           /* Altura más compacta de 44px */
  padding: 0 16px !important;        /* Relleno lateral simple */
  line-height: 44px !important;      /* Centrado vertical del texto */
}

/* Configuración de etiquetas superiores flotantes dentro de cada caja */
.woocommerce-address-fields .form-row label,
.woocommerce-EditAccountForm .form-row label,
.woocommerce-checkout .form-row label {
  position: absolute !important;      /* Coloca la etiqueta dentro de la caja de entrada */
  top: 8px !important;               /* Ubica la etiqueta a 8px del borde superior del campo */
  left: 16px !important;              /* Alinea la etiqueta a 16px del borde izquierdo */
  font-size: 12px !important;        /* Tamaño de fuente compacto de 12px */
  font-weight: 400 !important;       /* Peso de fuente normal/regular */
  color: #666666 !important;         /* Color gris medio informativo */
  pointer-events: none !important;   /* Permite hacer clic a través de la etiqueta para enfocar el input */
  z-index: 2 !important;              /* Coloca la etiqueta por encima del fondo de la caja */
  margin: 0 !important;              /* Resetea márgenes predeterminados */
  line-height: 1 !important;         /* Ajusta el interlineado compacto */
}

/* Estilizado de placeholders y textos de ayuda dentro de los campos */
::placeholder,
.wc-block-components-text-input input::placeholder {
  color: #888888 !important;         /* Color gris medio desaturado */
  font-weight: 400 !important;       /* Peso liviano para textos de muestra */
  opacity: 1 !important;             /* Fuerza visibilidad total en navegadores como Firefox */
}

/* Estilizado de descripciones o notas aclaratorias debajo de los campos */
.form-row .description,
.woocommerce-form__label-for-checkbox span {
  color: #666666 !important;         /* Aplica gris medio a textos explicativos */
  font-size: 13px !important;        /* Tamaño reducido a 13px */
}

/* Regla general: Mantiene el borde en gris claro sutil (#cccccc) al enfocar campos de texto */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.wc-block-components-text-input input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #cccccc !important;
}


/* ==========================================================================
   7. FORMULARIOS DE ACCESO Y REGISTRO (LOGIN & REGISTER)
   ========================================================================== */

/* Limpieza de contenedores para los formularios de Login y Registro */
.woocommerce-form-login,
.woocommerce-form-register,
.u-column1 .woocommerce-form-login,
.u-column2 .woocommerce-form-register {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Cajas de texto específicas para los formularios de login y registro */
.woocommerce-form-login .input-text,
.woocommerce-form-register .input-text {
  height: 44px !important;
  text-align: left !important;
  padding: 0 16px !important;
  line-height: 44px !important;
}


/* ==========================================================================
   8. DISPOSICIÓN HORIZONTAL PARA "MI CUENTA" (PESTAÑAS Y TÍTULOS)
   ========================================================================== */

/* Transforma la maqueta de "Mi Cuenta" de lateral a estructura en columna vertical */
.woocommerce-account .woocommerce {
  display: flex !important;          /* Habilita maquetación mediante Flexbox */
  flex-direction: column !important; /* Dispone elementos en vertical (Barra de menú arriba, Contenido abajo) */
  gap: 30px !important;              /* Separación de 30px entre la barra superior y la zona de datos */
  width: 100% !important;            /* Ancho completo del contenedor */
}

/* Ajusta el contenedor de navegación de "Mi Cuenta" */
.woocommerce-MyAccount-navigation {
  width: 100% !important;            /* Ocupa el 100% de la anchura disponible */
  float: none !important;            /* Anula cualquier flotación lateral propia del tema */
}

/* Transforma el menú desplegable/lista vertical en una barra horizontal de pestañas */
.woocommerce-MyAccount-navigation ul {
  display: flex !important;          /* Alinea los enlaces horizontalmente en fila */
  flex-wrap: wrap !important;        /* Permite pasar a una segunda línea en pantallas estrechas */
  list-style: none !important;      /* Elimina puntos de lista predeterminados */
  padding: 0 !important;             /* Elimina sangrías y rellenos */
  margin: 0 !important;              /* Elimina márgenes exteriores */
  gap: 10px !important;              /* Espacio de 10px entre cada pestaña */
  border-bottom: 1px solid #e5e5e5 !important; /* Línea divisoria inferior gris clara */
}

/* Elimina estilos predeterminados de cada elemento de la lista */
.woocommerce-MyAccount-navigation ul li {
  margin: 0 !important;              /* Anula márgenes individuales */
  padding: 0 !important;             /* Anula rellenos individuales */
}

/* Estiliza los enlaces individuales para que funcionen como botones tipo pestaña */
.woocommerce-MyAccount-navigation ul li a {
  display: inline-block !important;  /* Convierte los enlaces en bloques interactivos */
  padding: 10px 18px !important;     /* Relleno cómodo de 10px arriba/abajo y 18px a los lados */
  text-decoration: none !important;  /* Elimina el subrayado azul predeterminado */
  font-weight: 500 !important;       /* Peso de fuente medio */
  color: #666666 !important;         /* Texto en gris medio para pestañas inactivas */
  border-bottom: 2px solid transparent !important; /* Reserva el espacio inferior para la línea activa */
  transition: all 0.2s ease-in-out !important; /* Transición suave al cambiar de estado */
}

/* Marca visual para la pestaña activa y comportamiento al pasar el ratón */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  color: #000000 !important;         /* Texto en negro puro al seleccionar */
  font-weight: 600 !important;       /* Aumenta el grosor a negrita */
  border-bottom-color: #000000 !important; /* Muestra el borde inferior indicador en negro puro */
}

/* Estilizado de títulos dentro de las secciones de "Mi Cuenta" */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  color: #000000 !important;         /* Títulos principales en negro puro */
  font-weight: 700 !important;       /* Negrita marcada */
  margin-top: 25px !important;       /* Espaciado superior de 25px */
  margin-bottom: 8px !important;     /* Espaciado inferior de 8px */
}

/* Área de contenido general dentro del panel de la cuenta */
.woocommerce-MyAccount-content {
  width: 100% !important;            /* Ancho completo debajo de las pestañas superiores */
  float: none !important;            /* Elimina flotaciones dinámicas */
  color: #000000 !important;         /* Color base de texto negro */
}


/* ==========================================================================
   9. UNIFICACIÓN SELECT2 Y SELECTOR DE TELÉFONO (INTL-TEL-INPUT)
   ========================================================================== */

/* 9.1 Homologación estética para los desplegables dinámicos Select2 (País y Provincia) */
.select2-container--default .select2-selection--single,
.select2-container .select2-selection--single {
  border-radius: 12px !important;    /* Bordes redondeados a 12px igual que el resto de inputs */
  border: 1px solid #cccccc !important; /* Borde gris sutil de 1px */
  background-color: transparent !important; /* Fondo transparente */
  height: 58px !important;           /* Altura unificada de 58px */
  outline: none !important;          /* Quita marcas de enfoque */
  box-shadow: none !important;       /* Elimina sombras */
  transition: all 0.25s ease-in-out !important; /* Transición suave */
}

/* Centrado del texto seleccionado dentro de la caja Select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 56px !important;      /* Altura de línea adaptada para centrado vertical */
  padding-left: 16px !important;     /* Margen interno a la izquierda */
  padding-top: 10px !important;      /* Desplaza el texto hacia abajo para respetar la etiqueta superior */
  font-size: 15px !important;        /* Tamaño de fuente a 15px */
  font-weight: 600 !important;       /* Negrita para coincidir con otros inputs */
  color: #000000 !important;         /* Color de texto negro */
}

/* Ajuste de alineación para la flecha desplegable a la derecha */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 56px !important;           /* Iguala la altura de la caja */
  right: 12px !important;            /* Posiciona la flecha a 12px del borde derecho */
}

/* Mantiene el borde gris sin contornos negros bruscos cuando Select2 se abre o enfoca */
.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border: 1px solid #cccccc !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Oculta la caja de búsqueda innecesaria dentro del menú desplegable de países/provincias */
.select2-container--default .select2-search--dropdown {
  display: none !important;
}

/* Panel contenedor y desplegable inferior de Select2 */
.select2-dropdown,
.select2-dropdown--below {
  border: 1px solid #cccccc !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  z-index: 9999 !important;
  margin-top: 4px !important;
}

/* Opciones individuales dentro de la lista desplegable */
.select2-results__option {
  padding: 10px 16px !important;
  font-size: 14px !important;
  color: #000000 !important;
}

/* Estado al pasar el ratón sobre las opciones de Select2 (Sustituye el azul nativo por gris muy suave) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #f4f4f5 !important;
  color: #000000 !important;
  font-weight: 600 !important;
}

/* 9.2 Contenedor principal de la librería de teléfono intl-tel-input */
.iti { 
  width: 100% !important;            /* Fuerza al selector a abarcar todo el ancho del formulario */
  display: block !important;         /* Cambio a visualización en bloque */
  margin-top: 0px !important;        /* Elimina márgenes superiores */
}

/* Menú flotante desplegable de países */
.iti__country-list { 
  z-index: 99999 !important;         /* Eleva el menú por encima de ventanas modales y overlays */
  color: #000000 !important;         /* Texto de países en color negro */
}

/* Campo específico de número de teléfono con espacio reservado a la izquierda para la bandera */
#billing_phone,
#shipping_phone,
input[type="tel"] { 
  padding: 20px 16px 4px 108px !important; /* Relleno superior e inferior calibrados + 108px a la izquierda */
  line-height: normal !important;          /* Centrado vertical directo */
}

/* Caja contenedora para la bandera seleccionada */
.iti__selected-flag {
  padding: 0 8px 0 12px !important;  /* Relleno interno para la bandera */
  border-radius: 12px 0 0 12px !important; /* Redondea únicamente las esquinas izquierdas dentro del input */
  height: 100% !important;           /* Ocupa toda la altura vertical del campo */
  display: flex !important;          /* Flexbox para alineación */
  align-items: center !important;    /* Centra la bandera verticalmente */
  background-color: transparent !important; /* Elimina el fondo gris por defecto */
}

/* Hover suave en la bandera */
.iti__selected-flag:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Reposicionamiento de la etiqueta del teléfono para esquivar la bandera con margen cómodo */
.form-row#billing_phone_field label,
.form-row#shipping_phone_field label,
.form-row:has(#billing_phone) label,
.form-row:has(#shipping_phone) label {
  left: 100px !important;            /* Mueve la etiqueta flotante 108px a la derecha */
  top: 8px !important;               /* Fuerza la posición exacta en la parte superior */
  position: absolute !important;
  z-index: 3 !important;
  margin: 0 !important;
}

/* Wrapper general de entrada de WooCommerce */
.woocommerce-input-wrapper {
  width: 100%;                       /* Expande el wrapper al 100% */
}


/* ==========================================================================
   10. MENSAJES Y ALERTAS DE FORMULARIOS
   ========================================================================== */

/* Contenedor de mensajes de respuesta en formularios AJAX */
#form-response-message {
  max-width: 680px;                  /* Limita el ancho máximo del mensaje a 680px */
  margin: 0 auto 15px auto;          /* Centra horizontalmente y añade 15px de margen inferior */
}

/* Caja de alerta para confirmación de envío correcto */
.form-exito {
  background-color: #d4edda;        /* Fondo verde claro de éxito */
  color: #155724;                    /* Texto verde oscuro informativo */
  border: 1px solid #c3e6cb;        /* Borde verde sutil */
  border-radius: 6px;               /* Bordes redondeados de 6px */
  padding: 12px 16px;               /* Espacio interno cómodo */
  font-size: 13px;                  /* Tamaño de texto de 13px */
}

/* Caja de alerta para errores de validación o envío */
.form-error {
  background-color: #f8d7da;        /* Fondo rojo claro de alerta */
  color: #721c24;                    /* Texto rojo oscuro */
  border: 1px solid #f5c6cb;        /* Borde rojo sutil */
  border-radius: 6px;               /* Bordes redondeados de 6px */
  padding: 12px 16px;               /* Relleno interno */
  font-size: 13px;                  /* Tamaño de texto de 13px */
}

/* Estado del botón de envío mientras procesa la solicitud */
.btn-submit:disabled {
  opacity: 0.6;                      /* Vuelve semitransparente el botón bloqueado */
  cursor: not-allowed;              /* Muestra cursor de acción no permitida */
}
/* Ajuste de la casilla Copiar Dirección de Envío */
.woocommerce-address-fields .quebranta-copy-shipping-row {
    margin-top: 15px;
    margin-bottom: 25px;
    clear: both;
    display: block;
}

.woocommerce-address-fields .quebranta-copy-shipping-row label.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
    color: inherit; /* Mantiene el color de texto estándar de la web */
}

.woocommerce-address-fields .quebranta-copy-shipping-row input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
/* ==========================================================================
   11. AJUSTE DE LA CASILLA COPIAR DIRECCIÓN DE ENVÍO
   ========================================================================== */

/* Contenedor principal de la casilla */
.woocommerce-address-fields .quebranta-copy-shipping-row {
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    clear: both !important;
    display: block !important;
    position: relative !important;
}

/* Anula la posición absoluta de la etiqueta para que el texto fluya al lado del checkbox */
.woocommerce-address-fields .quebranta-copy-shipping-row label,
.woocommerce-address-fields .quebranta-copy-shipping-row label.checkbox {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Resetea la altura fija de 58px y paddings para que la casilla recupere su tamaño natural */
.woocommerce-address-fields .quebranta-copy-shipping-row input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: #000000 !important; /* Mantiene la casilla negra en navegadores modernos */
    border-radius: 4px !important;
    border: 1px solid #cccccc !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}