/*
 * Reviste las paginas de WooCommerce (tienda, producto, carrito, checkout, mi cuenta)
 * con la estetica tactica de Militest. No se sustituye el CSS por defecto de
 * WooCommerce (sigue resolviendo el layout responsive de tablas/columnas de forma
 * fiable); esto son overrides de color/tipografia/espaciado sobre esa base, igual
 * que login.css hace con wp-login.php.
 */

.woocommerce,
.woocommerce-page {
	color: #cbd5c4;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.woocommerce a {
	color: #a5bc6c;
}
.woocommerce a:hover {
	color: #c5d29d;
}

/* ---------- Avisos (exito / error / info) ---------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreview {
	background: #1c221e;
	border-top-color: #87a648;
	color: #f4f6f4;
	border-radius: 8px;
	padding: 1em 2em 1em 3.5em;
	box-shadow: none;
}
.woocommerce-error {
	border-top-color: #ea580c;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: #87a648;
}
.woocommerce-error::before {
	color: #ea580c;
}
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	background: #ea580c;
	color: #fff;
}

/* ---------- Formularios ---------- */
.woocommerce form .form-row label {
	color: #a2b19d;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.woocommerce form .form-row .required {
	color: #ff986a;
}

.woocommerce form .input-text,
.woocommerce form textarea,
.woocommerce form select,
.woocommerce-page form .input-text,
.woocommerce-page form select {
	background: #262b23;
	border: 1px solid #3a4336;
	border-radius: 6px;
	color: #f4f6f4;
	box-shadow: none;
	padding: 0.75em 0.85em;
}
.woocommerce form .input-text:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus {
	border-color: #87a648;
	outline: none;
	box-shadow: 0 0 0 1px #87a648;
}

/* Autorrelleno de Safari/Chrome (:-webkit-autofill): cuando el navegador reconoce
   un campo como "pais" o "provincia" (por el atributo autocomplete), pinta su
   PROPIO fondo por encima del elemento, fuera del alcance de "background" normal
   -- por eso ningun ajuste anterior (appearance, select2...) cambiaba nada. La
   unica forma real de anularlo es este truco de box-shadow inset gigante, que
   "rellena" el campo entero con el color del tema por debajo del overlay nativo. */
.woocommerce form input:-webkit-autofill,
.woocommerce form select:-webkit-autofill,
.woocommerce-page form input:-webkit-autofill,
.woocommerce-page form select:-webkit-autofill,
.select2-container--default .select2-selection--single:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #262b23 inset !important;
	-webkit-text-fill-color: #f4f6f4 !important;
	caret-color: #f4f6f4;
}

/* iOS Safari (y algunos Android) dibujan su propia "capsula" blanca redondeada
   detras de cualquier <select>, incluso con background/border-radius en CSS -- por
   eso se ven esquinas blancas asomando en Pais/Region y Provincia (form-edit-address
   clasico de "Mi cuenta", no pasa por los selects de WooCommerce Blocks que ya
   estaban resueltos mas abajo). -webkit-appearance/appearance:none apaga esa
   apariencia nativa; como tambien se lleva la flecha del sistema, se añade una
   propia a juego con el tema mediante background-image. */
.woocommerce form select,
.woocommerce-page form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a2b19d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85em center;
	background-size: 14px;
	padding-right: 2.5em;
}

/* Selector de pais/provincia (select2): WooCommerce esconde el <select> original
   (por eso el fix de arriba no le afecta -- esta oculto) y pinta su propio widget
   encima con estilo claro por defecto. El contenedor EXTERIOR que genera select2
   (.select2-container) no llevaba fondo propio: al no coincidir su forma exacta con
   las esquinas redondeadas de la caja interior que si esta revestida, el blanco de
   ese contenedor exterior asomaba por las 4 esquinas. overflow:hidden en la caja
   interior remata cualquier resto, sea cual sea la causa exacta. */
.select2-container {
	background: transparent;
}
.select2-container--default .select2-selection--single {
	background: #262b23;
	border: 1px solid #3a4336;
	border-radius: 6px;
	height: 42px;
	overflow: hidden;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #f4f6f4;
	line-height: 40px;
	padding-left: 0.85em;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px;
}
.select2-dropdown {
	background: #1c221e;
	border-color: #3a4336;
}
.select2-container--default .select2-results__option {
	color: #cbd5c4;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: #4b5320;
	color: #fff;
}
.select2-search--dropdown .select2-search__field {
	background: #262b23;
	border-color: #3a4336;
	color: #f4f6f4;
}

/* ---------- Botones (misma estetica que los CTA del resto del sitio) ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
	background: #ea580c;
	border: none;
	border-radius: 6px;
	color: #fff;
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.85em 1.5em;
	box-shadow: none;
	text-shadow: none;
	transition: background-color 0.15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: #c2410c;
	color: #fff;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order {
	background: #ea580c;
}

/* Botones secundarios (volver a la tienda, aplicar cupon, etc.): mas discretos. */
.woocommerce a.button.wc-backward,
.woocommerce input.button[name='apply_coupon'],
.woocommerce input.button[name='update_cart'] {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
}
.woocommerce a.button.wc-backward:hover,
.woocommerce input.button[name='apply_coupon']:hover,
.woocommerce input.button[name='update_cart']:hover {
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
}

/* ---------- Tablas (carrito, resumen del pedido, historial de pedidos) ---------- */
.woocommerce table.shop_table {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}
.woocommerce table.shop_table th {
	background: #262b23;
	color: #a2b19d;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.woocommerce table.shop_table td {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: #cbd5c4;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.woocommerce table.shop_table .product-name a {
	color: #f4f6f4;
	font-weight: 600;
}
.woocommerce table.shop_table .amount,
.woocommerce-Price-amount {
	color: #f4f6f4;
	font-weight: 700;
}
.woocommerce table.shop_table .order-total .amount {
	color: #a5bc6c;
	font-size: 1.1rem;
}

/* Vista de tarjeta en movil que ya aplica WooCommerce (data-title) por debajo de 768px */
@media (max-width: 768px) {
	.woocommerce table.shop_table td {
		border-top: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
}

/* ---------- Checkout ---------- */
.woocommerce-checkout #payment {
	background: #1c221e;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.woocommerce-checkout #payment div.payment_box {
	background: #262b23;
	color: #cbd5c4;
}
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #262b23;
}
.woocommerce-checkout #payment ul.payment_methods li label {
	color: #f4f6f4;
	font-weight: 600;
}
.woocommerce-checkout-review-order-table {
	background: transparent;
}

/* ---------- Carrito y checkout POR BLOQUES (Cart/Checkout blocks, React) ----------
   /carrito/ y /finalizar-compra/ en esta instalacion no usan el checkout clasico de
   arriba: son los bloques nativos de WooCommerce (paginas 13 y 14), con su propio
   juego de clases wc-block-*. Los selectores de mas arriba (#customer_details,
   table.shop_table, etc.) no existen en su DOM, de ahi este bloque aparte. */
.wc-block-checkout,
.wc-block-cart {
	color: #cbd5c4;
}

.wc-block-components-title,
.wc-block-components-checkout-step__title {
	color: #fff !important;
}
.wc-block-components-checkout-step__description {
	color: #a2b19d;
}

.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-components-combobox input,
.wc-block-components-textarea textarea,
.wc-block-components-select select,
.wc-blocks-components-select__select {
	background: #262b23 !important;
	border-color: #3a4336 !important;
	color: #f4f6f4 !important;
	border-radius: 6px !important;
}

/* El texto del valor elegido (p.ej. "España") y el de la opcion "Seleccionar..."
   se seguian viendo en el color ambar que WooCommerce Blocks usa por defecto para
   marcar visualmente un campo obligatorio -- el "color" de la regla de arriba no
   tenia suficiente prioridad para pisarlo. Se refuerza con mas especificidad y se
   cubren tambien las <option> de dentro del propio <select>. */
select.wc-blocks-components-select__select,
select.wc-blocks-components-select__select option {
	color: #f4f6f4 !important;
}

/* Encontrado con el inspector: el <select> de Pais/Region y Provincia
   (.wc-blocks-components-select__select) esta bien revestido por la regla de
   arriba, pero vive DENTRO de un contenedor propio que WooCommerce Blocks pinta
   con su borde por defecto en gris muy claro (rgb(229,231,235), practicamente
   blanco sobre el tema oscuro) -- ese contenedor nunca se habia tocado en los
   intentos anteriores, de ahi que nada de lo hecho al <select> cambiara nada. */
.wc-blocks-components-select__container {
	border-color: #3a4336 !important;
	border-radius: 6px !important;
}

/* Pais/Region y Provincia usan un componente "combobox" (no un <select> normal),
   que en esta instalacion se ve con un borde rojo/naranja de "campo invalido" --
   incluso ya con un valor valido elegido, lo que descarta que sea una validacion
   real en curso. Se neutraliza cualquier variante de esa marca de invalido
   (clase propia del componente, o el atributo aria-invalid que pone WooCommerce
   Blocks) al mismo gris que el resto de campos, sea cual sea el elemento exacto
   que la esta pintando. */
.wc-block-checkout .wc-block-components-combobox,
.wc-block-checkout .wc-block-components-combobox-control,
.wc-block-checkout .wc-block-components-combobox__container,
.wc-block-checkout [aria-invalid="true"],
.wc-block-checkout .wc-block-components-text-input.has-error input,
.wc-block-checkout .wc-block-components-validation-error {
	border-color: #3a4336 !important;
	box-shadow: none !important;
	outline-color: #3a4336 !important;
}

/* El desplegable de pais/region (select nativo del navegador, clase real en la
   version actual de WooCommerce Blocks: wc-blocks-components-select__select) no se
   puede repintar con CSS normal -- el popup de opciones lo dibuja el propio
   sistema operativo, no la pagina. Sin esto se abre en blanco y "rompe" las
   esquinas redondeadas y oscuras del campo cerrado. color-scheme le pide al
   navegador que use su tema oscuro nativo para ese control, evitando el flash
   blanco (Chrome/Edge/Firefox recientes; en el resto no cambia nada). */
.wc-blocks-components-select__select,
.wc-block-components-address-form select,
.wc-block-components-select select {
	color-scheme: dark;
}

/* Las "esquinas blancas" que se ven al abrir el select de pais/provincia no son el
   popup en si (ya resuelto arriba con color-scheme): es el anillo de foco por
   defecto del navegador, que dibuja un contorno claro y cuadrado que sobresale por
   las esquinas redondeadas de la caja en cuanto el select recibe el foco (p.ej. al
   abrirlo). Se sustituye por el mismo anillo verde que ya usan el resto de campos
   del checkout clasico (.woocommerce form .input-text:focus). */
.wc-blocks-components-select__select:focus,
.wc-block-components-address-form select:focus,
.wc-block-components-select select:focus {
	outline: none !important;
	border-color: #87a648 !important;
	box-shadow: 0 0 0 1px #87a648 !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label {
	color: #a2b19d !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-combobox.is-active label {
	background: #262b23;
}

.wc-block-components-radio-control__label,
.wc-block-components-checkbox__label,
.wc-block-components-payment-method-label {
	color: #f4f6f4;
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	background: #262b23;
	border-color: #3a4336 !important;
}
.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked {
	border-color: #87a648 !important;
}

.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-cart-items,
.wc-block-components-totals-wrapper {
	border-color: rgba(255, 255, 255, 0.1) !important;
}
.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: #cbd5c4;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: #a5bc6c;
	font-weight: 700;
}
.wc-block-components-product-name {
	color: #f4f6f4;
}
.wc-block-components-product-metadata,
.wc-block-components-formatted-money-amount {
	color: #a2b19d;
}

.wc-block-components-notice-banner {
	background: #1c221e;
	border-color: #3a4336;
	color: #f4f6f4;
	border-radius: 8px;
}
.wc-block-components-notice-banner.is-success {
	border-left-color: #87a648;
}
.wc-block-components-notice-banner.is-error {
	border-left-color: #ea580c;
}

/* Boton principal (Finalizar compra / Ir a pagar): mismo estilo que el resto de CTA. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-components-button.wp-element-button {
	background: #ea580c !important;
	border: none !important;
	border-radius: 6px !important;
	color: #fff !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-button.wp-element-button:hover {
	background: #c2410c !important;
}

@media (max-width: 640px) {
	.wc-block-checkout,
	.wc-block-cart {
		font-size: 0.9rem;
	}
}
#order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 {
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 1em;
}

/* ---------- Mi cuenta ---------- */
.woocommerce-MyAccount-navigation ul {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	overflow: hidden;
}
.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.9em 1.2em;
	color: #cbd5c4;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a {
	background: #262b23;
	color: #a5bc6c;
	font-weight: 700;
}
.woocommerce-MyAccount-navigation li a:hover {
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
}
.woocommerce-MyAccount-content {
	margin-top: 2rem;
}
@media (min-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 26%;
	}
	.woocommerce-account .woocommerce-MyAccount-content {
		float: right;
		width: 70%;
		margin-top: 0;
	}
}

/* ---------- Mi cuenta > Suscripciones (WP Swings) ----------
   El listado de /mi-cuenta/wps_subscriptions/ usa una <table> propia del plugin sin la
   clase .shop_table (a diferencia de la pagina de detalle de una suscripcion, que si la
   lleva y por tanto ya hereda el bloque "Tablas" de arriba). Ademas, el propio CSS del
   plugin (subscriptions-for-woocommerce-public.css) fija ".wps_sfw_account_additional_wrap
   table th { color: #000 }" -- negro explicito, pensado para un fondo claro -- y esa clase
   va en el MISMO <div> que .wps_sfw_account_wrap con mas especificidad (dos clases) que
   cualquier regla nuestra con una sola, asi que gana ella. Se iguala aqui la especificidad
   y se anade !important, igual que ya hace el propio plugin en casos equivalentes (ver
   ".oceanwp-theme .wps_sfw_subscription_inner_wrapper .amount" en su mismo CSS). */
.wps_sfw_account_wrap.wps_sfw_account_additional_wrap table,
.wps_sfw_account_wrap table {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}
.wps_sfw_account_additional_wrap table th,
.wps_sfw_account_wrap th {
	background: #262b23 !important;
	color: #a2b19d !important;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.9em 1em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.wps_sfw_account_additional_wrap table td,
.wps_sfw_account_wrap td {
	color: #cbd5c4 !important;
	padding: 0.9em 1em;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.wps_sfw_account_wrap td a {
	color: #a5bc6c !important;
}
.wps_sfw_account_wrap .woocommerce-orders-table__cell-order-status span {
	background: #1c3a1c;
	color: #a5bc6c !important;
}
.wps_sfw_account_wrap .wps_sfw_expired span {
	background: #3a2018;
	color: #ff986a !important;
}
.wps_sfw_account_wrap .wps_sfw_cancelled span {
	background: #3a2a18;
	color: #ff986a !important;
}
.wps_sfw_account_wrap .wps_sfw_on-hold span,
.wps_sfw_account_wrap .wps_sfw_paused span {
	background: #2a3238;
	color: #cbd5c4 !important;
}

/* Flecha "Volver" de la pagina de detalle de una suscripcion: el plugin dibuja el SVG con
   fill="#000000" fijo en el propio markup (no se puede pisar con "color"), invisible sobre
   el fondo oscuro. currentColor + un color de texto claro en el enlace lo arregla. El texto
   "Back" en si (tambien fijo, sin pasar por ninguna funcion de traduccion) se corrige por
   JS en account-fixes.js, no se puede tocar por CSS. */
.wps_sfw_sub_detail_back {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: #cbd5c4 !important;
	margin-bottom: 1em;
}
.wps_sfw_sub_detail_back svg path {
	fill: currentColor !important;
}
.wps_sfw_sub_detail_back:hover {
	color: #fff !important;
}

/* Pagina de detalle de una suscripcion (/mi-cuenta/ -> "Show"): el propio CSS del plugin
   pinta las filas pares de la tabla en gris claro (#f8f8f8) a modo de rayado "zebra" --
   sobre esas filas, el texto claro que fijamos arriba para el resto del sitio se queda
   descolorido. Se anula el rayado (todo oscuro, como el resto de tablas) en vez de
   mantener dos colores de texto distintos segun la fila. */
.wps_sfw_details_wrap table.shop_table tr:nth-of-type(even),
.wps_sfw_account_wrap table tbody tr:nth-of-type(even) {
	background: transparent !important;
}
.wps_sfw_details_wrap table.shop_table tr,
.wps_sfw_account_wrap table tbody tr {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.wps_sfw_account_additional_wrap table td:first-of-type {
	color: #a2b19d !important;
	font-weight: 600 !important;
}

/* Titulo "Detalles de la suscripcion" / "Detalles del pedido de suscripcion": el plugin
   lo pinta como una caja clara suelta (fondo #f3f3f3, texto negro), sin relacion visual
   con el resto de la tarjeta oscura que la envuelve. */
.wps_sfw_details_wrap h3 {
	color: #fff !important;
	background: #1c221e !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ---------- Producto individual ---------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: #fff;
	font-size: 1.75rem;
	font-weight: 800;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: #a2b19d;
}
.woocommerce div.product form.cart .quantity input.qty {
	background: #262b23;
	border: 1px solid #3a4336;
	color: #f4f6f4;
	border-radius: 6px;
	height: 100%;
}

/* El formulario de suscripcion al boletin (Hostinger Reach) se inyecta justo debajo
   del campo de email en "Informacion de contacto" del checkout, pegado a él porque
   solo trae su propio margin-top de 8px (pensado para separar sus campos internos,
   no para separarse del bloque de arriba). Se le da más aire respecto al email. */
.hostinger-reach-block-subscription-form {
	margin-top: 24px;
}

/* ---------- Responsive general ---------- */
@media (max-width: 640px) {
	.woocommerce-checkout #payment,
	.woocommerce table.shop_table {
		font-size: 0.9rem;
	}
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		width: 100%;
		text-align: center;
	}
}