/**
 * SDH custom button styles.
 * Works both as Gutenberg core/button block styles and as the [sdh_button] shortcode.
 */

.sdh-btn,
.wp-block-button.is-style-sdh-outline .wp-block-button__link,
.wp-block-button.is-style-sdh-ghost .wp-block-button__link,
.wp-block-button.is-style-sdh-rounded .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
	border: 2px solid transparent;
	border-radius: 4px;
	padding: 0.7em 1.4em;
}

.sdh-btn:hover,
.sdh-btn:focus {
	transform: translateY(-1px);
}

/* Sizes */
.sdh-btn--sm { padding: 0.45em 1em; font-size: 0.875em; }
.sdh-btn--lg { padding: 0.9em 1.8em; font-size: 1.125em; }

/* Primary (solid, uses theme accent color) */
.sdh-btn--primary,
.wp-block-button:not(.is-style-sdh-outline):not(.is-style-sdh-ghost) .wp-block-button__link {
	background-color: var(--ast-global-color-0, #d32f2f);
	border-color: var(--ast-global-color-0, #d32f2f);
	color: #fff;
}
.sdh-btn--primary:hover {
	background-color: var(--ast-global-color-1, #a02525);
	border-color: var(--ast-global-color-1, #a02525);
	color: #fff;
}

/* Secondary (solid, muted) */
.sdh-btn--secondary {
	background-color: var(--ast-global-color-2, #2b2b2b);
	border-color: var(--ast-global-color-2, #2b2b2b);
	color: #fff;
}
.sdh-btn--secondary:hover {
	background-color: #000;
	border-color: #000;
	color: #fff;
}

/* Outline */
.sdh-btn--outline,
.wp-block-button.is-style-sdh-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--ast-global-color-0, #d32f2f);
	color: var(--ast-global-color-0, #d32f2f);
}
.sdh-btn--outline:hover,
.wp-block-button.is-style-sdh-outline .wp-block-button__link:hover {
	background-color: var(--ast-global-color-0, #d32f2f);
	color: #fff;
}

/* Ghost (no border, text only until hover) */
.sdh-btn--ghost,
.wp-block-button.is-style-sdh-ghost .wp-block-button__link {
	background-color: transparent;
	border-color: transparent;
	color: var(--ast-global-color-0, #d32f2f);
	padding-left: 0.2em;
	padding-right: 0.2em;
}
.sdh-btn--ghost:hover,
.wp-block-button.is-style-sdh-ghost .wp-block-button__link:hover {
	text-decoration: underline;
}

/* Rounded (pill) */
.sdh-btn--rounded,
.wp-block-button.is-style-sdh-rounded .wp-block-button__link {
	border-radius: 999px;
}

.sdh-btn .sdh-btn__icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
}

/**
 * Round header/footer icon button (e.g. payment link), styled to match
 * Astra's built-in round action icons (Account, Search, Cart).
 */
.sdh-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--ast-header-icon-color, currentColor);
	background-color: transparent;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
}

.sdh-icon-btn:hover,
.sdh-icon-btn:focus {
	background-color: rgba(0, 0, 0, 0.06);
	color: var(--ast-global-color-0, #d32f2f);
}

.sdh-icon-btn svg {
	/* Width/height come from the svg's own attributes (set from the
	   Customizer "Icon size" control) - don't fix them here or they'd
	   always win over that setting. */
	display: block;
	flex-shrink: 0;
}