@layer reset, base, components, utilities, site, states;

@layer site {
	/* Consentimiento y preferencias persistentes compartidas por los ecommerce. */
	.cookie-consent {
		position: fixed;
		right: 1rem;
		bottom: 1rem;
		z-index: 60;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
		width: min(calc(100% - 2rem), 58rem);
		padding: 1.25rem;
		border: 1px solid var(--color0-3);
		border-radius: 1.15rem;
		background: var(--surface);
		box-shadow: 0 1.5rem 4rem rgb(18 28 35 / 20%);
	}
	.cookie-consent h2 {
		margin: 0.15rem 0 0.4rem;
		font-size: 1.35rem;
	}
	.cookie-consent .commercial-kicker,
	.cookie-preferences .commercial-kicker {
		color: var(--brand-text);
		font-size: 0.74rem;
		font-weight: 850;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}
	.cookie-consent p {
		max-width: 39rem;
		margin: 0 0 0.4rem;
		color: var(--color0-2);
	}
	.cookie-consent a,
	.cookie-preferences a {
		color: var(--brand-text);
		font-weight: 750;
	}
	.cookie-consent__actions,
	.cookie-preferences__actions {
		display: flex;
		flex-shrink: 0;
		gap: 0.75rem;
	}
	.cookie-consent__actions button,
	.cookie-preferences__actions button {
		padding: 0.75rem 1rem;
		border: 1px solid var(--color0-3);
		border-radius: 0.7rem;
		font-weight: 750;
		white-space: nowrap;
	}
	.cookie-preferences {
		z-index: 70;
		width: min(calc(100% - 2rem), 42rem);
		max-height: calc(100dvh - 2rem);
		overflow-y: auto;
		padding: 1.5rem;
		border-radius: 1.2rem;
		background: var(--surface);
		box-shadow: 0 1.5rem 4rem rgb(18 28 35 / 25%);
	}
	.cookie-preferences__option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1rem 0;
		border-bottom: 1px solid var(--color0-3);
	}
	.cookie-preferences__option p {
		margin: 0.2rem 0 0;
	}
	.cookie-preferences__option span {
		font-weight: 750;
		white-space: nowrap;
	}
	.cookie-persistence {
		display: grid;
		gap: 1rem;
		padding: 1rem 0;
		border-bottom: 1px solid var(--color0-3);
	}
	.cookie-persistence__field {
		display: grid;
		gap: 0.45rem;
	}
	.cookie-persistence__field select {
		width: 100%;
		padding: 0.7rem 0.8rem;
		border: 1px solid var(--color0-3);
		border-radius: 0.65rem;
		background: var(--surface);
	}
	.cookie-persistence__save {
		display: flex;
		align-items: center;
		gap: 1rem;
	}
	.cookie-preferences__actions {
		margin: 1.25rem 0;
	}

	@media (width <= 720px) {
		.cookie-consent {
			align-items: stretch;
			flex-direction: column;
			gap: 1rem;
		}
		.cookie-consent__actions,
		.cookie-preferences__actions {
			flex-direction: column-reverse;
		}
		.cookie-consent__actions button,
		.cookie-preferences__actions button {
			width: 100%;
		}
		.cookie-preferences__option {
			align-items: flex-start;
			flex-direction: column;
		}
	}
}