/**
 * core/button styles — ported from prototype blocks/button.css.
 *
 * Each style only sets --btn-* custom properties; states read them.
 * Styles: primary (default look) | secondary | navy | ghost | hotline | text-arrow | icon
 * Sizes (Additional CSS class on the button): is-size-sm | is-size-lg
 * Icons: sefina/inline-icon format inside the button text.
 */
.wp-block-button {
	--btn-bg: var(--wp--preset--color--cta);
	--btn-bg-hover: var(--wp--preset--color--cta-hover);
	--btn-color: var(--wp--preset--color--on-dark);
	--btn-color-hover: var(--btn-color);
	--btn-border: transparent;
	--btn-border-hover: var(--btn-border);
	--btn-border-width: 1.5px;
	--btn-shadow: none;
	--btn-shadow-hover: var(--btn-shadow);
	--btn-lift: 0px;
	--btn-radius: var(--wp--custom--radius--md);
	--btn-padding-block: 0.75rem;
	--btn-padding-inline: 1.5rem;
	--btn-font-size: var(--wp--preset--font-size--label-md);
	--btn-icon-size: 1.25rem;
}

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--btn-padding-block) var(--btn-padding-inline);
	border: var(--btn-border-width) solid var(--btn-border);
	border-radius: var(--btn-radius);
	background: var(--btn-bg);
	color: var(--btn-color);
	box-shadow: var(--btn-shadow);
	font-size: var(--btn-font-size);
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	transition:
		background-color var(--wp--custom--transition),
		color var(--wp--custom--transition),
		border-color var(--wp--custom--transition),
		box-shadow var(--wp--custom--transition),
		transform var(--wp--custom--transition);
}

.wp-block-button .wp-block-button__link .material-symbols-outlined {
	font-size: var(--btn-icon-size);
	vertical-align: 0;
	transition: transform var(--wp--custom--transition);
}

@media (max-width: 639px) {
	.wp-block-button .wp-block-button__link {
		white-space: normal;
		text-wrap: balance;
	}
}

/* ---------- States ---------- */
.wp-block-button .wp-block-button__link:hover {
	background: var(--btn-bg-hover);
	color: var(--btn-color-hover);
	border-color: var(--btn-border-hover);
	box-shadow: var(--btn-shadow-hover);
	transform: translateY(var(--btn-lift));
}

.wp-block-button .wp-block-button__link:active {
	transform: translateY(0);
}

/* ---------- Styles ---------- */
.wp-block-button.is-style-primary {
	--btn-shadow: var(--wp--preset--shadow--cta);
	--btn-lift: -1px;
}

.wp-block-button.is-style-secondary {
	--btn-bg: transparent;
	--btn-bg-hover: var(--wp--preset--color--primary);
	--btn-color: var(--wp--preset--color--primary);
	--btn-color-hover: var(--wp--preset--color--on-dark);
	--btn-border: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-navy {
	--btn-bg: var(--wp--preset--color--primary);
	--btn-bg-hover: var(--wp--preset--color--tertiary);
	--btn-shadow: var(--wp--preset--shadow--level-1);
	--btn-shadow-hover: var(--wp--preset--shadow--level-2);
}

.wp-block-button.is-style-ghost {
	--btn-bg: rgb(255 255 255 / 0.1);
	--btn-bg-hover: rgb(255 255 255 / 0.2);
	--btn-border: rgb(255 255 255 / 0.2);
	--btn-border-width: 1px;
}

.wp-block-button.is-style-ghost .material-symbols-outlined {
	color: var(--wp--preset--color--highlight-on-dark);
}

.wp-block-button.is-style-ghost .wp-block-button__link em {
	color: var(--wp--preset--color--on-dark-muted);
	font-style: normal;
	font-weight: 400;
}

/* Outline on dark surfaces — white border + white text */
.wp-block-button.is-style-outline-light {
	--btn-bg: transparent;
	--btn-bg-hover: rgb(255 255 255 / 0.1);
	--btn-color: var(--wp--preset--color--on-dark);
	--btn-border: rgb(255 255 255 / 0.85);
	--btn-border-hover: var(--wp--preset--color--on-dark);
}

/* Hotline — lime pill + glowing "online" dot (drawn in CSS, no extra markup) */
.wp-block-button.is-style-hotline {
	--btn-bg: var(--wp--preset--color--brand-green);
	--btn-bg-hover: var(--wp--preset--color--brand-green-hover);
	--btn-color: var(--wp--preset--color--primary-dark);
	--btn-radius: var(--wp--custom--radius--full);
	--btn-shadow: var(--wp--preset--shadow--level-2);
	--btn-font-size: var(--wp--preset--font-size--title-md);
	--btn-padding-inline: 1.25rem;
	--btn-icon-size: 1.5rem;
}

.wp-block-button.is-style-hotline .wp-block-button__link {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.wp-block-button.is-style-hotline .wp-block-button__link::before {
	content: "";
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--cta);
	animation: sefina-pulse 1.8s ease-out infinite;
}

@keyframes sefina-pulse {
	0%   { box-shadow: 0 0 0 0 rgb(43 113 0 / 0.5); }
	70%  { box-shadow: 0 0 0 0.5rem rgb(43 113 0 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(43 113 0 / 0); }
}

/* Text + arrow — colour follows the nearest --accent */
.wp-block-button.is-style-text-arrow {
	--btn-bg: transparent;
	--btn-bg-hover: transparent;
	--btn-color: var(--accent, var(--wp--preset--color--primary));
	--btn-padding-block: 0px;
	--btn-padding-inline: 0px;
	--btn-border-width: 0px;
	--btn-font-size: var(--wp--preset--font-size--title-md);
	--btn-icon-size: 1.125rem;
}

.wp-block-button.is-style-text-arrow .wp-block-button__link {
	gap: var(--wp--preset--spacing--xs);
}

.wp-block-button.is-style-text-arrow .wp-block-button__link:hover .material-symbols-outlined,
:where(.is-style-card-product, .is-style-card):hover .wp-block-button.is-style-text-arrow .material-symbols-outlined {
	transform: translateX(4px);
}

/* Icon — round icon-only action */
.wp-block-button.is-style-icon {
	--btn-radius: var(--wp--custom--radius--full);
	--btn-padding-block: 0px;
	--btn-padding-inline: 0px;
	--btn-shadow: var(--wp--preset--shadow--level-2);
}

.wp-block-button.is-style-icon .wp-block-button__link {
	width: 2.5rem;
	height: 2.5rem;
}

/* ---------- Sizes (Additional CSS class) ---------- */
.wp-block-button.is-size-sm {
	--btn-padding-block: 0.5rem;
	--btn-padding-inline: 1rem;
	--btn-icon-size: 1.125rem;
}

.wp-block-button.is-size-lg {
	--btn-padding-block: 1rem;
	--btn-padding-inline: 2rem;
	--btn-font-size: var(--wp--preset--font-size--title-md);
}

/* Core width control */
.wp-block-button.has-custom-width .wp-block-button__link {
	width: 100%;
	white-space: normal;
}

/* Full-width button rendered by blocks (simulator, callback form) */
.wp-block-button.wp-block-button__width-100 {
	display: flex;
	width: 100%;
}

.wp-block-button.wp-block-button__width-100 .wp-block-button__link {
	width: 100%;
	white-space: normal;
}