/* ── CATEGORY (specialty×city) & PICKER PAGES ──
   Loaded by _category.html and find-doctors.html. Uses tokens from css/style.css.
   The .doctor-row / .doctor-list / .app-cta rules mirror css/doctor.css so these
   pages stay at exactly two stylesheets (style.css + category.css). */

.detail {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 48px 64px;
}

/* ── Category hero ── */
.crumbs {
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--red);
}
.category-hero h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}
.category-hero-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 10px;
  line-height: 1.6;
  max-width: 620px;
}
.category-hero-sub strong {
  color: var(--ink);
}
.category-list-section {
  margin-top: 28px;
}
.category-foot {
  margin-top: 32px;
  font-size: 13px;
}
.category-foot a {
  color: var(--red);
  text-decoration: none;
  font-weight: 500;
}
.category-foot a:hover {
  text-decoration: underline;
}

/* ── Doctor rows (shared look with doctor.css) ── */
.doctor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doctor-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.doctor-row:hover {
  border-color: var(--red-mid);
  background: #fffafa;
}
/* Doctor card image — 124×124 (1:1 square). */
.doctor-row-avatar {
  width: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  object-fit: cover;
  object-position: center; /* overridden inline by the stored focal point */
}
.doctor-row-avatar--photo {
  background: var(--border);
}
.doctor-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.doctor-row-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.doctor-row-spec {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.doctor-row-schedule {
  font-size: 12px;
  color: var(--ink-mute);
}
.doctor-row-fee {
  font-size: 13px;
  font-weight: 600;
  color: var(--red-text);
  white-space: nowrap;
}
.doctor-row-chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--ink-mute);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── App CTA band (shared look with doctor.css) ── */
.app-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--red-light);
  border: 1px solid var(--red-mid);
  border-radius: 16px;
  padding: 20px 24px;
  margin-top: 32px;
}
.app-cta-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.app-cta-text strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.app-cta-text span {
  font-size: 13px;
  color: var(--ink-soft);
}
.app-cta .btn {
  flex-shrink: 0;
}

/* ── Picker hero ── */
.picker-hero {
  position: relative;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  padding-top: 28px;
}
/* Soft brand glow behind the hero so the white search card lifts off the page.
   Capped at the viewport width (and never wider) so it can't cause horizontal
   scroll on small screens. */
.picker-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 100vw);
  height: 460px;
  background: radial-gradient(60% 60% at 50% 35%, var(--red-light) 0%, rgba(253, 236, 235, 0) 70%);
  pointer-events: none;
}
.picker-hero-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-text);
  background: var(--red-light);
  padding: 5px 12px;
  border-radius: 20px;
}
.picker-hero h1 {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.12;
  margin-top: 16px;
}
.picker-hero-sub {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: 14px;
}
.picker-hero-sub strong {
  color: var(--ink);
}

/* ── Picker card (elevated search panel) ── */
.picker-card {
  max-width: 560px;
  margin: 30px auto 0;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 12px 40px -12px rgba(26, 26, 26, 0.16), 0 2px 8px rgba(26, 26, 26, 0.04);
}

/* ── Picker form ──
   Two fields side by side, full-width submit beneath. */
.picker-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: end;
}
.picker-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  min-width: 0;
}
.picker-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Custom-styled select: icon prefix + custom chevron, native arrow removed. */
.picker-control {
  position: relative;
  display: flex;
  align-items: center;
}
.picker-control-icon {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  pointer-events: none;
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.picker-control-chevron {
  position: absolute;
  right: 13px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  fill: none;
  stroke: var(--ink-mute);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.15s;
}
.picker-field select {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 13px 40px 13px 40px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: #fcfcfc;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.picker-field select:hover {
  border-color: #d8d8d8;
  background: #fff;
}
.picker-field select:focus {
  outline: none;
  background: #fff;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-light);
}
.picker-control:focus-within .picker-control-chevron {
  stroke: var(--red);
}
/* Dim the placeholder option until a real choice is made. */
.picker-field select:invalid {
  color: var(--ink-mute);
  font-weight: 400;
}
.picker-go {
  grid-column: 1 / -1;
  height: 49px;
  margin-top: 4px;
  justify-content: center;
  font-size: 14px;
}
.picker-go svg {
  width: 16px;
  height: 16px;
}
.picker-note {
  font-size: 13px;
  color: var(--red-text);
  margin-top: 12px;
  margin-bottom: 0;
  min-height: 0;
  text-align: center;
}
.picker-note:empty {
  margin-top: 0;
}

/* ── Freshness line (category hero) — list-scoped "last reviewed" date. ── */
.trust-fresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 14px;
}
.trust-fresh svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--ink-mute);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-fresh--confirmed {
  color: #15803d;
}
.trust-fresh--confirmed svg {
  stroke: #15803d;
}
.trust-fresh strong {
  font-weight: 600;
}
.trust-fresh a {
  color: var(--ink-soft);
  text-decoration: underline;
}
.trust-fresh a:hover {
  color: var(--red);
}

/* ── Trust strip (catalog-level proof points under the search card) ── */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 22px;
  text-align: left;
}
.trust-strip-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.trust-strip-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-strip-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trust-strip-item strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.trust-strip-item span {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.trust-strip-link {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
}
.trust-strip-link a {
  color: var(--red);
  font-weight: 500;
  text-decoration: none;
}
.trust-strip-link a:hover {
  text-decoration: underline;
}

/* ── Browse-all static link block ── */
.browse-section {
  margin-top: 48px;
}
.browse-section h2 {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 18px;
}
.browse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.browse-city h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.browse-city ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.browse-city a {
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.4;
}
.browse-city a:hover {
  color: var(--red);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .detail {
    padding: 28px 24px 48px;
  }
  .category-hero h1 {
    font-size: 23px;
  }
  .picker-hero h1 {
    font-size: 27px;
  }
  .picker-card {
    padding: 18px;
  }
  .picker-form {
    grid-template-columns: 1fr;
  }
  .trust-strip {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .browse-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-cta {
    padding: 18px 20px;
  }
}

@media (max-width: 520px) {
  .browse-grid {
    grid-template-columns: 1fr;
  }
  .app-cta .btn {
    width: 100%;
    justify-content: center;
  }
}