/*
 * Shared components (#262): buttons for raw markup, field messages, notices and toast, quantity
 * stepper, loading skeleton, confirmation modal, cookie banner and the WhatsApp floating button.
 * Every colour, font and size comes from theme.json through --wp--preset--* / --wp--custom--*;
 * the numbers are the artboard values of docs/design/mockups/Components.dc.html.
 *
 * Order-status badges belong to Mi cuenta (#259) and are not defined here.
 * Pagination and breadcrumbs live in catalog.css (.blk-pagination, .blk-breadcrumbs) and the
 * mobile menu drawer in theme.css; the Componentes page shows all of them together.
 */

/* ---- Buttons for raw markup (modal, drawer, cookie banner); core buttons use theme.json ---- */
.blk-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--wp--custom--control-height);
	padding: 0 20px;
	border: var(--wp--custom--border-width) solid transparent;
	border-radius: var(--wp--custom--radius--control);
	font: 600 16px/1.2 var(--wp--preset--font-family--instrument-sans);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.blk-btn--primary {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}
.blk-btn--primary:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
}
.blk-btn--secondary {
	border-color: var(--wp--preset--color--ink);
	background: transparent;
	color: var(--wp--preset--color--ink);
}
.blk-btn--secondary:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}
.blk-btn--tertiary {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--ink);
}
.blk-btn--outline {
	border-color: var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
.blk-btn--danger {
	background: var(--wp--preset--color--error);
	color: var(--wp--preset--color--surface);
}
.blk-btn--danger:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}
.blk-btn--lg {
	min-height: 52px;
	font-size: 17px;
}
.blk-btn--block {
	display: flex;
	width: 100%;
}

/* ---- Field messages (the field itself is styled in theme.css) ---- */
.blk-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
}
.blk-field__error,
.wc-block-components-validation-error {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--error);
}
.wc-block-components-validation-error > p {
	margin: 0;
	font-size: inherit;
}
.blk-field--disabled {
	color: var(--wp--preset--color--muted);
}

.blk-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--wp--preset--color--muted);
}
.blk-check input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 12px;
	accent-color: var(--wp--preset--color--primary);
}
.blk-check label {
	padding-block: 10px;
	font-size: var(--wp--preset--font-size--14);
	font-weight: 400;
}
.blk-newsletter .blk-check {
	gap: 8px;
}
.blk-newsletter .blk-check input[type="checkbox"] {
	margin-top: 10px;
}
.blk-newsletter .blk-check label {
	padding-block: 6px;
	font-size: var(--wp--preset--font-size--13);
}
.blk-check a {
	color: inherit;
	text-decoration: underline;
}

/* Honeypot (#106): out of sight and out of the tab order; people never fill it. */
.blk-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Form status line (contact and newsletter): error tone when the send failed. */
.blk-newsletter__status.is-error {
	color: var(--wp--preset--color--error);
}

/* ---- Notices and toast ---- */
.blk-notice,
.wp-block-group.is-style-notice-success,
.wp-block-group.is-style-notice-warning,
.wp-block-group.is-style-notice-error,
.wp-block-group.is-style-notice-info {
	box-sizing: border-box;
	padding: 14px 16px;
	border-radius: var(--wp--custom--radius--control);
	font-size: 15px;
	font-weight: 500;
}
.blk-notice > :first-child,
.wp-block-group[class*="is-style-notice-"] > :first-child {
	margin-top: 0;
}
.blk-notice > :last-child,
.wp-block-group[class*="is-style-notice-"] > :last-child {
	margin-bottom: 0;
}
.blk-notice--success,
.is-style-notice-success {
	background: var(--wp--preset--color--success-bg);
	color: var(--wp--preset--color--success);
}
.blk-notice--warning,
.is-style-notice-warning {
	background: var(--wp--preset--color--warning-bg);
	color: var(--wp--preset--color--warning);
}
.blk-notice--error,
.is-style-notice-error {
	background: var(--wp--preset--color--error-bg);
	color: var(--wp--preset--color--error);
}
.blk-notice--info,
.is-style-notice-info {
	background: var(--wp--preset--color--info-bg);
	color: var(--wp--preset--color--info);
}
.blk-notice a,
.is-style-notice-success a,
.is-style-notice-warning a,
.is-style-notice-error a,
.is-style-notice-info a {
	color: inherit;
}

/* Toast: Tinta bar with an action in Cinta-on-dark. WooCommerce block snackbars use it too. */
.blk-toast,
.wc-block-components-notice-snackbar,
.wp-block-group.is-style-toast {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	font-size: 15px;
	font-weight: 500;
}
.blk-toast__action,
.wc-block-components-notice-snackbar .wc-block-components-button,
.wc-block-components-notice-snackbar .wc-block-components-notice-banner__dismiss {
	min-width: var(--wp--custom--touch-target);
	min-height: var(--wp--custom--touch-target);
	padding: 0 8px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--accent-soft);
	font: 600 14px/1.2 var(--wp--preset--font-family--instrument-sans);
	cursor: pointer;
}
.wc-block-components-notice-snackbar .wc-block-components-notice-banner__dismiss svg {
	fill: currentColor;
}
.blk-toast :where(a, button):focus-visible,
.wc-block-components-notice-snackbar :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--secondary);
}

/* ---- Card block style ---- */
.wp-block-group.is-style-card {
	box-sizing: border-box;
	padding: 24px;
	border: 1px solid var(--blk-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

/* ---- Quantity stepper: markup .blk-stepper and WooCommerce's block selector ---- */
.blk-stepper,
.wc-block-components-quantity-selector {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	width: auto;
	margin: 0;
	border: var(--wp--custom--border-width) solid var(--blk-line);
	border-radius: var(--wp--custom--radius--control);
	background: transparent;
}
.wc-block-components-quantity-selector::after {
	display: none;
}
.blk-stepper__btn,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	box-sizing: border-box;
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--touch-target);
	min-width: var(--wp--custom--touch-target);
	height: var(--wp--custom--touch-target);
	min-height: var(--wp--custom--touch-target);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	background: transparent;
	color: var(--blk-text);
	font: 400 20px/1 var(--wp--preset--font-family--instrument-sans);
	opacity: 1;
	cursor: pointer;
}
.blk-stepper__btn:disabled,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	color: var(--blk-muted);
	cursor: not-allowed;
	opacity: 0.55;
}
.blk-stepper__value,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	box-sizing: border-box;
	width: 40px;
	min-width: 32px;
	height: var(--wp--custom--touch-target);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--blk-text);
	font: 500 16px/1 var(--wp--preset--font-family--ibm-plex-mono);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.blk-stepper__value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input:focus {
	box-shadow: none;
	outline: 3px solid var(--blk-ring);
	outline-offset: -3px;
}

/* ---- Loading skeleton (opacity pulse, 1.4 s) ---- */
@keyframes blk-shimmer {
	0%,
	100% {
		opacity: 0.55;
	}
	50% {
		opacity: 1;
	}
}
.blk-skeleton,
.wc-block-components-skeleton__element {
	display: block;
	border-radius: 6px;
	background: var(--wp--preset--color--surface-alt);
	animation: blk-shimmer 1.4s infinite;
}
.blk-skeleton--media {
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--control);
}
.blk-skeleton--title {
	height: 18px;
	width: 70%;
}
.blk-skeleton--line {
	height: 14px;
	width: 40%;
}

/* ---- Confirmation modal (native <dialog>; blocks-theme components.js opens it) ---- */
.blk-modal {
	box-sizing: border-box;
	width: min(440px, calc(100% - 32px));
	max-width: none;
	padding: 28px;
	border: 0;
	border-radius: 20px;
	background: var(--wp--preset--color--surface);
	color: var(--blk-text);
	box-shadow: var(--wp--custom--shadow-float);
}
.blk-modal::backdrop {
	background: var(--wp--custom--scrim);
}
.blk-modal[open] {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.blk-modal__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--bricolage-grotesque);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.5px;
	line-height: 1.15;
}
.blk-modal__text {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.5;
}
.blk-modal__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

/* ---- Cookie banner (consent text is owner copy: see the placeholder in the pattern) ---- */
.blk-cookie {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 420px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	font-size: 14px;
}
.blk-cookie[hidden] {
	display: none;
}
.blk-cookie p {
	margin: 0;
}
.blk-cookie__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.blk-cookie .blk-btn {
	min-height: var(--wp--custom--touch-target);
	padding: 0 14px;
	border-radius: 10px;
	font-size: 14px;
}
.blk-cookie .blk-btn--light {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
.blk-cookie .blk-btn--ghost {
	border-color: var(--wp--preset--color--secondary);
	background: transparent;
	color: var(--wp--preset--color--surface);
}
.blk-cookie :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--secondary);
}

/* ---- WhatsApp floating button (#107): printed in wp_footer when blocks_whatsapp_number is set ---- */
.blk-whatsapp {
	box-sizing: border-box;
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--success);
	color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow-float);
}
.blk-whatsapp:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}
.blk-whatsapp--static {
	position: static;
}
/* Phone product page: the configurator's sticky price bar takes the bottom edge (5rem), so the button sits above it. */
@media (max-width: 600px) {
	body.single-product .blk-whatsapp {
		bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
	}
	/* Phone cart and checkout: the floating button would cover the main action button (axe target-size), so it is hidden; the footer keeps the WhatsApp link. */
	body.woocommerce-cart .blk-whatsapp:not(.blk-whatsapp--static),
	body.woocommerce-checkout .blk-whatsapp:not(.blk-whatsapp--static) {
		display: none;
	}
}

/* ---- Componentes page (visual tests): the gallery of every shared component.
   The class is .blk-components, not .blk-gallery: that one is the product gallery (#256, #317). ---- */
.blk-components {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.blk-gallery__panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--blk-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}
.blk-gallery__panel > * {
	margin-block: 0 !important;
}
.blk-gallery__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--blk-muted);
}
.blk-gallery__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}
@media (max-width: 1099px) {
	.blk-components {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 699px) {
	.blk-components {
		grid-template-columns: minmax(0, 1fr);
	}
	.blk-gallery__panel {
		padding: 16px;
	}
}
.blk-components > * {
	margin-block: 0 !important;
}