/* tools/shared/search.css
   Shared styling for the city-first search (cityField.js + businessField.js +
   richDropdown.js). One look across all 10 tools. Built on tokens.css (--sk-*).
   Namespaced .sd- (search dropdown) so it never collides with a tool's own prefix. */

.sd-wrap { position: relative; }

/* Optional leading icon slot (opt-in with .has-icon on the wrap). Tools keep their
   own field chrome; .sd-input just needs to exist as a hook for the disabled style
   and does NOT force icon padding unless the wrap opts in. */
.sd-wrap.has-icon .sd-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #8A94A6; pointer-events: none; }
.sd-wrap.has-icon .sd-input { padding-left: 38px; }

/* ---- dropdown panel ---- */
.sd-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid #E4E7EE; border-radius: 12px;
  box-shadow: 0 18px 46px rgba(11,19,46,.16);
  overflow: hidden; max-height: 396px; overflow-y: auto;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--sk-dur-fast) var(--sk-ease-out), transform var(--sk-dur-fast) var(--sk-ease-out);
}
.sd-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sd-panel.is-stale { opacity: .6; }

.sd-section-label {
  font: 700 10px/1 'Geist', system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase;
  color: #9AA3B2; padding: 11px 14px 6px;
}

/* ---- a row ---- */
.sd-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 14px; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
  transition: background var(--sk-dur-instant) linear, padding var(--sk-dur-fast) var(--sk-ease-out);
}
.sd-row + .sd-row { border-top: 1px solid #F1F3F7; }
.sd-row:hover, .sd-row.is-active { background: #F5F8FF; }
.sd-row.is-active { padding-top: 13px; padding-bottom: 13px; } /* +8px expand on highlight */

.sd-thumb {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; object-fit: cover;
  background: #EEF1F6; display: flex; align-items: center; justify-content: center;
  font: 800 15px 'Bricolage Grotesque', system-ui, sans-serif; color: #6B7688;
}
.sd-thumb.city { background: #EDF3FF; color: var(--sk-navy); }

.sd-body { flex: 1; min-width: 0; }
/* Truncate long titles/subtitles with an ellipsis on a single line instead of
   letting overflow-wrap:anywhere break them mid-word into a 3-4 line crush against
   the meta column (e.g. "Pizza 4P's Bagmane Solarium City"). min-width:0 on .sd-body
   lets the ellipsis actually engage. */
.sd-title { font: 700 13.5px/1.3 'Geist', system-ui, sans-serif; color: var(--ink, #0B132E); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sub { font: 400 11.5px/1.35 'Geist', system-ui, sans-serif; color: #78829A; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sub .dot { color: #C7CDDA; margin: 0 5px; }
.sd-opendot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sk-live); margin-right: 5px; vertical-align: middle; }

/* Cap the meta column so rating + reviews + a "Low visibility" pill can't starve
   the title/subtitle column. */
.sd-meta { flex-shrink: 0; text-align: right; white-space: nowrap; max-width: 38%; }
.sd-rating { font: 700 12.5px/1 'Geist', system-ui, sans-serif; color: var(--ink, #0B132E); }
/* Scoped to sd-star (NOT the generic .star): styles.css owns a global
   decorative .star{position:absolute} for the hero background - reusing that
   class here yanked the rating star out of flow, overlapping the number. */
.sd-rating .sd-star { color: var(--sk-gold); }
.sd-reviews { font: 400 10.5px/1 'Geist', system-ui, sans-serif; color: #9AA3B2; margin-top: 3px; }
.sd-lowvis { display: inline-block; font: 700 8.5px/1 'Geist', system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: #93630F; background: rgba(232,161,60,.16); border-radius: 999px; padding: 3px 7px; margin-top: 4px; }

/* the gold action line that appears on the highlighted row */
.sd-action { display: none; font: 800 11.5px/1 'Geist', system-ui, sans-serif; color: #B8860B; margin-top: 6px; }
.sd-row.is-active .sd-action { display: block; }

/* escape-hatch / free-text row */
.sd-escape { color: var(--blue, #2563EA); font-weight: 700; }
.sd-escape .sd-thumb { background: #EDF3FF; color: var(--blue, #2563EA); }

/* "use my current location" pinned row */
.sd-geo .sd-title { color: var(--blue, #2563EA); }
.sd-thumb.geo { background: #EAF1FF; color: var(--blue, #2563EA); }
.sd-geo.is-busy { cursor: default; }
.sd-geo.is-busy .sd-title { color: #6B7688; }
.sd-geo-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.2px solid #C7D6F5; border-top-color: var(--blue, #2563EA); animation: sd-geo-rot .7s linear infinite; }
@keyframes sd-geo-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sd-geo-spin { animation: none; } }

/* ---- states: skeleton, note, error ---- */
.sd-skel-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.sd-skel-box { border-radius: 8px; background: linear-gradient(90deg,#EEF1F6 25%,#F6F8FB 37%,#EEF1F6 63%); background-size: 400% 100%; animation: sd-shimmer 1.2s ease-in-out infinite; }
.sd-skel-thumb { width: 40px; height: 40px; border-radius: 9px; }
.sd-skel-lines { flex: 1; }
.sd-skel-l1 { height: 11px; width: 62%; margin-bottom: 7px; }
.sd-skel-l2 { height: 9px; width: 40%; }
@keyframes sd-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.sd-note { padding: 13px 14px; font: 400 12.5px/1.45 'Geist', system-ui, sans-serif; color: #78829A; }
.sd-note.err { color: #B4413E; }
.sd-note b { color: var(--ink, #0B132E); }

/* ---- disabled business field until a city is chosen ---- */
.sd-input:disabled { background: #F7F8FA; cursor: not-allowed; }

/* ---- mobile: iOS zoom guard ----
   Mobile Safari auto-zooms the whole page when a focused input's font-size is
   < 16px. Every tool sets its own field class (.frc-input 15.5px, .ac-input 14px,
   .rq-input/.sc-input 15px…), so tapping a search field zoomed the page on iPhones.
   .sd-input is present on every search field across all 12 kit tools, so force the
   safe 16px here on phones. !important beats each page's inline -input prefix (equal
   specificity, later in source order). Phones only, so desktop sizing is untouched. */
@media (max-width: 480px) {
  .sd-input { font-size: 16px !important; }
}

/* ---- mobile: bottom-sheet variant ---- */
@media (max-width: 480px) {
  .sd-panel.is-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 72vh; border-radius: 16px 16px 0 0; transform: translateY(100%);
    box-shadow: 0 -12px 40px rgba(11,19,46,.28);
  }
  .sd-panel.is-sheet.is-open { transform: translateY(0); }
  .sd-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: #D7DCE5; margin: 9px auto 3px; }
  .sd-sheet-backdrop { position: fixed; inset: 0; background: rgba(11,19,46,.32); z-index: 59; opacity: 0; transition: opacity var(--sk-dur-fast); }
  .sd-sheet-backdrop.is-open { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-panel, .sd-row { transition: none; }
  .sd-skel-box { animation: none; }
}

/* ---- P3 full-page results (resultView.js): input screen -> results screen ---- */
.rv-grid.rv-active { grid-template-columns: 1fr !important; }
.rv-header { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #E4E7EE; }
.rv-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1.5px solid #E4E7EE; border-radius: 9px; padding: 8px 15px; font: 700 13px/1 'Geist', system-ui, sans-serif; color: var(--sk-navy, #0B132E); cursor: pointer; transition: border-color .15s, background .15s; flex-shrink: 0; }
.rv-back:hover { border-color: #2563EA; background: #F5F8FF; }
.rv-back svg { width: 15px; height: 15px; }
.rv-title { font: 700 15px/1.2 'Geist', system-ui, sans-serif; color: var(--sk-navy, #0B132E); overflow-wrap: anywhere; }