/* Tabla de resumen del pedido (checkout / pagar pedido): el tema deja el
   texto en blanco sobre un fondo de fila también claro, ilegible salvo que
   se seleccione. Misma paleta clara que la ficha de alumno (fondo crema,
   texto marrón) en vez de negro, con esquinas redondeadas a juego con la
   caja de tarjeta de abajo. Varios selectores de respaldo porque la
   plantilla "pagar pedido" no usa la misma clase que la del checkout
   normal (woocommerce-checkout-review-order-table). */
#order_review,
#order_review th,
#order_review td,
#order_review tr,
.woocommerce-checkout table.shop_table,
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td,
.woocommerce-checkout table.shop_table tr {
    background: #decdae !important;
    color: #4f3b25 !important;
    border-color: #9d7d54 !important;
    font-size: 16px;
}

#order_review table,
.woocommerce-checkout table.shop_table {
    border-radius: 12px;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

#order_review .woocommerce-Price-amount,
.woocommerce-checkout table.shop_table .woocommerce-Price-amount {
    color: #4f3b25 !important;
}

/* Formulario de facturación/envío del checkout (Nombre, Apellidos,
   Dirección, Código postal, Ciudad, Teléfono...): las etiquetas flotantes
   del tema quedan en un gris casi blanco, invisibles sobre el fondo blanco
   de la propia caja de texto hasta que el campo tiene contenido. */
.woocommerce-checkout #customer_details label,
.woocommerce-checkout .woocommerce-billing-fields label,
.woocommerce-checkout .woocommerce-shipping-fields label {
    color: #6d5433 !important;
}

.woocommerce-checkout #customer_details input[type="text"],
.woocommerce-checkout #customer_details input[type="email"],
.woocommerce-checkout #customer_details input[type="tel"],
.woocommerce-checkout #customer_details select,
.woocommerce-checkout #customer_details textarea,
.woocommerce-checkout #customer_details .select2-selection__rendered {
    color: #222 !important;
}

.woocommerce-checkout #customer_details input::placeholder,
.woocommerce-checkout #customer_details textarea::placeholder {
    color: #9d7d54 !important;
    opacity: 1 !important;
}

/* La página "Finalizar compra" ahora contiene solo el bloque de Checkout de
   WooCommerce, sin ninguna fila/columna de WPBakery alrededor que aportara
   antes el margen lateral — sin esto, el formulario queda pegado a los
   bordes de la pantalla. Color base de texto legible para cualquier texto
   suelto del bloque (avisos, enlaces de "añadir apartamento"...) que no
   tenga ya su propio color más específico más abajo. */
.wp-block-woocommerce-checkout {
    max-width: 1140px;
    margin: 0 auto;
    padding: 32px 24px;
    box-sizing: border-box;
    color: #4f3b25;
}

/* Lo mismo que el bloque anterior, pero para el checkout por bloques de
   WooCommerce (clases .wc-block-* en vez de las clásicas #customer_details):
   mismo problema de etiquetas/texto casi blancos sobre fondo claro. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input textarea,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input,
.wp-block-woocommerce-checkout .wc-block-components-address-form input,
.wp-block-woocommerce-checkout .wc-block-components-country-input input,
.wp-block-woocommerce-checkout .wc-block-components-state-input input,
.wp-block-woocommerce-checkout select {
    color: #0a0000 !important;
    background-color: #e2d0b3 !important;
}

/* Títulos de sección, textos de opciones de pago, notas... van directamente
   sobre el fondo oscuro de la página (no sobre la caja clara de un campo),
   así que necesitan el color claro, al revés que la etiqueta de dentro del
   campo de abajo. */
.wp-block-woocommerce-checkout .wc-block-components-checkbox label,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__label,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
    color: #e2d0b3 !important;
}

/* Etiqueta flotante dentro de la propia caja clara del campo (p.ej.
   "Dirección de correo electrónico" superpuesta al fondo #e2d0b3 del input):
   tiene que quedarse oscura, si no sería invisible sobre ese mismo fondo. */
.wp-block-woocommerce-checkout .wc-block-components-text-input label {
    color: #4f3b25 !important;
}

.wp-block-woocommerce-checkout input::placeholder,
.wp-block-woocommerce-checkout textarea::placeholder {
    color: #9d7d54 !important;
    opacity: 1 !important;
}

/* Resto de avisos y textos sueltos sobre el fondo oscuro de la página: el
   aviso de "compra como invitado", el enlace de "añadir apartamento..." y
   todo el bloque de "Resumen del pedido" (título, nombre de producto,
   subtotal/total, enlace de cupones) — todos con el mismo problema de
   contraste que los títulos de sección de más arriba. */
.wp-block-woocommerce-checkout .wc-block-checkout__guest-checkout-notice,
.wp-block-woocommerce-checkout .wc-block-components-address-form__address_2-toggle,
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description,
.wp-block-woocommerce-checkout .wc-block-components-product-name,
.wp-block-woocommerce-checkout .wc-block-components-totals-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout .wc-block-components-panel,
.wp-block-woocommerce-checkout .wc-block-checkout__terms,
.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
    color: #e2d0b3 !important;
}

/* Caja del formulario de tarjeta PayComet: paleta crema/marrón a juego con
   el resto del plugin (ver ficha-alumno.css) en vez del recuadro
   blanco-y-negro por defecto de WooCommerce. También se limita el ancho a
   una anchura de tarjeta de crédito normal, más compacta. */
.payment_method_ep_paycomet,
.ep-paycomet-blocks-fields {
    max-width: 420px;
}

.payment_method_ep_paycomet .payment_box {
    padding: 20px !important;
    background: #f4e7d0 !important;
    border: 1px solid #9d7d54;
    border-radius: 12px;
}

.payment_method_ep_paycomet .payment_box::before {
    border-color: transparent transparent #f4e7d0 !important;
}

.ep-paycomet-desc {
    color: #e2d0b3 !important;
    font-size: 16px;
    margin-bottom: 16px;
}

.payment_method_ep_paycomet .form-row,
.ep-paycomet-blocks-fields .form-row {
    margin: 0 0 14px !important;
}

.payment_method_ep_paycomet label,
.ep-paycomet-blocks-fields label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #e2d0b3 !important;
}

.payment_method_ep_paycomet input[type="text"],
.payment_method_ep_paycomet select,
.ep-paycomet-blocks-fields input[type="text"],
.ep-paycomet-blocks-fields select {
    width: 100%;
    height: 38px;
    font-size: 14px;
    padding: 0 10px;
    box-sizing: border-box;
    background: #e2d0b3 !important;
    border: 1px solid #9d7d54;
    color: #0a0000 !important;
}

.payment_method_ep_paycomet #paycomet-pan,
.payment_method_ep_paycomet #paycomet-cvc2,
.ep-paycomet-blocks-fields #paycomet-pan,
.ep-paycomet-blocks-fields #paycomet-cvc2 {
    box-sizing: border-box;
    background: #f6ead2 !important;
    border: 1px solid #9d7d54 !important;
}

.payment_method_ep_paycomet .form-row-first,
.payment_method_ep_paycomet .form-row-last,
.ep-paycomet-blocks-fields .form-row-first,
.ep-paycomet-blocks-fields .form-row-last {
    width: 48%;
}

.payment_method_ep_paycomet .form-row-last,
.ep-paycomet-blocks-fields .form-row-last {
    float: right;
}

#paymentErrorMsg {
    font-size: 13px;
    margin-top: 4px;
}

/* El botón "Pagar por el pedido" de WooCommerce: por defecto lo deja el
   tema alineado a la derecha del todo en escritorio (funciona bien en
   móvil porque ahí el tema apila todo en columna). #payment suele llevar
   un layout flex del tema que empuja el botón a la derecha pase lo que
   pase con text-align/float en el propio .place-order, así que primero se
   anula ese flex y luego se centra y recolorea a juego con los botones del
   resto del plugin (marrón con dorado al pasar el ratón, ver
   .nectar-button en ficha-alumno.css). */
body.woocommerce-checkout #payment {
    display: block !important;
}

body.woocommerce-checkout .place-order {
    float: none !important;
    text-align: center !important;
    display: block !important;
    max-width: 420px !important;
    margin: 20px auto 0 !important;
}

body.woocommerce-checkout #place_order {
    float: none !important;
    margin: 0 auto !important;
    background: #6d5433 !important;
    border-color: #6d5433 !important;
    color: #fff !important;
    font-size: 16px !important;
    padding: 12px 28px !important;
    transition: background 0.2s ease, color 0.2s ease;
}

body.woocommerce-checkout #place_order:hover {
    background: #CEAF6D !important;
    border-color: #CEAF6D !important;
    color: #4f3b25 !important;
}