/* ==========================================================================
   CHECKOUT
   Pago exprés, opciones de pago, checkboxes y campos
   de texto de los bloques de WooCommerce.
   Tema Porta — realporta.es
   ========================================================================== */

/* ═══ PAGO EXPRÉS ═══════════════════════════════════════════ */

/* Neutraliza las cajas que mete WooCommerce por dentro */
.wp-block-woocommerce-checkout-express-payment-block,
.wc-block-components-express-payment__content,
.wc-block-components-express-payment__event-buttons {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}

/* La caja real, una sola */
.wc-block-components-express-payment--checkout {
background: #1a1a1a !important;
border: 1px solid rgba(240,236,228,.12) !important;
border-radius: 0 !important;
padding: 24px !important;
margin: 0 0 8px !important;
}

.wc-block-components-express-payment__title-container {
border: none !important;
margin: 0 0 18px !important;
text-align: left !important;
}

.wc-block-components-express-payment__title-container::before,
.wc-block-components-express-payment__title-container::after {
display: none !important;
}

.wc-block-components-express-payment__title {
font-family: 'Bebas Neue', sans-serif !important;
font-size: 20px !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: #6b6560 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
}

.wc-block-components-express-payment__event-buttons > li {
margin: 0 0 10px !important;
list-style: none !important;
}

/* Separador "o continúa más abajo" */
.wc-block-components-express-payment-continue-rule {
font-family: 'DM Mono', monospace !important;
font-size: 10px !important;
letter-spacing: .25em !important;
text-transform: uppercase !important;
color: #6b6560 !important;
margin: 28px 0 !important;
}

.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
background: rgba(240,236,228,.12) !important;
}


/* ═══ OPCIONES DE PAGO ══════════════════════════════════════ */

.wp-block-woocommerce-checkout-payment-block .wc-block-components-checkout-step__title {
font-family: 'Bebas Neue', sans-serif !important;
font-size: 24px !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #f0ece4 !important;
}

/* El borde vive SOLO en el contenedor exterior */
.wc-block-components-radio-control-accordion-option {
background: #1a1a1a !important;
border: 1px solid rgba(240,236,228,.12) !important;
border-radius: 0 !important;
margin-bottom: 8px !important;
overflow: hidden !important;
}

.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
border-color: #c0392b !important;
}

/* La fila interior: flex, sin borde propio */
.wc-block-components-radio-control__option {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 14px 16px !important;
margin: 0 !important;
min-height: 0 !important;
border: none !important;
background: transparent !important;
}

.wc-block-components-radio-control__option::before,
.wc-block-components-radio-control__option::after {
display: none !important;
}

/* ── EL RADIO: estático, no absoluto ── */
.wc-block-components-radio-control__input {
position: static !important;
appearance: none !important;
-webkit-appearance: none !important;
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
flex: 0 0 14px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(240,236,228,.35) !important;
border-radius: 50% !important;
background: transparent !important;
box-shadow: none !important;
cursor: pointer !important;
}

.wc-block-components-radio-control__input:checked {
border-color: #c0392b !important;
box-shadow: inset 0 0 0 3px #c0392b !important;
}

.wc-block-components-radio-control__input:focus {
outline: none !important;
}

/* La etiqueta ya no necesita hueco para el radio absoluto */
.wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__label {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
flex: 1 1 auto !important;
padding: 0 !important;
margin: 0 !important;
font-family: 'DM Mono', monospace !important;
font-size: 12px !important;
letter-spacing: .12em !important;
line-height: 1.3 !important;
color: #f0ece4 !important;
text-transform: uppercase !important;
}

/* Iconos de pasarelas */
.wc-block-components-payment-method-icons {
display: flex !important;
align-items: center !important;
gap: 5px !important;
margin: 0 !important;
flex-shrink: 0 !important;
}

.wc-block-components-payment-method-icons img,
.wc-block-components-payment-method-icons .wc-block-components-payment-method-icon {
max-height: 18px !important;
width: auto !important;
margin: 0 !important;
}

/* Contenido desplegado — alineado con el texto de arriba */
.wc-block-components-radio-control-accordion-content {
padding: 0 16px 16px 42px !important;
margin: 0 !important;
text-align: left !important;
font-family: 'DM Mono', monospace !important;
font-size: 12px !important;
line-height: 1.7 !important;
color: #6b6560 !important;
}

.wc-block-components-radio-control-accordion-content p,
.wc-block-components-radio-control-accordion-content div {
text-align: left !important;
margin: 0 0 6px !important;
font-size: 12px !important;
color: #6b6560 !important;
}


/* ═══ CHECKBOXES (nota del pedido, envío, etc.) ═════════════ */

.wc-block-components-checkbox__label {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
font-family: 'DM Mono', monospace !important;
font-size: 11px !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: #6b6560 !important;
margin: 0 !important;
padding: 0 !important;
cursor: pointer !important;
}

.wc-block-components-checkbox__input[type="checkbox"] {
position: static !important;
appearance: none !important;
-webkit-appearance: none !important;
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
flex: 0 0 14px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(240,236,228,.35) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
cursor: pointer !important;
}

.wc-block-components-checkbox__input[type="checkbox"]:checked {
background: #c0392b !important;
border-color: #c0392b !important;
}

.wc-block-components-checkbox__mark {
display: none !important;
}


/* ═══ FIX: radio en línea, no encima ════════════════════════ */

.wc-block-components-radio-control__option {
flex-wrap: nowrap !important;
}

.wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__label {
width: auto !important;
flex: 1 1 auto !important;
}


/* ═══ SELECTORES CON CARÁCTER ═══════════════════════════════ */

/* Cuadrado, no círculo — como el resto del sitio */
.wc-block-components-radio-control__input {
border-radius: 0 !important;
width: 12px !important;
height: 12px !important;
min-width: 12px !important;
flex: 0 0 12px !important;
transition: border-color .2s, box-shadow .2s !important;
}

.wc-block-components-radio-control__input:checked {
border-color: #c0392b !important;
background: #c0392b !important;
box-shadow: inset 0 0 0 2px #1a1a1a !important;
}

/* Reposo */
.wc-block-components-radio-control-accordion-option {
transition: background .2s, border-color .2s, box-shadow .2s !important;
}

.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label-group,
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label {
color: #6b6560 !important;
transition: color .2s !important;
}

/* Hover */
.wc-block-components-radio-control-accordion-option:hover {
background: #202020 !important;
border-color: rgba(240,236,228,.28) !important;
}

.wc-block-components-radio-control-accordion-option:hover .wc-block-components-radio-control__label-group,
.wc-block-components-radio-control-accordion-option:hover .wc-block-components-radio-control__label {
color: #f0ece4 !important;
}

/* Seleccionado — barra roja a la izquierda */
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
background: #202020 !important;
border-color: rgba(240,236,228,.12) !important;
box-shadow: inset 3px 0 0 #c0392b !important;
}

.wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control__label-group,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control__label {
color: #f0ece4 !important;
}

/* Iconos apagados salvo en la opción activa */
.wc-block-components-payment-method-icons img {
opacity: .45 !important;
filter: grayscale(1) !important;
transition: opacity .2s, filter .2s !important;
}

.wc-block-components-radio-control-accordion-option:hover .wc-block-components-payment-method-icons img,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-payment-method-icons img {
opacity: 1 !important;
filter: none !important;
}


/* ═══ CAMPOS DE TEXTO (email, dirección…) ═══════════════════ */

.wc-block-components-text-input {
margin-bottom: 16px !important;
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-address-form input,
.wc-block-components-form .wc-block-components-text-input input {
height: auto !important;
min-height: 0 !important;
padding: 26px 16px 10px !important;
line-height: 1.4 !important;
background: #060606 !important;
border: 1px solid #2e2e2e !important;
border-radius: 0 !important;
color: #f0ece4 !important;
font-family: 'DM Mono', monospace !important;
font-size: 13px !important;
box-shadow: none !important;
transition: border-color .2s !important;
}

.wc-block-components-text-input input:focus {
border-color: #f0ece4 !important;
outline: none !important;
box-shadow: none !important;
}

/* Etiqueta flotante — fija arriba, sin transform */
.wc-block-components-text-input label,
.wc-block-components-text-input.is-active label {
position: absolute !important;
top: 9px !important;
left: 16px !important;
right: auto !important;
transform: none !important;
transform-origin: left top !important;
font-family: 'DM Mono', monospace !important;
font-size: 9px !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: #6b6560 !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
max-width: calc(100% - 32px) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}

/* Selects (país, provincia) */
.wc-block-components-combobox-control input,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
padding: 26px 16px 10px !important;
height: auto !important;
}


/* ═══ FIX 2: estado marcado inequívoco ══════════════════════ */

/* Si existe un contenedor intermedio, que no rompa el flex */
.wc-block-components-radio-control__option-layout,
.wc-block-components-radio-control-accordion-option__content {
display: contents !important;
}

.wc-block-components-radio-control__input {
background: transparent !important;
box-shadow: none !important;
}

/* Marcado: cuadro rojo macizo + halo */
.wc-block-components-radio-control__input:checked {
background: #c0392b !important;
border-color: #c0392b !important;
box-shadow: 0 0 0 3px rgba(192,57,43,.25) !important;
}

/* Refuerzo por si el input queda oculto: la fila entera lo indica */
.wc-block-components-radio-control-accordion-option:has(input:checked) {
background: #202020 !important;
box-shadow: inset 3px 0 0 #c0392b !important;
}

.wc-block-components-radio-control-accordion-option:has(input:checked)
.wc-block-components-radio-control__label {
color: #f0ece4 !important;
font-weight: 500 !important;
}

/* Checkbox de la nota: mismo lenguaje */
.wc-block-components-checkbox__input[type="checkbox"]:checked {
background: #c0392b !important;
border-color: #c0392b !important;
box-shadow: 0 0 0 3px rgba(192,57,43,.25) !important;
}


/* ═══ FIX 3: dirección del flex (el label era column) ═══════ */

label.wc-block-components-radio-control__option {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 12px !important;
}

.wc-block-components-radio-control__option-layout {
display: contents !important;
}

.wc-block-components-radio-control__label-group {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
gap: 12px !important;
}

.wc-block-components-radio-control__label {
flex: 0 1 auto !important;
min-width: 0 !important;
}

.wc-block-components-payment-method-icons--align-right {
margin-left: auto !important;
flex-shrink: 0 !important;
}


/* ═══ FIX 4: contraste real en el estado seleccionado ═══════ */

/* Radio más grande y con borde visible en reposo */
.wc-block-components-radio-control__input {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
flex: 0 0 16px !important;
border: 1px solid rgba(240,236,228,.45) !important;
background: transparent !important;
box-shadow: none !important;
}

/* Marcado: rojo macizo + anillo exterior */
.wc-block-components-radio-control__input:checked {
background: #c0392b !important;
border: 1px solid #c0392b !important;
box-shadow: 0 0 0 3px rgba(192,57,43,.35) !important;
}

/* Fila NO seleccionada: apagada */
.wc-block-components-radio-control-accordion-option {
background: #141414 !important;
border: 1px solid rgba(240,236,228,.08) !important;
opacity: .65 !important;
transition: opacity .2s, background .2s, box-shadow .2s !important;
}

.wc-block-components-radio-control-accordion-option:hover {
opacity: 1 !important;
background: #1f1f1f !important;
}

/* Fila seleccionada: encendida, barra roja gruesa */
.wc-block-components-radio-control-accordion-option:has(input:checked) {
opacity: 1 !important;
background: #232323 !important;
border-color: rgba(240,236,228,.18) !important;
box-shadow: inset 4px 0 0 #c0392b !important;
}

.wc-block-components-radio-control-accordion-option:has(input:checked)
.wc-block-components-radio-control__label {
color: #f0ece4 !important;
letter-spacing: .16em !important;
}

/* Un poco más de aire dentro de la fila */
label.wc-block-components-radio-control__option {
padding: 16px 18px !important;
gap: 14px !important;
}