/*
Theme Name:   Twidoo Base
Theme URI:    https://twidoo.com/
Description:  Tema hijo de Hello Elementor para proyectos Twidoo. Incluye variables CSS de marca, reset y tipografía base.
Author:       Twidoo
Author URI:   https://twidoo.com/
Template:     hello-elementor
Version:      1.0.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twidoo-base
Tags:         elementor, child-theme, twidoo
*/

/* ==========================================================================
   1. Variables CSS de marca
   ========================================================================== */

:root {
	/* Colores */
	--twidoo-primary:   #2563EB;
	--twidoo-secondary: #1E40AF;
	--twidoo-accent:    #F59E0B;
	--twidoo-text:      #111827;
	--twidoo-bg:        #ffffff;

	/* Tipografías */
	--twidoo-font-primary:   'Inter', sans-serif;
	--twidoo-font-secondary: 'Inter', sans-serif;
}

/* ==========================================================================
   2. Reset de estilos base de WordPress
   ========================================================================== */

/* Box-sizing global. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Reset de márgenes y paddings que WordPress/temas suelen heredar. */
html,
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
figure, blockquote,
dl, dd {
	margin: 0;
	padding: 0;
}

/* Listas sin viñetas por defecto en navegación y bloques estructurales. */
nav ul,
nav ol,
.site-header ul,
.site-footer ul {
	list-style: none;
}

/* Quitar borde de imágenes y limitar a contenedor. */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Eliminar el espacio extra de WordPress bajo imágenes alineadas. */
.alignleft,
.alignright,
.aligncenter,
.alignnone {
	margin-bottom: 0;
}

/* Eliminar estilos por defecto del editor clásico que rompen layouts. */
.wp-block-image figure {
	margin: 0;
}

/* Botones y campos: heredar tipografía. */
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* Enlaces sin subrayado por defecto; el subrayado se aplica donde corresponda. */
a {
	color: var(--twidoo-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--twidoo-secondary);
}

/* ==========================================================================
   3. Tipografía base
   ========================================================================== */

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--twidoo-font-primary);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--twidoo-text);
	background-color: var(--twidoo-bg);
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--twidoo-font-secondary);
	color: var(--twidoo-text);
	line-height: 1.2;
	font-weight: 700;
	margin-bottom: 0.5em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
	margin-bottom: 1em;
}

strong, b {
	font-weight: 700;
}

em, i {
	font-style: italic;
}

small {
	font-size: 0.875em;
}

blockquote {
	border-left: 4px solid var(--twidoo-accent);
	padding-left: 1rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: #4b5563;
}

code,
pre {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.9em;
}

pre {
	background: #f3f4f6;
	padding: 1rem;
	border-radius: 4px;
	overflow-x: auto;
}

/* ==========================================================================
   4. Estados de body añadidos por el tema
   ========================================================================== */

/* Reservado para personalizaciones por contexto (.is-home, .is-shop, etc.). */

/* ==========================================================================
   5. Dashboard personalizado de Mi Cuenta — Twidoo
   ========================================================================== */

.twidoo-dashboard {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Saludo */
.twidoo-dashboard__greeting h2 {
	font-size: 28px;
	font-weight: 700;
	color: #1a1f2e;
	margin: 0 0 8px;
	line-height: 1.2;
}

.twidoo-dashboard__greeting p {
	font-size: 15px;
	color: #6b7280;
	margin: 0;
}

/* Grid de stats */
.twidoo-dashboard__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.twidoo-stat {
	background: #f9fafb;
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	padding: 24px 20px;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.twidoo-stat:hover {
	transform: translateY(-2px);
	border-color: #E8187A;
	box-shadow: 0 8px 20px rgba(232, 24, 122, 0.08);
}

.twidoo-stat__value {
	font-size: 32px;
	font-weight: 800;
	color: #1a1f2e;
	line-height: 1.1;
	margin-bottom: 6px;
}

.twidoo-stat__label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #6b7280;
	font-weight: 500;
}

/* Stat destacado (gradiente rosa) */
.twidoo-stat--accent {
	background: linear-gradient(135deg, #E8187A 0%, #c4145e 100%);
	border-color: transparent;
	color: #ffffff;
}

.twidoo-stat--accent .twidoo-stat__value,
.twidoo-stat--accent .twidoo-stat__label {
	color: #ffffff;
}

.twidoo-stat--accent:hover {
	border-color: transparent;
	box-shadow: 0 8px 24px rgba(232, 24, 122, 0.3);
}

/* Secciones */
.twidoo-dashboard__section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.twidoo-dashboard__section-title {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	color: #1a1f2e;
	margin: 0;
}

/* Accesos rápidos */
.twidoo-quick-links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.twidoo-quick-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #ffffff;
	border: 2px solid #f0f0f0;
	border-radius: 12px;
	padding: 20px 12px;
	min-height: 110px;
	color: #1a1f2e;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.twidoo-quick-link:hover,
.twidoo-quick-link:focus {
	border-color: #E8187A;
	color: #E8187A;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(232, 24, 122, 0.1);
}

.twidoo-quick-link__icon {
	font-size: 32px;
	line-height: 1;
}

.twidoo-quick-link__label {
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

/* Tarjeta de soporte WhatsApp */
.twidoo-support-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: linear-gradient(135deg, #1a1f2e 0%, #2d3548 100%);
	border-radius: 16px;
	padding: 28px;
	color: #ffffff;
}

.twidoo-support-card__text {
	flex: 1;
}

.twidoo-support-card__text strong {
	display: block;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 4px;
	color: #ffffff;
}

.twidoo-support-card__text p {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

.twidoo-support-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #25D366;
	color: #ffffff;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 24px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.twidoo-support-card__button:hover,
.twidoo-support-card__button:focus {
	background: #1faa54;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

/* Responsive móvil */
@media (max-width: 768px) {
	.twidoo-dashboard__stats {
		grid-template-columns: 1fr;
	}

	.twidoo-quick-links {
		grid-template-columns: repeat(2, 1fr);
	}

	.twidoo-support-card {
		flex-direction: column;
		text-align: center;
	}

	.twidoo-dashboard__greeting h2 {
		font-size: 22px;
	}
}

/* Forzar legibilidad del texto sobre el fondo oscuro del banner de soporte. */
.twidoo-support-card__text strong,
.twidoo-support-card__text h4 {
	color: #ffffff !important;
	font-size: 18px;
	font-weight: 700;
	display: block;
	margin: 0 0 6px;
}

.twidoo-support-card__text p {
	color: rgba(255, 255, 255, 0.7) !important;
	margin: 0;
	line-height: 1.5;
}

/* ==========================================================================
   6. Mi Cuenta WooCommerce — Secciones internas
      (Pedidos, Descargas, Direcciones, Detalles)
   ==========================================================================
   Variables de marca utilizadas:
     - Rosa principal: #E8187A
     - Rosa hover:     #c4145e
     - Oscuro:         #1a1f2e
     - Gris texto:     #6b7280
     - Borde sutil:    #f0f0f0
     - Fondo card:     #ffffff
     - Fondo soft:     #f9fafb
   ========================================================================== */

/* 6.1 Avisos / messages de WooCommerce
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-notice {
	background: #f9fafb;
	border: none;
	border-left: 4px solid #E8187A;
	border-radius: 12px;
	padding: 20px 24px;
	font-size: 15px;
	color: #1a1f2e;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* Quitar el icono ::before default de WooCommerce. */
.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-notice::before {
	content: none !important;
	display: none !important;
}

/* Botón dentro de un mensaje (ej: "Explorar productos"). */
.woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-MyAccount-content .woocommerce-message .button,
.woocommerce-MyAccount-content .woocommerce-notice .button {
	background: #E8187A;
	color: #ffffff;
	border-radius: 8px;
	padding: 12px 24px;
	font-weight: 600;
	font-size: 14px;
	border: none;
	transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.woocommerce-MyAccount-content .woocommerce-info .button:hover,
.woocommerce-MyAccount-content .woocommerce-message .button:hover,
.woocommerce-MyAccount-content .woocommerce-notice .button:hover {
	background: #c4145e;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(232, 24, 122, 0.3);
}

/* 6.2 Títulos del área de Mi Cuenta
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content h2 {
	font-size: 22px;
	font-weight: 700;
	color: #1a1f2e;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #f0f0f0;
}

.woocommerce-MyAccount-content h3 {
	font-size: 16px;
	font-weight: 700;
	color: #1a1f2e;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 32px 0 16px;
}

/* 6.3 Links del área de Mi Cuenta
   (no aplica a la navegación, ya estilizada en el sidebar)
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content a {
	color: #E8187A;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.woocommerce-MyAccount-content a:hover,
.woocommerce-MyAccount-content a:focus {
	color: #c4145e;
}

/* 6.4 Inputs y form fields
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
	width: 100%;
	background: #f9fafb;
	border: 2px solid #f0f0f0;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 15px;
	color: #1a1f2e;
	transition: all 0.25s ease;
}

.woocommerce-MyAccount-content input[type="text"]:focus,
.woocommerce-MyAccount-content input[type="email"]:focus,
.woocommerce-MyAccount-content input[type="password"]:focus,
.woocommerce-MyAccount-content input[type="tel"]:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
	border-color: #E8187A;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(232, 24, 122, 0.1);
	outline: none;
}

/* 6.5 Labels de formularios
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content label {
	display: block;
	color: #1a1f2e;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
}

/* 6.6 Botones
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
	background: #E8187A;
	color: #ffffff;
	border-radius: 8px;
	padding: 12px 28px;
	font-weight: 600;
	font-size: 14px;
	border: none;
	cursor: pointer;
	transition: all 0.25s ease;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .button:focus,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content button[type="submit"]:focus {
	background: #c4145e;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(232, 24, 122, 0.3);
}

/* 6.7 Direcciones — reset de columnas WC + cards + contenido
   ------------------------------------------------------------------------
   WooCommerce envuelve las direcciones en .u-columns / .col2-set / .col-1 /
   .col-2 con widths fijos (~48 %) y floats que rompen el grid y producen
   columnas estrechas con texto vertical. Se neutralizan aquí para forzar
   un layout de dos columnas iguales con CSS Grid. Los !important son
   necesarios para sobrescribir los selectores de woocommerce.css.
   ------------------------------------------------------------------------ */

/* Reset de columnas WooCommerce que rompen el grid. */
.woocommerce-MyAccount-content .u-columns,
.woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-MyAccount-content .col2-set {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 24px !important;
	margin-top: 24px;
	width: 100% !important;
	float: none !important;
}

.woocommerce-MyAccount-content .u-columns::before,
.woocommerce-MyAccount-content .u-columns::after,
.woocommerce-MyAccount-content .col2-set::before,
.woocommerce-MyAccount-content .col2-set::after {
	display: none !important;
}

.woocommerce-MyAccount-content .u-column1,
.woocommerce-MyAccount-content .u-column2,
.woocommerce-MyAccount-content .col-1,
.woocommerce-MyAccount-content .col-2 {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Card de dirección — bloque único, padding interno consistente.
   `overflow: hidden` confina cualquier hijo con margin negativo heredado
   y evita que el border-bottom del header se extienda fuera del padding. */
.woocommerce-MyAccount-content .woocommerce-Address {
	background: #ffffff !important;
	border: 2px solid #f0f0f0 !important;
	border-radius: 12px !important;
	padding: 24px !important;
	transition: all 0.25s ease;
	width: 100% !important;
	float: none !important;
	display: block !important;
	box-sizing: border-box !important;
	overflow: hidden;
}

.woocommerce-MyAccount-content .woocommerce-Address:hover {
	border-color: #E8187A !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}

/* Pseudo-elementos heredados de woocommerce.css que generan huecos
   visuales dentro de la card (clearfix). Anulados. */
.woocommerce-MyAccount-content .woocommerce-Address::before,
.woocommerce-MyAccount-content .woocommerce-Address::after,
.woocommerce-MyAccount-content .woocommerce-Address-title::before,
.woocommerce-MyAccount-content .woocommerce-Address-title::after {
	display: none !important;
	content: none !important;
}

/* Header interno de cada card (título + link "Editar" en línea).
   Sin padding lateral propio: respeta el padding 24px de la card padre,
   por lo que el border-bottom queda dentro del área de contenido. */
.woocommerce-MyAccount-content .woocommerce-Address > .woocommerce-Address-title,
.woocommerce-MyAccount-content .woocommerce-Address > header.title,
.woocommerce-MyAccount-content .woocommerce-Address > header.woocommerce-Address-title {
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid #f0f0f0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 0 14px 0 !important;
	margin: 0 0 18px 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

/* H3 del header — fuerza el tamaño correcto sobreescribiendo el H3
   global de la sección 6.2 (uppercase + letter-spacing) y cualquier
   tamaño heredado de Hello Elementor. */
.woocommerce-MyAccount-content .woocommerce-Address h3,
.woocommerce-MyAccount-content .woocommerce-Address > .woocommerce-Address-title h3,
.woocommerce-MyAccount-content .woocommerce-Address > header.title h3,
.woocommerce-MyAccount-content header.woocommerce-Address-title h3 {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #1a1f2e !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Anular line-height heredado en cualquier hijo directo del header
   para evitar espacios verticales fantasma sobre el divisor. */
.woocommerce-MyAccount-content .woocommerce-Address > .woocommerce-Address-title > *,
.woocommerce-MyAccount-content .woocommerce-Address > header.title > * {
	line-height: 1.3 !important;
}

/* Link "Editar" — color rosa, uppercase, sin shrink dentro del flex. */
.woocommerce-MyAccount-content .woocommerce-Address-title .edit,
.woocommerce-MyAccount-content .woocommerce-Address a.edit {
	color: #E8187A !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	text-decoration: none !important;
	transition: color 0.25s ease;
	flex-shrink: 0;
	white-space: nowrap;
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover,
.woocommerce-MyAccount-content .woocommerce-Address a.edit:hover {
	color: #c4145e !important;
}

/* Texto de la dirección — sin caja propia, sin margen-top fantasma. */
.woocommerce-MyAccount-content .woocommerce-Address address {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	color: #6b7280 !important;
	font-style: normal !important;
	line-height: 1.7 !important;
	font-size: 14px !important;
	white-space: normal;
	word-break: normal;
	overflow-wrap: normal;
}

/* Responsive móvil — colapsar a una sola columna. */
@media (max-width: 768px) {
	.woocommerce-MyAccount-content .u-columns,
	.woocommerce-MyAccount-content .woocommerce-Addresses,
	.woocommerce-MyAccount-content .col2-set {
		grid-template-columns: 1fr !important;
	}
}

/* 6.8 Checkboxes y radios
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content input[type="checkbox"],
.woocommerce-MyAccount-content input[type="radio"] {
	accent-color: #E8187A;
	cursor: pointer;
}

/* 6.9 Mensaje informativo de cabecera (primer párrafo del contenido)
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content > p:first-of-type {
	color: #6b7280;
	font-size: 15px;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f0f0f0;
}

/* 6.10 Responsive móvil — área de Mi Cuenta
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
	.woocommerce-MyAccount-content {
		padding: 24px;
	}

	.woocommerce-MyAccount-content h2 {
		font-size: 20px;
	}
}

/* ==========================================================================
   7. Login y Registro de WooCommerce — Twidoo
   ==========================================================================
   Estilos para el contenedor #customer_login que renderiza WooCommerce en
   /mi-cuenta/ cuando el usuario no está autenticado. Layout de 2 columnas
   (Login | Registro) con cards independientes y formularios armonizados
   al sistema visual del dashboard.

   Variables de marca utilizadas:
     - Rosa principal: #E8187A
     - Rosa hover:     #c4145e
     - Oscuro:         #1a1f2e
     - Gris texto:     #6b7280
     - Borde sutil:    #f0f0f0
     - Fondo card:     #ffffff
     - Fondo soft:     #f9fafb
   ========================================================================== */

/* 7.1 Contenedor principal — grid de 2 columnas
   ------------------------------------------------------------------------ */
#customer_login {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	max-width: 1100px;
	margin: 40px auto;
	width: 100% !important;
	float: none !important;
}

/* Neutralizar clearfix y floats heredados de woocommerce.css. */
#customer_login::before,
#customer_login::after {
	display: none !important;
	content: none !important;
}

#customer_login.u-columns,
#customer_login.col2-set {
	display: grid !important;
	width: 100% !important;
	float: none !important;
}

#customer_login .u-column1,
#customer_login .u-column2,
#customer_login .col-1,
#customer_login .col-2 {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* 7.2 Cada columna como card independiente
   ------------------------------------------------------------------------ */
#customer_login .u-column1,
#customer_login .u-column2 {
	background: #ffffff;
	border: 2px solid #f0f0f0;
	border-radius: 16px;
	padding: 40px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	transition: all 0.25s ease;
	box-sizing: border-box;
}

#customer_login .u-column1:hover,
#customer_login .u-column2:hover {
	border-color: rgba(232, 24, 122, 0.25);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

/* 7.3 Títulos de columna
   ------------------------------------------------------------------------ */
#customer_login h2 {
	font-size: 24px;
	font-weight: 800;
	color: #1a1f2e;
	margin: 0 0 8px;
	padding: 0;
	border: none;
	letter-spacing: 0;
	text-transform: none;
}

/* Subtítulo opcional: si WooCommerce o el tema añaden un <p> directamente
   tras el h2, lo estilizamos como descripción secundaria. */
#customer_login h2 + p {
	color: #6b7280;
	font-size: 14px;
	margin: 0 0 24px;
}

/* 7.4 Form rows
   ------------------------------------------------------------------------ */
#customer_login .woocommerce-form-row,
#customer_login .form-row {
	margin-bottom: 20px;
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
}

/* 7.5 Labels
   ------------------------------------------------------------------------ */
#customer_login label {
	display: block;
	color: #1a1f2e;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
}

#customer_login label .required,
#customer_login label abbr.required {
	color: #E8187A;
	text-decoration: none;
	border: none;
	margin-left: 2px;
}

/* 7.6 Inputs
   ------------------------------------------------------------------------ */
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"] {
	width: 100%;
	background: #f9fafb;
	border: 2px solid #f0f0f0;
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 15px;
	color: #1a1f2e;
	transition: all 0.25s ease;
	box-sizing: border-box;
	font-family: inherit;
}

#customer_login input[type="text"]:focus,
#customer_login input[type="email"]:focus,
#customer_login input[type="password"]:focus {
	border-color: #E8187A;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(232, 24, 122, 0.1);
	outline: none;
}

/* 7.7 Botones de submit
   ------------------------------------------------------------------------ */
#customer_login button.woocommerce-button,
#customer_login button[name="login"],
#customer_login button[name="register"] {
	background: #E8187A !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 14px 28px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	cursor: pointer;
	width: 100%;
	margin-top: 8px;
	text-transform: none;
	letter-spacing: 0;
	transition: all 0.25s ease;
}

#customer_login button.woocommerce-button:hover,
#customer_login button[name="login"]:hover,
#customer_login button[name="register"]:hover {
	background: #c4145e !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(232, 24, 122, 0.25);
}

/* 7.8 Checkbox "Recordarme"
   ------------------------------------------------------------------------ */
#customer_login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #6b7280;
	font-size: 14px;
	cursor: pointer;
	margin: 16px 0;
}

#customer_login .woocommerce-form-login__rememberme input[type="checkbox"] {
	accent-color: #E8187A;
	cursor: pointer;
}

/* 7.9 Link "¿Olvidaste tu contraseña?"
   ------------------------------------------------------------------------ */
#customer_login .woocommerce-LostPassword a,
#customer_login p.lost_password a {
	color: #E8187A !important;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.25s ease;
}

#customer_login .woocommerce-LostPassword a:hover,
#customer_login p.lost_password a:hover {
	color: #c4145e !important;
	text-decoration: underline;
}

/* 7.10 Texto legal de registro (Privacy Policy)
   ------------------------------------------------------------------------ */
#customer_login .woocommerce-privacy-policy-text {
	color: #6b7280;
	font-size: 13px;
	line-height: 1.6;
	margin: 16px 0;
	padding: 12px 16px;
	background: #f9fafb;
	border-radius: 8px;
}

#customer_login .woocommerce-privacy-policy-text a {
	color: #E8187A;
	font-weight: 600;
	text-decoration: none;
}

#customer_login .woocommerce-privacy-policy-text a:hover {
	color: #c4145e;
	text-decoration: underline;
}

/* 7.11 Mensajes de error / éxito
   ------------------------------------------------------------------------ */
.woocommerce > .woocommerce-error,
.woocommerce-account .woocommerce-error {
	background: #fef2f2 !important;
	border: none !important;
	border-left: 4px solid #ef4444 !important;
	color: #991b1b !important;
	border-radius: 8px !important;
	padding: 16px 20px !important;
	list-style: none !important;
	margin-bottom: 24px !important;
}

.woocommerce > .woocommerce-error::before,
.woocommerce-account .woocommerce-error::before {
	display: none !important;
	content: none !important;
}

.woocommerce > .woocommerce-message,
.woocommerce-account .woocommerce-message {
	background: #f0fdf4 !important;
	border: none !important;
	border-left: 4px solid #22c55e !important;
	color: #166534 !important;
	border-radius: 8px !important;
	padding: 16px 20px !important;
}

/* 7.12 Toggle de visibilidad de contraseña
   (controlado por twidoo_password_toggle() en functions.php)
   ------------------------------------------------------------------------ */

/* Ocultar el toggle nativo del navegador (Edge/Safari/Chrome) en inputs
   password. Sin esto, el icono propio de cada UA se solapa con el botón
   custom .twidoo-pwd-toggle y rompe la alineación visual. */
#customer_login input[type="password"]::-ms-reveal,
#customer_login input[type="password"]::-ms-clear,
#customer_login input[type="password"]::-webkit-credentials-auto-fill-button,
#customer_login input[type="password"]::-webkit-strong-password-auto-fill-button,
#customer_login input[type="password"]::-webkit-contacts-auto-fill-button {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	position: absolute !important;
	right: 0 !important;
}

.twidoo-pwd-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.twidoo-pwd-wrapper input[type="password"],
.twidoo-pwd-wrapper input[type="text"] {
	padding-right: 48px !important;
}

.twidoo-pwd-toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 18px;
	padding: 4px 8px;
	color: #6b7280;
	transition: color 0.25s ease;
	line-height: 1;
}

.twidoo-pwd-toggle:hover {
	color: #1a1f2e;
}

/* 7.13 Responsive móvil
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
	#customer_login {
		grid-template-columns: 1fr !important;
		gap: 20px;
		padding: 0 16px;
	}

	#customer_login .u-column1,
	#customer_login .u-column2 {
		padding: 28px 24px;
	}

	#customer_login h2 {
		font-size: 22px;
	}
}

/* 7.14 Neutralizar el wrapper interno de WooCommerce + subtítulo de marca
   ------------------------------------------------------------------------
   WooCommerce envuelve cada formulario en un <form class="woocommerce-form
   login"> (o `register`) que en algunos temas trae border, padding y
   background propios. Al estar dentro de la card de columna (7.2),
   produce el efecto visual de "card dentro de card". Lo aplanamos. */

#customer_login .woocommerce-form,
#customer_login form.login,
#customer_login form.register {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* Subtítulo descriptivo bajo cada H2, inyectado por twidoo_login_subtitles(). */
#customer_login .twidoo-form-subtitle {
	color: #6b7280;
	font-size: 14px;
	margin: 0 0 28px;
	line-height: 1.6;
}

/* Forzar margen reducido entre el H2 y el subtítulo, sobreescribiendo
   cualquier margin del tema padre. */
#customer_login h2 {
	margin-bottom: 8px !important;
}

/* ==========================================================================
   8. Mi Cuenta — Detalle de Pedido individual (view-order)
   ==========================================================================
   Estilos para /mi-cuenta/ver-pedidos/[id]/ que renderiza WooCommerce
   dentro de .woocommerce-MyAccount-content. Cubre el título, la tabla
   de productos con totales, las direcciones del cliente, el badge de
   estado (inyectado por twidoo_order_details_enhancements()) y la CTA
   de soporte WhatsApp al final.

   Variables de marca utilizadas:
     - Rosa principal: #E8187A
     - Rosa hover:     #c4145e
     - Oscuro:         #1a1f2e
     - Gris texto:     #6b7280
     - Borde sutil:    #f0f0f0
     - Fondo card:     #ffffff
     - Fondo soft:     #f9fafb
   ========================================================================== */

/* 8.1 Título "Detalles del pedido"
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content h2.woocommerce-order-details__title {
	font-size: 22px !important;
	font-weight: 700;
	color: #1a1f2e;
	margin: 0 0 8px;
	padding: 0;
	border: none !important;
}

/* Párrafo intro con número y fecha del pedido. */
.woocommerce-MyAccount-content > p:first-child {
	color: #6b7280;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 15px;
}

/* 8.2 Tabla de pedido
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content .woocommerce-table--order-details {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0;
	background: #ffffff;
	border: 2px solid #f0f0f0;
	border-radius: 12px;
	overflow: hidden;
	margin: 0 0 32px;
}

.woocommerce-MyAccount-content .woocommerce-table--order-details thead {
	background: #f9fafb;
}

.woocommerce-MyAccount-content .woocommerce-table--order-details th {
	text-transform: uppercase;
	font-size: 12px !important;
	letter-spacing: 0.5px;
	color: #6b7280 !important;
	font-weight: 700;
	padding: 14px 20px !important;
	border-bottom: 2px solid #f0f0f0 !important;
	text-align: left;
}

.woocommerce-MyAccount-content .woocommerce-table--order-details td {
	padding: 16px 20px !important;
	border-bottom: 1px solid #f0f0f0 !important;
	font-size: 14px;
	color: #1a1f2e;
}

/* Última fila de productos: divisor más fuerte antes del tfoot. */
.woocommerce-MyAccount-content .woocommerce-table--order-details tbody tr:last-child td {
	border-bottom: 2px solid #f0f0f0 !important;
}

/* 8.3 Links dentro de la tabla (nombre de producto)
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content .woocommerce-table--order-details a {
	color: #E8187A !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.woocommerce-MyAccount-content .woocommerce-table--order-details a:hover {
	color: #c4145e !important;
	text-decoration: underline !important;
}

/* 8.4 Tfoot — resumen de totales
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot th {
	background: #f9fafb;
	color: #1a1f2e !important;
	font-size: 14px;
	font-weight: 600;
}

.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot td {
	background: #f9fafb;
	font-weight: 600;
	color: #1a1f2e;
}

/* Fila final (Total): destacada en rosa marca, tipografía mayor. */
.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr.order-total th {
	font-size: 16px !important;
	padding-top: 18px !important;
}

.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr.order-total td {
	font-size: 22px !important;
	color: #E8187A !important;
	font-weight: 800 !important;
	padding-top: 18px !important;
}

/* 8.5 Acciones del pedido — contenedor flex
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content .order-actions,
.woocommerce-MyAccount-content ul.wc-item-meta,
.woocommerce-MyAccount-content p.order-again {
	margin: 24px 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
}

/* 8.6 Botones de acción (primario rosa)
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content .order-actions a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: #E8187A !important;
	color: #ffffff !important;
	border: none !important;
	outline: none !important;
	border-radius: 8px !important;
	padding: 12px 24px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
	box-shadow: none !important;
}

.woocommerce-MyAccount-content a.button:hover,
.woocommerce-MyAccount-content .order-actions a:hover {
	background: #c4145e !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(232, 24, 122, 0.25) !important;
}

/* 8.7 Botón "Cancelar" — variante secundaria (blanco con borde),
   hover en rojo para señalizar acción destructiva.
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content a.button.cancel {
	background: #ffffff !important;
	color: #1a1f2e !important;
	border: 2px solid #f0f0f0 !important;
}

.woocommerce-MyAccount-content a.button.cancel:hover {
	background: #fef2f2 !important;
	color: #ef4444 !important;
	border-color: #ef4444 !important;
	transform: translateY(-2px);
}

/* 8.8 Badge de estado del pedido (inyectado por
   twidoo_order_details_enhancements() en functions.php)
   ------------------------------------------------------------------------ */
.twidoo-order-status-badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-left: 12px;
	vertical-align: middle;
}

.twidoo-order-status-badge.status-processing { background: #fef3c7; color: #92400e; }
.twidoo-order-status-badge.status-completed  { background: #d1fae5; color: #065f46; }
.twidoo-order-status-badge.status-on-hold    { background: #fed7aa; color: #9a3412; }
.twidoo-order-status-badge.status-pending    { background: #e0e7ff; color: #3730a3; }
.twidoo-order-status-badge.status-cancelled  { background: #fee2e2; color: #991b1b; }
.twidoo-order-status-badge.status-refunded   { background: #f3e8ff; color: #6b21a8; }
.twidoo-order-status-badge.status-failed     { background: #fee2e2; color: #991b1b; }

/* 8.9 Sección de direcciones (.woocommerce-customer-details)
   ------------------------------------------------------------------------ */
.woocommerce-MyAccount-content .woocommerce-customer-details {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid #f0f0f0;
}

.woocommerce-MyAccount-content .woocommerce-customer-details h2 {
	font-size: 16px !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #1a1f2e;
	margin: 0 0 20px !important;
	padding: 0 !important;
	border: none !important;
}

/* Reset de columnas legacy en customer-details (mismo patrón que en
   .woocommerce-Addresses de la sección 6.7). */
.woocommerce-customer-details .u-columns,
.woocommerce-customer-details .col2-set {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 24px !important;
	width: 100% !important;
	float: none !important;
}

.woocommerce-customer-details .col-1,
.woocommerce-customer-details .col-2,
.woocommerce-customer-details .u-column1,
.woocommerce-customer-details .u-column2 {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-customer-details::before,
.woocommerce-customer-details::after,
.woocommerce-customer-details .u-columns::before,
.woocommerce-customer-details .u-columns::after,
.woocommerce-customer-details .col2-set::before,
.woocommerce-customer-details .col2-set::after {
	display: none !important;
	content: none !important;
}

/* 8.10 Card interior de cada dirección
   ------------------------------------------------------------------------ */
.woocommerce-customer-details .woocommerce-column,
.woocommerce-customer-details .col-1,
.woocommerce-customer-details .col-2 {
	background: #ffffff;
	border: 2px solid #f0f0f0;
	border-radius: 12px;
	padding: 24px !important;
	transition: all 0.25s ease;
	box-sizing: border-box;
}

.woocommerce-customer-details .woocommerce-column:hover,
.woocommerce-customer-details .col-1:hover,
.woocommerce-customer-details .col-2:hover {
	border-color: #E8187A;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}

/* Título de cada card. */
.woocommerce-customer-details h3,
.woocommerce-customer-details .woocommerce-column__title {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #1a1f2e !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 16px !important;
	padding: 0 0 12px !important;
	border-bottom: 2px solid #f0f0f0 !important;
}

/* 8.11 Address dentro de cada card
   ------------------------------------------------------------------------ */
.woocommerce-customer-details address {
	font-style: normal !important;
	color: #6b7280 !important;
	line-height: 1.7 !important;
	font-size: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

/* 8.12 Teléfono del cliente (resaltado en rosa marca)
   ------------------------------------------------------------------------ */
.woocommerce-customer-details-phone {
	color: #E8187A !important;
	font-weight: 600;
	margin-top: 8px !important;
	display: block;
}

.woocommerce-customer-details-phone::before {
	content: "📞 ";
}

/* 8.13 Wrapper de la CTA WhatsApp en página de pedido
   (inyectado por twidoo_order_details_enhancements())
   ------------------------------------------------------------------------ */
.twidoo-order-support {
	margin-top: 32px;
}

/* 8.14 Responsive móvil
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
	.woocommerce-customer-details .u-columns,
	.woocommerce-customer-details .col2-set {
		grid-template-columns: 1fr !important;
	}

	.woocommerce-MyAccount-content .woocommerce-table--order-details th,
	.woocommerce-MyAccount-content .woocommerce-table--order-details td {
		padding: 12px 14px !important;
		font-size: 13px;
	}

	.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-child td,
	.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr.order-total td {
		font-size: 18px !important;
	}
}

/* 8.15 Fixes — overrides de mayor especificidad
   ------------------------------------------------------------------------
   Estos overrides nacen tras detectar 3 issues en producción:
     1. El título y el badge se renderizaban pegados ("Detalles del
        pedidoPendiente de pago") sin estilos de píldora aplicados.
     2. El botón verde de WhatsApp perdía contraste en algún tema padre
        (texto blanco sobre verde claro o sin background).
     3. Los botones Pagar/Cancelar/Factura mostraban un outline celeste
        del UA / Hello Elementor.
   Las reglas siguientes tienen prioridad sobre 8.6/8.7/8.8 por orden
   de cascada y por especificidad reforzada con !important. */

/* 8.15.1 Wrapper del texto del título (separa título y badge). */
.twidoo-order-title-text {
	display: inline-block;
	margin-right: 4px;
}

/* 8.15.2 Badge de estado — forzar estilos de píldora con doble nivel
   de especificidad para ganar al CSS del padre. */
.woocommerce-MyAccount-content .twidoo-order-status-badge,
.woocommerce-order-details__title .twidoo-order-status-badge {
	display: inline-block !important;
	padding: 6px 14px !important;
	border-radius: 20px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	margin-left: 12px !important;
	vertical-align: middle !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
}

.twidoo-order-status-badge.status-processing,
.woocommerce-MyAccount-content .twidoo-order-status-badge.status-processing {
	background: #fef3c7 !important;
	color: #92400e !important;
}

.twidoo-order-status-badge.status-completed,
.woocommerce-MyAccount-content .twidoo-order-status-badge.status-completed {
	background: #d1fae5 !important;
	color: #065f46 !important;
}

.twidoo-order-status-badge.status-on-hold,
.woocommerce-MyAccount-content .twidoo-order-status-badge.status-on-hold {
	background: #fed7aa !important;
	color: #9a3412 !important;
}

.twidoo-order-status-badge.status-pending,
.twidoo-order-status-badge.status-pending-payment,
.woocommerce-MyAccount-content .twidoo-order-status-badge.status-pending,
.woocommerce-MyAccount-content .twidoo-order-status-badge.status-pending-payment {
	background: #e0e7ff !important;
	color: #3730a3 !important;
}

.twidoo-order-status-badge.status-cancelled,
.woocommerce-MyAccount-content .twidoo-order-status-badge.status-cancelled {
	background: #fee2e2 !important;
	color: #991b1b !important;
}

.twidoo-order-status-badge.status-refunded,
.woocommerce-MyAccount-content .twidoo-order-status-badge.status-refunded {
	background: #f3e8ff !important;
	color: #6b21a8 !important;
}

/* 8.15.3 Botón WhatsApp — forzar contraste y estilo redondeado.
   Aplica al botón en el dashboard (sección 5) y en el CTA de pedido. */
.twidoo-support-card__button,
.twidoo-support-card a.twidoo-support-card__button,
.twidoo-order-support .twidoo-support-card__button {
	background: #25D366 !important;
	color: #ffffff !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	padding: 14px 28px !important;
	border-radius: 50px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: all 0.25s ease;
	border: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.twidoo-support-card__button:hover,
.twidoo-support-card a.twidoo-support-card__button:hover,
.twidoo-order-support .twidoo-support-card__button:hover {
	background: #1faa54 !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4) !important;
}

/* 8.15.4 Eliminar outline/border celeste UA en TODOS los botones de
   Mi Cuenta. Hello Elementor + algunos navegadores aplican un outline
   focus celeste que rompe la paleta de marca. */
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content button,
.woocommerce-MyAccount-content input[type="submit"],
.woocommerce-MyAccount-content .order-actions a,
.woocommerce-MyAccount-content .actions a {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-clip: padding-box !important;
}

/* Focus accesible: anillo rosa marca en lugar del outline UA. */
.woocommerce-MyAccount-content a.button:focus,
.woocommerce-MyAccount-content button:focus,
.woocommerce-MyAccount-content a.button:active,
.woocommerce-MyAccount-content button:active {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(232, 24, 122, 0.25) !important;
}

/* 8.15.5 Botón Cancelar — restaurar variante secundaria (blanco con
   borde) tras el reset agresivo de 8.15.4 que quita TODOS los borders. */
.woocommerce-MyAccount-content a.button.cancel {
	background: #ffffff !important;
	color: #1a1f2e !important;
	border: 2px solid #f0f0f0 !important;
}

.woocommerce-MyAccount-content a.button.cancel:hover {
	background: #fef2f2 !important;
	color: #ef4444 !important;
	border-color: #ef4444 !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(239, 68, 68, 0.15) !important;
}

/* ==========================================================================
   9. Carrito y Checkout — Twidoo
   ==========================================================================
   Estilos para /carrito/ y /finalizar-compra/ usando el HTML default de
   WooCommerce (sin override de templates). Aplica el sistema de diseño
   Twidoo: tabla de carrito como card, totales sticky, formularios con
   foco rosa, métodos de pago como cards con estado seleccionado, CTAs
   con gradiente y responsive en mobile (tabla → cards verticales).

   Métodos activos en este proyecto:
     - Pago: PayPal, Transferencia bancaria
     - Envío: Recogida local, Precio fijo $5

   Variables de marca utilizadas:
     - Rosa principal: #E8187A
     - Rosa hover:     #c4145e
     - Rosa profundo:  #a3104f
     - Oscuro:         #1a1f2e
     - Gris texto:     #6b7280
     - Borde sutil:    #f0f0f0
     - Fondo card:     #ffffff
     - Fondo soft:     #f9fafb
     - Éxito:          #22c55e
     - Error:          #ef4444
   ========================================================================== */

/* --------------------------------------------------------------------------
   PARTE A — Carrito (.woocommerce-cart)
   -------------------------------------------------------------------------- */

/* 9.1 Container general del carrito
   ------------------------------------------------------------------------ */
.woocommerce-cart .woocommerce {
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 20px;
}

/* 9.2 Título principal "Detalle del pedido"
   ------------------------------------------------------------------------ */
.woocommerce-cart h1,
.woocommerce-cart .entry-title {
	font-size: 28px !important;
	font-weight: 800 !important;
	color: #1a1f2e !important;
	text-align: center;
	margin: 0 0 32px !important;
}

/* 9.3 Tabla del carrito como card
   ------------------------------------------------------------------------ */
.shop_table.cart,
.woocommerce-cart-form table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0;
	background: #ffffff;
	border: 2px solid #f0f0f0;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 24px;
}

.shop_table.cart thead,
.woocommerce-cart-form table thead {
	background: #f9fafb !important;
}

.shop_table.cart th,
.woocommerce-cart-form table th {
	text-transform: uppercase !important;
	font-size: 11px !important;
	letter-spacing: 0.5px !important;
	color: #6b7280 !important;
	font-weight: 700 !important;
	padding: 16px 20px !important;
	border: none !important;
	text-align: left;
}

.shop_table.cart td,
.woocommerce-cart-form table td {
	padding: 20px !important;
	border-bottom: 1px solid #f0f0f0 !important;
	color: #1a1f2e !important;
	font-size: 14px;
}

.shop_table.cart tbody tr:last-child td {
	border-bottom: 2px solid #f0f0f0 !important;
}

/* 9.4 Imagen del producto
   ------------------------------------------------------------------------ */
.product-thumbnail img {
	width: 80px !important;
	height: 80px !important;
	max-width: 80px !important;
	border-radius: 8px !important;
	object-fit: cover;
	border: 1px solid #f0f0f0;
}

/* 9.5 Nombre y precio del producto
   ------------------------------------------------------------------------ */
.product-name a {
	color: #1a1f2e !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: color 0.25s ease;
}

.product-name a:hover {
	color: #E8187A !important;
}

.product-price,
.product-subtotal {
	color: #1a1f2e !important;
	font-weight: 600 !important;
}

/* 9.6 Input de cantidad
   ------------------------------------------------------------------------ */
.qty,
input.qty {
	width: 70px !important;
	padding: 8px 12px !important;
	border: 2px solid #f0f0f0 !important;
	border-radius: 8px !important;
	background: #f9fafb !important;
	color: #1a1f2e !important;
	font-size: 14px !important;
	font-weight: 600;
	text-align: center;
	transition: all 0.25s ease;
}

.qty:focus {
	border-color: #E8187A !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(232, 24, 122, 0.1) !important;
	outline: none !important;
}

/* 9.7 Botón eliminar producto (X circular)
   ------------------------------------------------------------------------ */
.product-remove a,
a.remove {
	width: 28px !important;
	height: 28px !important;
	background: #f0f0f0 !important;
	color: #6b7280 !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: all 0.25s ease;
}

.product-remove a:hover,
a.remove:hover {
	background: #fee2e2 !important;
	color: #ef4444 !important;
	transform: rotate(90deg);
}

/* 9.8 Sección de actions del carrito
   ------------------------------------------------------------------------ */
.actions,
.cart-collaterals {
	padding-top: 16px;
}

/* 9.9 Botón "Actualizar carrito"
   ------------------------------------------------------------------------ */
button[name="update_cart"] {
	background: #E8187A !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 28px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer;
	opacity: 1 !important;
	transition: all 0.25s ease;
}

button[name="update_cart"]:hover {
	background: #c4145e !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(232, 24, 122, 0.25) !important;
}

button[name="update_cart"]:disabled {
	background: #f0f0f0 !important;
	color: #6b7280 !important;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* 9.10 Sección de cupón en el carrito
   ------------------------------------------------------------------------ */
.coupon {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

#coupon_code {
	flex: 1;
	padding: 12px 16px !important;
	border: 2px solid #f0f0f0 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	font-size: 14px !important;
	transition: all 0.25s ease;
}

#coupon_code:focus {
	border-color: #E8187A !important;
	box-shadow: 0 0 0 3px rgba(232, 24, 122, 0.1) !important;
	outline: none !important;
}

button[name="apply_coupon"] {
	background: #1a1f2e !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 24px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.25s ease;
}

button[name="apply_coupon"]:hover {
	background: #2d3548 !important;
	transform: translateY(-2px);
}

/* 9.11 Card "Totales del carrito"
   ------------------------------------------------------------------------ */
.cart_totals,
.cart-collaterals .cart_totals {
	background: #ffffff !important;
	border: 2px solid #f0f0f0 !important;
	border-radius: 16px !important;
	padding: 28px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 100px;
}

.cart_totals h2 {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #1a1f2e !important;
	margin: 0 0 20px !important;
	padding: 0 0 16px !important;
	border-bottom: 2px solid #f0f0f0 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cart_totals table.shop_table {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: 12px 0 !important;
	border: none !important;
	border-bottom: 1px solid #f0f0f0 !important;
	font-size: 14px;
}

/* Fila del total final destacada con rosa de marca.
   Separa visualmente el monto principal del texto "(incluye $X IVA)" que
   WooCommerce inyecta en un <small class="includes_tax"> dentro del <td>. */
.cart_totals tr.order-total {
	border-top: 2px solid #f0f0f0;
}

.cart_totals tr.order-total th {
	color: #1a1f2e !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 20px 0 !important;
	border: none !important;
	vertical-align: middle !important;
}

.cart_totals tr.order-total td {
	padding: 20px 0 !important;
	border: none !important;
	vertical-align: middle !important;
	text-align: right !important;
}

/* Monto principal en rosa grande. */
.cart_totals tr.order-total td .amount,
.cart_totals tr.order-total td > strong .amount {
	color: #E8187A !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	display: inline-block;
	line-height: 1.2 !important;
}

/* Texto secundario "(incluye $X IVA)" en pequeño y gris. */
.cart_totals tr.order-total td small,
.cart_totals tr.order-total td .includes_tax,
.cart_totals tr.order-total td small.includes_tax {
	display: block !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
	margin-top: 4px !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* El monto del IVA dentro del <small> también se baja a tipografía secundaria. */
.cart_totals tr.order-total td small .amount,
.cart_totals tr.order-total td .includes_tax .amount {
	color: #6b7280 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

/* 9.12 Botón "Proceder al pago" con gradiente Twidoo
   ------------------------------------------------------------------------ */
.checkout-button,
.wc-proceed-to-checkout a.button {
	display: block !important;
	width: 100% !important;
	background: linear-gradient(135deg, #E8187A 0%, #c4145e 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 16px 28px !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none;
	margin-top: 20px !important;
	box-shadow: 0 4px 14px rgba(232, 24, 122, 0.3) !important;
	transition: all 0.25s ease;
}

.checkout-button:hover,
.wc-proceed-to-checkout a.button:hover {
	background: linear-gradient(135deg, #c4145e 0%, #a3104f 100%) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(232, 24, 122, 0.4) !important;
	color: #ffffff !important;
}

/* 9.13 Métodos de envío dentro del carrito
   ------------------------------------------------------------------------ */
.shipping ul#shipping_method {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.shipping ul#shipping_method li {
	margin-bottom: 8px;
	padding: 10px 12px;
	border-radius: 8px;
	transition: background 0.2s ease;
}

.shipping ul#shipping_method li:hover {
	background: #f9fafb;
}

.shipping ul#shipping_method input[type="radio"] {
	accent-color: #E8187A;
	margin-right: 8px;
}

.shipping ul#shipping_method label {
	color: #1a1f2e !important;
	font-weight: 500;
	cursor: pointer;
}

.shipping ul#shipping_method label .amount {
	color: #E8187A !important;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   PARTE B — Checkout (.woocommerce-checkout)
   -------------------------------------------------------------------------- */

/* 9.14a Liberar el WIDGET de Elementor Pro "woocommerce-checkout-page"
   ------------------------------------------------------------------------
   El widget de Elementor Pro [data-widget_type="woocommerce-checkout-page.default"]
   ya tiene su propio sistema 2-column nativo (.elementor-checkout-layout-two-column
   + .e-checkout__container con display:grid). Solo necesitamos asegurar
   que el widget y su contenedor ocupen el ancho completo disponible. */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page,
body.woocommerce-checkout [data-widget_type="woocommerce-checkout-page.default"],
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page > .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
}

/* 9.14b div.woocommerce dentro del widget — max-width controlado y centrado
   ------------------------------------------------------------------------ */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .elementor-widget-container > .woocommerce {
	max-width: 1300px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
	box-sizing: border-box !important;
}

/* 9.14c Form fluid (sin grid forzado)
   ------------------------------------------------------------------------
   IMPORTANTE: NO forzamos display:grid en form.checkout. El layout de 2
   columnas lo gestiona Elementor Pro vía .e-checkout__container (sub-hijo
   del form). Si forzamos grid aquí, peleamos contra Elementor y rompemos
   su sistema nativo. */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: block !important;
	width: 100% !important;
	margin: 40px 0 !important;
}

/* 9.14d Mejorar el grid nativo de Elementor Pro
   ------------------------------------------------------------------------
   .e-checkout__container es el grid real de Elementor Pro. Solo ajustamos
   gap y align-items para que case con el sistema de diseño Twidoo. */
body.woocommerce-checkout .e-checkout__container {
	gap: 40px !important;
	align-items: start !important;
}

/* 9.14e Sticky de la sidebar de Elementor (donde Elementor coloca "Tu pedido")
   ------------------------------------------------------------------------ */
body.woocommerce-checkout .e-checkout__order-review,
body.woocommerce-checkout .elementor-checkout-sidebar {
	position: sticky !important;
	top: 100px !important;
}

/* 9.14f Reset de floats internos de WooCommerce (.col2-set / .col-1 / .col-2)
   ------------------------------------------------------------------------
   WooCommerce floatea billing/shipping en .col-1 y .col-2 dentro de
   #customer_details. Como Elementor Pro ya pone #customer_details en
   una columna fluid, los floats internos romperían el layout — los
   neutralizamos para que se apilen verticalmente. */
form.checkout #customer_details .col-1,
form.checkout #customer_details .col-2 {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	margin-bottom: 32px !important;
}

form.checkout .col2-set,
form.checkout #customer_details > .col2-set {
	display: block !important;
	width: 100% !important;
}

/* 9.14g Padding lateral en los containers de fields (el HTML real)
   ------------------------------------------------------------------------
   Confirmado vía DevTools: el container con <h3>"Detalles de facturación"</h3>
   y los .form-row es .woocommerce-billing-fields (sin wrappers Elementor
   intermedios que limiten el ancho). Aplicamos el padding lateral aquí,
   donde sabemos que el elemento SÍ existe. Lo mismo para shipping y
   additional fields para mantener consistencia visual. */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
	padding-top: 24px !important;
	padding-left: 32px !important;
	padding-right: 32px !important;
	box-sizing: border-box !important;
}

/* Defensivo: hijos del grid pueden hacer shrink para que contenido
   ancho (un input largo, un select con texto largo) no reviente el track. */
body.woocommerce-checkout .e-checkout__container > * {
	min-width: 0 !important;
}

/* 9.15 Títulos de secciones del checkout
   ------------------------------------------------------------------------ */
#customer_details h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	font-size: 22px !important;
	font-weight: 800 !important;
	color: #1a1f2e !important;
	margin: 0 0 24px !important;
	padding: 0 0 16px !important;
	border-bottom: 2px solid #f0f0f0 !important;
}

/* 9.16 Form rows (resetea floats default de WooCommerce)
   ------------------------------------------------------------------------ */
.form-row {
	margin-bottom: 18px !important;
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
}

/* 9.17 Labels y asterisco rojo → rosa de marca
   ------------------------------------------------------------------------ */
.form-row label,
form.checkout label {
	display: block !important;
	color: #1a1f2e !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	margin-bottom: 8px !important;
}

.form-row .required,
.form-row abbr.required {
	color: #E8187A !important;
	text-decoration: none !important;
	border: none !important;
}

/* 9.18 Inputs, textareas y selects del checkout
   ------------------------------------------------------------------------ */
form.checkout input[type="text"],
form.checkout input[type="email"],
form.checkout input[type="tel"],
form.checkout input[type="password"],
form.checkout textarea,
form.checkout select {
	width: 100% !important;
	background: #ffffff !important;
	border: 2px solid #f0f0f0 !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
	font-size: 15px !important;
	color: #1a1f2e !important;
	transition: all 0.25s ease !important;
	box-sizing: border-box !important;
}

form.checkout input:focus,
form.checkout textarea:focus,
form.checkout select:focus,
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
	border-color: #E8187A !important;
	box-shadow: 0 0 0 3px rgba(232, 24, 122, 0.1) !important;
	outline: none !important;
}

/* 9.19 Select2 (dropdowns mejorados de WooCommerce: país, estado, etc.)
   ------------------------------------------------------------------------ */
.select2-container--default .select2-selection--single {
	height: 48px !important;
	border: 2px solid #f0f0f0 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 44px !important;
	color: #1a1f2e !important;
	padding-left: 16px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: #E8187A !important;
	box-shadow: 0 0 0 3px rgba(232, 24, 122, 0.1) !important;
}

/* 9.20 Checkbox "¿Enviar a otra dirección?" y "Crear cuenta"
   ------------------------------------------------------------------------ */
#ship-to-different-address {
	margin: 24px 0 !important;
}

#ship-to-different-address label,
.woocommerce-account-fields label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	color: #1a1f2e !important;
	font-weight: 600;
	cursor: pointer;
	font-size: 15px;
}

#ship-to-different-address input[type="checkbox"],
.woocommerce-account-fields input[type="checkbox"] {
	accent-color: #E8187A;
	width: 18px;
	height: 18px;
	cursor: pointer;
}

/* 9.21 Card "Tu pedido" en checkout (sticky)
   ------------------------------------------------------------------------ */
.woocommerce-checkout-review-order,
#order_review {
	background: #ffffff !important;
	border: 2px solid #f0f0f0 !important;
	border-radius: 16px !important;
	padding: 28px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 100px;
}

h3#order_review_heading {
	font-size: 18px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #1a1f2e !important;
	margin: 0 0 20px !important;
	padding: 0 0 16px !important;
	border-bottom: 2px solid #f0f0f0 !important;
}

/* 9.22 Tabla de revisión del pedido en checkout
   ------------------------------------------------------------------------
   Mejor jerarquía visual y soporte para nombres largos: word-wrap y
   line-height generoso evitan que el texto se rompa en vertical en la
   columna derecha (estrecha). */
form.checkout #order_review_heading,
form.checkout h3#order_review_heading {
	background: transparent !important;
	margin-bottom: 0 !important;
}

form.checkout #order_review {
	width: 100% !important;
	min-width: 0;
}

.woocommerce-checkout-review-order-table {
	width: 100% !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	table-layout: auto !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 14px 0 !important;
	border: none !important;
	border-bottom: 1px solid #f0f0f0 !important;
	font-size: 14px;
	color: #1a1f2e !important;
	word-wrap: break-word;
	line-height: 1.5 !important;
}

/* Cabecera de la tabla del review en estilo "uppercase label". */
.woocommerce-checkout-review-order-table thead th {
	text-transform: uppercase;
	font-size: 11px !important;
	letter-spacing: 0.5px;
	color: #6b7280 !important;
	font-weight: 700 !important;
	padding-bottom: 16px !important;
}

/* Nombre del producto: 60% del ancho aprox vía padding-right. */
.woocommerce-checkout-review-order-table td.product-name {
	font-weight: 600 !important;
	color: #1a1f2e !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	padding-right: 12px !important;
}

.woocommerce-checkout-review-order-table td.product-name strong {
	font-weight: 600 !important;
}

/* Monto del producto a la derecha, sin saltos de línea. */
.woocommerce-checkout-review-order-table td.product-total {
	text-align: right !important;
	color: #1a1f2e !important;
	font-weight: 600 !important;
	white-space: nowrap;
}

/* Métodos de envío dentro del review (radios "Recogida local" / "$5"). */
.woocommerce-checkout-review-order-table tr.shipping td ul#shipping_method {
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
}

.woocommerce-checkout-review-order-table tr.shipping td ul#shipping_method li {
	padding: 8px 0 !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	gap: 8px;
}

.woocommerce-checkout-review-order-table tr.shipping td ul#shipping_method label {
	color: #1a1f2e !important;
	font-weight: 500 !important;
	cursor: pointer;
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.4 !important;
}

.woocommerce-checkout-review-order-table tr.shipping td ul#shipping_method label .amount {
	color: #E8187A !important;
	font-weight: 700 !important;
}

/* Total final del checkout: monto principal en rosa, IVA en pequeño/gris.
   Mismo patrón que el total del carrito para consistencia. */
.woocommerce-checkout-review-order-table tr.order-total {
	border-top: 2px solid #f0f0f0;
}

.woocommerce-checkout-review-order-table tr.order-total th {
	color: #1a1f2e !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 20px 0 !important;
	border: none !important;
	vertical-align: middle !important;
}

.woocommerce-checkout-review-order-table tr.order-total td {
	padding: 20px 0 !important;
	border: none !important;
	vertical-align: middle !important;
	text-align: right !important;
}

.woocommerce-checkout-review-order-table tr.order-total td .amount,
.woocommerce-checkout-review-order-table tr.order-total td > strong .amount {
	color: #E8187A !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	display: inline-block;
	line-height: 1.2 !important;
}

.woocommerce-checkout-review-order-table tr.order-total td small,
.woocommerce-checkout-review-order-table tr.order-total td .includes_tax {
	display: block !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
	margin-top: 4px !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.woocommerce-checkout-review-order-table tr.order-total td small .amount,
.woocommerce-checkout-review-order-table tr.order-total td .includes_tax .amount {
	color: #6b7280 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

/* 9.23 Métodos de pago como cards (PayPal, Transferencia bancaria)
   ------------------------------------------------------------------------
   Estructura del HTML default de WooCommerce dentro de cada <li>:
     1. <input type="radio">   ← hijo directo del <li>
     2. <label>...</label>     ← hijo directo del <li>
     3. <div class="payment_box">  ← hijo directo del <li>, descripción

   El <li> es display:flex con flex-wrap:wrap. Ordenamos los hijos via
   `order:` para que radio + label vayan en la primera línea (alineados
   verticalmente al centro) y el .payment_box ocupe el ancho completo
   en una segunda línea. Esto arregla el bug visual cuando el método NO
   está seleccionado y el layout se rompía. */
.wc_payment_methods,
ul.payment_methods {
	list-style: none !important;
	padding: 0 !important;
	margin: 24px 0 !important;
}

ul.payment_methods li.wc_payment_method {
	background: #ffffff !important;
	border: 2px solid #f0f0f0 !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	margin-bottom: 12px !important;
	transition: all 0.25s ease !important;
	list-style: none !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 12px !important;
}

/* Estado activo cuando el radio está seleccionado. */
ul.payment_methods li.wc_payment_method:has(input[type="radio"]:checked) {
	border-color: #E8187A !important;
	background: #fff5fa !important;
	box-shadow: 0 4px 14px rgba(232, 24, 122, 0.1) !important;
}

/* Radio: primero, sin margen, vertical-align middle. */
ul.payment_methods li.wc_payment_method > input[type="radio"] {
	accent-color: #E8187A !important;
	width: 18px !important;
	height: 18px !important;
	cursor: pointer !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	vertical-align: middle !important;
	position: relative !important;
	top: 0 !important;
	order: 1 !important;
}

/* Label: ocupa el resto del ancho disponible en la primera línea. */
ul.payment_methods li.wc_payment_method > label,
ul.payment_methods li.wc_payment_method > input[type="radio"] + label {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	color: #1a1f2e !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	line-height: 1.4 !important;
	font-size: 15px !important;
	order: 2 !important;
	flex: 1 !important;
	min-width: 0 !important;
}

/* Logo del proveedor (PayPal, etc.) alineado a la derecha del label. */
ul.payment_methods li.wc_payment_method img {
	max-height: 28px !important;
	width: auto !important;
	margin-left: auto !important;
	flex-shrink: 0 !important;
}

/* 9.24 Descripción dentro de cada método de pago
   ------------------------------------------------------------------------
   El .payment_box salta a una segunda línea (flex-basis: 100%) y se
   muestra solo cuando el método está activo (WooCommerce maneja el
   show/hide). */
ul.payment_methods li.wc_payment_method .payment_box,
.payment_box,
.payment_method_paypal .about_paypal {
	order: 3 !important;
	width: 100% !important;
	flex-basis: 100% !important;
	background: #f9fafb !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 14px 16px !important;
	margin-top: 12px !important;
	color: #6b7280 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

ul.payment_methods li.wc_payment_method .payment_box p {
	margin: 0 !important;
	color: #6b7280 !important;
	font-size: 13px !important;
}

/* Oculta la flechita default (::before) que apunta al método de pago. */
ul.payment_methods li.wc_payment_method .payment_box::before,
.payment_box::before {
	display: none !important;
}

/* 9.25 Checkbox de términos y condiciones
   ------------------------------------------------------------------------ */
.woocommerce-form__label-for-checkbox,
label.checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	color: #1a1f2e !important;
	font-size: 14px !important;
	cursor: pointer;
	margin: 16px 0 !important;
	line-height: 1.5;
}

.woocommerce-form__input-checkbox,
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	accent-color: #E8187A;
	width: 18px;
	height: 18px;
	cursor: pointer;
	margin-top: 2px !important;
	flex-shrink: 0;
}

.woocommerce-terms-and-conditions-wrapper a {
	color: #E8187A !important;
	font-weight: 600;
}

/* 9.26 Botón "Realizar pedido" / "Proceder a PayPal"
   ------------------------------------------------------------------------ */
#place_order {
	display: block !important;
	width: 100% !important;
	background: linear-gradient(135deg, #E8187A 0%, #c4145e 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 18px 28px !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	text-align: center !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin-top: 20px !important;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(232, 24, 122, 0.3) !important;
	transition: all 0.25s ease;
}

#place_order:hover {
	background: linear-gradient(135deg, #c4145e 0%, #a3104f 100%) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(232, 24, 122, 0.4) !important;
}

/* 9.27 Sección de cupón colapsable del checkout
   ------------------------------------------------------------------------ */
.woocommerce-form-coupon,
.checkout_coupon {
	background: #f9fafb !important;
	border: 1px solid #f0f0f0 !important;
	border-radius: 12px !important;
	padding: 20px !important;
	margin-bottom: 24px !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent !important;
	border: none !important;
	padding: 12px 0 !important;
	margin: 0 0 16px !important;
	color: #1a1f2e !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info a {
	color: #E8187A !important;
	font-weight: 600;
	text-decoration: none !important;
}

/* 9.28 Notas del pedido
   ------------------------------------------------------------------------ */
#order_comments {
	min-height: 100px !important;
	resize: vertical;
}

/* --------------------------------------------------------------------------
   PARTE C — Mensajes y notices (carrito y checkout)
   -------------------------------------------------------------------------- */

/* 9.29 Mensaje informativo (azul)
   ------------------------------------------------------------------------ */
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-info {
	background: #f0f9ff !important;
	border-left: 4px solid #0ea5e9 !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	color: #0c4a6e !important;
	font-size: 14px !important;
	margin-bottom: 20px !important;
}

/* 9.30 Mensaje de éxito (verde)
   ------------------------------------------------------------------------ */
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message {
	background: #f0fdf4 !important;
	border-left: 4px solid #22c55e !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	color: #166534 !important;
}

/* 9.31 Mensaje de error (rojo)
   ------------------------------------------------------------------------ */
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
	background: #fef2f2 !important;
	border-left: 4px solid #ef4444 !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	color: #991b1b !important;
	list-style: none !important;
}

/* --------------------------------------------------------------------------
   PARTE D — Responsive móvil
   -------------------------------------------------------------------------- */

/* 9.32 Breakpoint del checkout (≤ 968px)
   ------------------------------------------------------------------------
   Forzamos el grid nativo de Elementor Pro (.e-checkout__container) a una
   sola columna y desactivamos el sticky de la sidebar para que no estorbe
   el scroll del usuario móvil. */
@media (max-width: 968px) {
	body.woocommerce-checkout .e-checkout__container {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	body.woocommerce-checkout .e-checkout__order-review,
	body.woocommerce-checkout .elementor-checkout-sidebar {
		position: static !important;
		margin-top: 24px;
	}

	/* En mobile la columna ocupa todo el ancho — el padding lateral del
	   9.14g sobra (ya está el padding 24px del div.woocommerce). */
	body.woocommerce-checkout .woocommerce-billing-fields,
	body.woocommerce-checkout .woocommerce-shipping-fields,
	body.woocommerce-checkout .woocommerce-additional-fields {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 768px) {
	/* En mobile las cards de resumen no son sticky (estorban scroll).
	   El grid del checkout ya colapsa en 9.32 (≤968px) vía
	   .e-checkout__container — no toca aquí. */
	.woocommerce-checkout-review-order,
	#order_review,
	.cart_totals {
		position: static !important;
		margin-top: 24px;
	}

	/* Tabla del carrito → cards verticales (data-title aporta el "label"). */
	.shop_table.cart thead {
		display: none;
	}

	.shop_table.cart tbody tr {
		display: block;
		border: 2px solid #f0f0f0;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 12px;
	}

	.shop_table.cart tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0 !important;
		border: none !important;
		text-align: right;
	}

	.shop_table.cart tbody td::before {
		content: attr(data-title);
		font-weight: 700;
		color: #6b7280;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.shop_table.cart tbody td.product-thumbnail {
		justify-content: center;
		padding-bottom: 16px !important;
	}

	.shop_table.cart tbody td.product-thumbnail::before {
		display: none;
	}

	.product-thumbnail img {
		width: 100px !important;
		height: 100px !important;
	}

	/* Cupón en columna en mobile. */
	.coupon {
		flex-direction: column;
	}

	/* Total más pequeño en mobile (24px → 22px). Apuntamos al .amount
	   anidado para ganarle al selector más específico de la versión
	   desktop (td .amount / td > strong .amount). */
	.cart_totals tr.order-total td .amount,
	.woocommerce-checkout-review-order-table tr.order-total td .amount,
	.cart_totals tr.order-total td > strong .amount,
	.woocommerce-checkout-review-order-table tr.order-total td > strong .amount {
		font-size: 22px !important;
	}

	/* Padding lateral más ajustado. */
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout .woocommerce {
		padding: 0 16px !important;
	}

	.cart_totals,
	#order_review,
	.woocommerce-checkout-review-order {
		padding: 20px !important;
	}
}