/* hw-ai-domains.css: Aussehen des KI-Panels und des Umschalters. Nutzt nur Lagom-Variablen (var(--…)), die Lagom
   im Dunkelmodus (html.lagom-dark-mode) selbst umschaltet; Rückfallwerte gelten nur ohne Lagom. Kontrast AA geprüft. */

.hw-ai-panel { margin: 0 0 24px; text-align: left; }
.hw-ai-panel .search-group { display: flex; align-items: stretch; gap: 8px; }
.hw-ai-panel .search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.hw-ai-panel .search-field .form-control { width: 100%; }
.hw-ai-panel .search-group-btn { flex: 0 0 auto; }
.hw-ai-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.hw-ai-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; line-height: 1.45;
  color: inherit; opacity: .92; }
.hw-ai-meta p { margin: 0; }
.hw-ai-count { white-space: nowrap; }
.hw-ai-status { margin-top: 16px; }
.hw-ai-status:empty { display: none; }
.hw-ai-loading { display: flex; align-items: center; gap: 10px; color: inherit; }
.hw-ai-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gray-lighter-3, #ccc);
  border-top-color: currentColor; animation: hw-ai-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes hw-ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hw-ai-spinner { animation-duration: 2.5s; } }

.hw-ai-results-title { margin: 20px 0 12px; color: inherit; font-weight: 600; }
.hw-ai-panel .hw-ai-list { margin-bottom: 8px; padding: 0; background: var(--ui-block-bg, #fff) !important;
  border-radius: var(--list-group-border-radius, 8px); overflow: hidden; box-shadow: var(--list-group-box-shadow, none); }
/* !important: Lagom setzt Listen in Domain-Bereichen teils transparent; die Karte muss immer Lagom-Blockfarbe haben */
.hw-ai-panel .hw-ai-list .hw-ai-item { background: transparent !important; border-left: 0; border-right: 0; padding: 14px 18px; }
.hw-ai-panel .hw-ai-list .hw-ai-item:first-child { border-top: 0; }
.hw-ai-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px; }
.hw-ai-name { font-size: 16px; font-weight: 600; color: var(--text-heading-color, #1d1d1f); overflow-wrap: anywhere; }
.hw-ai-tld { color: var(--text-primary-color, var(--brand-primary, #1463ff)); }
.hw-ai-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600;
  vertical-align: middle; background: var(--brand-warning-lighter-4, #fff4e0); color: var(--text-warning-color, #8a5300); }
.hw-ai-state { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; }
.hw-ai-item.is-available .hw-ai-state { color: var(--text-success-color, #137333); }
.hw-ai-item.is-unavailable .hw-ai-state,
.hw-ai-item.is-unknown .hw-ai-state,
.hw-ai-item.is-contact .hw-ai-state { color: var(--text-lighter-color, #5f6368); }
.hw-ai-item.is-unavailable .hw-ai-name { color: var(--text-lighter-color, #5f6368); font-weight: 500; }
.hw-ai-price { text-align: right; white-space: nowrap; color: var(--text-heading-color, #1d1d1f); font-weight: 600; }
.hw-ai-price small { display: block; font-weight: 400; color: var(--text-lighter-color, #5f6368); }
.hw-ai-action { text-align: right; }
.hw-ai-action .btn { white-space: nowrap; }
.hw-ai-taken-toggle { margin-top: 4px; color: inherit !important; text-decoration: underline; opacity: .92; }
.hw-ai-taken { display: none; }
.hw-ai-show-taken .hw-ai-taken { display: grid; }
.hw-ai-checkout { display: flex; justify-content: flex-end; margin-top: 12px; }
.hw-ai-checkout[hidden] { display: none; }
.hw-ai-test { margin-top: 8px; font-size: 13px; color: inherit; font-weight: 600; }

/* Texte direkt auf dem Panel-Hintergrund: hw-ai-on-dark setzt das Skript, wenn der tatsächliche Hintergrund dunkel
   oder primärfarbig ist (Lagom zeigt Domainsuchen oft auf Blau-Verlauf); sonst normale Lagom-Textfarben. */
.hw-ai-panel .hw-ai-meta, .hw-ai-panel .hw-ai-results-title, .hw-ai-panel .hw-ai-taken-toggle,
.hw-ai-panel .hw-ai-loading, .hw-ai-panel .hw-ai-test { color: var(--text-body-color, #333) !important; }
.hw-ai-product-link { color: var(--link-color, #1463ff); }
.hw-ai-on-dark .hw-ai-meta, .hw-ai-on-dark .hw-ai-results-title, .hw-ai-on-dark .hw-ai-taken-toggle,
.hw-ai-on-dark .hw-ai-loading, .hw-ai-on-dark .hw-ai-test, .hw-ai-on-dark .hw-ai-product-link,
.hw-ai-on-dark.hw-ai-panel .hw-ai-meta, .hw-ai-on-dark.hw-ai-panel .hw-ai-results-title,
.hw-ai-on-dark.hw-ai-panel .hw-ai-taken-toggle, .hw-ai-on-dark.hw-ai-panel .hw-ai-loading,
.hw-ai-on-dark.hw-ai-panel .hw-ai-test { color: #fff !important; }
.hw-ai-on-dark .hw-ai-product-link { text-decoration: underline; }
/* Texte direkt auf dem Suchhintergrund (Lagom zeigt die Domainsuche oft auf Primärfarbe) erben dessen Textfarbe;
   Karten (list-group, alert) bringen eigene Lagom-Farben mit. */
.hw-ai-panel .search-field-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex;
  color: var(--brand-primary, #1463ff); pointer-events: none; }
.hw-ai-panel .search-field-icon svg { width: 20px; height: 20px; }
.hw-ai-panel .search-field .form-control { padding-left: 46px; }

/* Reiter auf der Domainseite: Lagom-Klassen domain-search-tabs/btn-tab-group, hier nur Abstand */
.hw-ai-tabs { margin-bottom: 16px; }
.hw-ai-tabs .btn-tab-group { display: inline-flex; gap: 4px; }
.hw-ai-tabs .btn i, .hw-ai-tabs .btn svg { margin-right: 6px; }

/* Umschalter unter kleinen Suchfeldern (Startseite, Banner) */
.hw-ai-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font-size: 14px;
  font-weight: 500; cursor: pointer; color: inherit; }
.hw-ai-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-primary, #1463ff); cursor: pointer; }
.hw-ai-toggle-privacy { margin: 6px auto 0; max-width: 640px; font-size: 12px; line-height: 1.4; opacity: .9; text-align: center; }
.hw-ai-toggle-privacy[hidden] { display: none; }
.hw-ai-product-link { display: inline-block; margin-top: 10px; font-weight: 500; }

@media (max-width: 767px) {
  .hw-ai-panel .search-group { flex-direction: column; }
  .hw-ai-panel .search-group-btn .btn { width: 100%; }
  .hw-ai-meta { flex-direction: column; gap: 4px; }
  .hw-ai-item { grid-template-columns: minmax(0, 1fr) auto; }
  .hw-ai-action { grid-column: 1 / -1; }
  .hw-ai-action .btn { width: 100%; }
  .hw-ai-tabs .btn-tab-group { display: flex; }
  .hw-ai-tabs .btn-tab-group .btn { flex: 1 1 50%; }
}