/**
 * AEserver Domain Search — frontend styles.
 * Scoped to .aeds-widget so we don't bleed into theme styles.
 */

:root {
	--aeds-primary: #c8102e;
	--aeds-primary-dark: #a40d24;
	--aeds-text: #1a1a1a;
	--aeds-text-muted: #6a6a6a;
	--aeds-border: #e6e6e6;
	--aeds-row-bg: #f6f7f9;
	--aeds-row-bg-alt: #ffffff;
	--aeds-success: #0a8754;
	--aeds-radius: 14px;
	--aeds-radius-sm: 8px;
	--aeds-shadow: 0 1px 2px rgba(15,17,21,.04), 0 4px 16px rgba(15,17,21,.04);
}

.aeds-widget,
.aeds-widget *,
.aeds-widget *::before,
.aeds-widget *::after {
	box-sizing: border-box;
}

.aeds-widget {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
	color: var(--aeds-text);
	font-size: 15px;
	line-height: 1.4;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
/* Hero design fills the parent container (theme content width). The 1200px
   cap above is the right call for the classic compact header but truncates
   the white card on hero. Let it grow; the form/chips inside still cap
   themselves via their own max-widths.
   Also drop the explicit system-font stack so descendants inherit the
   theme's body font — matching the look of the standalone landing-page
   hero, which has no font-family of its own and inherits too. */
.aeds-widget[data-aeds-header="hero"] {
	max-width: none;
	font-family: inherit;
}
/* Below 600px the widget normally adds 10px L/R padding (good for the
   classic compact design) — but in hero mode that stacks with the hero
   wrapper's own 10px, doubling the gap. Drop the widget padding here so
   only the hero's gap to the edge applies. */
@media (max-width: 600px) {
	.aeds-widget[data-aeds-header="hero"] {
		padding-left: 0;
		padding-right: 0;
	}
}
.aeds-widget *,
.aeds-widget *::before,
.aeds-widget *::after {
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.aeds-widget {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.aeds-h1 {
	margin: 30px 0;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--aeds-text, #1d2327);
	line-height: 1.2;
}

/* ---- Search bar ---- */
.aeds-search-bar {
	display: flex;
	align-items: stretch;
	border: 2px solid var(--aeds-primary);
	border-radius: var(--aeds-radius);
	background: #fff;
	padding: 6px;
	gap: 6px;
	transition: box-shadow .15s ease;
	box-shadow: var(--aeds-shadow);
}
.aeds-search-bar:focus-within {
	box-shadow: 0 0 0 4px rgba(200, 16, 46, .12), var(--aeds-shadow);
}

.aeds-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	padding: 14px 18px;
	font-size: 17px;
	font-weight: 500;
	color: var(--aeds-text);
	background: transparent;
	font-family: inherit;
}
.aeds-search-input::placeholder {
	color: #9aa0a6;
	font-weight: 400;
}

.aeds-search-btn {
	flex: 0 0 auto;
	padding: 0 36px;
	border: 0;
	border-radius: 10px;
	background: var(--aeds-primary);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
	font-family: inherit;
}
.aeds-search-btn:hover { background: var(--aeds-primary-dark); }
.aeds-search-btn:active { transform: translateY(1px); }
.aeds-search-btn:disabled { opacity: .5; cursor: progress; }

/* ---- Page hero header (alternate design) ----------------------------------
   Activated when admin sets header_design = 'hero'. Mirrors the standalone
   landing-page hero markup the parent site already uses (eyebrow + big H1
   with red accent + subtitle + large search bar + TLD price chips). Class
   names are prefixed `aeds-page-hero__` so they don't collide with the
   site's own `.aes-hero` rules or the result-card hero `.aeds-hero`. */
.aeds-page-hero {
	--aeds-ph-ink: #0F1A2E;
	--aeds-ph-ink-soft: #4A5568;
	--aeds-ph-ink-faded: #8E97A8;
	--aeds-ph-border: #E8E4DE;
	--aeds-ph-border-strong: #D4CDC4;
	--aeds-ph-gold: #C9A961;
	padding: 33px 24px;
	color: var(--aeds-ph-ink);
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Positioning context for the absolute badge. NOTE: no overflow:hidden
	   here — combined with position:relative it would clip the badge
	   whenever its `left: calc(50% + 320px)` extends past the section's
	   right edge. The reference design avoided this by leaving .aes-hero
	   unpositioned, but that makes the badge's coordinates depend on the
	   theme's ancestor chain. We keep position:relative for stability and
	   skip overflow:hidden so the badge can extend freely. */
	position: relative;
}
.aeds-page-hero__inner {
	margin: 0 auto;
	background: #fff;
	padding: 43px;
	border-radius: 20px;
	position: relative;
	z-index: 1;
}

/* Eyebrow pill */
.aeds-page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px;
	background: #fff;
	border: 1px solid var(--aeds-ph-border-strong);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	color: var(--aeds-ph-ink-soft);
	letter-spacing: .5px;
	text-transform: uppercase;
	margin-bottom: 28px;
	box-shadow: 0 2px 6px -2px rgba(15, 26, 46, .08);
}
.aeds-page-hero__pulse {
	width: 7px;
	height: 7px;
	background: var(--aeds-primary, #c8102e);
	border-radius: 50%;
}

/* H1 */
.aeds-page-hero__h1 {
	/* Matches the standalone landing-page hero exactly. Now that the
	   widget inherits the theme font (we cleared .aeds-widget's system
	   stack in hero mode), 55px / 800 / -2.2px renders the same as the
	   reference design. */
	font-size: 55px;
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -2.2px;
	color: var(--aeds-ph-ink);
	margin: 0 auto 24px;
	max-width: 820px;
}
.aeds-page-hero__accent {
	color: var(--aeds-primary, #c8102e);
	position: relative;
	display: inline-block;
}
.aeds-page-hero__accent::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 8px;
	height: 12px;
	background: rgba(200, 16, 46, .13);
	z-index: -1;
	border-radius: 2px;
}

/* Subtitle */
.aeds-page-hero__subtitle {
	font-size: 18px;
	color: var(--aeds-ph-ink-soft);
	line-height: 1.55;
	margin: 0 auto 40px;
	max-width: 680px;
}
.aeds-page-hero__subtitle strong { color: var(--aeds-ph-ink); font-weight: 700; }

/* Search bar */
.aeds-page-hero__search {
	background: #fff;
	border: 1px solid var(--aeds-ph-border-strong);
	border-radius: 16px;
	padding: 7px;
	display: flex;
	align-items: center;
	max-width: 720px;
	margin: 0 auto 0px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .6) inset,
		0 12px 32px -10px rgba(15, 26, 46, .16),
		0 2px 6px -2px rgba(15, 26, 46, .05);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.aeds-page-hero__search:focus-within {
	border-color: var(--aeds-ph-ink);
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .6) inset,
		0 18px 40px -12px rgba(15, 26, 46, .22),
		0 4px 10px -2px rgba(15, 26, 46, .08);
}
.aeds-page-hero__search-icon {
	padding: 0 14px 0 20px;
	color: var(--aeds-ph-ink-faded);
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
/* Doubled selector wins specificity over .aeds-search-input shared earlier. */
.aeds-page-hero__search-input.aeds-search-input {
	flex: 1;
	border: 0;
	outline: 0;
	font-size: 18px;
	font-family: inherit;
	font-weight: 500;
	padding: 18px 0;
	color: var(--aeds-ph-ink);
	background: transparent;
	min-width: 0;
	text-align: left;
}
.aeds-page-hero__search-input.aeds-search-input::placeholder {
	color: var(--aeds-ph-ink-faded);
	font-weight: 500;
}
.aeds-page-hero__search-btn {
	background: var(--aeds-primary, #c8102e);
	color: #fff;
	border: 0;
	padding: 18px 30px;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	letter-spacing: .3px;
	border-radius: 11px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: background .15s ease, transform .15s ease;
	white-space: nowrap;
	flex-shrink: 0;
}
.aeds-page-hero__search-btn:hover  { background: var(--aeds-primary-dark, #9A0A22); }
.aeds-page-hero__search-btn:active { transform: scale(.98); }
.aeds-page-hero__search-btn svg    { transition: transform .18s ease; }
.aeds-page-hero__search-btn:hover svg { transform: translateX(4px); }

/* TLD chips */
.aeds-page-hero__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 auto;
	max-width: 720px;
}
.aeds-page-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--aeds-ph-border-strong);
	padding: 9px 16px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aeds-ph-ink);
	font-family: inherit;
	text-decoration: none;
	cursor: default;
	transition: all .15s ease;
}
.aeds-page-hero__chip-ext   { color: var(--aeds-primary, #c8102e); font-weight: 800; font-size: 14px; }
.aeds-page-hero__chip-price { color: var(--aeds-ph-ink-soft); font-weight: 500; font-size: 12px; }
.aeds-page-hero__chip-price strong { color: var(--aeds-ph-ink); font-weight: 700; }
.aeds-page-hero__chip--more {
	border-style: dashed;
	color: var(--aeds-ph-ink-soft);
	background: transparent;
	cursor: pointer;
}
.aeds-page-hero__chip--more:hover {
	border-color: var(--aeds-ph-ink);
	color: var(--aeds-ph-ink);
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -6px rgba(15, 26, 46, .18);
	border-style: solid;
}

/* Extras block — trust row, promo bar, notice. Wrapped together so a
   single rule can hide them all when a search is active (alongside the
   chips). Sits below the chips in the white card. */
.aeds-page-hero__extras {
	margin-top: 32px;
}

/* Trust row */
.aeds-page-hero__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding-top: 32px;
	border-top: 1px solid var(--aeds-ph-border);
	font-size: 13px;
	color: var(--aeds-ph-ink-soft);
}
.aeds-page-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.aeds-page-hero__trust-item strong { color: var(--aeds-ph-ink); font-weight: 700; }
.aeds-page-hero__trust-svg {
	width: 20px;
	height: 20px;
	color: var(--aeds-primary, #c8102e);
	flex-shrink: 0;
}
.aeds-page-hero__trust-dot {
	width: 4px;
	height: 4px;
	background: var(--aeds-ph-border-strong);
	border-radius: 50%;
}

/* Promo bar (dark pill with gold tag and gold arrow) */
.aeds-page-hero__promo {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 32px auto 0;
	padding: 14px 22px 14px 14px;
	background: var(--aeds-ph-ink);
	color: #fff;
	border-radius: 100px;
	text-decoration: none;
	font-size: 14px;
	position: relative;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 12px 28px -10px rgba(15, 26, 46, .4);
}
.aeds-page-hero__promo::before {
	content: '';
	position: absolute;
	top: -30px;
	right: -30px;
	width: 120px;
	height: 120px;
	background: radial-gradient(circle, rgba(201, 169, 97, .4), transparent 70%);
	pointer-events: none;
}
.aeds-page-hero__promo:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -10px rgba(15, 26, 46, .5);
	color: #fff;
}
.aeds-page-hero__promo-tag {
	background: var(--aeds-ph-gold);
	color: var(--aeds-ph-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .6px;
	padding: 5px 12px;
	border-radius: 100px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
.aeds-page-hero__promo-text { position: relative; z-index: 1; opacity: .92; }
.aeds-page-hero__promo-text strong { font-weight: 700; opacity: 1; }
.aeds-page-hero__promo-arrow {
	font-size: 18px;
	font-weight: 700;
	color: var(--aeds-ph-gold);
	position: relative;
	z-index: 1;
	transition: transform .18s ease;
}
.aeds-page-hero__promo:hover .aeds-page-hero__promo-arrow { transform: translateX(4px); }

/* Notice */
.aeds-page-hero__notice {
	font-size: 12px;
	margin-top: 15px;
	color: var(--aeds-ph-ink-soft);
}
.aeds-page-hero__notice a {
	color: var(--aeds-ph-ink);
	text-decoration: underline;
}

/* Mobile overrides for extras (matches the reference) */
@media (max-width: 640px) {
	.aeds-page-hero__trust {
		gap: 12px;
		font-size: 12px;
		justify-content: flex-start;
		padding: 24px;
		background-color: #fbfbfb;
		border: 1px solid #f2f2f2;
		border-top: 1px solid #f2f2f2;
		border-radius: 20px;
	}
	.aeds-page-hero__trust-dot { display: none; }
	.aeds-page-hero__promo {
		margin-top: 24px;
		padding: 12px 18px 12px 12px;
		font-size: 12px;
		flex-wrap: wrap;
		justify-content: center;
		border-radius: 20px;
	}
	.aeds-page-hero__promo-text { width: 100%; text-align: center; order: 2; }
	.aeds-page-hero__promo-tag  { order: 1; }
	.aeds-page-hero__promo-arrow { display: none; }
}

/* Tablet */
@media (max-width: 880px) {
	.aeds-page-hero { padding: 24px 16px; }
	.aeds-page-hero__inner    { padding: 32px 24px; }
	.aeds-page-hero__h1       { font-size: 52px; letter-spacing: -1.5px; }
	.aeds-page-hero__subtitle { font-size: 16px; }
}

/* Mobile */
@media (max-width: 640px) {
	.aeds-page-hero { padding: 15px 10px; }
	.aeds-page-hero__inner    { padding: 18px; }
	.aeds-page-hero__eyebrow  { font-size: 11px; padding: 6px 12px; margin-bottom: 20px; }
	.aeds-page-hero__h1       { font-size: 36px; letter-spacing: -1px; line-height: 1.08; }
	.aeds-page-hero__h1 br    { display: none; }
	.aeds-page-hero__accent::after { bottom: 4px; height: 7px; }
	.aeds-page-hero__subtitle { font-size: 15px; margin-bottom: 28px; }
	.aeds-page-hero__search   { padding: 5px; border-radius: 14px; }
	.aeds-page-hero__search-icon       { padding: 0 8px 0 14px; }
	.aeds-page-hero__search-icon svg   { width: 18px; height: 18px; }
	.aeds-page-hero__search-input.aeds-search-input { font-size: 16px; padding: 14px 0; }
	.aeds-page-hero__search-btn        { padding: 14px 16px; font-size: 13px; border-radius: 9px; }
	.aeds-page-hero__search-btn span   { display: none; }
	.aeds-page-hero__chips { gap: 6px; }
	.aeds-page-hero__chip  { padding: 8px 12px; font-size: 12px; }
}

/* Tighter H1 sizing on smaller phones, matching the reference design. */
@media (max-width: 414px) { .aeds-page-hero__h1 { font-size: 34px; } }
@media (max-width: 390px) { .aeds-page-hero__h1 { font-size: 32px; } }
@media (max-width: 375px) { .aeds-page-hero__h1 { font-size: 30px; } }

/* Accreditation badge — small image rotated -6deg. Positioned 320px to
   the right of the card's horizontal centre, near the H1 line, exactly
   matching the reference design's measurements. Decorative — pointer-
   events:none so it doesn't block clicks on the form/chips behind it. */
.aeds-page-hero__badge {
	position: absolute;
	top: 95px;
	left: calc(50% + 320px);
	width: 140px;
	height: auto;
	z-index: 1;
	user-select: none;
	pointer-events: none;
	transform: rotate(-6deg);
	transition: transform .3s ease;
}
.aeds-page-hero:hover .aeds-page-hero__badge {
	transform: rotate(-3deg) scale(1.04);
}

/* Tablet — switch to right-anchored, smaller. */
@media (max-width: 880px) {
	.aeds-page-hero__badge {
		width: 110px;
		top: 80px;
		left: auto;
		right: 30px;
	}
}

/* Mobile — even smaller, pushed down to clear the stacked H1. */
@media (max-width: 640px) {
	.aeds-page-hero__badge {
		width: 78px;
		top: 138px;
		right: 14px;
		transform: rotate(-7deg);
	}
	.aeds-page-hero:hover .aeds-page-hero__badge {
		transform: rotate(-7deg);
	}
}
@media (max-width: 390px) {
	.aeds-page-hero__badge { width: 73px; top: 146px; }
}
@media (max-width: 375px) {
	.aeds-page-hero__badge { width: 70px; top: 138px; }
}

/* ---- Hero design: layout overrides for things below the form -------------
   Tabs + filter dropdown live INSIDE the white hero card (rendered there by
   the template), centred at the form's 720px column. The result panels
   below the card breathe wider at 1050px. Everything is scoped to
   data-aeds-header="hero" so flipping back to classic reverts cleanly. */
.aeds-widget[data-aeds-header="hero"] .aeds-page-hero__inner > .aeds-tabs,
.aeds-widget[data-aeds-header="hero"] .aeds-page-hero__inner > .aeds-filters {
	max-width: 665px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
/* The tabs nav inside the hero card needs a top margin to separate it from
   the search form, and a small bottom margin before the chips. */
.aeds-widget[data-aeds-header="hero"] .aeds-page-hero__inner > .aeds-tabs {
	margin-top: 5px;
	margin-bottom: 35px;
}
/* Chips sit below tabs now — give them the same column width and a small
   top gap so they don't crash into the tabs underline. */
.aeds-widget[data-aeds-header="hero"] .aeds-page-hero__chips {
	margin-top: 16px;
}
.aeds-widget[data-aeds-header="hero"] [data-aeds-panel] {
	max-width: 1050px;
	margin-left: auto;
	margin-right: auto;
	/* Reset the centred text inherited from .aeds-page-hero — result rows
	   need left-aligned content, otherwise domain names drift to the
	   middle of the 1fr grid column instead of sitting flush left. */
	text-align: left;
}
/* The initial "Enter a domain or keyword to begin" prompt is noise in the
   hero design — the big search bar already invites action. Hide it. */
.aeds-widget[data-aeds-header="hero"] [data-aeds-empty] {
	display: none;
}
/* Hide the TLD price chips and the extras block (trust row + promo + notice)
   once a search is in flight — all of those are empty-state decoration,
   redundant once results are below. JS toggles data-aeds-active on the
   widget at doSearch start / popstate-clear. */
.aeds-widget[data-aeds-header="hero"][data-aeds-active="1"] .aeds-page-hero__chips,
.aeds-widget[data-aeds-header="hero"][data-aeds-active="1"] .aeds-page-hero__extras {
	display: none;
}

/* Currency toggle for server-rendered hero pieces (chips, subtitle, notice
   example list). Both currency variants ship in the HTML; CSS hides
   whichever doesn't match the widget's current `data-aeds-currency`. JS
   updates that attribute when the visitor flips the AED/USD switcher. */
.aeds-widget[data-aeds-currency="usd"] [data-aeds-currency-aed],
.aeds-widget:not([data-aeds-currency="usd"]) [data-aeds-currency-usd] {
	display: none;
}

/* ---- Bundle cards --------------------------------------------------------
   Promotional offer cards rendered between the hero result and the main TLD
   list when the visitor typed a specific domain that matches an admin-defined
   bundle. Two visual modes share the same shell — multi_tld (discount math)
   and single_tld_services (flat domain+services price). */
.aeds-bundle {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 18px;
	/* No vertical margin — .aeds-results is a flex column with gap: 8px,
	   margins would stack on top of that and make bundle-to-bundle spacing
	   3× larger than row-to-row spacing below. */
	margin: 0;
	padding: 14px 18px 14px 22px;
	background: linear-gradient(135deg, #fff 0%, rgba(200, 16, 46, .04) 100%);
	border: 1px solid rgba(200, 16, 46, .25);
	border-radius: 12px;
	box-shadow: 0 2px 12px -6px rgba(200, 16, 46, .12);
	position: relative;
	overflow: hidden;
}
.aeds-bundle::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--aeds-primary);
}
.aeds-bundle__head {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 0;
}
.aeds-bundle__label {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--aeds-primary);
	border-radius: 4px;
}
.aeds-bundle__name {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--aeds-text-muted);
	letter-spacing: 0;
}
.aeds-bundle__body {
	min-width: 0;
}
/* Domains are the visual headline of the bundle — big, primary-colour,
   each one separated by a styled "+" so the "buy these together" idea
   reads instantly. */
.aeds-bundle__domains {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 6px 0 8px;
	font-size: 20px;
	color: var(--aeds-text);
	line-height: 1.2;
}
.aeds-bundle__domain {
	font-weight: 800;
	color: var(--aeds-primary);
	letter-spacing: -.01em;
}
.aeds-bundle__sep {
	display: inline-block;
	font-size: 22px;
	font-weight: 700;
	color: var(--aeds-primary);
	opacity: .55;
	line-height: 1;
}
.aeds-bundle__services {
	margin: 4px 0 8px;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 2px 14px;
}
.aeds-bundle__services li {
	position: relative;
	padding-left: 20px;
	font-size: 13px;
	color: var(--aeds-text);
	line-height: 1.5;
}
.aeds-bundle__services li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 13px;
	height: 13px;
	background: var(--aeds-primary)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
		center / 11px 11px no-repeat;
	border-radius: 50%;
}
.aeds-bundle__prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}
.aeds-bundle__sub {
	font-size: 13px;
	color: var(--aeds-text-muted);
	text-decoration: line-through;
}
.aeds-bundle__total {
	font-size: 18px;
	font-weight: 800;
	color: var(--aeds-text);
	letter-spacing: -.01em;
}
.aeds-bundle__per {
	font-size: 12px;
	color: var(--aeds-text-muted);
	font-weight: 500;
}
.aeds-bundle__saving {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--aeds-success, #0a8754);
	border-radius: 4px;
	letter-spacing: .02em;
}
.aeds-bundle__cta {
	flex-shrink: 0;
	white-space: nowrap;
}
/* Slightly tighter padding than the standard hero CTA so it fits the
   shorter card height. */
.aeds-bundle__cta.aeds-action.aeds-action--cta {
	padding: 11px 22px;
	font-size: 14px;
}
/* Services-bundle variant — dark instead of red so the two bundle types
   look visually distinct ("Add to cart" red = adds domains, "Get Bundle"
   dark = jumps to a package page). Triple-doubled selector overrides the
   .aeds-action--cta red defaults. */
.aeds-bundle__cta.aeds-bundle__cta--services.aeds-action--cta {
	background: #1a1a1a;
	box-shadow: 0 2px 8px rgba(15, 17, 21, .25);
}
.aeds-bundle__cta.aeds-bundle__cta--services.aeds-action--cta:hover {
	background: #000;
	box-shadow: 0 4px 14px rgba(15, 17, 21, .35);
	color: #fff;
}

@media (max-width: 600px) {
	.aeds-bundle {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 14px 16px;
	}
	.aeds-bundle__domains { font-size: 17px; }
	.aeds-bundle__sep    { font-size: 18px; }
	.aeds-bundle__cta    { width: 100%; justify-content: center; }
	.aeds-bundle__total  { font-size: 16px; }
}

/* ---- Tabs ---- */
.aeds-tabs {
	display: flex;
	align-items: center;
	gap: 28px;
	border-bottom: 1px solid var(--aeds-border);
	margin-top: 22px;
	padding: 0 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.aeds-tabs::-webkit-scrollbar { display: none; }

.aeds-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
	background: transparent;
	border: 0;
	color: var(--aeds-text-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	font-family: inherit;
	transition: color .15s ease;
}
.aeds-tab:hover { color: var(--aeds-text); }
.aeds-tab.is-active { color: var(--aeds-text); }
.aeds-tab.is-active::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--aeds-primary);
}
.aeds-tab svg { color: inherit; flex-shrink: 0; }

.aeds-tabs-spacer { flex: 1 1 auto; }

.aeds-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--aeds-text-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	user-select: none;
}

.aeds-switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
}
.aeds-switch input { opacity: 0; width: 0; height: 0; }
.aeds-switch-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: #ccc;
	border-radius: 20px;
	transition: background .2s ease;
}
.aeds-switch-slider::before {
	content: "";
	position: absolute;
	height: 14px; width: 14px;
	left: 3px; top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform .2s ease;
}
.aeds-switch input:checked + .aeds-switch-slider { background: var(--aeds-primary); }
.aeds-switch input:checked + .aeds-switch-slider::before { transform: translateX(16px); }

.aeds-filters {
	display: flex;
	gap: 10px;
	padding: 14px 4px 4px;
	flex-wrap: wrap;
}
.aeds-filters[hidden] { display: none; }
/* Filter pills — rounded chips with a custom checkbox indicator. Native
   checkbox is visually hidden but stays accessible (keyboard + screen
   reader). The pseudo-element on the label is the visible indicator. */
.aeds-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 12px;
	border: 1px solid var(--aeds-border, #e6e8ec);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 500;
	color: var(--aeds-text);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
	user-select: none;
}
.aeds-filter:hover {
	border-color: var(--aeds-primary);
	color: var(--aeds-primary);
}
.aeds-filter input[type="checkbox"] {
	/* Hide the native control without losing accessibility — sized 0
	   instead of display:none so focus events still fire. */
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.aeds-filter::before {
	content: '';
	width: 16px;
	height: 16px;
	border: 1.5px solid #d4d8de;
	border-radius: 4px;
	background: #fff;
	flex-shrink: 0;
	transition: border-color .15s ease, background .15s ease;
}
.aeds-filter:has(input:checked) {
	border-color: var(--aeds-primary);
	background: rgba(200, 16, 46, .06);
	color: var(--aeds-primary);
}
.aeds-filter:has(input:checked)::before {
	border-color: var(--aeds-primary);
	background: var(--aeds-primary)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
		center / 12px 12px no-repeat;
}
.aeds-filter:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(200, 16, 46, .15);
}

/* ---- Panels ---- */
.aeds-panel { padding-top: 18px; }
.aeds-panel[hidden] { display: none !important; }

/* ---- Results ---- */
.aeds-results { display: flex; flex-direction: column; gap: 8px; }

/* Inline error block — used by renderError() for any AJAX failure or
   server-side validation rejection (e.g. unsupported TLD). Brand-red
   palette + warning icon so it actually reads as an error, not just
   muted placeholder text. */
.aeds-error {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 16px 0;
	padding: 18px 22px;
	background: linear-gradient(180deg, #fff 0%, #fff5f6 100%);
	border: 1px solid rgba(200, 16, 46, .25);
	border-left: 4px solid var(--aeds-primary, #c8102e);
	border-radius: 10px;
	box-shadow: 0 2px 10px -4px rgba(200, 16, 46, .12);
}
.aeds-error__icon {
	flex-shrink: 0;
	color: var(--aeds-primary, #c8102e);
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	background: rgba(200, 16, 46, .08);
	border-radius: 50%;
}
.aeds-error__msg {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 600;
	color: #1d2327;
	letter-spacing: -.005em;
}

.aeds-empty {
	text-align: center;
	padding: 60px 20px;
	color: #9aa0a6;
}
.aeds-empty svg { color: #c4c8cf; margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; }
.aeds-empty p { margin: 0; font-size: 15px; }

.aeds-hero {
	margin-bottom: 14px;
	padding: 20px 22px;
	background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
	border: 1px solid var(--aeds-border, #e6e8ec);
	border-radius: 12px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
/* Two-column hero: heroLeft holds tags + domain name + description.
   heroRight stacks the price block on top of the action buttons, centered
   vertically so price and CTA travel together as a unit and the right
   column actually carries weight instead of feeling empty. */
.aeds-hero-left {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.aeds-hero-right {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}
.aeds-hero .aeds-tag { font-size: 11px; padding: 4px 10px; }
.aeds-hero-name-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}
.aeds-hero .aeds-tld-logo {
	width: 36px;
	height: 36px;
	border-radius: 8px;
}
.aeds-hero-name {
	font-size: 28px;
	font-weight: 700;
	color: var(--aeds-text, #1d2327);
	letter-spacing: -.02em;
	line-height: 1.1;
	word-break: break-all;
}
.aeds-hero-name .aeds-sld { color: var(--aeds-primary, #c8102e); }
.aeds-hero-name .aeds-tld-text { color: var(--aeds-text, #1d2327); }
.aeds-hero-desc {
	margin: 0;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--aeds-text, #1d2327);
	background: rgba(200, 16, 46, .05);
	border-left: 3px solid var(--aeds-primary, #c8102e);
	border-radius: 6px;
	min-height: 1.5em;
	width: 100%;
	box-sizing: border-box;
}
.aeds-hero-desc::before {
	content: '✨ ';
	color: var(--aeds-primary, #c8102e);
	font-weight: 600;
	margin-right: 4px;
}
.aeds-hero-desc:empty::after {
	content: 'Loading...';
	color: var(--aeds-text-muted, #6b7280);
	font-style: italic;
}
/* Hero actions — vertical stack inside heroRight, both buttons sized
   identically (same .aeds-action--cta solid red style). */
.aeds-hero-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 200px;
	align-items: stretch;
}
.aeds-hero-actions .aeds-action.aeds-action--cta {
	width: 100%;
	justify-content: center;
}
@media (max-width: 600px) {
	.aeds-hero-right   { width: 100%; align-items: stretch; }
	.aeds-hero-actions { width: 100%; min-width: 0; }
	.aeds-hero-price   { width: 100%; align-items: flex-start; }
}
.aeds-hero-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
/* When the price block lives inside heroLeft (taken/broker domains —
   informational fee, no paired CTA), align it left under the domain
   name for a compact stacked look. */
.aeds-hero-left > .aeds-hero-price { align-items: flex-start; }
.aeds-hero-price-amount {
	font-size: 22px;
	font-weight: 700;
	color: var(--aeds-text, #1d2327);
	letter-spacing: -.005em;
}
.aeds-hero-price-meta {
	font-size: 12px;
	color: var(--aeds-text-muted, #6b7280);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
/* Doubled selector .aeds-action.aeds-action--cta wins specificity over the
   plain .aeds-action rule that is declared further down in the file. */
.aeds-action.aeds-action--cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	background: var(--aeds-primary, #c8102e);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
	transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
	white-space: nowrap;
}
.aeds-action.aeds-action--cta:hover {
	background: #a40d24;
	color: #fff;
	box-shadow: 0 4px 14px rgba(200, 16, 46, .35);
	transform: translateY(-1px);
}
.aeds-action.aeds-action--cta:active { transform: translateY(0); }
.aeds-action.aeds-action--cta.is-in-cart {
	background: #1f8a4f;
	color: #fff;
	box-shadow: 0 2px 8px rgba(31, 138, 79, .25);
}
.aeds-action.aeds-action--cta.is-in-cart:hover {
	background: #186b3d;
	color: #fff;
	box-shadow: 0 4px 14px rgba(31, 138, 79, .35);
}
.aeds-action.aeds-action--cta svg {
	flex-shrink: 0;
	color: currentColor;
}

@media (max-width: 600px) {
	.aeds-hero { padding: 20px 18px; }
	.aeds-hero-name { font-size: 24px; }
	.aeds-action.aeds-action--cta { width: 100%; justify-content: center; }
}

.aeds-row {
	display: grid;
	grid-template-columns: 36px 1fr auto auto;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	background: #fdfdfd;                /* light gray fill */
	border: 1px solid #ebedf0;           /* a touch darker than the fill */
	border-radius: var(--aeds-radius-sm);
	transition: background .15s ease, border-color .15s ease;
	min-height: 64px;
}
.aeds-row.is-best {
	background: #f3f4f7;                /* slightly darker for "best match" */
	border-color: #e3e6eb;
}
.aeds-row.is-priority {
	background: rgba(200, 16, 46, .04);
	border-color: rgba(200, 16, 46, .12);
	border-left: 3px solid var(--aeds-primary);
	padding-left: 15px;
}
.aeds-row.is-priority:hover { background: rgba(200, 16, 46, .07); }
.aeds-row:hover {
	background: #f1f3f6;
	border-color: #e3e6eb;
}

.aeds-priority-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aeds-primary);
	margin-bottom: 4px;
}

.aeds-fav {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: #b8bdc4;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: color .15s ease, background .15s ease;
}
.aeds-fav:hover { color: var(--aeds-primary); background: rgba(200,16,46,.06); }
.aeds-fav.is-saved { color: var(--aeds-primary); }

.aeds-domain-cell { min-width: 0; }
.aeds-best-label {
	display: block;
	font-size: 12px;
	color: var(--aeds-text-muted);
	margin-bottom: 4px;
}
.aeds-domain {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.aeds-tld-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #f5f6f7;
	overflow: hidden;
	flex-shrink: 0;
}
.aeds-tld-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.aeds-domain-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--aeds-text);
	letter-spacing: -.005em;
	word-break: break-all;
}
.aeds-domain-name .aeds-sld { color: var(--aeds-primary); }
.aeds-domain-name .aeds-tld-text { color: var(--aeds-text); }

.aeds-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 6px;
	background: #e8eaed;
	color: #4a4f57;
	white-space: nowrap;
}
.aeds-tag--available { background: #d6f3e3; color: var(--aeds-success); }
.aeds-tag--premium { background: #fff3d6; color: #8a5a00; }
.aeds-tag--error { background: #fde2e2; color: #b3261e; }
/* Aftermarket — cool blue palette so the tag reads as something distinct
   from "AVAILABLE" (green) or "PREMIUM" (gold). Pairs with the light-blue
   row/hero tints on .aeds-row--aftermarket / .aeds-hero--aftermarket. */
.aeds-tag--aftermarket {
	background: #dbeafe;
	color: #1e40af;
	letter-spacing: .04em;
}
.aeds-row--aftermarket {
	background: #f0f7ff;
	border: 1px solid #c5dcf5;
	box-shadow: 0 1px 0 rgba(30, 64, 175, .04);
}
.aeds-row--aftermarket .aeds-sld { color: #1e40af; }
.aeds-hero--aftermarket {
	background: linear-gradient(180deg, #eff6ff 0%, #f7fbff 60%, #fff 100%);
	border: 1px solid #c5dcf5;
}
.aeds-hero--aftermarket .aeds-hero-name .aeds-sld { color: #1e40af; }
.aeds-tag--discount {
	background: var(--aeds-primary, #c8102e);
	color: #fff;
	font-weight: 700;
}

/* Hero — keep the AVAILABLE tag and X% OFF badge on one row at the top. */
.aeds-hero-tags {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.aeds-price-cell {
	text-align: right;
	min-width: 110px;
}
.aeds-price-renew {
	text-decoration: line-through;
	color: var(--aeds-text-muted, #9aa0a6);
	font-weight: 500;
	font-size: 0.78em;
	margin-right: 4px;
	letter-spacing: 0;
}

/* Pricing "?" → clickable info icon */
.aeds-info--button {
	cursor: pointer;
	border: 1px solid #d4d8de;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.aeds-info--button:hover {
	border-color: var(--aeds-primary, #c8102e);
	color: var(--aeds-primary, #c8102e);
	background: rgba(200, 16, 46, .06);
}
.aeds-info--button:focus-visible {
	outline: 2px solid var(--aeds-primary, #c8102e);
	outline-offset: 2px;
}

/* Pricing popover (single instance appended to body) */
.aeds-tip {
	position: fixed;
	top: 0;
	left: 0;
	width: 320px;
	max-width: calc(100vw - 16px);
	background: #1d2327;
	color: #fff;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
	padding: 18px 22px 18px 20px;
	z-index: 100000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	opacity: 0;
	pointer-events: none;
	transition: opacity .14s ease, transform .14s ease;
}
.aeds-tip.is-open {
	opacity: 1;
	pointer-events: auto;
}
/* Slide-in direction depends on placement (smoother feel). */
.aeds-tip[data-placement="bottom"]          { transform: translateY(-6px); }
.aeds-tip[data-placement="bottom"].is-open  { transform: translateY(0); }
.aeds-tip[data-placement="top"]             { transform: translateY( 6px); }
.aeds-tip[data-placement="top"].is-open     { transform: translateY(0); }

/* Arrow — a real <span> child, JS sets its `left` so it always lines up with
   the trigger ("?") even when the tip itself is clamped to a viewport edge. */
.aeds-tip-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	pointer-events: none;
}
.aeds-tip[data-placement="bottom"] .aeds-tip-arrow {
	bottom: 100%;
	transform: translateX(-50%);
	border-width: 0 9px 10px 9px;
	border-color: transparent transparent #1d2327 transparent;
}
.aeds-tip[data-placement="top"] .aeds-tip-arrow {
	top: 100%;
	transform: translateX(-50%);
	border-width: 10px 9px 0 9px;
	border-color: #1d2327 transparent transparent transparent;
}

.aeds-tip-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 10px;
	letter-spacing: -.005em;
	color: #fff;
}
.aeds-tip-body {
	color: #c9ced6;
}
.aeds-tip-body p {
	margin: 0 0 10px;
}
.aeds-tip-body p:last-child {
	margin-bottom: 0;
}
.aeds-tip-body strong {
	color: #fff;
	font-weight: 700;
}
.aeds-tip-foot {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 12.5px;
	color: #9aa0a6;
}
.aeds-tip-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #9aa0a6;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .15s ease, color .15s ease;
}
.aeds-tip-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.aeds-tip-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.aeds-price {
	font-size: 18px;
	font-weight: 700;
	color: var(--aeds-text);
	white-space: nowrap;
}
.aeds-price-meta {
	font-size: 12px;
	color: var(--aeds-text-muted);
	margin-top: 2px;
	display: flex;
	align-items: center;
	gap: 4px;
	justify-content: flex-end;
}
.aeds-info {
	display: inline-flex;
	width: 14px;
	height: 14px;
	margin-left: 6px;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-size: 10px;
	align-items: center;
	justify-content: center;
	font-style: italic;
	font-weight: 700;
	cursor: help;
	opacity: .6;
	vertical-align: middle;
}

.aeds-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid var(--aeds-border);
	background: #fff;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--aeds-text);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .05s ease;
	font-family: inherit;
	white-space: nowrap;
}
.aeds-action:hover {
	border-color: var(--aeds-primary);
	color: var(--aeds-primary);
	background: rgba(200,16,46,.04);
}
.aeds-action:active { transform: translateY(1px); }
.aeds-action--cart { padding: 11px 14px; }
.aeds-action svg { color: currentColor; flex-shrink: 0; }

.aeds-row.is-loading .aeds-domain-name,
.aeds-row.is-loading .aeds-price-cell,
.aeds-row.is-loading .aeds-action-cell,
.aeds-row.is-loading .aeds-fav {
	background: linear-gradient(90deg,#eee 0%,#f6f6f6 50%,#eee 100%);
	background-size: 200% 100%;
	border-radius: 4px;
	animation: aedsShimmer 1.2s infinite;
}
.aeds-row.is-loading .aeds-domain-name {
	color: transparent;
	min-width: 220px;            /* longer "domain" bar on the left */
	display: inline-block;
}
.aeds-row.is-loading .aeds-price-cell {
	width: 90px;
	height: 18px;
	padding: 0;
}
.aeds-row.is-loading .aeds-action-cell {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	padding: 0;
}
/* Loading-state heart placeholder — keeps the leftmost column visually
   present (a small grey dot) instead of collapsing to nothing. */
.aeds-row.is-loading .aeds-fav {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	color: transparent;
}
.aeds-row.is-loading .aeds-fav svg { display: none; }
@keyframes aedsShimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ---- Explore More ---- */
.aeds-explore { display: flex; justify-content: center; padding: 20px 0 8px; }
.aeds-explore[hidden] { display: none; }

.aeds-alts-title {
	margin: 18px 0 10px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--aeds-text-muted, #6b7280);
	padding-left: 4px;
}

/* "Check Similar Domains" CTA — shown right after the hero when the
   typed domain is taken. Click → replaces the regular results with
   Claude-generated alternatives. */
.aeds-alts-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 18px 0 10px;
	padding: 14px 22px;
	background: rgba(200, 16, 46, .04);
	border: 2px dashed var(--aeds-primary, #c8102e);
	border-radius: 10px;
	color: var(--aeds-primary, #c8102e);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background .15s ease, border-style .15s ease, color .15s ease, transform .05s ease;
}
.aeds-alts-trigger:hover {
	background: var(--aeds-primary, #c8102e);
	color: #fff;
	border-style: solid;
}
.aeds-alts-trigger:active { transform: translateY(1px); }
.aeds-alts-trigger svg { flex-shrink: 0; }
.aeds-alts-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aeds-explore-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border: 1px dashed var(--aeds-primary);
	background: transparent;
	border-radius: 999px;
	color: var(--aeds-primary);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
	font-family: inherit;
}
.aeds-explore-btn:hover { background: rgba(200,16,46,.06); }

/* ---- Categories ---- */
.aeds-categories { padding-top: 22px; }
.aeds-categories-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.aeds-categories-header h3 {
	margin: 0;
	font-size: 15px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--aeds-text-muted);
}
.aeds-link {
	background: transparent;
	border: 0;
	color: var(--aeds-primary);
	font-weight: 600;
	cursor: pointer;
	font-size: 13px;
	font-family: inherit;
}
.aeds-link:hover { text-decoration: underline; }

.aeds-categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px;
}
.aeds-cat-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--aeds-border);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, transform .05s ease;
	text-align: left;
	font-family: inherit;
}
.aeds-cat-btn:hover { border-color: var(--aeds-primary); }
.aeds-cat-btn:active { transform: translateY(1px); }
.aeds-cat-btn.is-active { border-color: var(--aeds-primary); background: rgba(200,16,46,.04); }
.aeds-cat-label { font-weight: 600; font-size: 14px; color: var(--aeds-text); }
.aeds-cat-count {
	font-size: 12px;
	color: var(--aeds-text-muted);
	background: var(--aeds-row-bg);
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 600;
}

.aeds-cat-results {
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.aeds-cat-results-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--aeds-text-muted);
	margin: 0 0 6px;
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* ---- Bulk ---- */
.aeds-bulk-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

/* ---- AI Search controls (TLD pills under the main search bar) ---- */
.aeds-ai-controls {
	max-width: 675px;
	margin: 6px auto 14px;
	padding: 12px 14px;
	background: #f6f7fb;
	border: 1px solid var(--aeds-border, #e2e4e7);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
/* `display: flex` above wins over the user-agent default for the [hidden]
   attribute, so we have to explicitly hide the controls when the attribute
   is set (i.e. when the visitor leaves the AI Search tab). */
.aeds-ai-controls[hidden] {
	display: none;
}
.aeds-ai-controls__label {
	font-size: 12px;
	font-weight: 700;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.aeds-ai-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}
.aeds-ai-pill {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--aeds-border, #d4d8de);
	background: #fff;
	color: var(--aeds-text, #1d2327);
	cursor: pointer;
	transition: all .12s ease;
	white-space: nowrap;
}
.aeds-ai-pill:hover {
	border-color: var(--aeds-primary, #c8102e);
	color: var(--aeds-primary, #c8102e);
}
.aeds-ai-pill.is-active {
	background: var(--aeds-primary, #c8102e);
	border-color: var(--aeds-primary, #c8102e);
	color: #fff;
	box-shadow: 0 1px 3px rgba(200, 16, 46, .2);
}
.aeds-ai-pill.is-active:hover {
	color: #fff;
}
/* When the widget is in AI mode, give the search bar a small visual tell. */
.aeds-widget[data-aeds-mode="ai"] .aeds-search-bar,
.aeds-widget[data-aeds-mode="ai"] .aeds-page-hero__search {
	border-color: var(--aeds-primary, #c8102e);
}
.aeds-bulk-input {
	width: 100%;
	border: 1px solid var(--aeds-border);
	border-radius: 10px;
	padding: 14px 16px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	resize: vertical;
	min-height: 120px;
	color: var(--aeds-text);
}
.aeds-bulk-input:focus { outline: 0; border-color: var(--aeds-primary); }
.aeds-bulk-hint {
	margin: 6px 2px 12px;
	font-size: 12.5px;
	color: var(--aeds-text-muted, #6b7280);
}
.aeds-bulk-btn {
	align-self: flex-start;
	/* The main Search button gets its height from the flex container
	   (input padding 14×2 + line-height ≈ 52px). On the Bulk form there
	   is no such stretch, so we mirror the height explicitly. */
	padding: 14px 36px;
	line-height: 1.2;
}

/* Live validation status for the bulk textarea — surfaces invalid lines
   as the visitor types so they can fix them before submitting. */
.aeds-bulk-input.has-errors {
	border-color: #d63638;
	box-shadow: 0 0 0 3px rgba(214, 54, 56, .12);
}
.aeds-bulk-status {
	margin: 8px 0 0;
	padding: 10px 14px;
	background: #fafbfc;
	border: 1px solid var(--aeds-border, #e6e8ec);
	border-radius: 8px;
	font-size: 13px;
	color: var(--aeds-text, #1d2327);
}
.aeds-bulk-status[hidden] { display: none; }
.aeds-bulk-status__summary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.aeds-bulk-status__pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}
.aeds-bulk-status__pill--ok {
	background: #ecf7ec;
	color: #14532d;
}
.aeds-bulk-status__pill--bad {
	background: #fcf0f1;
	color: #7a1d1f;
}
.aeds-bulk-status__pill--over {
	background: #fff8e5;
	color: #5a4a1a;
}
.aeds-bulk-status__list {
	margin: 8px 0 0;
	padding: 8px 0 0;
	list-style: none;
	border-top: 1px dashed var(--aeds-border, #e6e8ec);
}
.aeds-bulk-status__list li {
	margin: 4px 0;
	font-size: 12.5px;
	color: var(--aeds-text-muted, #6b7280);
}
.aeds-bulk-status__list li strong {
	color: var(--aeds-text, #1d2327);
	font-weight: 700;
	margin-right: 2px;
}
.aeds-bulk-status__list code {
	background: rgba(214, 54, 56, .08);
	color: #b3261e;
	padding: 1px 6px;
	border-radius: 3px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
}
.aeds-bulk-status__more {
	font-style: italic;
	color: var(--aeds-text-muted, #6b7280);
}

/* Notice rendered above bulk results when the server filtered out
   unsupported TLDs. Same look as the validation status block but in a
   warning yellow so it's clearly informational, not an error. */
.aeds-bulk-unsupported {
	margin: 0 0 12px;
	padding: 12px 16px;
	background: #fff8e5;
	border: 1px solid #f0d683;
	border-left: 4px solid #dba617;
	border-radius: 8px;
	font-size: 13.5px;
	color: #5a4a1a;
	line-height: 1.55;
}
.aeds-bulk-unsupported strong { color: #7a3700; }
.aeds-bulk-unsupported__hint {
	margin-top: 4px;
	font-size: 12.5px;
	color: #8c7530;
	font-style: italic;
}

/* CentralNic-degraded notice — same warning palette as the bulk-unsupported
   block but renders above results across all four search surfaces (main /
   bulk / AI / category) when the registrar API is misbehaving. */
.aeds-cnic-notice {
	margin: 0 0 14px;
	padding: 12px 16px;
	background: #fff8e5;
	border: 1px solid #f0d683;
	border-left: 4px solid #dba617;
	border-radius: 8px;
	font-size: 13.5px;
	color: #5a4a1a;
	line-height: 1.55;
}
.aeds-cnic-notice__title {
	font-weight: 700;
	color: #7a3700;
	margin-bottom: 2px;
}
.aeds-cnic-notice__body {
	font-size: 12.5px;
	color: #6b5520;
}

/* ---- History ---- */
.aeds-history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}
.aeds-history-header h3 {
	margin: 0;
	font-size: 15px;
	color: var(--aeds-text-muted);
	letter-spacing: .03em;
	text-transform: uppercase;
}
.aeds-history-list { display: flex; flex-direction: column; gap: 6px; }
.aeds-history-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--aeds-row-bg-alt);
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s ease;
}
.aeds-history-item:hover { background: var(--aeds-row-bg); }
.aeds-history-item-time {
	font-size: 12px;
	color: var(--aeds-text-muted);
}

/* ---- Cart: sticky bottom bar ---- */
.aeds-cart-bar {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	width: min(1100px, calc(100% - 32px));
	background: #fff;
	border: 1px solid var(--aeds-border, #e6e8ec);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(20, 25, 40, .14);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 22px;
	z-index: 9998;
	gap: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}
.aeds-cart-bar[hidden] { display: none; }
.aeds-cart-bar-summary {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.aeds-cart-bar-count {
	font-size: 13px;
	color: var(--aeds-text-muted, #6b7280);
}
.aeds-cart-bar-total {
	font-size: 20px;
	font-weight: 700;
	color: var(--aeds-text, #1d2327);
	letter-spacing: -.005em;
}
.aeds-cart-bar-actions {
	display: inline-flex;
	gap: 10px;
	flex-shrink: 0;
}

/* ---- Cart: shared button styles ---- */
.aeds-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 11px 22px;
	border-radius: 8px;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.aeds-btn:disabled { opacity: .5; cursor: not-allowed; }
.aeds-btn--primary {
	background: var(--aeds-primary, #c8102e);
	color: #fff;
}
.aeds-btn--primary:hover:not(:disabled) { background: #a40d24; }
.aeds-btn--ghost {
	background: #fff;
	color: var(--aeds-text, #1d2327);
	border: 1px solid var(--aeds-border, #d4d8de);
}
.aeds-btn--ghost:hover { background: #f8f9fb; }
.aeds-btn--full { width: 100%; justify-content: center; }

/* ---- Cart: drawer ---- */
.aeds-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
}
.aeds-cart-drawer[hidden] { display: none; }
.aeds-cart-drawer-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 25, 40, .45);
	animation: aeds-fade-in .18s ease;
}
.aeds-cart-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(440px, 100%);
	background: #fff;
	box-shadow: -8px 0 32px rgba(20, 25, 40, .15);
	display: flex;
	flex-direction: column;
	animation: aeds-slide-in .22s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}
@keyframes aeds-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes aeds-slide-in { from { transform: translateX(100%) } to { transform: translateX(0) } }

.aeds-cart-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--aeds-border, #f0f0f1);
}
.aeds-cart-drawer-head h2 {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--aeds-text, #1d2327);
}
.aeds-cart-close-btn {
	background: transparent;
	border: 0;
	cursor: pointer;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	color: var(--aeds-text-muted, #6b7280);
}
.aeds-cart-close-btn:hover { background: #f0f0f1; color: var(--aeds-text, #1d2327); }

.aeds-cart-items {
	flex: 1;
	overflow-y: auto;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.aeds-cart-item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--aeds-border, #e6e8ec);
	border-radius: 10px;
	background: #fff;
}
.aeds-cart-item-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.aeds-cart-item-name {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.005em;
	word-break: break-all;
}
.aeds-cart-item-sld { color: var(--aeds-primary, #c8102e); }
.aeds-cart-item-tld { color: var(--aeds-text, #1d2327); }
.aeds-cart-year {
	font-family: inherit;
	font-size: 13px;
	padding: 6px 10px;
	border: 1px solid var(--aeds-border, #d4d8de);
	border-radius: 6px;
	background: #fff;
	color: var(--aeds-text, #1d2327);
	max-width: 120px;
}
/* Static-label variant: same footprint as the <select>, no chrome — used
   when the admin toggle "let visitors choose registration period" is off. */
.aeds-cart-year--static {
	display: inline-block;
	border-color: transparent;
	background: transparent;
	padding-left: 0;
	color: var(--aeds-muted, #6b7280);
	cursor: default;
}
.aeds-cart-item-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-size: 16px;
	font-weight: 700;
	color: var(--aeds-text, #1d2327);
	white-space: nowrap;
	line-height: 1.2;
}
.aeds-cart-item-price-old {
	font-size: 12px;
	font-weight: 500;
	color: var(--aeds-text-muted, #9aa0a6);
	text-decoration: line-through;
}
.aeds-cart-item-price-now {
	font-size: 16px;
	font-weight: 700;
	color: var(--aeds-text, #1d2327);
}
.aeds-cart-item-bundle-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--aeds-primary, #c8102e);
	border-radius: 4px;
	margin-top: 2px;
}
.aeds-cart-rm {
	background: transparent;
	border: 1px solid var(--aeds-border, #d4d8de);
	cursor: pointer;
	color: var(--aeds-text-muted, #6b7280);
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.aeds-cart-rm:hover { color: var(--aeds-primary, #c8102e); border-color: var(--aeds-primary, #c8102e); }

.aeds-cart-drawer-foot {
	border-top: 1px solid var(--aeds-border, #f0f0f1);
	padding: 18px 22px 22px;
	background: #fff;
}
.aeds-cart-subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 14px;
}
.aeds-cart-subtotal span {
	font-size: 14px;
	color: var(--aeds-text-muted, #6b7280);
}
.aeds-cart-subtotal strong {
	font-size: 22px;
	font-weight: 700;
	color: var(--aeds-text, #1d2327);
}
.aeds-cart-error {
	color: #b3261e;
	font-size: 13px;
	margin: 12px 0 0;
}

/* "Add to cart" button — replace the cart link's appearance with active/done states */
.aeds-action--cart.is-in-cart {
	background: #d6f3e3;
	color: var(--aeds-success, #1f8a4f);
	border-color: transparent;
}
.aeds-action--cart.is-in-cart:hover {
	background: #c0ebd1;
}

@media (max-width: 600px) {
	.aeds-cart-bar { flex-direction: column; gap: 12px; padding: 14px 16px; bottom: 8px; }
	.aeds-cart-bar-actions { width: 100%; justify-content: space-between; }
	.aeds-cart-bar-actions .aeds-btn { flex: 1; justify-content: center; }
}

.aeds-credit {
	margin-top: 24px;
	font-size: 12px;
	color: var(--aeds-text-muted);
	text-align: center;
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
	.aeds-search-input { font-size: 16px; padding: 12px 14px; }
	.aeds-search-btn { padding: 0 22px; font-size: 14px; }
	/* Restore the bulk submit's mobile height — without this, the
	   .aeds-search-btn rule above (same specificity, declared later) wins
	   and squashes the Check All button to ~32px. Match the hero search
	   button's mobile height (~44px). */
	.aeds-bulk-btn { padding: 14px 22px; font-size: 14px; }
	.aeds-tabs { gap: 18px; }
	.aeds-tab { font-size: 12px; }

	/* Compact result card on mobile:
	     [♡]  kadjkvu.me [AVAILABLE]   [🛒]
	     [♡]  AED 25.00 / 1 year       [🛒]
	   Heart and cart-action span both rows on the sides; the middle column
	   stacks domain on top, price on bottom. Much tighter than the default
	   four-column desktop grid. */
	.aeds-row {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"fav domain action"
			"fav price  action";
		row-gap: 2px;
		column-gap: 10px;
		padding: 12px;
		min-height: 0;
	}
	.aeds-fav         { grid-area: fav;    align-self: center; width: 30px; height: 30px; }
	.aeds-domain-cell { grid-area: domain; min-width: 0; }
	.aeds-price-cell  { grid-area: price;  text-align: left; min-width: 0; }
	.aeds-price-meta  { justify-content: flex-start; font-size: 11px; }
	.aeds-action-cell { grid-area: action; justify-self: end; align-self: center; }

	.aeds-domain-name { font-size: 15px; }
	.aeds-price       { font-size: 15px; }
	.aeds-tld-logo    { width: 24px; height: 24px; border-radius: 5px; }
	.aeds-tag         { padding: 3px 8px; font-size: 10px; }
	.aeds-action--cart { width: 36px; height: 36px; padding: 0; justify-content: center; }
	.aeds-action--cart svg { width: 18px; height: 18px; }
	.aeds-row.is-priority { padding-left: 9px; }

	.aeds-categories-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}