/* ==========================================================================
   halal-reisen — Suchseite & Trefferliste (Task 13, Phase 2)

   ⚠️ Die Trefferkarten bestehen aus FREMDEM Markup, das live von
   halalbooking.com kommt (docs/besonderheiten.md §1). Ihr innerer Aufbau ist
   nur ueber CSS beeinflussbar — deshalb wird hier ausschliesslich gestaltet,
   niemals umstrukturiert. Klassen wie `.halal-features--i`, `.property-score`
   oder `.card--header` stammen von dort und duerfen NICHT umbenannt werden.

   Ebenso tabu: `value`-Attribute und IDs der Filter (`feature_43` &c.) — daran
   haengen `filtrele()` und die Auto-Klicks in search-hotel.blade.php, und sie
   sind zugleich IDs der externen API (§3).
   ========================================================================== */

/* --- Kopfleiste der Suchseite --------------------------------------------- */
.list-single-header,
.breadcrumbs {
  background-color: var(--hr-surface);
  border-bottom: 1px solid var(--hr-border);
}

/* Umschalter Liste/Karte */
.showOnMap {
  display: inline-flex;
  align-items: center;
  gap: var(--hr-space-2);
  min-height: var(--hr-tap);
  padding: var(--hr-space-2) var(--hr-space-5);
  border-radius: var(--hr-radius);
  background-color: var(--hr-primary);
  color: var(--hr-text-on-dark);
  font-weight: var(--hr-weight-semibold);
}
.showOnMap:hover { background-color: var(--hr-primary-hover); color: var(--hr-text-on-dark); }

/* --- Kopfleiste der Trefferseite (Task 15) ----------------------------------
   Die Leiste liegt auf `--hr-dark`. Eine Farbregel dafuer gab es hier nie — nur
   in pages/detail.css, das auf DIESER Seite gar nicht geladen wird. Also griff
   legacy-colors.css und faerbte `h3.s-header strong` sowie die Icons auf das
   Markengruen: gruen auf dunkelgruen. Der Wert hinter "Suchergebnisse fuer:"
   (der Ortsname) erbte dunklen Text und war praktisch unsichtbar.

   Alles in dieser Leiste steht deshalb auf `--hr-text-on-dark`. Die
   Doppelklasse schlaegt die Selektoren aus legacy-colors.css. */
.breadcrumbs-fs {
  background-color: var(--hr-dark);
  color: var(--hr-text-on-dark);
}
.breadcrumbs-fs .s-header,
.breadcrumbs-fs .s-header span,
.breadcrumbs-fs .s-header div,
.breadcrumbs-fs .s-header strong,
.breadcrumbs-fs .s-header i,
/* h1 seit Task 16: Der Trefferzaehler ist die Ueberschrift der Seite. */
.breadcrumbs-fs .breadcrumbs h1,
.breadcrumbs-fs .breadcrumbs h3,
.breadcrumbs-fs .breadcrumbs strong {
  color: var(--hr-text-on-dark);
}

/* Die Groesse MUSS hier stehen. Ein h1 erbt sonst die globale Ueberschrift aus
   base.css und stand mit 43,79px statt 24px in der schmalen Leiste - gemessen
   53px hoch statt 29px. Die Werte sind exakt die, die das vorherige h3 an
   dieser Stelle hatte. */
.breadcrumbs-fs .breadcrumbs h1 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}
/* Der Trefferzaehler links sass in einem weissen Kasten aus dem Alt-CSS und
   riss die Leiste optisch auseinander. */
.breadcrumbs-fs .breadcrumbs {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
/* Die Umschaltflaeche zur Karte behaelt ihre eigene Farbe. */
.breadcrumbs-fs .showOnMap,
.breadcrumbs-fs .showOnMap span,
.breadcrumbs-fs .showOnMap i { color: var(--hr-text-on-dark); }

/* --- Seitenleiste ----------------------------------------------------------
   Kein `overflow: hidden` (Task 15): Der Kalender der Seitenleiste ist 554 px
   breit, die Leiste selbst nur rund 314 px. Das Clipping schnitt den zweiten
   Monat samt WEITER-PFEIL ab — gemessen lag der Pfeil 206 px ausserhalb der
   sichtbaren Flaeche. Genau daran scheiterte das Blaettern zum naechsten Monat.
   Die Kinder der Leiste haben Innenabstand, es ragt also nichts ueber die
   gerundeten Ecken hinaus. */
.filter-sidebar {
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  background-color: var(--hr-surface);
  box-shadow: var(--hr-shadow-sm);
}
.filter-sidebar + .filter-sidebar { margin-top: var(--hr-space-4); }

.filter-header {
  padding: var(--hr-space-4);
  border: 0;
  border-bottom: 1px solid var(--hr-border);
  border-radius: 0;
  background-color: var(--hr-surface);
  color: var(--hr-dark);
  font-size: var(--hr-text-base);
  font-weight: var(--hr-weight-semibold);
}

/* Filterkategorien als Aufklapper.
   Die Beschriftung ist ein <label>, kein <a> — und die Grossbuchstaben kamen
   nicht aus der Sprachdatei (dort steht korrekt "Unterkunftstyp"), sondern aus
   einem `text-transform: uppercase` im alten Stylesheet. */
.filterCat > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hr-space-3);
  width: 100%;
  min-height: var(--hr-tap);
  margin: 0;
  padding: var(--hr-space-3) var(--hr-space-4);
  color: var(--hr-dark);
  font-size: var(--hr-text-sm);
  font-weight: var(--hr-weight-semibold);
  text-transform: none;
  cursor: pointer;
}
.filterCat > label:hover { background-color: var(--hr-surface-sunken); }

/* Kontrollkaestchen gross genug zum Treffen */
.filter-sidebar input[type="checkbox"],
.filter-sidebar input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--hr-primary);
}
.filter-sidebar label {
  display: flex;
  align-items: center;
  gap: var(--hr-space-3);
  min-height: 36px;
  color: var(--hr-text);
  font-size: var(--hr-text-sm);
  cursor: pointer;
}

/* Felder der Seitenleisten-Suche */
.col-list-search-input-item input[type="text"],
.col-list-search-input-item input[type="number"],
.col-list-search-input-item select {
  min-height: var(--hr-tap);
  border: 1px solid var(--hr-border-strong);
  border-radius: var(--hr-radius);
  background-color: var(--hr-surface);
  /* 16px: iOS zoomt sonst beim Fokus in die Seite hinein. */
  font-size: var(--hr-text-base);
}
.col-list-search-input-item input:focus,
.col-list-search-input-item select:focus {
  outline: none;
  border-color: var(--hr-primary);
  box-shadow: var(--hr-focus-ring);
}

/* --- Trefferkarten (Fremdmarkup — nur Optik) ------------------------------- */
.search-i--container {
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  background-color: var(--hr-surface);
  overflow: hidden;
  transition: box-shadow var(--hr-transition), border-color var(--hr-transition);
}
.search-i--container:hover {
  border-color: var(--hr-border-strong);
  box-shadow: var(--hr-shadow-lg);
}

/* Halal-Merkmale als Chips — vorher ein fremdes Blassgruen (#F1F5F2/#2F6B3A),
   das mit der Markenfarbe nichts zu tun hatte. */
.halal-features--i {
  border-radius: var(--hr-radius-full);
  background-color: var(--hr-primary-soft);
  color: var(--hr-dark);
  font-size: var(--hr-text-xs);
  font-weight: var(--hr-weight-medium);
}

/* Bewertungs-Badge auf dem Foto */
.property-score {
  background-color: var(--hr-dark);
  color: var(--hr-text-on-dark);
  border-radius: var(--hr-radius-sm);
  font-weight: var(--hr-weight-bold);
}

/* Preis */
.search-i--container .price,
.search-i--container .font-headline {
  color: var(--hr-dark);
  font-weight: var(--hr-weight-bold);
}

/* --- Ladeanzeigen ---------------------------------------------------------- */
.loader-item,
.skeleton {
  background-color: var(--hr-surface-sunken);
  border-radius: var(--hr-radius);
}

/* --- Mobil ---------------------------------------------------------------- */
/* 1064px ist gesetzt: An diesem Wert haengt die Umschaltung zwischen
   Desktop-Karte und mobilem Karten-Modal (docs/besonderheiten.md §2a).
   Ein anderer Wert holt den in Task 07 behobenen Fehler zurueck.
   Deshalb hier 1063px als "kleiner als 1064". */
@media (max-width: 1063px) {

  /* Der Filter-Aufruf war eine randlose Leiste ueber die volle Breite in einem
     fremden Dunkelblau (#002F3F). Jetzt ein schwebender Knopf: nimmt weniger
     Platz, verdeckt keine Treffer und folgt der Markenfarbe. */
  .mobile-list-controls {
    left: 0;
    right: 0;
    bottom: var(--hr-space-4);
    display: flex;
    justify-content: center;
    background: none;
    /* Nur der Knopf selbst soll klickbar sein, nicht die ganze Zeile. */
    pointer-events: none;
  }

  .mobile-list-controls .mlc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hr-space-2);
    width: auto;
    min-height: var(--hr-tap);
    padding: var(--hr-space-3) var(--hr-space-6);
    border-radius: var(--hr-radius-full);
    background-color: var(--hr-primary);
    color: var(--hr-text-on-dark);
    font-size: var(--hr-text-base);
    font-weight: var(--hr-weight-semibold);
    box-shadow: var(--hr-shadow-lg);
    pointer-events: auto;
  }
  .mobile-list-controls .mlc:hover { background-color: var(--hr-primary-hover); }

  /* Die Trefferliste braucht unten Luft, sonst verdeckt der schwebende Knopf
     die letzte Karte. */
  #hotel_list { padding-bottom: calc(var(--hr-tap) + var(--hr-space-6)); }

  /* Aufgeklappte Filter */
  .filter-sidebar.collapse.show,
  .filter-sidebar.collapse.in {
    margin-top: var(--hr-space-3);
    border-radius: var(--hr-radius-lg);
  }

  /* Trefferkarten stapeln: Bild oben, Text darunter. Die Chips brachen sonst
     in sehr schmale Spalten um. */
  .halal-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-space-2);
  }
  .halal-features--i { white-space: nowrap; }
}

/* --- Hinweis, wenn die Suche nichts liefern kann (Task 15) ------------------
   Vorher blieb die Trefferflaeche bei einem Fehler einfach leer — sie sah aus,
   als laufe die Suche noch. */
.hr-suchhinweis {
  margin: 0 0 var(--hr-space-4);
  padding: var(--hr-space-4);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);
  background-color: var(--hr-surface);
  color: var(--hr-text);
  text-align: center;
}