/**
 * Frontend primitives. Every value comes from a token, so these surfaces look
 * like they were built by whoever built the theme.
 *
 * Modules enqueue this with wp_enqueue_style( 'bwmss-ui' ).
 */

.bwmss-surface {
	background: var(--bwmss-color-surface, #fff);
	color: var(--bwmss-color-text, #22272e);
	font-family: var(--bwmss-font-body, inherit);
	font-size: var(--bwmss-font-size, 16px);
	line-height: var(--bwmss-font-line, 1.6);
	border: 1px solid var(--bwmss-color-border, #e2e5ea);
	border-radius: var(--bwmss-radius-card, 6px);
	box-shadow: var(--bwmss-shadow-card, 0 8px 30px rgba(15, 20, 30, 0.12));
}

.bwmss-surface h1,
.bwmss-surface h2,
.bwmss-surface h3 {
	font-family: var(--bwmss-font-heading, inherit);
	font-weight: var(--bwmss-font-weight-heading, 600);
	letter-spacing: var(--bwmss-font-letter-heading, normal);
	color: var(--bwmss-color-heading, #12161c);
	margin-top: 0;
}

.bwmss-muted {
	color: var(--bwmss-color-muted, #6b7280);
}

.bwmss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--bwmss-color-primary, #1f6feb);
	color: var(--bwmss-color-on-primary, #fff);
	padding: var(--bwmss-button-padding, 12px 22px);
	border: 0;
	border-radius: var(--bwmss-radius-button, 4px);
	font-family: inherit;
	font-weight: var(--bwmss-button-weight, 600);
	text-transform: var(--bwmss-button-transform, none);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--bwmss-motion-duration, 200ms) var(--bwmss-motion-easing, ease);
}

.bwmss-btn:hover,
.bwmss-btn:focus-visible {
	background: var(--bwmss-color-primary-hover, #1a5fd0);
	color: var(--bwmss-color-on-primary, #fff);
}

.bwmss-btn--quiet {
	background: var(--bwmss-color-primary-soft, #eef4ff);
	color: var(--bwmss-color-primary, #1f6feb);
}

.bwmss-field {
	width: 100%;
	padding: 11px 14px;
	font-size: 16px; /* Below 16px iOS zooms the page on focus. */
	font-family: inherit;
	color: var(--bwmss-color-text, #22272e);
	background: var(--bwmss-color-surface, #fff);
	border: 1px solid var(--bwmss-color-border, #e2e5ea);
	border-radius: var(--bwmss-radius-input, 4px);
}

.bwmss-field:focus {
	outline: 2px solid var(--bwmss-color-primary, #1f6feb);
	outline-offset: 1px;
}

.bwmss-overlay {
	position: fixed;
	inset: 0;
	background: var(--bwmss-color-overlay, rgba(10, 14, 20, 0.55));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--bwmss-layout-gutter, 20px);
	z-index: 999990;
}

.bwmss-modal {
	width: min(460px, 100%);
	padding: 28px;
	max-height: 90svh;
	overflow-y: auto;
	overflow-x: clip;
}

.bwmss-toast {
	position: fixed;
	left: var(--bwmss-layout-gutter, 20px);
	bottom: var(--bwmss-layout-gutter, 20px);
	width: min(340px, calc(100vw - 40px));
	padding: 16px 18px;
	z-index: 999980;
}

:where([dir="rtl"]) .bwmss-toast {
	left: auto;
	right: var(--bwmss-layout-gutter, 20px);
}

@media (prefers-reduced-motion: reduce) {
	.bwmss-btn,
	.bwmss-surface {
		transition: none !important;
	}
}