/**
 * Estilos del Frontend - Flat WooCommerce
 * Version: 1.3.0
 */

/* ============================================
   Variables de marca
   Sobreescribibles desde el tema (p. ej. en un
   selector :root de mayor especificidad) sin
   tener que tocar este archivo.
   ============================================ */

:root {
	--flat-wc-color-primary: #007bff;
	--flat-wc-color-primary-hover: #0056b3;
	--flat-wc-color-secondary: #28a745;
	--flat-wc-color-secondary-hover: #218838;
	--flat-wc-color-danger: #dc3545;

	/*
	 * Iconos ojo abierto/cerrado del toggle de mostrar/ocultar contraseña,
	 * incrustados como data URI para no depender de que exista ningún
	 * archivo de icono en el tema. Se pintan con background-image (no
	 * mask-image: el soporte de mask-image/-webkit-mask-image para SVG en
	 * data URI es inconsistente entre navegadores — algunos lo interpretan
	 * en modo luminance, que con un trazo negro sobre fondo transparente
	 * oculta el icono entero). El color queda fijo al del SVG (negro); para
	 * un color de icono distinto, sustituye el propio SVG en la variable.
	 */
	--flat-wc-icon-eye: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTIuMDYyMDIgMTEuNjUyQzEuOTc4NjggMTEuODc2NSAxLjk3ODY4IDEyLjEyMzUgMi4wNjIwMiAxMi4zNDhDMi44NzM3MiAxNC4zMTYxIDQuMjUxNTMgMTUuOTk5IDYuMDIwNzkgMTcuMTgzMUM3Ljc5MDA0IDE4LjM2NzIgOS44NzEwNiAxOC45OTk0IDEyIDE4Ljk5OTRDMTQuMTI5IDE4Ljk5OTQgMTYuMjEgMTguMzY3MiAxNy45NzkyIDE3LjE4MzFDMTkuNzQ4NSAxNS45OTkgMjEuMTI2MyAxNC4zMTYxIDIxLjkzOCAxMi4zNDhDMjIuMDIxNCAxMi4xMjM1IDIyLjAyMTQgMTEuODc2NSAyMS45MzggMTEuNjUyQzIxLjEyNjMgOS42ODM4NSAxOS43NDg1IDguMDAxMDMgMTcuOTc5MiA2LjgxNjg5QzE2LjIxIDUuNjMyNzUgMTQuMTI5IDUuMDAwNjEgMTIgNS4wMDA2MUM5Ljg3MTA2IDUuMDAwNjEgNy43OTAwNCA1LjYzMjc1IDYuMDIwNzkgNi44MTY4OUM0LjI1MTUzIDguMDAxMDMgMi44NzM3MiA5LjY4Mzg1IDIuMDYyMDIgMTEuNjUyWiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTEyIDE1QzEzLjY1NjkgMTUgMTUgMTMuNjU2OCAxNSAxMkMxNSAxMC4zNDMxIDEzLjY1NjkgOC45OTk5OSAxMiA4Ljk5OTk5QzEwLjM0MzIgOC45OTk5OSA5LjAwMDAyIDEwLjM0MzEgOS4wMDAwMiAxMkM5LjAwMDAyIDEzLjY1NjggMTAuMzQzMiAxNSAxMiAxNVoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");
	--flat-wc-icon-eye-closed: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE1IDE4TDE0LjI3OCAxNC43NU0yIDhDMi43NDgzNSAxMC4wNTA4IDQuMTA5MTMgMTEuODIxOSA1Ljg5NzkgMTMuMDczM0M3LjY4NjY3IDE0LjMyNDcgOS44MTY5NSAxNC45OTU5IDEyIDE0Ljk5NTlDMTQuMTgzMSAxNC45OTU5IDE2LjMxMzMgMTQuMzI0NyAxOC4xMDIxIDEzLjA3MzNDMTkuODkwOSAxMS44MjE5IDIxLjI1MTYgMTAuMDUwOCAyMiA4TTIwIDE1TDE4LjI3NCAxMi45NU00IDE1TDUuNzI2IDEyLjk1TTkgMThMOS43MjIgMTQuNzUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");
}

/* ============================================
   Mostrar/ocultar contraseña
   Envuelve un <input type="password"> en
   .flat-wc-password-field y añade dentro un
   <button class="flat-wc-password-toggle">.

   Todas las propiedades de layout van con !important:
   este botón vive dentro de temas con sus propios
   resets globales de <button> (tamaños mínimos de
   accesibilidad, flex, etc.) que si no se neutralizan
   explícitamente rompen el posicionamiento — es un
   átomo de UI pequeño y autocontenido, no una pieza del
   sistema de diseño del proyecto, así que priorizar que
   funcione igual en cualquier tema es más importante que
   evitar !important aquí.

   Por el mismo motivo, .form-control fuerza width:100%
   aquí dentro: el wrapper añade un nivel extra de anidado
   que puede romper una regla del tema que dependiera de
   que el input fuera hijo directo de .form-group (p. ej.
   un selector con combinador `>`).
   ============================================ */

.flat-wc-password-field {
	position: relative !important;
	display: block !important;
	width: 100% !important;
}

.flat-wc-password-field .form-control {
	width: 100% !important;
	box-sizing: border-box !important;
	padding-right: 2.75rem !important;
}

.flat-wc-password-field .flat-wc-password-toggle {
	position: absolute !important;
	top: 50% !important;
	right: 0.5rem !important;
	transform: translateY(-50%) !important;
	display: block !important;
	box-sizing: border-box !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background-color: transparent !important;
	background-image: var(--flat-wc-icon-eye);
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 18px 18px !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
	opacity: 0.7;
}

.flat-wc-password-field .flat-wc-password-toggle:hover {
	opacity: 1;
}

.flat-wc-password-field .flat-wc-password-toggle:focus-visible {
	outline: 2px solid var(--flat-wc-color-primary, #007bff);
	outline-offset: 2px;
}

.flat-wc-password-field .flat-wc-password-toggle[aria-pressed="true"] {
	background-image: var(--flat-wc-icon-eye-closed);
}

/* ============================================
   Checklist de requisitos de contraseña
   Insertado por JS (FlatWC.attachPasswordChecklist())
   bajo cualquier campo de "nueva contraseña" marcado
   con [data-flat-wc-password-requirements], y también
   bajo #password_1 en /my-account/edit-account/.
   ============================================ */

.flat-wc-password-requirements {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 0.85rem;
}

.flat-wc-password-requirements li {
	position: relative;
	padding-left: 1.25rem;
	color: #6c757d;
	transition:
		color 0.2s ease,
		opacity 0.2s ease;
}

.flat-wc-password-requirements li::before {
	content: "○";
	position: absolute;
	left: 0;
}

.flat-wc-password-requirements li.is-met {
	color: var(--flat-wc-color-secondary, #28a745);
	text-decoration: line-through;
	opacity: 0.8;
}

.flat-wc-password-requirements li.is-met::before {
	content: "✓";
}

/* ============================================
   Login Form Styles
   ============================================ */

.flat-wc-login-container {
	max-width: 400px;
	margin: 2rem auto;
	padding: 2rem;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flat-wc-login-container h2 {
	margin-bottom: 1.5rem;
	font-size: 1.75rem;
	color: #333;
	text-align: center;
}

.flat-wc-login-form-wrapper {
	width: 100%;
}

.flat-wc-login-form {
	width: 100%;
}

.flat-wc-login-form .form-group {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
}

.flat-wc-login-form .form-label {
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: #555;
	font-size: 0.95rem;
}

.flat-wc-login-form .required {
	color: var(--flat-wc-color-danger, #dc3545);
	margin-left: 0.25rem;
}

.flat-wc-login-form .form-control {
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease;
	font-family: inherit;
}

.flat-wc-login-form .form-control:focus {
	outline: none;
	border-color: var(--flat-wc-color-primary, #007bff);
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.flat-wc-login-form .form-check {
	flex-direction: row;
	align-items: center;
}

.flat-wc-login-form .form-check-input {
	width: 18px;
	height: 18px;
	margin-top: 0;
	margin-right: 0.5rem;
	margin-bottom: 0;
	cursor: pointer;
	border: 1px solid #ddd;
	border-radius: 3px;
}

.flat-wc-login-form .form-check-label {
	margin-bottom: 0;
	cursor: pointer;
	color: #555;
}

.flat-wc-login-btn {
	width: 100%;
	padding: 0.75rem 1.5rem;
	background-color: var(--flat-wc-color-primary, #007bff);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		box-shadow 0.3s ease;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.flat-wc-login-btn:hover:not(:disabled) {
	background-color: var(--flat-wc-color-primary-hover, #0056b3);
	box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
}

.flat-wc-login-btn:disabled {
	opacity: 0.8;
	cursor: not-allowed;
}

.flat-wc-login-btn .btn-text,
.flat-wc-login-btn .btn-loader {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.flat-wc-login-btn .spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.flat-wc-login-links {
	margin-top: 1.5rem;
	text-align: center;
	font-size: 0.9rem;
}

.flat-wc-login-links a {
	color: var(--flat-wc-color-primary, #007bff);
	text-decoration: none;
	transition: color 0.3s ease;
}

.flat-wc-login-links a:hover {
	color: var(--flat-wc-color-primary-hover, #0056b3);
	text-decoration: underline;
}

.flat-wc-login-links .separator {
	margin: 0 0.5rem;
	color: #ddd;
}

/* ============================================
   Form Messages (Alerts)
   ============================================ */

.flat-wc-form-message {
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	border-left: 4px solid transparent;
	animation: slideDown 0.3s ease;
}

.flat-wc-form-message.alert {
	display: block;
}

.flat-wc-form-message.alert-success {
	background-color: #d4edda;
	border-left-color: var(--flat-wc-color-secondary, #28a745);
	color: #155724;
}

.flat-wc-form-message.alert-danger {
	background-color: #f8d7da;
	border-left-color: var(--flat-wc-color-danger, #dc3545);
	color: #721c24;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================
   Password Recovery Form Styles
   ============================================ */

.flat-wc-password-recovery-container {
	max-width: 400px;
	margin: 2rem auto;
	padding: 2rem;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flat-wc-password-recovery-container h2 {
	margin-bottom: 1.5rem;
	font-size: 1.75rem;
	color: #333;
	text-align: center;
}

.flat-wc-password-recovery-wrapper {
	width: 100%;
}

.flat-wc-password-recovery-description {
	color: #666;
	text-align: center;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

.flat-wc-password-recovery-form {
	width: 100%;
}

.flat-wc-password-recovery-form .form-group {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
}

.flat-wc-password-recovery-form .form-label {
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: #555;
	font-size: 0.95rem;
}

.flat-wc-recovery-btn {
	width: 100%;
	padding: 0.75rem 1.5rem;
	background-color: var(--flat-wc-color-primary, #007bff);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		box-shadow 0.3s ease;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.flat-wc-recovery-btn:hover:not(:disabled) {
	background-color: var(--flat-wc-color-primary-hover, #0056b3);
	box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
}

.flat-wc-recovery-btn:disabled {
	opacity: 0.8;
	cursor: not-allowed;
}

.flat-wc-recovery-links {
	margin-top: 1.5rem;
	text-align: center;
	font-size: 0.9rem;
}

.flat-wc-recovery-links a {
	color: var(--flat-wc-color-primary, #007bff);
	text-decoration: none;
	transition: color 0.3s ease;
}

.flat-wc-recovery-links a:hover {
	color: var(--flat-wc-color-primary-hover, #0056b3);
	text-decoration: underline;
}

.flat-wc-recovery-links .separator {
	margin: 0 0.5rem;
	color: #ddd;
}

/* ============================================
   Password Reset Form Styles
   ============================================ */

.flat-wc-password-reset-container {
	max-width: 400px;
	margin: 2rem auto;
	padding: 2rem;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flat-wc-password-reset-container h2 {
	margin-bottom: 1.5rem;
	font-size: 1.75rem;
	color: #333;
	text-align: center;
}

.flat-wc-password-reset-wrapper {
	width: 100%;
}

.flat-wc-password-reset-description {
	color: #666;
	text-align: center;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

.flat-wc-password-reset-form {
	width: 100%;
}

.flat-wc-password-reset-form .form-group {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
}

.flat-wc-password-reset-form .form-label {
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: #555;
	font-size: 0.95rem;
}

.flat-wc-password-reset-form .form-text {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	color: #999;
}

.flat-wc-reset-btn {
	width: 100%;
	padding: 0.75rem 1.5rem;
	background-color: var(--flat-wc-color-secondary, #28a745);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		box-shadow 0.3s ease;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.flat-wc-reset-btn:hover:not(:disabled) {
	background-color: var(--flat-wc-color-secondary-hover, #218838);
	box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
}

.flat-wc-reset-btn:disabled {
	opacity: 0.8;
	cursor: not-allowed;
}

/* ============================================
   Register Form Styles
   ============================================ */

.flat-wc-register-container {
	max-width: 400px;
	margin: 2rem auto;
	padding: 2rem;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flat-wc-register-container h2 {
	margin-bottom: 1.5rem;
	font-size: 1.75rem;
	color: #333;
	text-align: center;
}

.flat-wc-register-form-wrapper {
	width: 100%;
}

.flat-wc-register-form {
	width: 100%;
}

.flat-wc-register-form .form-group {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
}

.flat-wc-register-form .form-label {
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: #555;
	font-size: 0.95rem;
}

.flat-wc-register-form .required {
	color: var(--flat-wc-color-danger, #dc3545);
	margin-left: 0.25rem;
}

.flat-wc-register-form .form-control {
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease;
	font-family: inherit;
}

.flat-wc-register-form .form-control:focus {
	outline: none;
	border-color: var(--flat-wc-color-secondary, #28a745);
	box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

.flat-wc-register-form .form-text {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	color: #6c757d;
}

.flat-wc-register-btn {
	width: 100%;
	padding: 0.75rem 1.5rem;
	background-color: var(--flat-wc-color-secondary, #28a745);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		box-shadow 0.3s ease;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.flat-wc-register-btn:hover:not(:disabled) {
	background-color: var(--flat-wc-color-secondary-hover, #218838);
	box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
}

.flat-wc-register-btn:disabled {
	opacity: 0.8;
	cursor: not-allowed;
}

.flat-wc-register-btn .btn-text,
.flat-wc-register-btn .btn-loader {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.flat-wc-register-btn .spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

/* ============================================
   Social Login (Google)
   ============================================ */

.flat-wc-social-login {
	margin-top: 1.5rem;
}

.flat-wc-divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin-bottom: 1rem;
	color: #888;
	font-size: 0.9rem;
}

.flat-wc-divider::before,
.flat-wc-divider::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid #ddd;
}

.flat-wc-divider span {
	padding: 0 1rem;
}

.flat-wc-btn-google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.75rem 1.5rem;
	background-color: #fff;
	color: #444;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease;
	min-height: 44px;
	line-height: 1.4;
}

.flat-wc-btn-google:hover {
	background-color: #f8f9fa;
	border-color: #ccc;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flat-wc-btn-google .google-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
	.flat-wc-login-container,
	.flat-wc-register-container,
	.flat-wc-password-recovery-container,
	.flat-wc-password-reset-container {
		max-width: 100%;
		margin: 1rem;
		padding: 1.5rem;
	}

	.flat-wc-login-container h2,
	.flat-wc-register-container h2,
	.flat-wc-password-recovery-container h2,
	.flat-wc-password-reset-container h2 {
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}
}

/* ============================================
   Menú de "Mi Cuenta" con icono
   (Features\Account_Menu inserta el <span> del icono dentro del <a>)
   ============================================ */

.woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.flat-wc-account-menu__icon-wrap {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.flat-wc-account-menu__icon {
	width: 1.15em;
	height: 1.15em;
}