/* ==========================================================================
   Inline domain availability — the search field's busy state and the results
   panel it opens.

   Lifted out of home.css because it is no longer the hero's alone: the
   Domains page runs the same search through the same script, and pulling in
   the whole of home.css there would have brought the hero, the parallax, the
   pricing band and the feature grid with it.

   The panel's own look is written for a dark ground, which is where it was
   born. #domain-search on domains.html is a light section, so the variant at
   the foot of this file re-grounds it there rather than a second copy of the
   panel being written.
   ========================================================================== */

/* ==========================================================================
   Hero domain results — inline availability panel under the search field.
   Shares the glass/blue language of .domain-search-fx so it reads as an
   extension of the field rather than a separate widget.
   ========================================================================== */

.domain-results {
  margin-top: 18px;
  padding: 14px 20px 18px;
  border-radius: 22px;
  background: rgba(10, 10, 12, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(56, 130, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(140, 190, 255, 0.1),
    0 10px 30px rgba(0, 0, 0, 0.4);
  color: #e8eefc;
  text-align: left;
}

/* Only when the panel arrives - not every time its contents change. */
.domain-results.is-entering {
  animation: domainResultsIn 260ms ease both;
}

.domain-results[hidden] {
  display: none;
}

@keyframes domainResultsIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.domain-results__headline {
  margin: 0 0 10px;
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  color: #f2f6ff;
}

.domain-results__headline strong {
  color: inherit;
  font-weight: 700;
}

/* Available reads as a win, so it glows. Taken is plain red - stating a
   fact, not celebrating it. */
.domain-results__headline.is-available {
  color: #4ade80;
  text-shadow:
    0 0 6px rgba(74, 222, 128, 0.45),
    0 0 20px rgba(74, 222, 128, 0.55),
    0 0 40px rgba(74, 222, 128, 0.25);
}

.domain-results__headline.is-taken {
  color: #ff6b6b;
  text-shadow: none;
}

.domain-results__subhead {
  margin: 16px 0 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(190, 210, 245, 0.65);
}

.domain-results__status {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(220, 232, 255, 0.85);
}

.domain-results.is-error .domain-results__status {
  color: #ffb4b4;
}

.domain-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.domain-results__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.domain-results__row.is-exact {
  background: rgba(56, 130, 255, 0.1);
  border-color: rgba(56, 130, 255, 0.4);
}

.domain-results__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Reserve the box before the web component upgrades.

     <iconify-icon> is a custom element: until the browser upgrades it and
     it renders its SVG, it occupies 0x0. The row is a flex line, so the
     moment the icon gains size everything after it shifts right - which is
     what makes the price visibly jump. Scrolling made it obvious because
     rows render as they enter the viewport, so the jump happened again on
     every pass.

     22px is not arbitrary: the markup asks for width="22" height="22", and
     the mobile rule below already offsets the price by 34px, which is this
     icon plus the 12px flex gap. The size was always assumed - it just was
     not reserved. */
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.domain-results__icon iconify-icon {
  display: block;
  width: 22px;
  height: 22px;
  /* globals.css nudges every icon up 0.125em to sit on a text baseline.
     There is no text on this line to align to - the icon is centred in its
     own box - so the nudge only pushes it off centre. */
  vertical-align: 0;
}

.domain-results__row.is-available .domain-results__icon { color: #57e0a0; }
.domain-results__row.is-taken     .domain-results__icon { color: #ff8080; }

.domain-results__name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.domain-results__row.is-taken .domain-results__name {
  color: rgba(226, 234, 250, 0.6);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 128, 128, 0.5);
}

.domain-results__price {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: #dce8ff;
}

.domain-results__price small {
  opacity: 0.6;
  font-size: 0.75em;
  margin-left: 2px;
}

.domain-results__cta {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: #fff;
  color: #06080f;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.domain-results__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(56, 130, 255, 0.45);
  color: #06080f;
}

.domain-results__cta--muted {
  position: relative;
  background: transparent;
  color: rgba(200, 214, 240, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* It is a span, so without this the text I-beam shows over the label. */
  cursor: default;
  transition: color 160ms ease, border-color 160ms ease;
}

/* The shared .domain-results__cta:hover forces black text, which is
   unreadable on a transparent badge. Two classes outrank it. */
.domain-results__cta--muted:hover {
  transform: none;
  box-shadow: none;
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.7);
}

/* Tooltip. The panel scrolls, and overflow-y:auto forces overflow-x to auto
   as well, so anything escaping the panel would be clipped. Sitting to the
   left of the badge and vertically centred keeps it inside on both axes.
   hover:hover keeps it off touch screens, where it would stick on tap. */
@media (hover: hover) {
  .domain-results__cta--muted[data-tooltip]::after,
  .domain-results__cta--muted[data-tooltip]::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    z-index: 6;
  }

  .domain-results__cta--muted[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(5px);
    width: max-content;
    max-width: 250px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(10, 14, 24, 0.98);
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: #eef3ff;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  }

  /* Arrow pointing back at the badge. */
  .domain-results__cta--muted[data-tooltip]::before {
    content: "";
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%) translateX(5px);
    border: 6px solid transparent;
    border-left-color: rgba(255, 107, 107, 0.4);
  }

  .domain-results__cta--muted[data-tooltip]:hover::after,
  .domain-results__cta--muted[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }
}

/* Submit button feedback while a lookup is in flight. */
/* Waiting state. A real registrar lookup takes seconds, and dimming the
   button to 50% was the only sign anything was happening - easy to read as
   a dead control. The button now stays fully lit and animates: the arrow
   becomes an hourglass that turns over, with a ring sweeping its edge. */
.search-form.is-searching .domain-search-fx__submit {
  pointer-events: none;
}

.domain-search-fx__icon {
  display: block;
  line-height: 0;
}

.domain-search-fx__icon--busy {
  display: none;
}

.search-form.is-searching .domain-search-fx__icon--idle {
  display: none;
}

.search-form.is-searching .domain-search-fx__icon--busy {
  display: block;
  /* Holds each way up, then turns over, like sand running out. */
  animation: hourglassTurn 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes hourglassTurn {
  0%, 38%   { transform: rotate(0deg); }
  50%, 88%  { transform: rotate(180deg); }
  100%      { transform: rotate(360deg); }
}

/* The button is overflow:hidden, so the ring is inset rather than around. */
.search-form.is-searching .domain-search-fx__submit::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  border: 2px solid rgba(56, 130, 255, 0.16);
  border-top-color: rgba(56, 130, 255, 0.95);
  animation: submitRingSpin 820ms linear infinite;
}

@keyframes submitRingSpin {
  to { transform: rotate(360deg); }
}

/* Still show which state it is in, just without the motion. */
@media (prefers-reduced-motion: reduce) {
  .search-form.is-searching .domain-search-fx__icon--busy,
  .search-form.is-searching .domain-search-fx__submit::after {
    animation: none;
  }
}

@media (max-width: 575.98px) {
  .domain-results { padding: 14px; }

  .domain-results__row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* Let the name own the first line; price and CTA share the second. */
  .domain-results__name { flex: 1 1 100%; order: -1; }
  .domain-results__price { margin-left: 34px; }
  .domain-results__cta { margin-left: auto; }

  /* Three suggestions, then scroll.

     A nonsense query returns every extension we sell. Twenty wrapped rows
     push the hero off a phone screen, so the visitor loses the headline
     they came for behind a list they have not asked for yet.

     The height comes from JS, which measures the first three rendered rows
     - the rows wrap here, so their height depends on the text and on the
     visitors font size. Without that variable this rule does nothing, which
     is the right failure: a long list beats a clipped one. */
  .domain-results__subhead + .domain-results__list {
    max-height: var(--domain-suggest-max, none);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
    /* room for the scrollbar so it never sits on top of the price */
    padding-right: 4px;
  }

  .domain-results__subhead + .domain-results__list::-webkit-scrollbar {
    width: 4px;
  }

  .domain-results__subhead + .domain-results__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .domain-results { animation: none; }
  .domain-results__cta:hover { transform: none; }
}


/* ==========================================================================
   The Domains page variant

   #domain-search exists only on domains.html, where the section is white and
   the field is a pale grey pill. The panel above is written for the hero's
   dark glass, so every ground, rule and text colour is restated here against
   light. Structure, spacing and the three availability states are inherited
   unchanged - this re-grounds the panel, it does not redesign it.
   ========================================================================== */

#domain-search .domain-results {
  max-width: 800px;
  margin: 18px auto 0;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(16, 32, 56, 0.1);
  box-shadow: 0 10px 34px rgba(16, 32, 56, 0.09);
  color: #465061;
}

#domain-search .domain-results__headline { color: #101a2b; }

/* The hero glows "available" green against black. On white a glow only
   smears, so the state is carried by weight and a flat colour instead. */
#domain-search .domain-results__headline.is-available {
  color: #12833f;
  text-shadow: none;
}

#domain-search .domain-results__headline.is-taken {
  color: #c0392b;
  text-shadow: none;
}

#domain-search .domain-results__subhead { color: #8b93a3; }
#domain-search .domain-results__status { color: #465061; }
#domain-search .domain-results.is-error .domain-results__status { color: #c0392b; }

#domain-search .domain-results__row {
  background: rgba(16, 32, 56, 0.025);
  border: 1px solid rgba(16, 32, 56, 0.07);
}

#domain-search .domain-results__row.is-exact {
  background: rgba(56, 130, 255, 0.06);
  border-color: rgba(56, 130, 255, 0.28);
}

#domain-search .domain-results__name { color: #101a2b; }
#domain-search .domain-results__row.is-taken .domain-results__name { color: #a8b0bf; }
#domain-search .domain-results__price { color: #465061; }

/* Inverted from the hero: white-on-dark becomes the accent on white. */
#domain-search .domain-results__cta {
  background: var(--color-accent, #3882ff);
  color: #fff;
}

#domain-search .domain-results__cta:hover {
  box-shadow: 0 6px 18px rgba(56, 130, 255, 0.35);
  color: #fff;
}

#domain-search .domain-results__cta--muted {
  background: transparent;
  color: #a8b0bf;
  border: 1px solid rgba(16, 32, 56, 0.14);
}

#domain-search .domain-results__cta--muted:hover {
  background: transparent;
  box-shadow: none;
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.5);
}

/* --- the busy state -----------------------------------------------------
   The hero swaps a bespoke pair of icons inside its own submit button. This
   page's button is a plain .btn, so it gets a plain ring instead: the script
   sets .is-searching on the form and disables the button either way.
   ---------------------------------------------------------------------- */
#domain-search form.is-searching .btn {
  position: relative;
  color: transparent;
  pointer-events: none;
}

#domain-search form.is-searching .btn > * { visibility: hidden; }

#domain-search form.is-searching .btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: submitRingSpin 620ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  #domain-search form.is-searching .btn::after { animation: none; }
}

/* The hero's panel is a narrow column beside the 3D stage, where an 8.5px
   pill reads as a neat affordance. This one is 800px wide and the same pill
   reads as an afterthought, so the buttons and the "Taken" marker are sized
   to the rows they sit in. The hero keeps its own figures. */
#domain-search .domain-results__cta {
  font-size: 1.15rem;
  padding: 9px 18px;
}

#domain-search .domain-results__name { font-size: 1.5rem; }
#domain-search .domain-results__price { font-size: 1.4rem; }
#domain-search .domain-results__headline { font-size: 1.6rem; }