/*
 * find-your-domain — domain-search.css
 * Design system tokens live in :root. No hard-coded hex below this block —
 * the signal/surface tokens are admin-overridable via an inline <style>
 * DS_Theme prints after this stylesheet, so it wins on cascade unaided.
 *
 * Token values below implement the "Atmospheric Cloud" design system
 * (see /designs/DESIGN.md and the three booking-flow reference images) —
 * Inter throughout, deep-blue primary, generous 16px card radius, and a
 * softer diffused shadow. Variable NAMES are unchanged from the previous
 * system so hosting-booking's CSS (which only ever references these
 * custom properties, never hex) picks the new look up automatically.
 */

:root {
  /* surface — overridable */
  --ds-ink:        #131B2E;
  --ds-ink-soft:   #454655;
  --ds-line:       #E2E8F0;
  --ds-surface:    #FFFFFF;
  --ds-canvas:     #F2F3FF;
  --ds-deep:       #283044;

  /* signal — overridable */
  --ds-action:     #2D3FE2;
  --ds-action-ink: #FFFFFF;
  --ds-yes:        #0F7A52;
  --ds-no:         #BA1A1A;
  --ds-premium:    #B07A18;

  /* type — fixed */
  --ds-display: 'Inter', system-ui, sans-serif;
  --ds-body:    'Inter', system-ui, sans-serif;
  --ds-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* scale — 4px base — fixed */
  --ds-1: 4px;  --ds-2: 8px;  --ds-3: 12px; --ds-4: 16px;
  --ds-5: 24px; --ds-6: 32px; --ds-7: 48px; --ds-8: 80px;

  --ds-radius: 8px;
  --ds-radius-lg: 16px;
  --ds-radius-pill: 999px;
  --ds-shadow: 0 4px 20px rgb(15 23 42 / 5%);
  --ds-ease: cubic-bezier(.2, .7, .2, 1);

  /*
   * Reusable icon masks. Used via mask-image + background-color so one SVG
   * serves every color a component needs (selected/unselected, admin
   * overrides) with no per-color duplication — see .dsb-choice__btn and
   * .dsb-plans__features in hosting-booking.css for the pattern.
   */
  --ds-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E");
  --ds-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------- */
/* Reset / base                                                           */
/* ---------------------------------------------------------------------- */

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

.ds {
  color: var(--ds-ink);
  font-family: var(--ds-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

/*
 * :where(.ds) keeps the ancestor scope without letting it contribute to
 * specificity — otherwise "class + element" (e.g. ".ds button") outranks
 * every single-class component rule below it (e.g. ".ds-btn--solid"),
 * regardless of source order, and silently wins the cascade.
 */
:where(.ds) h1, :where(.ds) h2, :where(.ds) h3, :where(.ds) p, :where(.ds) ul, :where(.ds) figure {
  margin: 0;
}

:where(.ds) ul {
  list-style: none;
  padding: 0;
}

:where(.ds) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:where(.ds) input {
  font: inherit;
  color: inherit;
}

.ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ds *:focus {
  outline: none;
}

.ds *:focus-visible {
  outline: 2px solid var(--ds-action);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */

.ds-btn[hidden] {
  display: none;
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-2);
  padding: var(--ds-4) var(--ds-6);
  border-radius: var(--ds-radius-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: background-color 160ms var(--ds-ease), color 160ms var(--ds-ease), border-color 160ms var(--ds-ease), box-shadow 160ms var(--ds-ease);
}

.ds-btn--solid {
  background: var(--ds-action);
  color: var(--ds-action-ink);
  border: 1px solid var(--ds-action);
}

/*
 * Hover/focus color pinned explicitly (not just background) and scoped
 * under .ds: the theme's own button:hover/button:focus styling carries
 * more specificity than a bare .ds-btn--variant rule (a pseudo-class adds
 * to specificity same as a class does), so without this the resting-state
 * color quietly loses to the theme's on interaction — same failure mode
 * as the .ds-search__input collision below, just triggered by :hover
 * instead of by source order.
 */
.ds .ds-btn--solid:hover,
.ds .ds-btn--solid:focus,
.ds .ds-btn--solid:focus-visible {
  background: color-mix(in srgb, var(--ds-action) 88%, black);
  color: var(--ds-action-ink);
}

.ds-btn--outline {
  background: transparent;
  color: var(--ds-action);
  border: 1px solid var(--ds-action);
}

.ds .ds-btn--outline:hover,
.ds .ds-btn--outline:focus,
.ds .ds-btn--outline:focus-visible {
  background: color-mix(in srgb, var(--ds-action) 8%, transparent);
  color: var(--ds-action);
}

.ds-btn--ghost {
  background: transparent;
  color: var(--ds-ink-soft);
  border: 1px solid var(--ds-line);
}

.ds .ds-btn--ghost:hover,
.ds .ds-btn--ghost:focus,
.ds .ds-btn--ghost:focus-visible {
  color: var(--ds-ink);
  border-color: var(--ds-ink-soft);
  background: transparent;
}

.ds-btn--inverse {
  background: var(--ds-surface);
  color: var(--ds-action);
  border: 1px solid var(--ds-surface);
  text-decoration: none;
}

.ds .ds-btn--inverse:hover,
.ds .ds-btn--inverse:focus,
.ds .ds-btn--inverse:focus-visible {
  background: color-mix(in srgb, var(--ds-surface) 90%, var(--ds-action));
  color: var(--ds-action);
}

.ds-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                   */
/* ---------------------------------------------------------------------- */

.ds-hero {
  position: relative;
  background: var(--ds-deep);
  padding: var(--ds-8) var(--ds-4);
  overflow: hidden;
}

.ds-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 60%;
  height: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ds-action) 35%, transparent) 0%, transparent 70%);
  opacity: 0.35;
  pointer-events: none;
}

.ds-hero__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.ds-hero__title {
  font-family: var(--ds-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ds-surface);
}

.ds-hero__lede {
  margin-top: var(--ds-3);
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--ds-surface) 70%, transparent);
}

.ds-search {
  display: flex;
  gap: var(--ds-2);
  margin-top: var(--ds-6);
}

/*
 * ".ds .ds-search__input" (not the bare class) is deliberate: many themes
 * style form fields with an attribute selector like input[type="text"],
 * which carries specificity (0,1,1) — higher than a bare single class
 * (0,1,0) and enough to silently strip this background/border regardless
 * of source order. Scoping to the plugin root raises this rule to (0,2,0).
 */
.ds .ds-search__input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 var(--ds-5);
  border-radius: var(--ds-radius);
  border: 1px solid transparent;
  background: var(--ds-surface);
  font-family: var(--ds-mono);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--ds-ink);
  transition: border-color 160ms var(--ds-ease), box-shadow 160ms var(--ds-ease);
}

/* "4px soft outer glow" on focus, per the design system's Input Fields spec. */
.ds .ds-search__input:focus-visible {
  border-color: var(--ds-action);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-action) 18%, transparent);
}

.ds-search__input::placeholder {
  color: var(--ds-ink-soft);
}

.ds-search__submit {
  height: 56px;
  padding: 0 var(--ds-6);
  border-radius: var(--ds-radius);
  background: var(--ds-action);
  color: var(--ds-action-ink);
  font-weight: 600;
  flex-shrink: 0;
}

.ds .ds-search__submit:hover,
.ds .ds-search__submit:focus,
.ds .ds-search__submit:focus-visible {
  background: color-mix(in srgb, var(--ds-action) 88%, black);
  color: var(--ds-action-ink);
}

.ds-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-2);
  list-style: none;
  padding: 0;
  margin-top: var(--ds-4);
}

/*
 * The chip's <li> wrapper carries no class of its own, so it can only
 * inherit list-style:none from .ds-chips above — and inheritance loses to
 * ANY explicit rule matching the element, including a theme's own bare
 * "li { list-style: disc }" reset. This descendant selector (0,1,1) beats
 * that regardless of source order.
 */
.ds-chips li {
  list-style: none;
}

.ds-chip {
  padding: var(--ds-1) var(--ds-4);
  border-radius: var(--ds-radius-pill);
  border: 1px solid color-mix(in srgb, var(--ds-surface) 25%, transparent);
  color: color-mix(in srgb, var(--ds-surface) 85%, transparent);
  font-family: var(--ds-mono);
  font-size: 0.875rem;
  transition: background-color 160ms var(--ds-ease), border-color 160ms var(--ds-ease);
}

.ds .ds-chip:hover,
.ds .ds-chip:focus,
.ds .ds-chip:focus-visible {
  background: color-mix(in srgb, var(--ds-surface) 12%, transparent);
  border-color: color-mix(in srgb, var(--ds-surface) 45%, transparent);
  color: color-mix(in srgb, var(--ds-surface) 85%, transparent);
}

/* ---------------------------------------------------------------------- */
/* Results — the status board                                            */
/* ---------------------------------------------------------------------- */

.ds-results {
  background: var(--ds-canvas);
  padding: var(--ds-7) var(--ds-4);
}

.ds-results__inner {
  max-width: 780px;
  margin: 0 auto;
}

.ds-eyebrow {
  font-size: 0.875rem;
  color: var(--ds-ink-soft);
  margin-bottom: var(--ds-4);
}

.ds-eyebrow span {
  font-family: var(--ds-mono);
  color: var(--ds-ink);
}

/* Loading skeleton */

.ds-state--loading {
  display: flex;
  flex-direction: column;
  gap: var(--ds-2);
}

/*
 * A `display` declaration on the same element as `hidden` always wins over
 * the browser's built-in "[hidden] { display: none }" rule, regardless of
 * specificity — author-origin rules beat user-agent-origin rules outright.
 * Every element toggled via `hidden` that also sets its own `display` needs
 * this explicit pairing, or it never actually hides.
 */
.ds-state--loading[hidden],
.ds-featured[hidden],
.ds-more[hidden] {
  display: none;
}

.ds-skeleton {
  height: 64px;
  border-radius: var(--ds-radius-lg);
  background: linear-gradient(
    100deg,
    var(--ds-line) 30%,
    color-mix(in srgb, var(--ds-line) 50%, var(--ds-surface)) 50%,
    var(--ds-line) 70%
  );
  background-size: 200% 100%;
  animation: ds-shimmer 1.4s ease-in-out infinite;
}

/*
 * The first result is always the featured exact-match card, which is
 * much taller than a row — sizing only the first skeleton bar to
 * roughly that height means the results don't reflow as hard when the
 * real content lands.
 */
.ds-skeleton:first-child {
  height: 140px;
}

@keyframes ds-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Error / empty */

.ds-state--error,
.ds-state--empty {
  padding: var(--ds-6) var(--ds-5);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  text-align: center;
}

.ds-state__title {
  font-family: var(--ds-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: var(--ds-2);
}

.ds-state__body {
  color: var(--ds-ink-soft);
}

.ds-state--error .ds-btn {
  margin-top: var(--ds-4);
}

/* Rail — the signature element, shared by the featured card and every row */

.ds-rail {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--ds-1);
  background: var(--ds-line);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 220ms var(--ds-ease);
}

.ds-rail.is-in {
  transform: scaleY(1);
}

.ds-rail[data-status="available"] { background: var(--ds-yes); }
.ds-rail[data-status="taken"]     { background: var(--ds-no); }
.ds-rail[data-status="premium"]   { background: var(--ds-premium); }

/*
 * A premium domain currently only differs from an available one by the
 * rail color and the word "Premium" — a 10x price carries no more visual
 * weight than a 500 EGP one. A faint tint of the existing premium token
 * (already used for the rail, nothing new) gives it a touch more presence
 * without competing with the rail as the row's main signal.
 */
.ds-row:has(.ds-rail[data-status="premium"]) {
  background: color-mix(in srgb, var(--ds-premium) 6%, transparent);
}

.ds-featured:has(.ds-rail[data-status="premium"]) {
  background: color-mix(in srgb, var(--ds-premium) 5%, var(--ds-surface));
}

/* Featured (exact-match) row */

.ds-featured {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "id id" "price price";
  row-gap: var(--ds-4);
  align-items: center;
  padding: var(--ds-6) var(--ds-6) var(--ds-6) calc(var(--ds-6) + var(--ds-2));
  margin-bottom: var(--ds-5);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow);
}

.ds-featured__id {
  grid-area: id;
}

.ds-featured__price {
  grid-area: price;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-3);
}

.ds-domain {
  display: block;
  font-family: var(--ds-mono);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--ds-ink);
}

.ds-featured .ds-domain {
  font-size: 1.375rem;
}

.ds-status {
  display: block;
  margin-top: var(--ds-1);
  font-size: 0.875rem;
  color: var(--ds-ink-soft);
}

/* Prices read as clean bold numerals (Inter), not the domain-name mono
 * treatment — matches every reference mockup in /designs. */
.ds-price {
  font-family: var(--ds-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ds-ink);
}

.ds-price__term {
  font-size: 0.8125rem;
  color: var(--ds-ink-soft);
  flex-basis: 100%;
}

.ds-featured .ds-btn {
  width: 100%;
}

.ds-featured.is-taken .ds-domain,
.ds-featured.is-taken .ds-status {
  color: var(--ds-ink-soft);
}

/*
 * Taken results have no price/button — without this the card still
 * reserves the full "id + price" grid row plus its row-gap for content
 * that's now empty, leaving a large dead void under "Taken". The price
 * area is dropped from the template entirely for this state instead of
 * just emptied.
 */
.ds-featured.is-taken {
  grid-template-areas: "id id";
  row-gap: 0;
  padding-bottom: var(--ds-4);
}

.ds-featured.is-taken .ds-featured__price {
  display: none;
}

/* Alternatives list */

.ds-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-row {
  position: relative;
  display: grid;
  list-style: none;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "domain domain"
    "status price"
    "button button";
  row-gap: var(--ds-1);
  align-items: center;
  padding: var(--ds-4) 0 var(--ds-4) var(--ds-4);
  border-bottom: 1px solid var(--ds-line);
}

.ds-row .ds-domain   { grid-area: domain; }
.ds-row .ds-status   { grid-area: status; }
.ds-row .ds-price    { grid-area: price; justify-self: end; font-size: 1.125rem; }
.ds-row .ds-btn      { grid-area: button; width: 100%; margin-top: var(--ds-2); }

.ds-row[data-taken] .ds-domain,
.ds-row[data-taken] .ds-status {
  color: var(--ds-ink-soft);
}

.ds-more {
  display: block;
  width: 100%;
  margin-top: var(--ds-5);
}

/* ---------------------------------------------------------------------- */
/* Trust strip                                                            */
/* ---------------------------------------------------------------------- */

.ds-trust {
  background: var(--ds-canvas);
  padding: var(--ds-8) var(--ds-4);
}

.ds-trust__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-6);
}

.ds-trust__item {
  position: relative;
  padding-top: var(--ds-3);
}

.ds-trust__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: var(--ds-1);
  background: var(--ds-action);
  border-radius: var(--ds-1);
}

.ds-trust__title {
  font-family: var(--ds-body);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ds-ink);
}

.ds-trust__body {
  margin-top: var(--ds-2);
  font-size: 0.9375rem;
  color: var(--ds-ink-soft);
}

/* ---------------------------------------------------------------------- */
/* FAQ                                                                    */
/* ---------------------------------------------------------------------- */

.ds-faq {
  background: var(--ds-surface);
  padding: var(--ds-8) var(--ds-4);
}

.ds-faq__inner {
  max-width: 720px;
  margin: 0 auto;
}

.ds-faq__title {
  font-family: var(--ds-display);
  font-weight: 600;
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: var(--ds-6);
}

.ds-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-faq__item {
  list-style: none;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-4) var(--ds-5);
}

.ds-faq__q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ds-ink);
}

.ds-faq__q::after {
  content: '+';
  flex-shrink: 0;
  margin-left: var(--ds-3);
  font-family: var(--ds-display);
  color: var(--ds-ink-soft);
  transition: transform 180ms var(--ds-ease);
}

.ds-faq__q[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

/*
 * The theme's button:hover/button:focus styling (a solid fill + white
 * text) otherwise wins here too — the mouse is still resting on this
 * button right after the click that opened it, so every visitor sees the
 * fill for a moment, not just keyboard users tabbing through. Explicit
 * background: none + color pins this back to the design system regardless
 * of hover/focus state.
 */
.ds .ds-faq__q:hover,
.ds .ds-faq__q:focus,
.ds .ds-faq__q:focus-visible {
  background: none;
  color: var(--ds-ink);
}

.ds-faq__a {
  display: block;
  overflow: hidden;
  font-size: 0.9375rem;
  color: var(--ds-ink-soft);
  max-height: 0;
  opacity: 0;
  transition: max-height 200ms var(--ds-ease), opacity 200ms var(--ds-ease), margin-top 200ms var(--ds-ease);
}

/*
 * .ds-faq__a's own `display: block` above (an author-origin rule) already
 * outranks the browser's built-in "[hidden] { display: none }" regardless
 * of specificity, so `hidden` never actually hides this element — that's
 * deliberate here: it lets `hidden` keep acting as the JS state marker
 * while max-height/opacity below animate the reveal.
 */
.ds-faq__a:not([hidden]) {
  max-height: 240px;
  opacity: 1;
  margin-top: var(--ds-3);
}

/* ---------------------------------------------------------------------- */
/* Closing CTA — the one deliberate exception to "one accent color"       */
/* ---------------------------------------------------------------------- */

.ds-closing {
  background: var(--ds-action);
  padding: var(--ds-8) var(--ds-4);
  text-align: center;
}

.ds-closing__title {
  font-family: var(--ds-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--ds-action-ink);
}

.ds-closing__lede {
  margin-top: var(--ds-3);
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--ds-action-ink) 85%, transparent);
}

.ds-closing .ds-btn {
  margin-top: var(--ds-6);
}

/* ---------------------------------------------------------------------- */
/* Breakpoints                                                            */
/* ---------------------------------------------------------------------- */

@media (min-width: 640px) {
  .ds-search {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .ds-trust__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .ds-row {
    grid-template-columns: minmax(160px, 1fr) auto minmax(110px, auto) auto;
    grid-template-areas: "domain status price button";
    column-gap: var(--ds-4);
    row-gap: 0;
    padding: var(--ds-4) 0 var(--ds-4) var(--ds-4);
  }

  .ds-row .ds-price { font-size: 1.25rem; }
  .ds-row .ds-btn   { width: auto; margin-top: 0; }

  .ds-featured {
    grid-template-columns: 1fr auto;
    grid-template-areas: "id price";
    row-gap: 0;
    column-gap: var(--ds-5);
  }

  .ds-featured.is-taken {
    grid-template-columns: 1fr;
    grid-template-areas: "id";
  }

  .ds-featured__price {
    flex-direction: column;
    align-items: flex-end;
  }

  .ds-featured .ds-btn { width: auto; }

  .ds-more { width: auto; }
}

@media (min-width: 1100px) {
  .ds-trust__inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                         */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ds *,
  .ds *::before,
  .ds *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}