/*
 * Componentes de skaroots. Todos leen los tokens de theme.json
 * (--wp--custom--radius--*, --wp--custom--shadow--*, --wp--custom--label--*).
 * Los estilos de bloque (is-style-*) se registran en functions.php y se eligen
 * desde el editor; las clases sk-* son para plantillas y para el plugin.
 */

/* Tarjeta: contenedor blanco con borde, radio grande y sombra suave */
.is-style-card,
.sk-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--card);
	overflow: hidden;
}

.is-style-card:where(:not([style*="padding"])) {
	padding: 1.5rem 1.25rem;
}

/* Panel suave: fondo crema, sin borde (paso activo, nota, cabeceras) */
.is-style-soft,
.sk-soft {
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--forest);
}

.is-style-soft:where(:not([style*="padding"])) {
	padding: 1.5rem 1.25rem;
}

/* Opción: fila con borde, radio medio; seleccionada = borde acento + crema */
.is-style-option,
.sk-option {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.is-style-option:where(:not([style*="padding"])) {
	padding: 0.95rem 1.1rem;
}

.is-style-option:hover,
.sk-option:hover {
	border-color: var(--wp--preset--color--muted);
}

.sk-option.is-selected,
.sk-option:has(input:checked) {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--cream);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent);
}

/* Etiqueta: mayúsculas pequeñas con tracking ("CREA TU BUNDLE", "TOTAL") */
.is-style-eyebrow,
.sk-eyebrow {
	font-size: var(--wp--custom--label--size);
	font-weight: 700;
	letter-spacing: var(--wp--custom--label--tracking);
	line-height: 1.4;
	text-transform: uppercase;
}

/* Badge: pastilla acento ("-10%", "Oferta") */
.is-style-badge,
.sk-badge {
	display: inline-block;
	width: fit-content;
	padding: 0.25rem 0.6rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--custom--label--size);
	font-weight: 700;
	line-height: 1.3;
}

.sk-badge--soft {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--forest);
}

/* Botones: pastilla. Primario = elements.button de theme.json */
.sk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: var(--wp--custom--control--padding);
	border: 1.5px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.sk-btn:hover {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-ghost .wp-block-button__link,
.sk-btn--ghost {
	border: 1.5px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.sk-btn--ghost:hover {
	border-color: var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.sk-btn--outline {
	border: 1.5px solid var(--wp--preset--color--accent);
	background: transparent;
	color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.sk-btn--outline:hover {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.sk-btn--sm {
	padding: var(--wp--custom--control--padding-sm);
	font-size: 0.875rem;
}

.sk-btn--block {
	display: flex;
	width: 100%;
}

.sk-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Pasos / pestañas en pastilla (navegación del bundle, pestañas del producto) */
.sk-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.9rem;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.sk-pill:hover {
	background: var(--wp--preset--color--surface);
}

.sk-pill.is-active {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--forest);
}

/* Precio destacado */
.sk-price {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* Campos de formulario: radio medio, foco con anillo acento */
:where(
	input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
	input[type="password"], input[type="search"], input[type="number"], select, textarea
):not(.wp-block-search__input) {
	box-sizing: border-box;
	padding: var(--wp--custom--control--field-padding);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

:where(
	input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
	input[type="password"], input[type="search"], input[type="number"], select, textarea
):focus {
	border-color: var(--wp--preset--color--accent);
	outline: 0;
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent);
}

:where(input[type="radio"], input[type="checkbox"]) {
	accent-color: var(--wp--preset--color--accent);
}