/* ============================================================
   TravlFun · search.css · v1.0 · © Luxa Grid LLC
   Composition for search.html (sp- prefix). Components come
   from design-system/components.css.
   ============================================================ */

body { margin: 0; }

.sp-main { max-width: 1140px; margin-inline: auto; padding: 36px 24px 80px; display: flex; flex-direction: column; gap: 26px; }
.sp-head h1 { font: var(--tf-text-h1); margin: 0 0 6px; }
.sp-head p { font: var(--tf-text-body); color: var(--tf-ink-2); margin: 0; max-width: 60ch; }

/* ---- Search form card ---- */
.sp-form .tf-card__body { padding: 26px; gap: 18px; }
.sp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sp-grid .span2 { grid-column: span 2; }
@media (max-width: 1023px) { .sp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .sp-grid { grid-template-columns: 1fr; } .sp-grid .span2 { grid-column: auto; } }

.sp-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-dates input[type="date"] { color-scheme: light; }
:root[data-theme="dark"] .sp-dates input[type="date"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { .sp-dates input[type="date"] { color-scheme: dark; } }
:root[data-theme="light"] .sp-dates input[type="date"] { color-scheme: light; }

/* Dual-thumb budget slider (two stacked native ranges) */
.sp-range { position: relative; height: 34px; margin: 4px 10px 0; }
.sp-range__track { position: absolute; top: 50%; left: 0; right: 0; height: 6px; transform: translateY(-50%);
  background: var(--tf-surface-2); border: 1px solid var(--tf-border); border-radius: var(--tf-r-pill); }
.sp-range__fill { position: absolute; top: 50%; height: 6px; transform: translateY(-50%);
  background: linear-gradient(90deg, var(--tf-color-secondary), var(--tf-color-primary)); border-radius: var(--tf-r-pill); }
.sp-range input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.sp-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 20px; height: 20px; border-radius: 50%; cursor: grab;
  background: var(--tf-surface); border: 2.5px solid var(--tf-color-primary); box-shadow: var(--tf-shadow-1);
}
.sp-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; cursor: grab;
  background: var(--tf-surface); border: 2.5px solid var(--tf-color-primary); box-shadow: var(--tf-shadow-1);
}
.sp-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--tf-color-primary); outline-offset: 2px; }
.sp-range__labels { display: flex; justify-content: space-between; font: var(--tf-text-body-s); color: var(--tf-ink-2); margin-top: 2px; }
.sp-range__labels b { color: var(--tf-ink); font-variant-numeric: tabular-nums; }

/* Travelers stepper stretches in its cell */
.sp-stepper { width: 100%; justify-content: space-between; }

/* Interests + travel type rows */
.sp-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-seg { border: 0; background: var(--tf-surface-2); border-radius: var(--tf-r-pill); padding: 4px;
  display: inline-flex; flex-wrap: wrap; gap: 2px; }
.sp-seg button { font: 600 13px var(--tf-font-display); color: var(--tf-ink-3);
  border: 0; background: none; cursor: pointer; border-radius: var(--tf-r-pill); padding: 8px 16px; }
.sp-seg button.is-active { background: var(--tf-surface); color: var(--tf-ink); box-shadow: var(--tf-shadow-1); }

.sp-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sp-actions .tf-btn--primary { min-width: 220px; }
@media (max-width: 639px) { .sp-actions { flex-direction: column; align-items: stretch; } .sp-actions .tf-btn { width: 100%; } }

/* ---- Results ---- */
.sp-resultbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sp-resultbar h2 { font: var(--tf-text-h3); margin: 0; }
.sp-resultbar .count { color: var(--tf-color-primary); }
.sp-sort { display: flex; align-items: center; gap: 8px; font: var(--tf-text-body-s); color: var(--tf-ink-2); }
.sp-sort select { font: 500 13.5px var(--tf-font-body); color: var(--tf-ink);
  background: var(--tf-surface); border: 1.5px solid var(--tf-border-strong); border-radius: 10px; padding: 8px 10px; }

.sp-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1023px) { .sp-results { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .sp-results { grid-template-columns: 1fr; } }

.sp-reason { display: flex; gap: 7px; align-items: center; font: 500 12px var(--tf-font-body); color: var(--tf-color-secondary-active); }
.sp-reason svg { width: 13px; height: 13px; flex: none; }

/* Footer bar */
.sp-foot { background: var(--tf-raw-navy-700); color: #B9CDDE; padding: 22px 24px; text-align: center; font: 400 12.5px var(--tf-font-body); }

/* ---- TravlScore breakdown (shared: results modal + destination page) ---- */
.ts-dims { display: flex; flex-direction: column; }
.ts-row { display: grid; grid-template-columns: 30px 104px 1fr 36px; gap: 4px 12px;
  align-items: center; padding: 11px 0 9px; border-top: 1px solid var(--tf-border); }
.ts-row:first-child { border-top: 0; }
.ts-row__icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--tf-surface-2); color: var(--tf-ink-2); grid-row: span 2; }
.ts-row__icon svg { width: 15px; height: 15px; }
.ts-row__label { font: 600 13.5px var(--tf-font-body); color: var(--tf-ink); }
.ts-row__num { font: 700 14px var(--tf-font-display); font-variant-numeric: tabular-nums; text-align: right; }
.ts-bar { height: 6px; border-radius: var(--tf-r-pill); background: var(--tf-surface-2); min-width: 50px; }
.ts-bar i { display: block; height: 100%; border-radius: inherit; }
.ts-bar--hi { background: var(--tf-color-secondary); }
.ts-bar--mid { background: var(--tf-color-primary); }
.ts-bar--low { background: var(--tf-raw-yellow-500); }
.ts-row__explain { grid-column: 2 / 5; font: 400 12.5px/1.5 var(--tf-font-body); color: var(--tf-ink-3); }
@media (max-width: 480px) { .ts-row { grid-template-columns: 30px 1fr 36px; }
  .ts-bar { display: none; } .ts-row__explain { grid-column: 2 / 4; } }