/*
 * BMP Global UI
 * Shared frontend polish for site buttons and form controls.
 */

@keyframes bmp-global-ui-wave {
	0% {
		background-position: -200% 0%, 0% 0%;
	}

	50% {
		background-position: 0% 0%, 0% 0%;
	}

	100% {
		background-position: 200% 0%, 0% 0%;
	}
}

:root {
	--bmp-ui-radius: 6px;
	--bmp-ui-button-height: 32px;
	--bmp-ui-button-padding: 0 15px;
	--bmp-ui-button-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
	--bmp-ui-focus: 0 0 0 3px rgba(0, 204, 153, 0.2);
	--bmp-ui-teal-bg: linear-gradient(110deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 48%, rgba(255,255,255,0.28) 68%, rgba(255,255,255,0) 100%), linear-gradient(#ccfff6, #99ffe8);
	--bmp-ui-teal-border: #00cc99;
	--bmp-ui-teal-text: #007755;
	--bmp-ui-teal-shadow: 0 0 0 3px rgba(0, 204, 153, 0.15), 0 4px 8px rgba(0, 204, 153, 0.2);
}

html.light-mode,
body.light-mode,
[data-theme="light"],
body[data-theme="light"] {
	--bmp-ui-surface: #ffffff;
	--bmp-ui-surface-muted: #f3f4f6;
	--bmp-ui-text: #1f2937;
	--bmp-ui-muted-text: #6b7280;
	--bmp-ui-border: #e5e7eb;
	--bmp-ui-field-bg: #ffffff;
	--bmp-ui-field-border: #d1d5db;
	--bmp-ui-field-placeholder: #6b7280;
	--bmp-ui-button-bg: linear-gradient(110deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 48%, rgba(255,255,255,0.35) 68%, rgba(255,255,255,0) 100%), linear-gradient(#e2e2e2, #d4d4d4);
	--bmp-ui-button-border-top: #f0f0f0;
	--bmp-ui-button-border-side: #b0b0b0;
	--bmp-ui-button-text: #2d2d2d;
}

html.dark-mode,
body.dark-mode,
[data-theme="dark"],
body[data-theme="dark"] {
	--bmp-ui-surface: #1a1a1a;
	--bmp-ui-surface-muted: #2a2a2a;
	--bmp-ui-text: #e0e0e0;
	--bmp-ui-muted-text: #b8b8b8;
	--bmp-ui-border: #333333;
	--bmp-ui-field-bg: #1f1f1f;
	--bmp-ui-field-border: #333333;
	--bmp-ui-field-placeholder: #9ca3af;
	--bmp-ui-button-bg: linear-gradient(110deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 48%, rgba(255,255,255,0.12) 68%, rgba(255,255,255,0) 100%), linear-gradient(#383838, #343434);
	--bmp-ui-button-border-top: #555555;
	--bmp-ui-button-border-side: #282828;
	--bmp-ui-button-text: #ffffff;
}

html.light-mode input[type="text"],
html.light-mode input[type="email"],
html.light-mode input[type="url"],
html.light-mode input[type="password"],
html.light-mode input[type="search"],
html.light-mode input[type="tel"],
html.light-mode input[type="number"],
html.light-mode input[type="date"],
html.light-mode input[type="time"],
html.light-mode textarea,
html.light-mode select,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="url"],
html.dark-mode input[type="password"],
html.dark-mode input[type="search"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="number"],
html.dark-mode input[type="date"],
html.dark-mode input[type="time"],
html.dark-mode textarea,
html.dark-mode select,
body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="url"],
body.light-mode input[type="password"],
body.light-mode input[type="search"],
body.light-mode input[type="tel"],
body.light-mode input[type="number"],
body.light-mode input[type="date"],
body.light-mode input[type="time"],
body.light-mode textarea,
body.light-mode select,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="url"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode textarea,
body.dark-mode select {
	background: var(--bmp-ui-field-bg);
	border: 1px solid var(--bmp-ui-field-border);
	border-radius: var(--bmp-ui-radius);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
	color: var(--bmp-ui-text);
	min-height: 32px;
	outline: none;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

html.light-mode textarea,
html.dark-mode textarea,
body.light-mode textarea,
body.dark-mode textarea {
	min-height: 96px;
}

html.light-mode input::placeholder,
html.light-mode textarea::placeholder,
body.light-mode input::placeholder,
body.light-mode textarea::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
	color: var(--bmp-ui-field-placeholder);
	opacity: 1;
}

html.light-mode input:focus,
html.light-mode textarea:focus,
html.light-mode select:focus,
body.light-mode input:focus,
body.light-mode textarea:focus,
body.light-mode select:focus,
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
	border-color: var(--bmp-ui-teal-border);
	box-shadow: var(--bmp-ui-focus);
}

html.light-mode .standard-form,
html.light-mode .woocommerce form,
html.light-mode .kol-form,
body.light-mode .standard-form,
body.light-mode .woocommerce form,
body.light-mode .kol-form,
html.dark-mode .standard-form,
html.dark-mode .woocommerce form,
html.dark-mode .kol-form,
body.dark-mode .standard-form,
body.dark-mode .woocommerce form,
body.dark-mode .kol-form {
	color: var(--bmp-ui-text);
}

html.light-mode .standard-form label,
html.light-mode .woocommerce form label,
body.light-mode .standard-form label,
body.light-mode .woocommerce form label,
html.dark-mode .standard-form label,
html.dark-mode .woocommerce form label,
body.dark-mode .standard-form label,
body.dark-mode .woocommerce form label {
	color: var(--bmp-ui-text);
}

html.light-mode .description,
html.light-mode .form-row .optional,
body.light-mode .description,
body.light-mode .form-row .optional,
html.dark-mode .description,
html.dark-mode .form-row .optional,
body.dark-mode .description,
body.dark-mode .form-row .optional {
	color: var(--bmp-ui-muted-text);
}

html.light-mode .button,
html.light-mode .btn,
html.light-mode .wp-block-button__link,
html.light-mode button[type="submit"],
html.light-mode input[type="submit"],
html.light-mode input[type="button"],
html.light-mode input[type="reset"],
html.light-mode .woocommerce a.button,
html.light-mode .woocommerce button.button,
html.light-mode .woocommerce input.button,
html.light-mode #buddypress .generic-button a,
html.light-mode #buddypress .comment-reply-link,
body.light-mode .button,
body.light-mode .btn,
body.light-mode .wp-block-button__link,
body.light-mode button[type="submit"],
body.light-mode input[type="submit"],
body.light-mode input[type="button"],
body.light-mode input[type="reset"],
body.light-mode .woocommerce a.button,
body.light-mode .woocommerce button.button,
body.light-mode .woocommerce input.button,
body.light-mode #buddypress .generic-button a,
body.light-mode #buddypress .comment-reply-link,
html.dark-mode .button,
html.dark-mode .btn,
html.dark-mode .wp-block-button__link,
html.dark-mode button[type="submit"],
html.dark-mode input[type="submit"],
html.dark-mode input[type="button"],
html.dark-mode input[type="reset"],
html.dark-mode .woocommerce a.button,
html.dark-mode .woocommerce button.button,
html.dark-mode .woocommerce input.button,
html.dark-mode #buddypress .generic-button a,
html.dark-mode #buddypress .comment-reply-link,
body.dark-mode .button,
body.dark-mode .btn,
body.dark-mode .wp-block-button__link,
body.dark-mode button[type="submit"],
body.dark-mode input[type="submit"],
body.dark-mode input[type="button"],
body.dark-mode input[type="reset"],
body.dark-mode .woocommerce a.button,
body.dark-mode .woocommerce button.button,
body.dark-mode .woocommerce input.button,
body.dark-mode #buddypress .generic-button a,
body.dark-mode #buddypress .comment-reply-link {
	align-items: center;
	animation: bmp-global-ui-wave 9s linear infinite;
	background: var(--bmp-ui-button-bg);
	background-size: 220% 100%, 100% 100%;
	border-bottom: 1px solid var(--bmp-ui-button-border-side);
	border-left: 1px solid var(--bmp-ui-button-border-top);
	border-radius: var(--bmp-ui-radius);
	border-right: 1px solid var(--bmp-ui-button-border-side);
	border-top: 1px solid var(--bmp-ui-button-border-top);
	box-shadow: var(--bmp-ui-button-shadow);
	box-sizing: border-box;
	color: var(--bmp-ui-button-text);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	gap: 6px;
	height: var(--bmp-ui-button-height);
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	max-width: 100%;
	min-height: var(--bmp-ui-button-height);
	padding: var(--bmp-ui-button-padding);
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	transition: box-shadow 160ms ease, filter 160ms ease, transform 160ms ease;
	vertical-align: middle;
	white-space: nowrap;
	width: auto;
}

html.light-mode .button:hover,
html.light-mode .btn:hover,
html.light-mode .wp-block-button__link:hover,
html.light-mode button[type="submit"]:hover,
html.light-mode input[type="submit"]:hover,
html.light-mode input[type="button"]:hover,
html.light-mode input[type="reset"]:hover,
html.light-mode #buddypress .generic-button a:hover,
body.light-mode .button:hover,
body.light-mode .btn:hover,
body.light-mode .wp-block-button__link:hover,
body.light-mode button[type="submit"]:hover,
body.light-mode input[type="submit"]:hover,
body.light-mode input[type="button"]:hover,
body.light-mode input[type="reset"]:hover,
body.light-mode #buddypress .generic-button a:hover,
html.dark-mode .button:hover,
html.dark-mode .btn:hover,
html.dark-mode .wp-block-button__link:hover,
html.dark-mode button[type="submit"]:hover,
html.dark-mode input[type="submit"]:hover,
html.dark-mode input[type="button"]:hover,
html.dark-mode input[type="reset"]:hover,
html.dark-mode #buddypress .generic-button a:hover,
body.dark-mode .button:hover,
body.dark-mode .btn:hover,
body.dark-mode .wp-block-button__link:hover,
body.dark-mode button[type="submit"]:hover,
body.dark-mode input[type="submit"]:hover,
body.dark-mode input[type="button"]:hover,
body.dark-mode input[type="reset"]:hover,
body.dark-mode #buddypress .generic-button a:hover {
	color: var(--bmp-ui-button-text);
	filter: brightness(1.04);
	text-decoration: none;
	transform: translateY(-1px);
}

html.light-mode .button:focus-visible,
html.light-mode .btn:focus-visible,
html.light-mode .wp-block-button__link:focus-visible,
html.light-mode button[type="submit"]:focus-visible,
html.light-mode input[type="submit"]:focus-visible,
html.light-mode #buddypress .generic-button a:focus-visible,
body.light-mode .button:focus-visible,
body.light-mode .btn:focus-visible,
body.light-mode .wp-block-button__link:focus-visible,
body.light-mode button[type="submit"]:focus-visible,
body.light-mode input[type="submit"]:focus-visible,
body.light-mode #buddypress .generic-button a:focus-visible,
html.dark-mode .button:focus-visible,
html.dark-mode .btn:focus-visible,
html.dark-mode .wp-block-button__link:focus-visible,
html.dark-mode button[type="submit"]:focus-visible,
html.dark-mode input[type="submit"]:focus-visible,
html.dark-mode #buddypress .generic-button a:focus-visible,
body.dark-mode .button:focus-visible,
body.dark-mode .btn:focus-visible,
body.dark-mode .wp-block-button__link:focus-visible,
body.dark-mode button[type="submit"]:focus-visible,
body.dark-mode input[type="submit"]:focus-visible,
body.dark-mode #buddypress .generic-button a:focus-visible {
	outline: none;
	box-shadow: var(--bmp-ui-button-shadow), var(--bmp-ui-focus);
}

html.light-mode .button[disabled],
html.light-mode button[type="submit"][disabled],
html.light-mode input[type="submit"][disabled],
html.light-mode input[type="button"][disabled],
html.light-mode input[type="reset"][disabled],
body.light-mode .button[disabled],
body.light-mode button[type="submit"][disabled],
body.light-mode input[type="submit"][disabled],
body.light-mode input[type="button"][disabled],
body.light-mode input[type="reset"][disabled],
html.dark-mode .button[disabled],
html.dark-mode button[type="submit"][disabled],
html.dark-mode input[type="submit"][disabled],
html.dark-mode input[type="button"][disabled],
html.dark-mode input[type="reset"][disabled],
body.dark-mode .button[disabled],
body.dark-mode button[type="submit"][disabled],
body.dark-mode input[type="submit"][disabled],
body.dark-mode input[type="button"][disabled],
body.dark-mode input[type="reset"][disabled] {
	cursor: not-allowed;
	filter: grayscale(0.2);
	opacity: 0.62;
	transform: none;
}

html.light-mode .friendship-button a,
html.light-mode .friendship-button button,
html.light-mode a.friendship-button,
html.light-mode button.friendship-button,
html.light-mode #buddypress .generic-button.friendship-button a,
html.light-mode #buddypress .friendship-button a,
html.light-mode .request-button .accept,
html.light-mode .buddyx-friendship-btn.accept,
body.light-mode .friendship-button a,
body.light-mode .friendship-button button,
body.light-mode a.friendship-button,
body.light-mode button.friendship-button,
body.light-mode #buddypress .generic-button.friendship-button a,
body.light-mode #buddypress .friendship-button a,
body.light-mode .request-button .accept,
body.light-mode .buddyx-friendship-btn.accept,
html.dark-mode .friendship-button a,
html.dark-mode .friendship-button button,
html.dark-mode a.friendship-button,
html.dark-mode button.friendship-button,
html.dark-mode #buddypress .generic-button.friendship-button a,
html.dark-mode #buddypress .friendship-button a,
html.dark-mode .request-button .accept,
html.dark-mode .buddyx-friendship-btn.accept,
body.dark-mode .friendship-button a,
body.dark-mode .friendship-button button,
body.dark-mode a.friendship-button,
body.dark-mode button.friendship-button,
body.dark-mode #buddypress .generic-button.friendship-button a,
body.dark-mode #buddypress .friendship-button a,
body.dark-mode .request-button .accept,
body.dark-mode .buddyx-friendship-btn.accept {
	animation: bmp-global-ui-wave 8s linear infinite;
	background: var(--bmp-ui-teal-bg);
	background-size: 220% 100%, 100% 100%;
	border: 2px solid var(--bmp-ui-teal-border);
	border-radius: var(--bmp-ui-radius);
	box-shadow: var(--bmp-ui-teal-shadow);
	color: var(--bmp-ui-teal-text);
	font-weight: 800;
	height: var(--bmp-ui-button-height);
	min-height: var(--bmp-ui-button-height);
	padding: var(--bmp-ui-button-padding);
}

html.light-mode .friendship-button a:hover,
html.light-mode .friendship-button button:hover,
html.light-mode a.friendship-button:hover,
html.light-mode button.friendship-button:hover,
html.light-mode #buddypress .generic-button.friendship-button a:hover,
html.light-mode .request-button .accept:hover,
body.light-mode .friendship-button a:hover,
body.light-mode .friendship-button button:hover,
body.light-mode a.friendship-button:hover,
body.light-mode button.friendship-button:hover,
body.light-mode #buddypress .generic-button.friendship-button a:hover,
body.light-mode .request-button .accept:hover,
html.dark-mode .friendship-button a:hover,
html.dark-mode .friendship-button button:hover,
html.dark-mode a.friendship-button:hover,
html.dark-mode button.friendship-button:hover,
html.dark-mode #buddypress .generic-button.friendship-button a:hover,
html.dark-mode .request-button .accept:hover,
body.dark-mode .friendship-button a:hover,
body.dark-mode .friendship-button button:hover,
body.dark-mode a.friendship-button:hover,
body.dark-mode button.friendship-button:hover,
body.dark-mode #buddypress .generic-button.friendship-button a:hover,
body.dark-mode .request-button .accept:hover {
	color: var(--bmp-ui-teal-text);
	filter: brightness(1.03) saturate(1.08);
}

html.light-mode .request-button .reject,
html.light-mode .buddyx-friendship-btn.reject,
body.light-mode .request-button .reject,
body.light-mode .buddyx-friendship-btn.reject,
html.dark-mode .request-button .reject,
html.dark-mode .buddyx-friendship-btn.reject,
body.dark-mode .request-button .reject,
body.dark-mode .buddyx-friendship-btn.reject {
	background: var(--bmp-ui-button-bg);
	border-bottom-color: var(--bmp-ui-button-border-side);
	border-left-color: var(--bmp-ui-button-border-top);
	border-right-color: var(--bmp-ui-button-border-side);
	border-top-color: var(--bmp-ui-button-border-top);
	color: var(--bmp-ui-button-text);
}

@media (prefers-reduced-motion: reduce) {
	html.light-mode .button,
	html.light-mode .btn,
	html.light-mode .wp-block-button__link,
	html.light-mode button[type="submit"],
	html.light-mode input[type="submit"],
	body.light-mode .button,
	body.light-mode .btn,
	body.light-mode .wp-block-button__link,
	body.light-mode button[type="submit"],
	body.light-mode input[type="submit"],
	html.dark-mode .button,
	html.dark-mode .btn,
	html.dark-mode .wp-block-button__link,
	html.dark-mode button[type="submit"],
	html.dark-mode input[type="submit"],
	body.dark-mode .button,
	body.dark-mode .btn,
	body.dark-mode .wp-block-button__link,
	body.dark-mode button[type="submit"],
	body.dark-mode input[type="submit"],
	html.light-mode .friendship-button a,
	html.dark-mode .friendship-button a,
	body.light-mode .friendship-button a,
	body.dark-mode .friendship-button a {
		animation: none;
		transition: none;
	}
}