/* ══════════════════════════════════════════════════════════════════════
   LISTING CIRCUITS — skin premium (cohérent avec la page résultats séjours)
   Fond de page clair, cartes blanches radius 8, couleur primaire tenant.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --stl-red:   var(--btn-background, #ec1a0c);
    --stl-ink:   #121826;
    --stl-muted: #5e6b82;
    --stl-line:  #e6e8ec;
    --stl-soft:  #f6f7fa;
    --stl-green: #0b9e51;
}
.stl-page { background: #f9fafb !important; }
html.dark .stl-page { background: #0f172a !important; }

/* ── Rangée compteur + tri ─────────────────────────────────────────────── */
.stl-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.stl-count { font-size:19px; font-weight:800; color:var(--stl-ink); line-height:1.3; letter-spacing:-0.01em; }
html.dark .stl-count { color:#f9fafb; }
.stl-toolbar-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
.stl-sort { display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:8px; padding:9px 12px; flex-shrink:0; box-shadow:0 1px 2px rgba(15,23,42,.06); }
html.dark .stl-sort { background:#1f2937; box-shadow:none; }
.stl-sort .material-symbols-outlined { font-size:18px; color:var(--stl-muted); }
.stl-sort select { border:none; background:transparent; outline:none; font-size:13.5px; font-weight:600; color:var(--stl-ink); cursor:pointer; max-width:260px; }
html.dark .stl-sort select { color:#e5e7eb; }
html.dark .stl-sort select option { background:#1f2937; }

/* ── Carte circuit (image 236px pleine hauteur | infos | prix) ─────────── */
.stl-card { background:#fff; border-radius:8px; border:none; overflow:hidden; transition:box-shadow .18s ease; }
.stl-card:hover { box-shadow:0 10px 28px rgba(15,23,42,.1); }
html.dark .stl-card { background:#1f2937; }
.stl-card-row { display:flex; align-items:stretch; min-height:246px; cursor:pointer; }
.stl-card-img { position:relative; width:236px; flex-shrink:0; overflow:hidden; background:var(--stl-soft); }
.stl-card-body { flex:1; min-width:0; padding:16px 20px 14px; display:flex; flex-direction:column; }
.stl-card-price { width:230px; flex-shrink:0; padding:16px 20px 16px 8px; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; text-align:end; }
[dir="rtl"] .stl-card-price { padding:16px 8px 16px 20px; }

.stl-name-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.stl-name { font-size:20px; font-weight:700; color:var(--stl-ink); line-height:1.3; letter-spacing:-0.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; transition:color .15s; }
.stl-card-row:hover .stl-name { color:var(--stl-red); }
html.dark .stl-name { color:#f9fafb; }

.stl-score-row { display:flex; align-items:center; gap:9px; margin-top:7px; }
.stl-score { min-width:40px; height:30px; padding:0 8px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:var(--stl-red); color:#fff; font-size:14.5px; font-weight:800; border-radius:8px 8px 8px 3px; }
.stl-score-count { font-size:13px; color:var(--stl-muted); }

.stl-loc-row { display:flex; align-items:center; gap:5px; margin-top:7px; font-size:13.5px; color:var(--stl-muted); min-width:0; }
.stl-loc-row .material-symbols-outlined { font-size:16px; flex-shrink:0; }
.stl-loc-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

.stl-chips-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.stl-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:6px; background:var(--stl-soft); color:#4b5563; font-size:12px; font-weight:600; max-width:100%; }
.stl-chip span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stl-chip .material-symbols-outlined { font-size:14px; flex-shrink:0; }
html.dark .stl-chip { background:#111827; color:#9ca3af; }

.stl-room-row { margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13.5px; color:var(--stl-ink); font-weight:600; min-width:0; }
html.dark .stl-room-row { color:#e5e7eb; }
.stl-room-row .material-symbols-outlined { font-size:17px; color:var(--stl-muted); }
.stl-meta { display:inline-flex; align-items:center; gap:6px; }

.stl-occ { font-size:12px; color:var(--stl-muted); }
.stl-price { font-size:24px; font-weight:800; color:var(--stl-red); line-height:1.1; letter-spacing:-0.01em; display:inline-flex; align-items:baseline; gap:4px; }
.stl-price-taxes { font-size:12px; color:var(--stl-muted); margin-top:2px; }
.stl-cta { margin-top:12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:0 20px; width:100%; background:var(--stl-red); color:var(--btn-text-color,#fff); border-radius:10px; font-size:14px; font-weight:700; text-decoration:none; transition:filter .15s; white-space:nowrap; }
.stl-cta:hover { filter:brightness(.92); }

/* Badge sur l'image (durée) */
.stl-img-badge { position:absolute; top:10px; z-index:20; display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(17,24,39,.72); color:#fff; backdrop-filter:blur(6px); white-space:nowrap; }

/* Carrousel image (repris du listing séjours) */
.stay-card-carousel { border:1px solid rgba(255,255,255,.72); background:rgba(255,255,255,.92); color:#111827; box-shadow:0 8px 22px rgba(15,23,42,.14); backdrop-filter:blur(10px); display:inline-flex; align-items:center; gap:2px; min-height:30px; border-radius:999px; padding:2px 5px; }
.stay-card-carousel-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:999px; color:#374151; transition:background .16s ease, color .16s ease; }
.stay-card-carousel-btn:hover { background:rgba(236,26,12,.09); color:var(--btn-background,#ec1a0c); }
.stay-card-carousel-count { min-width:34px; text-align:center; font-size:12px; line-height:1; font-weight:800; color:#111827; }
html.dark .stay-card-carousel { border-color:rgba(55,65,81,.82); background:rgba(17,24,39,.86); color:#f3f4f6; }
html.dark .stay-card-carousel-btn { color:#e5e7eb; }
html.dark .stay-card-carousel-count { color:#f3f4f6; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:767px) {
    .stl-card-row { flex-direction:column; min-height:0; cursor:default; }
    .stl-card-img { width:100%; height:200px; }
    .stl-card-price { width:100%; align-items:stretch; text-align:start; padding:0 20px 16px; border-top:1px solid var(--stl-line); margin-top:12px; padding-top:12px; }
    html.dark .stl-card-price { border-color:#374151; }
    .stl-price-wrap-mob { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
    .stl-name { white-space:normal; font-size:17px; }
    .stl-count { font-size:17px; }
    .stl-sort { width:100%; justify-content:space-between; }
}
[x-cloak] { display:none !important; }

/* Omra listing uses the same results layout as stays and activities. */
.umrah-result-list { display:flex; flex-direction:column; gap:10px; }
.umrah-result-list > div { border:1px solid #dadce0; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.035); }
html.dark .umrah-result-list > div { border-color:#374151; background:#1f2937; }
.umrah-search-panel { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px; box-shadow:0 8px 20px rgba(15,41,77,.08); }
html.dark .umrah-search-panel { background:#1f2937; border-color:#374151; }
.umrah-filter-shell { border:0!important; box-shadow:none!important; background:transparent!important; padding:0!important; overflow:visible!important; }
.umrah-filter-shell > .p-3,
.umrah-filter-shell > div:last-child > .border-b {
    background:#fff; border:0!important; border-radius:8px;
    margin-bottom:12px; padding:14px 16px;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.umrah-filter-shell > .p-3 { box-shadow:0 8px 18px rgba(15,23,42,.08); }
html.dark .umrah-filter-shell > .p-3,
html.dark .umrah-filter-shell > div:last-child > .border-b { background:#1f2937; }
.umrah-filter-shell > div:last-child > .border-b > button { padding:0 0 10px!important; }
.umrah-filter-shell > div:last-child > .border-b > div { padding:2px 0 0!important; }
#umrahPriceSlider.noUi-target { height:6px; border:0; border-radius:999px; background:#e5e7eb; box-shadow:none; }
#umrahPriceSlider .noUi-connect { background:#111827; }
#umrahPriceSlider .noUi-handle { width:17px!important; height:17px!important; right:-8px!important; top:-6px!important; border:1px solid #d1d5db!important; box-shadow:0 1px 2px rgba(15,23,42,.1)!important; }
#umrahPriceSlider .noUi-handle:before,
#umrahPriceSlider .noUi-handle:after { display:none!important; }
.umrah-card-photo img { width:100%; height:100%; object-fit:cover; }
.umrah-card-price { border-inline-start:1px solid #f0f1f3; }
html.dark .umrah-card-price { border-color:#374151; }
@media(max-width:767px) {
  .umrah-card-price { border-inline-start:0; }
  .umrah-filter-shell { overflow-y:auto!important; }
}