/* Hallmark · component: solicita-account-card · genre: modern-minimal · theme: yoo tokens
 * states: default · hover · focus-visible · active · disabled · error · success
 * Card de "crear cuenta con esta solicitud" integrada en el form YITH.
 */

/* Ocultar el bloque nativo de "¿Crear una cuenta?" de YITH: lo sustituye
   nuestra card premium. El checkbox real (name=createaccount) sigue en el DOM
   pero oculto, controlado por el switch de la card vía JS. */
#yith-ywraq-default-form .woocommerce-account-fields {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	margin: -1px; padding: 0; border: 0;
}

.msa-card {
	margin: 20px 0;
	border: 1.5px solid var(--yoo-color-line, #e9ecf1);
	border-radius: var(--yoo-radius-lg, 14px);
	background: linear-gradient(180deg, var(--yoo-color-primary-soft, #eaf1fd) 0%, var(--yoo-color-surface, #fff) 46%);
	overflow: hidden;
	font-family: var(--yoo-font-family, "Poppins", sans-serif);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.msa-card.is-on {
	border-color: var(--yoo-color-primary, #125bc9);
	box-shadow: 0 0 0 3px var(--yoo-color-primary-soft, #eaf1fd);
}

/* ---- Cabecera con switch ---- */
.msa-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
}
.msa-card__icon {
	flex: none;
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--yoo-color-surface, #fff);
	color: var(--yoo-color-primary, #125bc9);
	box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.msa-card__intro { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msa-card__title { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--yoo-color-text, #1a1a1a); }
.msa-card__desc { font-size: 13px; line-height: 1.45; color: var(--yoo-color-text-muted, #6b7280); }

/* ---- Switch accesible ---- */
.msa-switch { flex: none; position: relative; display: inline-flex; cursor: pointer; }
.msa-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.msa-switch__track {
	width: 46px; height: 26px;
	border-radius: 999px;
	background: #cbd2dc;
	transition: background .18s ease;
	display: inline-flex; align-items: center; padding: 3px;
}
.msa-switch__thumb {
	width: 20px; height: 20px; border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
	transition: transform .18s cubic-bezier(.16,1,.3,1);
}
.msa-switch input:checked + .msa-switch__track { background: var(--yoo-color-primary, #125bc9); }
.msa-switch input:checked + .msa-switch__track .msa-switch__thumb { transform: translateX(20px); }
.msa-switch input:focus-visible + .msa-switch__track { outline: 2px solid var(--yoo-color-primary, #125bc9); outline-offset: 2px; }

/* ---- Cuerpo desplegable ---- */
.msa-card__body {
	padding: 4px 18px 18px;
	display: grid;
	gap: 14px;
	border-top: 1px solid rgba(18,91,201,.1);
}
.msa-card__body[hidden] { display: none; }

.msa-field { display: flex; flex-direction: column; gap: 6px; }
.msa-field label { font-size: 13px; font-weight: 500; color: var(--yoo-color-text, #1a1a1a); }
.msa-field input[type="tel"],
.msa-field input[type="password"],
.msa-field input[type="text"] {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	font-family: inherit; font-size: 15px;
	color: var(--yoo-color-text, #1a1a1a);
	background: #fff;
	border: 1.5px solid var(--yoo-color-line, #e9ecf1);
	border-radius: var(--yoo-radius-md, 10px);
	box-sizing: border-box;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.msa-field input:focus {
	outline: none;
	border-color: var(--yoo-color-primary, #125bc9);
	box-shadow: 0 0 0 3px var(--yoo-color-primary-soft, #eaf1fd);
}

.msa-pass { position: relative; }
.msa-pass input { padding-right: 44px; }
.msa-toggle {
	position: absolute; top: 0; right: 0;
	width: 44px; height: 44px;
	border: 0; background: transparent; cursor: pointer;
	font-size: 16px; line-height: 1;
	opacity: .6;
}
.msa-toggle:hover { opacity: 1; }
.msa-toggle:focus-visible { outline: 2px solid var(--yoo-color-primary, #125bc9); outline-offset: -2px; }

/* ---- Medidor ---- */
.msa-meter { margin-top: 4px; display: none; }
.msa-meter.is-visible { display: block; }
.msa-meter__track { height: 6px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.msa-meter__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: #dc2626; transition: width .25s ease, background .25s ease; }
.msa-meter__label { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; }
.msa-meter[data-level="1"] .msa-meter__fill { width: 33%; background: #dc2626; }
.msa-meter[data-level="2"] .msa-meter__fill { width: 66%; background: #f59e0b; }
.msa-meter[data-level="3"] .msa-meter__fill { width: 100%; background: #16a34a; }
.msa-meter[data-level="1"] .msa-meter__label { color: #dc2626; }
.msa-meter[data-level="2"] .msa-meter__label { color: #b45309; }
.msa-meter[data-level="3"] .msa-meter__label { color: #15803d; }

.msa-reqs {
	list-style: none; margin: 9px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.msa-reqs li { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #9aa3af; transition: color .16s ease; }
.msa-reqs li svg { color: #cbd2dc; transition: color .16s ease; }
.msa-reqs li.is-met { color: var(--yoo-color-text, #1a1a1a); }
.msa-reqs li.is-met svg { color: #16a34a; }

.msa-match { font-size: 12px; font-weight: 500; }
.msa-match.is-ok { color: #15803d; }
.msa-match.is-bad { color: #dc2626; }

/* ---- Check legal ---- */
.msa-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--yoo-color-text-muted, #6b7280); cursor: pointer; }
.msa-check input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--yoo-color-primary, #125bc9); cursor: pointer; }
.msa-check a { color: var(--yoo-color-primary, #125bc9); text-decoration: underline; }
.msa-check.is-error span { color: #dc2626; }

/* ---- Aviso email existente ---- */
.msa-existing {
	margin: 0; padding: 10px 12px;
	background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--yoo-radius-md, 10px);
	font-size: 13px; color: #92400e;
}
.msa-existing[hidden] { display: none; }
.msa-link {
	border: 0; background: transparent; padding: 0;
	font-family: inherit; font-size: 13px; font-weight: 600;
	color: var(--yoo-color-primary, #125bc9); cursor: pointer; text-decoration: underline;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
	.msa-card__head { flex-wrap: wrap; }
	.msa-card__intro { flex: 1 1 100%; order: 2; }
	.msa-reqs { gap: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.msa-switch__thumb, .msa-meter__fill { transition: none; }
}