/**
 * Piel del carrito y del proceso de compra, en la línea de la ficha.
 *
 * WooCommerce sirve aquí el **carrito de bloques**: el HTML del servidor es solo un
 * andamio y la interfaz real la monta JavaScript en el navegador con clases
 * `wc-block-*`. Por eso los selectores son esos y no los del carrito clásico
 * (`shop_table`, `cart_totals`), que solo aparecen como respaldo sin JavaScript.
 *
 * Los nombres de clase se han sacado del DOM ya montado, no de la documentación:
 * `wc-block-cart-items__header`, `wc-block-components-totals-item`, etc.
 *
 * Este archivo NO define la paleta: la hereda de `ficha.css`, que se carga antes y
 * pone las variables en `body.trt-ficha`. Así el carrito no puede desalinearse de la
 * ficha por un color que se cambie en un sitio y no en el otro.
 *
 * Buena parte de lo que hay aquí son clases `wc-block-components-*`, que **comparten
 * el carrito y el checkout**: los totales, los paneles, los botones y los campos de
 * formulario son los mismos componentes. Vestirlos una vez sirve para los dos pasos.
 */

/* --- Titular de la página --- */

/*
 * El título lo marca el tema, no WooCommerce, y cada uno lo llama distinto: los temas
 * de bloques usan `.wp-block-post-title` (que ya viste `ficha.css`) y los clásicos
 * como Astra `.entry-title`. Se cubre el segundo aquí.
 */
body.trt-ficha .site-content .entry-title {
    font-family: var(--trt-fuente-titulo);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.05;
    font-size: clamp(1.9rem, 5vw, 3rem);
    color: var(--trt-ink);
}

body.trt-ficha .site-content .entry-title::after {
    content: '';
    display: block;
    width: 3.5rem;
    height: 4px;
    margin-top: .55rem;
    background: var(--trt-brand);
}

/* --- La tabla de artículos --- */

body.trt-ficha .wc-block-cart-items__header {
    border-bottom: 1px solid var(--trt-ink-200);
    color: var(--trt-ink-600);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
}

body.trt-ficha .wc-block-cart-items__row,
body.trt-ficha .wc-block-cart-items td {
    border-bottom: 1px solid var(--trt-ink-200);
}

body.trt-ficha .wc-block-components-product-name {
    color: var(--trt-ink);
    font-weight: 700;
    text-decoration: none;
}

body.trt-ficha .wc-block-components-product-name:hover {
    color: var(--trt-brand-texto);
}

/* La imagen del vehículo, contenida como en la galería de la ficha. */
body.trt-ficha .wc-block-cart-item__image img {
    border: 1px solid var(--trt-ink-200);
    border-radius: 8px;
    background: var(--trt-superficie);
}

body.trt-ficha .wc-block-components-product-price,
body.trt-ficha .wc-block-components-product-price__value,
body.trt-ficha .wc-block-cart-item__total,
body.trt-ficha .wc-block-components-formatted-money-amount {
    color: var(--trt-ink);
}

/*
 * Los datos de la reserva (recogida, devolución, noches, total, pendiente).
 *
 * El carrito de bloques los pinta seguidos y separados por barras, y con cinco
 * campos queda un párrafo apelmazado. Se pasan a una línea por dato, que es como se
 * leen: son cinco hechos distintos, no una frase.
 */
body.trt-ficha .wc-block-components-product-details {
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--trt-ink-600);
    font-size: .84rem;
    line-height: 1.55;
}

/*
 * Cada dato, en su línea.
 *
 * OJO con la estructura real, que no es la que parece: el contenedor es un `div` y
 * cada dato un `span` —no una `ul` con `li`—, así que los selectores de lista no
 * pintan nada. Se comprobó en el DOM ya montado.
 */
body.trt-ficha .wc-block-components-product-details > span {
    display: block;
    margin: 0 0 .15rem;
}

/*
 * El separador « / » es un `<span aria-hidden="true">` DE VERDAD, no un
 * pseudoelemento: `content: none` no lo toca, hay que ocultarlo.
 *
 * Y ocultarlo no le quita nada a nadie precisamente porque ya viene marcado
 * `aria-hidden`: los lectores de pantalla nunca lo leían, era decoración visual para
 * separar datos en una línea. Puestos en columna, sobra.
 */
body.trt-ficha .wc-block-components-product-details [aria-hidden="true"] {
    display: none;
}

body.trt-ficha .wc-block-components-product-details__name {
    color: var(--trt-ink-600);
    font-weight: 600;
}

body.trt-ficha .wc-block-components-product-details__value {
    color: var(--trt-ink-800);
}

/* Lo que queda por pagar en la entrega, destacado: es la cifra que sorprende. */
body.trt-ficha .wc-block-components-product-details__pendiente-en-la-entrega .wc-block-components-product-details__value {
    color: var(--trt-brand-texto);
    font-weight: 700;
}

/* Quitar del carrito: legible, y rojo solo al apuntarlo. */
body.trt-ficha .wc-block-cart-item__remove-link {
    color: var(--trt-ink-600);
    text-decoration-color: var(--trt-ink-200);
}

body.trt-ficha .wc-block-cart-item__remove-link:hover {
    color: var(--trt-brand-texto);
}

/* --- La columna de totales, como tarjeta --- */

/*
 * En claro los totales van sueltos sobre el fondo. Sobre negro eso se pierde, así que
 * se agrupan en una tarjeta con la misma superficie y el mismo radio que el panel del
 * calendario: el cliente reconoce la pieza de la ficha.
 */
body.trt-ficha .wc-block-cart__sidebar .wc-block-components-sidebar,
body.trt-ficha .wc-block-cart__sidebar {
    padding: clamp(1.1rem, 3vw, 1.75rem);
    border: 1px solid var(--trt-ink-200);
    border-radius: var(--trt-radio);
    background: var(--trt-superficie);
}

body.trt-ficha .wc-block-cart__totals-title {
    color: var(--trt-ink-600);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
}

body.trt-ficha .wc-block-components-totals-item__label,
body.trt-ficha .wc-block-components-totals-item__value {
    color: var(--trt-ink);
}

body.trt-ficha .wc-block-components-totals-item__description,
body.trt-ficha .wc-block-components-totals-taxes {
    color: var(--trt-ink-600);
}

body.trt-ficha .wc-block-components-totals-wrapper {
    border-top-color: var(--trt-ink-200);
}

/* El total, que es la cifra que de verdad se mira. */
body.trt-ficha .wc-block-components-totals-footer-item {
    border-top: 1px solid var(--trt-ink-200);
    font-size: 1.05rem;
}

body.trt-ficha .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--trt-ink);
    font-weight: 700;
}

/* --- Cupones y paneles plegables --- */

body.trt-ficha .wc-block-components-panel__button,
body.trt-ficha .wc-block-components-panel__button-icon {
    color: var(--trt-ink-600);
}

body.trt-ficha .wc-block-components-panel__button:hover {
    color: var(--trt-ink);
}

/* --- Campos de formulario (cupón aquí, y todo el checkout) --- */

/*
 * Los campos del carrito de bloques traen fondo blanco y borde gris claro. Sobre
 * negro hay que invertirlos, y sobre todo hay que dejar el FOCO bien visible: un
 * recuadro azul del navegador sobre fondo oscuro se ve mal y aquí se está pidiendo
 * un dato para cobrar.
 */
/*
 * OJO con el selector: el `<input>` NO lleva la clase
 * `wc-block-components-text-input` —esa está en el ENVOLTORIO—, así que apuntar a
 * `.wc-block-components-text-input input` no pinta nada. Comprobado leyendo el DOM
 * montado: los inputs son elementos pelados dentro de
 * `.wc-block-components-address-form__nombre-del-campo`.
 *
 * Se apunta por tipo dentro de los contenedores de bloque, que es lo estable: los
 * nombres de los campos cambian según el país y la configuración de la tienda.
 */
body.trt-ficha .wp-block-woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body.trt-ficha .wp-block-woocommerce-checkout select,
body.trt-ficha .wp-block-woocommerce-checkout textarea,
body.trt-ficha .wp-block-woocommerce-cart input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body.trt-ficha .wp-block-woocommerce-cart select,
body.trt-ficha .wp-block-woocommerce-cart textarea {
    border: 1px solid var(--trt-ink-200);
    border-radius: 8px;
    background-color: var(--trt-bone);
    color: var(--trt-ink);
}

/* Los envoltorios traen su propio blanco: si no se apagan, el campo oscuro queda
   recuadrado en blanco. */
body.trt-ficha .wc-block-components-text-input,
body.trt-ficha .wc-block-components-select,
body.trt-ficha .wc-block-components-textarea {
    background-color: transparent;
}

body.trt-ficha .wp-block-woocommerce-checkout input:focus,
body.trt-ficha .wp-block-woocommerce-checkout select:focus,
body.trt-ficha .wp-block-woocommerce-cart input:focus {
    outline: 2px solid var(--trt-brand);
    outline-offset: 1px;
    border-color: var(--trt-brand);
}

/* La etiqueta flotante va dentro del campo: sobre fondo oscuro tiene que aclararse. */
body.trt-ficha .wc-block-components-text-input label,
body.trt-ficha .wc-block-components-select__label {
    color: var(--trt-ink-600);
}

body.trt-ficha .wp-block-woocommerce-checkout ::placeholder {
    color: var(--trt-ink-600);
    opacity: 1;
}

body.trt-ficha .wc-block-components-text-input label,
body.trt-ficha .wc-block-components-checkbox__label,
body.trt-ficha .wc-block-components-radio-control__label {
    color: var(--trt-ink-600);
}

body.trt-ficha .wc-block-components-checkbox__input {
    accent-color: var(--trt-brand);
}

/* --- Botones --- */

/*
 * El botón de finalizar compra venía en negro sobre página blanca. Sobre página negra
 * desaparecería, y además el CTA de la marca es el rojo: es el mismo botón que el
 * «Reservar estas fechas» de la ficha, así que se viste igual.
 */
/*
 * ⚠️ `background-color`, la forma LARGA, y con especificidad de sobra.
 *
 * La primera versión usaba `background: var(--trt-brand)` y no funcionaba: el
 * redondeo y la negrita sí se aplicaban, pero el color no. El motivo es el **orden de
 * carga**: `wc-blocks.css` se encola DESPUÉS de nuestras hojas, así que a igual
 * especificidad gana WooCommerce, y su regla usa el longhand `background-color`, que
 * pisa la parte de color de nuestro shorthand.
 *
 * Comprobado leyendo el estilo calculado: el botón salía en `rgb(17,17,17)` con
 * nuestro `border-radius: 12px` y nuestro `font-weight: 700` ya aplicados. Ese
 * detalle —unas propiedades sí y otras no— es la firma de este problema.
 */
body.trt-ficha button.wc-block-components-button.wp-element-button,
body.trt-ficha .wc-block-components-checkout-place-order-button,
body.trt-ficha .wc-block-cart__submit-button,
body.trt-ficha .wc-block-components-button:not(.wc-block-components-panel__button):not([disabled]) {
    border: 0;
    border-radius: var(--trt-radio);
    background-color: var(--trt-brand);
    background-image: none;
    color: #fff;
    font-weight: 700;
    transition: background-color .2s ease;
}

body.trt-ficha button.wc-block-components-button.wp-element-button:hover,
body.trt-ficha .wc-block-components-checkout-place-order-button:hover,
body.trt-ficha .wc-block-cart__submit-button:hover,
body.trt-ficha .wc-block-components-button:not(.wc-block-components-panel__button):not([disabled]):hover {
    background-color: var(--trt-brand-dark);
    color: #fff;
}

/* Un botón deshabilitado tiene que VERSE deshabilitado, pero seguir viéndose. */
body.trt-ficha .wc-block-components-button[disabled] {
    background-color: var(--trt-ink-200);
    color: var(--trt-ink-600);
}

body.trt-ficha .wc-block-components-button__text {
    color: inherit;
}

/* Los botones secundarios (aplicar cupón) se marcan con borde, no con relleno. */
body.trt-ficha .wc-block-components-totals-coupon__button {
    background: transparent;
    border: 1px solid var(--trt-ink-200);
    color: var(--trt-ink);
}

body.trt-ficha .wc-block-components-totals-coupon__button:hover {
    border-color: var(--trt-ink);
    background: transparent;
    color: var(--trt-ink);
}

/* --- Avisos --- */

body.trt-ficha .wc-block-components-notice-banner {
    border-radius: var(--trt-radio);
    background: var(--trt-superficie);
    color: var(--trt-ink);
}

body.trt-ficha .wc-block-components-notice-banner__content a {
    color: var(--trt-brand-texto);
}

/* --- Carrito vacío --- */

/*
 * El bloque de carrito vacío incluye una rejilla de «productos nuevos» con sus
 * títulos y precios. Con un solo vehículo en catálogo no aporta nada y encima sale en
 * los colores de fábrica, así que se viste lo mínimo para que se lea.
 */
body.trt-ficha .wc-block-cart__empty-cart__title {
    color: var(--trt-ink);
}

body.trt-ficha .wc-block-grid__product-title,
body.trt-ficha .wc-block-grid__product-price {
    color: var(--trt-ink);
}

body.trt-ficha .wc-block-grid__product-link {
    color: var(--trt-brand-texto);
}