/**
 * Styles for woo-sil7en/add-to-cart block.
 *
 * Form layout: optional quantity input beside the submit button. Loading state
 * swaps the label for a spinner. Status message below the form is styled for
 * both success and error contexts.
 *
 * @package woo-sil7en-blocks-commerce
 * @since   0.1.0
 */

.woo-sil7en-add-to-cart__form {
	display: flex;
	align-items: flex-end;
	gap: var(--wp--custom--spacing--s, 0.75rem);
	flex-wrap: wrap;
}

/* Quantity label + input */
.woo-sil7en-add-to-cart__qty-label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	font-weight: 600;
}

.woo-sil7en-add-to-cart__qty {
	width: 5rem;
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--wp--preset--color--border, #e2e8f0);
	border-radius: var(--wp--custom--radius--s, 0.25rem);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	text-align: center;
}

/* Button */
.woo-sil7en-add-to-cart__button {
	position: relative;
	flex: 1;
	border-radius: var(--wp--custom--radius--pill, 999px);
}

.woo-sil7en-add-to-cart__button .is-hidden {
	visibility: hidden;
}

/* Spinner (CSS-only animated ring) */
.woo-sil7en-add-to-cart__spinner {
	display: none;
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid transparent;
	border-top-color: currentColor;
	border-radius: 50%;
	animation: woo-sil7en-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.woo-sil7en-add-to-cart__spinner {
		animation: none;
	}
}

.woo-sil7en-add-to-cart__spinner.is-visible {
	display: block;
}

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

/* Status message */
.woo-sil7en-add-to-cart__message {
	margin-block-start: var(--wp--custom--spacing--xs, 0.5rem);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	min-height: 1.25em;
}

.woo-sil7en-add-to-cart__message:empty {
	display: none;
}

/* "Ya tienes N en tu carrito" note — shown when the product is already in cart. */
.woo-sil7en-add-to-cart__incart {
	display: none;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-block-start: 0.75rem;
	font-size: var(--wp--preset--font-size--sm, 0.9rem);
	color: var(--wp--preset--color--muted, #5f6a6a);
}

.woo-sil7en-add-to-cart__incart.is-in-cart {
	display: flex;
}

.woo-sil7en-add-to-cart__incart svg {
	color: var(--wp--preset--color--success, #1a7f4b);
}

.woo-sil7en-add-to-cart__incart-qty {
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.woo-sil7en-add-to-cart__incart-link {
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #00b8bf);
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.woo-sil7en-add-to-cart__incart-link:hover {
	text-decoration: none;
}

/* ===========================================================================
   Service add-on — a premium opt-in offered right by the button (e.g. armado).
   A full-width tactile card: custom animated check, brand-tinted "selected"
   state, gentle attention cue when idle. All motion is reduce-motion safe.
   =========================================================================== */
.woo-sil7en-add-to-cart__addon {
	flex: 0 0 100%;
	order: -1;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	margin-block-end: 0.2rem;
	padding: 0.7rem 0.85rem;
	border: 1.5px solid var(--wp--preset--color--border, #e2e8f0);
	border-radius: var(--wp--custom--radius--md, 0.8rem);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 5%, var(--wp--preset--color--surface, #fff)), var(--wp--preset--color--surface, #fff));
	cursor: pointer;
	transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.woo-sil7en-add-to-cart__addon:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 55%, var(--wp--preset--color--border, #e2e8f0));
	box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 60%, transparent);
	transform: translateY(-1px);
}

/* Selected: brand-tinted card + filled check. */
.woo-sil7en-add-to-cart__addon.is-on {
	border-color: var(--wp--preset--color--primary, #00b8bf);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 13%, var(--wp--preset--color--surface, #fff)), color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 5%, var(--wp--preset--color--surface, #fff)));
	box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 70%, transparent);
}

/* Real checkbox: visually hidden, still focusable + operable. */
.woo-sil7en-add-to-cart__addon-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Custom check box + animated tick. */
.woo-sil7en-add-to-cart__addon-check {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 45%, var(--wp--preset--color--border, #e2e8f0));
	border-radius: 0.45rem;
	background: var(--wp--preset--color--surface, #fff);
	color: #fff;
	transition: background 180ms ease, border-color 180ms ease;
}

.woo-sil7en-add-to-cart__addon-check svg {
	width: 1rem;
	height: 1rem;
	transform: scale(0);
	opacity: 0;
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 140ms ease;
}

.woo-sil7en-add-to-cart__addon.is-on .woo-sil7en-add-to-cart__addon-check {
	background: var(--wp--preset--color--primary, #00b8bf);
	border-color: var(--wp--preset--color--primary, #00b8bf);
}

.woo-sil7en-add-to-cart__addon.is-on .woo-sil7en-add-to-cart__addon-check svg {
	transform: scale(1);
	opacity: 1;
}

.woo-sil7en-add-to-cart__addon-input:focus-visible + .woo-sil7en-add-to-cart__addon-check {
	outline: 2px solid var(--wp--preset--color--primary, #00b8bf);
	outline-offset: 2px;
}

/* Service glyph in a tinted disc. */
.woo-sil7en-add-to-cart__addon-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 14%, transparent);
	color: var(--wp--preset--color--primary, #00b8bf);
}

/* Crossed toolkit glyph (wrench + screwdriver). A light "glint" runs across the
   metal and the kit gives a small tightening "settle" — premium, reduce-motion safe. */
.woo-sil7en-add-to-cart__addon-icon svg {
	width: 1.45rem;
	height: 1.45rem;
	overflow: visible;
}

.woo-sil7en-add-to-cart__addon-icon svg .wsa-ico-sheen {
	stroke-dasharray: 6 80;
	stroke-dashoffset: 86;
}

@media (prefers-reduced-motion: no-preference) {
	.woo-sil7en-add-to-cart__addon-icon svg .wsa-ico-glint {
		animation: wsa-ico-glint-fade 3.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
	}
	.woo-sil7en-add-to-cart__addon-icon svg .wsa-ico-sheen {
		animation: wsa-ico-glint-run 3.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
	}
	.woo-sil7en-add-to-cart__addon-icon svg .wsa-ico-tools {
		transform-box: view-box;
		transform-origin: 12px 12px;
		animation: wsa-ico-settle 3.6s ease-in-out infinite;
	}

	.woo-sil7en-add-to-cart__addon:hover .woo-sil7en-add-to-cart__addon-icon svg .wsa-ico-glint,
	.woo-sil7en-add-to-cart__addon:hover .woo-sil7en-add-to-cart__addon-icon svg .wsa-ico-sheen,
	.woo-sil7en-add-to-cart__addon:hover .woo-sil7en-add-to-cart__addon-icon svg .wsa-ico-tools {
		animation-duration: 2s;
	}
}

@keyframes wsa-ico-glint-run {
	0% { stroke-dashoffset: 86; }
	46% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}

@keyframes wsa-ico-glint-fade {
	0%, 6% { opacity: 0; }
	18% { opacity: 0.85; }
	44% { opacity: 0.85; }
	56%, 100% { opacity: 0; }
}

@keyframes wsa-ico-settle {
	0%, 60%, 100% { transform: rotate(0deg); }
	72% { transform: rotate(-3.5deg); }
	84% { transform: rotate(2deg); }
}

.woo-sil7en-add-to-cart__addon-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	line-height: 1.3;
}

.woo-sil7en-add-to-cart__addon-title {
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.woo-sil7en-add-to-cart__addon-lead {
	color: var(--wp--preset--color--muted, #5f6a6a);
}

.woo-sil7en-add-to-cart__addon-title strong {
	font-weight: 700;
}

.woo-sil7en-add-to-cart__addon-desc {
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	color: var(--wp--preset--color--muted, #5f6a6a);
	line-height: 1.35;
}

.woo-sil7en-add-to-cart__addon-price {
	flex: none;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #00b8bf);
	white-space: nowrap;
}

.woo-sil7en-add-to-cart__addon-price::before {
	content: "+ ";
}

/* Idle attention cue: a soft pulsing ring on the check until selected. */
@media (prefers-reduced-motion: no-preference) {
	.woo-sil7en-add-to-cart__addon:not(.is-on) .woo-sil7en-add-to-cart__addon-check {
		animation: woo-sil7en-addon-nudge 2.6s ease-in-out infinite;
	}
}

@keyframes woo-sil7en-addon-nudge {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 35%, transparent); }
	50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 0%, transparent); }
}