/* ==========================================================================
   FourteenRockets Hosting — Domain Search Component
   Brutalist styling applied; refining details.
   ========================================================================== */

[x-cloak] { display: none !important; }

/* --------------------------------------------------
   Wrapper
   -------------------------------------------------- */

.fr-domain-search {
	max-width: 100%;
}

/* --------------------------------------------------
   Search form
   -------------------------------------------------- */

.fr-domain-search__form {
	display: flex;
	margin-bottom: 2.5rem;
	border: 1px solid var( --fr-line-major );
	/* Inset the button: space above, below, and right of it */
	padding: 0.375rem 0.375rem 0.375rem 0;
}

/* Standalone (form-only) mode has no results box to interlock with, so it doesn't
   need the form's bottom margin (that margin is cancelled by the results box's
   negative top margin in full mode). */
.fr-domain-search__form--standalone {
	margin-bottom: 0;
	/* Standalone box sits on a solid tertiary panel — drop the field outline. */
	border: none;
}

.fr-domain-search__input {
	flex: 1;
	min-width: 0;
	border: none;
	padding: 0.875rem 1rem;
	background: var( --wp--preset--color--white, #fff );
	outline: none;
}

.fr-domain-search__input::placeholder {
	color: inherit;
	opacity: 0.4;
}

/* Element+class selector to override WordPress generated button styles */
button.fr-domain-search__button {
	display: inline-grid;
	place-items: center;
	padding: 0.5rem 1.5rem;
	background-color: var( --wp--preset--color--foreground, #000 );
	color: var( --wp--preset--color--background, #fff );
	border: 1px solid var( --wp--preset--color--foreground, #000 );
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* "Search" / "Searching…" share one grid cell so the button is always sized
   to the wider label and never changes width when the state flips. */
.fr-domain-search__btn-text,
.fr-domain-search__btn-searching {
	grid-area: 1 / 1;
	white-space: nowrap;
}

.fr-domain-search__btn-searching {
	visibility: hidden;
}

button.fr-domain-search__button--searching .fr-domain-search__btn-text {
	visibility: hidden;
}

button.fr-domain-search__button--searching .fr-domain-search__btn-searching {
	visibility: visible;
}

button.fr-domain-search__button:hover {
	background-color: var( --wp--preset--color--background, #fff );
	color: var( --wp--preset--color--foreground, #000 );
}

button.fr-domain-search__button:focus-visible {
	outline: 2px solid var( --wp--preset--color--foreground, #000 );
	outline-offset: 2px;
}

/* Disabled (empty input): stays solid black per the button rule —
   only the cursor signals the state, and hover does not invert */
button.fr-domain-search__button:disabled {
	cursor: not-allowed;
}

button.fr-domain-search__button:disabled:hover {
	background-color: var( --wp--preset--color--foreground, #000 );
	color: var( --wp--preset--color--background, #fff );
}

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

/* The box height is set inline by the Alpine component to the measured inner
   height (0 until a search runs); overflow:hidden clips the rows as the box
   grows, so results animate in smoothly on search and "Show more domains". */
.fr-domain-results {
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}

/* Framed once a search has run — the search form's bottom border serves
   as this box's top line, so it reads as one continuous box. */
.fr-domain-results--framed {
	margin-top: -2.5rem; /* cancel the form's margin-bottom — sit flush */
	margin-bottom: 3rem;
	border: 1px solid var( --fr-line-major );
	border-top: none;
}

/* Inner wrapper carries only the vertical padding; its natural height is what the
   box animates to (measured by a ResizeObserver). The horizontal padding lives on
   each .fr-domain-result instead, so a result's bottom border spans the full box
   width — the way the product rows read inside the /order/ category boxes. */
.fr-domain-results__inner {
	padding: 0.5rem 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.fr-domain-results {
		transition: none;
	}
}

/* Let an info popover (the premium / Identity Digital badge tooltip, .fr-info in
   the theme) escape this clipped box. The results box is overflow:hidden so rows
   clip as it grows; while a .fr-info inside is hovered or keyboard-focused the
   results have already settled, so we lift the clip to let the popover show above
   its row. :has scopes this to exactly when a tooltip is open, so the grow /
   "Show more domains" animation keeps its clip. */
.fr-domain-results:has( .fr-info:hover ),
.fr-domain-results:has( .fr-info:focus-within ) {
	overflow: visible;
}

/* Each result row.

   Responsive around the lg breakpoint (1024px):
   - Below lg: three stacked rows — (1) name + availability + offer chip,
     (2) informational badges (premium, Identity Digital), (3) a full-width
     add-to-cart CTA (price left, label + arrow right) like the service-card
     .fr-plan__btn--full. Transfer / Request are plain full-width buttons.
   - From lg: the original single row — name/availability on the left, price +
     badges + button clustered on the right. */

.fr-domain-result {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	/* Horizontal padding here (not on the inner wrapper) insets the content while the
	   bottom border still runs the full box width. */
	padding: 0.75rem 1.5rem;
	border-bottom: 1px solid var( --fr-line-minor );
}

/* Row 1: name + availability, inline (below lg). Offer labels + icons now live in
   the badges row below. The desktop rule flips this to a column (name above the
   status line) for the single-row layout. */

.fr-domain-result__info {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.75rem;
	row-gap: 0.25rem;
	margin-bottom: 1rem;
}

.fr-domain-result__name {
	margin: 0;
}

.fr-domain-result__status-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.fr-domain-result__status {
	margin: 0;
}

/* Row 2: informational badges (premium, Identity Digital). align-items: stretch
   makes every item — the Free/Sale labels and the bordered icon badges — grow to the
   tallest one's height, so the labels line up with the icons without changing their
   (text-sm) type. Desktop (xl) resets to center. */

.fr-domain-result__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
}

/* Below xl (the stacked layout) the row-2 icons read smaller (h-4); from xl the
   Tailwind sizes on the elements (premium h-8, Identity Digital h-6) take over. */
@media ( max-width: 1279.98px ) {
	.fr-domain-result__badges svg {
		height: 1rem;
		width: auto;
	}
}

/* Row 3: price + add-to-cart CTA. Stacks below lg so the price element (when
   shown on its own, e.g. Transfer) sits above the full-width button. */

.fr-domain-result__buy {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
	width: 100%;
}

.fr-domain-result__price {
	white-space: nowrap;
}

/* An Add-to-cart CTA carries the price itself below lg, so the separate price
   element is redundant there — hide it. :has scopes this to exactly the rows that
   render an add button (available, priced). */
.fr-domain-result__buy:has( .fr-domain-result__btn--add ) .fr-domain-result__price {
	display: none;
}

/* ---- Buttons ----
   Element+class selectors override WordPress generated button styles. */
button.fr-domain-result__btn {
	padding: 0.4375rem 0.875rem;
	border: 1px solid var( --wp--preset--color--foreground, #000 );
	background-color: var( --wp--preset--color--foreground, #000 );
	color: var( --wp--preset--color--background, #fff );
	cursor: pointer;
	white-space: nowrap;
	width: 100%;
	transition: background-color 0.15s ease, color 0.15s ease;
}

button.fr-domain-result__btn:hover {
	background-color: var( --wp--preset--color--background, #fff );
	color: var( --wp--preset--color--foreground, #000 );
}

button.fr-domain-result__btn:focus-visible {
	outline: 2px solid var( --wp--preset--color--foreground, #000 );
	outline-offset: 2px;
}

/* Add-to-cart CTA (below lg): full width, price left, label + arrow right. */
button.fr-domain-result__btn--add {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	text-align: left;
}

.fr-domain-result__btn-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.fr-domain-result__btn-label svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

/* "Added" overlay — hidden until the domain is in the cart, then it replaces the
   price + label. */
.fr-domain-result__btn-added {
	display: none;
}

button.fr-domain-result__btn--added .fr-domain-result__btn-price,
button.fr-domain-result__btn--added .fr-domain-result__btn-label {
	display: none;
}

button.fr-domain-result__btn--added .fr-domain-result__btn-added {
	display: inline-flex;
	align-items: center;
}

/* Taken domains (Transfer): outline style, fills on hover */
button.fr-domain-result__btn--taken {
	background-color: var( --wp--preset--color--background, #fff );
	color: var( --wp--preset--color--foreground, #000 );
}

button.fr-domain-result__btn--taken:hover {
	background-color: var( --wp--preset--color--foreground, #000 );
	color: var( --wp--preset--color--background, #fff );
}

/* Already in the cart: inverted and inert — no hover, no pointer.
   Placed after the --taken rules so it wins the specificity tie. */
button.fr-domain-result__btn--added,
button.fr-domain-result__btn--added:hover {
	background-color: var( --wp--preset--color--white, #fff );
	color: var( --wp--preset--color--foreground, #000 );
	cursor: default;
}

/* ---- From xl ( >= 1280px ): back to the single-row desktop layout. The stacked
   mobile layout therefore stays until xl (the /order/ main column narrows at lg when
   the cart appears, so the single row would be cramped there). ---- */
@media ( min-width: 1280px ) {
	.fr-domain-result {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	/* Name over status (the original stacked look). */
	.fr-domain-result__info {
		flex: 1 1 auto;
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0.1rem;
		margin-bottom: 0;
	}

	/* Badges + buy cluster on the right at their natural width. */
	.fr-domain-result__badges,
	.fr-domain-result__buy {
		flex-shrink: 0;
		flex-direction: row;
		width: auto;
	}

	/* The buy cluster centres; the badges keep align-items: stretch (from the base
	   rule) at every size, so the Free/Sale labels grow to match the larger desktop
	   icon height too. */
	.fr-domain-result__buy {
		align-items: center;
		gap: 0.75rem;
	}

	/* The price element shows beside the compact button again. */
	.fr-domain-result__buy:has( .fr-domain-result__btn--add ) .fr-domain-result__price {
		display: inline;
	}

	/* Compact buttons: auto width; hide the in-button price + arrow and swap
	   label/added in one grid cell (no width jump). */
	button.fr-domain-result__btn {
		width: auto;
	}

	button.fr-domain-result__btn--add,
	button.fr-domain-result__btn--taken {
		display: inline-grid;
		justify-items: center;
		gap: 0;
	}

	.fr-domain-result__btn-price {
		display: none;
	}

	.fr-domain-result__btn-label svg {
		display: none;
	}

	.fr-domain-result__btn-label,
	.fr-domain-result__btn-added {
		grid-area: 1 / 1;
		white-space: nowrap;
	}

	button.fr-domain-result__btn--added .fr-domain-result__btn-label {
		display: none;
	}

	button.fr-domain-result__btn--added .fr-domain-result__btn-added {
		display: inline-flex;
	}
}

/* --------------------------------------------------
   Load more button
   -------------------------------------------------- */

.fr-domain-results__more {
	padding: 1rem 0 0.5rem;
	text-align: center;
}

button.fr-domain-results__more-btn {
	padding: 0.5rem 1.5rem;
	border: 1px solid var( --wp--preset--color--foreground, #000 );
	background-color: var( --wp--preset--color--background, #fff );
	color: var( --wp--preset--color--foreground, #000 );
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

button.fr-domain-results__more-btn:hover {
	background-color: var( --wp--preset--color--foreground, #000 );
	color: var( --wp--preset--color--background, #fff );
}

button.fr-domain-results__more-btn:focus-visible {
	outline: 2px solid var( --wp--preset--color--foreground, #000 );
	outline-offset: 2px;
}

button.fr-domain-results__more-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* --------------------------------------------------
   TLD price list
   -------------------------------------------------- */

.fr-domain-price-list {
	margin-top: 3rem;
}

.fr-domain-price-list__header {
	margin-bottom: 0.625rem;
}

.fr-domain-price-list__grid {
	display: grid;
	/* auto-fill packs as many ~12rem columns as the box can hold — keyed to the real
	   container width, not the viewport, so a narrow content-column box shows fewer
	   columns than the full-width box (same approach as the spotlight grid below). */
	grid-template-columns: repeat( auto-fill, minmax( 12rem, 1fr ) );
	column-gap: 2rem;
}

.fr-domain-price-list__item {
	display: flex;
	justify-content: space-between;
	padding: 0.375rem 0;
	border-bottom: 1px solid var( --fr-line-minor );
}

/* --------------------------------------------------
   Highlighted domains row (form-only / standalone mode)
   -------------------------------------------------- */

/* Flexible cards that grow to fill the row and wrap onto new lines. Structural
   only — the card's font size/weight are owned by the theme via utility classes
   on the elements; only layout and the muted suffix live here. */
/* Cards size to their content and never break a name or price onto a second
   line. auto-fill packs as many ~11rem columns as the row can hold — keyed to
   the real container width, not the viewport (this search can sit in a column
   narrower than the page, which is why fixed viewport breakpoints misjudged
   it) — and 1fr stretches them to fill the row. nowrap keeps the name and the
   price each on one line; the 11rem floor clears the widest of the two
   (".foundation" and a "€ 00,00 / year" price). On a full-width desktop all
   eight sit on one row; in a narrower container they wrap to as many per row
   as fit, each card the same size. */
.fr-domain-highlights {
	display: grid;
	/* Two columns on mobile, three from sm ( >= 640px ). Minmax( 0, 1fr ) lets a
	   card shrink below its content width so the nowrap name/price never forces a
	   third column onto a narrow screen. */
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.625rem;
}

@media ( min-width: 640px ) {
	.fr-domain-highlights {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.fr-domain-highlight {
	padding: 0.875rem 1rem;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
}

.fr-domain-highlight__name {
	margin: 0 0 0.5rem;
}

/* Push the price block to the bottom so prices line up across cards of differing
   height (a sale card has two price lines, a normal card one). */
.fr-domain-highlight__price {
	margin: 0;
	margin-top: auto;
}

/* Break the price suffix ("/year" / "/first year") onto its own line so the deal
   price never overflows a narrow two-column card (the card is white-space: nowrap,
   so each line stays intact but the suffix wraps below the amount). */
.fr-domain-highlight__year {
	display: block;
}

/* ---- Mobile ( < sm / 640px ): tighter padding throughout. The results box matches
   the other boxes (16px / 12px); the search field and the Search button get much
   tighter padding so the search row fits a narrow screen. ---- */
@media ( max-width: 639.98px ) {
	.fr-domain-results__inner {
		padding: 0.75rem 0;
	}

	/* Tighter side inset on phones — the border still runs full width. */
	.fr-domain-result {
		padding: 0.75rem 1rem;
	}

	.fr-domain-search__input {
		padding: 0.5rem 0.625rem;
	}

	button.fr-domain-search__button {
		padding: 0.5rem 0.75rem;
	}
}