/*
 * TBare Domain Search
 *
 * Theme-adaptive by design:
 *  - Inherits font, size and text color from the theme.
 *  - Accent pulls from theme.json presets (block themes) and falls back sensibly.
 *  - Borders/tints derive from currentColor, so they work on light and dark themes.
 *  - Buttons carry .wp-element-button, so block themes style them automatically.
 *  - Everything is wrapped in :where() (zero specificity) so any theme rule wins.
 *
 * Override anything via these custom properties on .tbds.
 */

:where(.tbds) {
	--tbds-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent, var(--wp--preset--color--contrast, #2563eb)));
	--tbds-on-accent: var(--wp--preset--color--base, #fff);
	--tbds-ok: #15803d;
	--tbds-warn: #b45309;
	--tbds-bad: color-mix(in srgb, currentColor 55%, transparent);
	--tbds-border: color-mix(in srgb, currentColor 18%, transparent);
	--tbds-muted: color-mix(in srgb, currentColor 68%, transparent);
	--tbds-tint: color-mix(in srgb, currentColor 4%, transparent);
	--tbds-radius: 0.5em;
	--tbds-gap: 0.75em;

	font: inherit;
	color: inherit;
	max-width: 100%;
	box-sizing: border-box;
}

/* Explicit, not "inherit": inheritance doesn't pass through <details>' internal slot in Chromium. */
:where(.tbds) *,
:where(.tbds) *::before,
:where(.tbds) *::after {
	box-sizing: border-box;
}

/* ---------- Tabs ---------- */

:where(.tbds__tabs) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--tbds-border);
}

:where(.tbds__tab) {
	font: inherit;
	color: var(--tbds-muted);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 0.6em 0.9em;
	cursor: pointer;
}

:where(.tbds__tab:hover) {
	color: inherit;
}

:where(.tbds__tab[aria-selected="true"]) {
	color: inherit;
	font-weight: 600;
	border-bottom-color: var(--tbds-accent);
}

:where(.tbds__tab:focus-visible) {
	outline: 2px solid var(--tbds-accent);
	outline-offset: 2px;
}

/* ---------- Form ---------- */

:where(.tbds__panel[hidden]) {
	display: none;
}

/* Extension checkboxes */
:where(.tbds__tlds) {
	border: 0;
	padding: 0;
	margin: 0 0 1em;
	min-width: 0;
}

:where(.tbds__legend) {
	padding: 0;
	font-size: 0.9em;
	color: var(--tbds-muted);
	margin-bottom: 0.35em;
}

:where(.tbds__checks) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

:where(.tbds__check) {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.9em;
	padding: 0.3em 0.7em;
	border: 1px solid var(--tbds-border);
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
}

:where(.tbds__check:has(input:checked)) {
	border-color: var(--tbds-accent);
	background: color-mix(in srgb, var(--tbds-accent) 10%, transparent);
}

:where(.tbds__check input) {
	margin: 0;
	accent-color: var(--tbds-accent);
}

:where(.tbds__check:focus-within) {
	outline: 2px solid var(--tbds-accent);
	outline-offset: 1px;
}

:where(.tbds__tld-more) {
	margin-top: 0.5em;
}

/* "More extensions +" and "More options +" toggles share one look. */
:where(.tbds__tld-more, .tbds__more) > summary {
	display: inline-block;
	list-style: none;
	cursor: pointer;
	font-size: 0.9em;
	color: var(--tbds-muted);
	margin-bottom: 0.4em;
}

:where(.tbds__tld-more, .tbds__more) > summary::-webkit-details-marker {
	display: none;
}

:where(.tbds__tld-more, .tbds__more) > summary::after {
	content: " +";
	font-weight: 600;
}

:where(.tbds__tld-more[open], .tbds__more[open]) > summary::after {
	content: " −";
}

:where(.tbds__tld-more, .tbds__more) > summary:hover {
	color: inherit;
}

:where(.tbds__label) {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

:where(.tbds__hint) {
	font-weight: 400;
	color: var(--tbds-muted);
}

:where(.tbds__row) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

:where(.tbds__input) {
	flex: 1 1 16em;
	min-width: 0;
	width: 100%;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var(--tbds-border);
	border-radius: var(--tbds-radius);
	padding: 0.65em 0.85em;
}

:where(.tbds__input:focus) {
	outline: 2px solid var(--tbds-accent);
	outline-offset: 1px;
	border-color: var(--tbds-accent);
}

/* Fallback button look for classic themes; block themes override via .wp-element-button. */
:where(.tbds__submit, .tbds__buy) {
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	text-decoration: none;
	color: var(--tbds-on-accent);
	background: var(--tbds-accent);
	border: 1px solid var(--tbds-accent);
	border-radius: var(--tbds-radius);
	padding: 0.65em 1.2em;
}

:where(.tbds__submit:disabled) {
	opacity: 0.6;
	cursor: progress;
}

/*
 * Secondary (outline) buttons: deliberately NOT wrapped in :where(), so the theme's
 * .wp-element-button fill doesn't turn them into a second primary button.
 */
.tbds .tbds__buy.is-secondary {
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	box-shadow: none;
}

.tbds .tbds__buy.is-secondary:hover,
.tbds .tbds__buy.is-secondary:focus-visible {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

:where(.tbds__more) {
	margin-top: 0.6em;
}

:where(.tbds__grid > p) {
	margin: 0 0 0.5em;
}

:where(.tbds__grid) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
	gap: 0 1em;
	margin-top: 0.5em;
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.tbds__hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Status ---------- */

:where(.tbds__status) {
	margin: 0.9em 0 0.5em;
	color: var(--tbds-muted);
	font-size: 0.9em;
	min-height: 1.4em;
}

:where(.tbds__status.is-error) {
	color: var(--tbds-warn);
}

/* ---------- Results ---------- */

:where(.tbds__section) + :where(.tbds__section) {
	margin-top: 1.5em;
}

:where(.tbds__heading) {
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tbds-muted);
	margin: 0 0 0.5em;
}

:where(.tbds__list) {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--tbds-border);
	border-radius: var(--tbds-radius);
	overflow: hidden;
}

:where(.tbds__item) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tbds-gap);
	padding: 0.8em 1em;
	margin: 0;
}

:where(.tbds__item) + :where(.tbds__item) {
	border-top: 1px solid var(--tbds-border);
}

:where(.tbds__item--featured) {
	background: var(--tbds-tint);
}

:where(.tbds__item--featured .tbds__domain) {
	font-size: 1.2em;
}

:where(.tbds__info) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3em 0.75em;
	min-width: 0;
	flex: 1 1 14em;
}

:where(.tbds__domain) {
	font-weight: 600;
	overflow-wrap: anywhere;
}

:where(.tbds__badge) {
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1;
	padding: 0.35em 0.6em;
	border-radius: 999px;
	border: 1px solid currentColor;
	white-space: nowrap;
}

:where(.tbds__price) {
	font-size: 0.9em;
	color: var(--tbds-muted);
}

:where(.tbds__also, .tbds__note) {
	flex-basis: 100%;
	font-size: 0.85em;
	color: var(--tbds-muted);
	margin: 0;
}

:where(.tbds__actions) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
}

:where(.tbds__link) {
	font: inherit;
	font-size: 0.9em;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

:where(.tbds__link:disabled) {
	opacity: 0.6;
	cursor: default;
}

:where(.tbds__tools) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	margin-top: 0.75em;
}

/* Status colors */
:where(.tbds__item.is-available .tbds__badge) {
	color: var(--tbds-ok);
}

:where(.tbds__item.is-likely_available .tbds__badge),
:where(.tbds__item.is-premium .tbds__badge),
:where(.tbds__item.is-unknown .tbds__badge) {
	color: var(--tbds-warn);
}

:where(.tbds__item.is-taken) {
	color: var(--tbds-bad);
}

:where(.tbds__item.is-taken .tbds__domain) {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Loading skeleton */
:where(.tbds__item--skeleton) span {
	display: block;
	height: 1.2em;
	width: 45%;
	border-radius: 0.25em;
	background: var(--tbds-border);
	animation: tbds-pulse 1.2s ease-in-out infinite;
}

@keyframes tbds-pulse {
	50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
	:where(.tbds__item--skeleton) span {
		animation: none;
	}
}

@media (max-width: 480px) {
	:where(.tbds__actions) {
		flex-basis: 100%;
	}
	:where(.tbds__buy) {
		flex: 1 1 auto;
	}
}