/* Domain-Suche (Auftrag H4, kompakt im Auftrag H5): vor der Suche kleine Etiketten mit den
   beliebten Endungen, nach der Suche EINE schlanke Liste (gesuchte Domain als erste Zeile,
   leicht hervorgehoben, darunter die beliebten Endungen), darunter der Textlink "Weitere
   Endungen anzeigen". Gemeinsam für Startseite, Bestellung (Schritt 2) und Kundenpanel,
   darum eine eigene Datei (Baustein app/views/site/domain_suche.php, Skript
   public/assets/domain_suche.js). Farben aus den Variablen der Seite (site.css und
   panel.css kennen dieselben Namen); die Farben für "frei" und "vergeben" stehen einmal
   als Variablen hier oben. */

.domain-suche {
  --domain-frei-farbe: #1f6b40;
  --domain-frei-hintergrund: #e7f6ec;
  --domain-gesucht-hintergrund: #f3fbf6;
  --domain-anderes-farbe: #8a5a1f;
  --domain-anderes-hintergrund: #fdf3e3;
  --domain-vergeben-hintergrund: #eef1f4;
  --domain-liste-breite: 760px;
  --domain-zeile-abstand: 11px;
  --domain-knopf-hoehe: 32px;
  --domain-etikett-hoehe: 34px;
  display: grid;
  gap: 14px;
  min-width: 0;
  margin-top: 16px;
  text-align: left;
}

.domain-suche > *,
.domain-suche section {
  min-width: 0;
}

.domain-suche__ergebnis {
  display: grid;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--domain-liste-breite);
  margin: 0 auto;
}

.domain-suche__ergebnis[hidden],
.domain-suche__start[hidden],
.domain-suche__weitere[hidden],
.domain-suche__status[hidden] {
  display: none;
}

.domain-suche__titel {
  margin: 0;
  color: var(--ink-muted, #475569);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Etiketten mit den beliebten Endungen (vor der Suche) ──────── */

.endungs-etiketten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.endungs-etikett {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: var(--domain-etikett-hoehe);
  padding: 0 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
  background: var(--surface, #ffffff);
  color: var(--ink, #0f172a);
  font-size: 0.88rem;
  line-height: 1;
  white-space: nowrap;
}

.endungs-etikett--hervorgehoben {
  border-color: var(--brand, #2a9d8f);
  background: var(--brand-soft, #edfafa);
}

.endungs-etikett__endung {
  font-weight: 800;
}

.endungs-etikett__preis {
  color: var(--ink-muted, #475569);
  font-weight: 400;
}

/* ── Meldung (nur bei Warnung oder Fehler) ─────────────────────── */

.domain-suche__status {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--domain-liste-breite);
  margin: 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: var(--surface-soft, #f1f5f9);
  color: var(--ink, #0f172a);
  font-size: 0.9rem;
}

.domain-suche__status--warn {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.domain-suche__status--error {
  border-color: #fecaca;
  background: #fff5f5;
  color: #b91c1c;
}

/* ── Liste der Endungen (gesuchte Domain zuerst) ───────────────── */

.domain-liste {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: var(--surface, #ffffff);
}

.domain-liste:empty {
  display: none;
}

.domain-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem 9.5rem 12rem;
  grid-template-areas: "name stand preis aktion";
  align-items: center;
  gap: 6px 12px;
  padding: var(--domain-zeile-abstand) 14px;
  border-top: 1px solid var(--line, #e2e8f0);
}

.domain-zeile:first-child {
  border-top: 0;
}

/* Gesuchte Domain: gleiche Grösse, nur zarter Hintergrund (grün, solange frei oder in Prüfung) */
.domain-zeile--gesucht {
  background: var(--domain-gesucht-hintergrund);
}

.domain-zeile--gesucht.domain-zeile--vergeben,
.domain-zeile--gesucht.domain-zeile--anderes {
  background: var(--surface-soft, #f8fafc);
}

/* Gewählte Domain (Bestellung): Rahmen und Häkchen */
.domain-zeile.is-selected {
  background: var(--brand-soft, #edfafa);
  box-shadow: inset 0 0 0 2px var(--brand, #2a9d8f);
}

.domain-zeile.is-selected .domain-zeile__name::before {
  content: "\2713";
  display: inline-block;
  margin-right: 8px;
  color: var(--brand, #2a9d8f);
  font-weight: 800;
}

.domain-zeile__name {
  grid-area: name;
  color: var(--ink, #0f172a);
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.domain-zeile__stand {
  grid-area: stand;
  min-height: 1.4em;
}

.domain-zeile__preis {
  grid-area: preis;
  color: var(--ink, #0f172a);
  font-size: 0.9rem;
  text-align: right;
  white-space: nowrap;
}

.domain-zeile__aktion {
  grid-area: aktion;
  justify-self: end;
}

/* Stand als kleines Etikett: frei grün, vergeben grau, sonst (reserviert, ungültig) gedämpft */
.domain-stand {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.domain-stand--frei {
  background: var(--domain-frei-hintergrund);
  color: var(--domain-frei-farbe);
}

.domain-stand--vergeben {
  background: var(--domain-vergeben-hintergrund);
  color: var(--ink-muted, #475569);
}

.domain-stand--anderes {
  background: var(--domain-anderes-hintergrund);
  color: var(--domain-anderes-farbe);
}

/* Ladeanzeige je Zeile: Stand schimmert, alles andere bleibt an seinem Platz */
.domain-schimmer {
  display: inline-block;
  width: 54px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eceef1 25%, #e0e3e8 37%, #eceef1 63%);
  background-size: 400% 100%;
  vertical-align: middle;
  animation: domain-schimmer 1.2s ease-in-out infinite;
}

@keyframes domain-schimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.domain-nur-lesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .domain-schimmer {
    animation: none;
  }
}

/* ── Kleine Knöpfe: frei gefüllt, Umziehen mit Rahmen, gewählt mit Häkchen ── */

.domain-suche .domain-aktion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--domain-knopf-hoehe);
  padding: 5px 14px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}

.domain-suche .domain-aktion:hover {
  transform: none;
}

.domain-suche .domain-aktion.button--ghost {
  border: 1px solid var(--brand, #2a9d8f);
  background: transparent;
  color: var(--brand-strong, #217f74);
}

.domain-suche .domain-aktion.button--ghost:hover {
  background: var(--brand-soft, #edfafa);
  color: var(--brand-strong, #217f74);
}

.domain-suche .domain-aktion--gewaehlt,
.domain-suche .domain-aktion--gewaehlt:hover {
  border: 1px solid var(--brand, #2a9d8f);
  background: var(--surface, #ffffff);
  color: var(--brand-strong, #217f74);
}

/* ── Textlinks "Weitere Endungen anzeigen" und "Mehr anzeigen" ──── */

.domain-suche__textlink {
  justify-self: start;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--brand-strong, #217f74);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.domain-suche__textlink:hover {
  color: var(--brand, #2a9d8f);
}

.domain-suche__textlink:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.75);
  outline-offset: 2px;
}

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

/* ── Weitere Endungen ──────────────────────────────────────────── */

.domain-suche__weitere {
  display: grid;
  gap: 10px;
  padding-top: 6px;
}

.domain-suche__werkzeuge {
  display: grid;
  gap: 8px;
}

.domain-suche__filter {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: var(--surface, #ffffff);
  color: var(--ink, #0f172a);
  font: inherit;
  font-size: 0.9rem;
}

.domain-suche__filter:focus-visible {
  border-color: var(--brand, #2a9d8f);
  outline: 2px solid rgba(42, 157, 143, 0.35);
  outline-offset: 1px;
}

.domain-suche__gruppen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.domain-suche__gruppe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
  background: var(--surface, #ffffff);
  color: var(--ink, #0f172a);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.domain-suche__gruppe:hover {
  border-color: var(--brand, #2a9d8f);
}

.domain-suche__gruppe[aria-pressed="true"] {
  border-color: var(--brand, #2a9d8f);
  background: var(--brand, #2a9d8f);
  color: #ffffff;
}

.domain-suche__gruppe:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.75);
  outline-offset: 2px;
}

.domain-suche__anzahl {
  min-width: 1.4em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
}

.domain-suche__gruppe[aria-pressed="true"] .domain-suche__anzahl {
  background: rgba(255, 255, 255, 0.25);
}

.domain-suche__hinweis {
  margin: 0;
  color: var(--ink-muted, #475569);
  font-size: 0.9rem;
}

/* ── Handy: Domain und Stand oben, Preis und Knopf darunter ─────── */

@media (max-width: 640px) {
  /* Drei Spalten: der Name reicht bis zum Stand, der Knopf darunter bis zum Rand (ein
     breiter Knopf wie "Zu Swizz-IT umziehen" drückt den Namen so nicht zusammen). */
  .domain-zeile {
    grid-template-columns: minmax(min-content, 1fr) auto auto;
    grid-template-areas: "name name stand" "preis aktion aktion";
    gap: 6px 10px;
    padding: var(--domain-zeile-abstand) 12px;
  }

  .domain-zeile__stand {
    justify-self: end;
  }

  .domain-zeile__preis {
    text-align: left;
  }

  .domain-zeile__aktion {
    max-width: 11rem;
  }

  .endungs-etikett {
    padding: 0 12px;
  }
}