/* ============================================================
   PHARMACY PROFILE PAGE
   ============================================================ */

/* --- HERO --- */
.profile-hero {
  position: relative;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-10) var(--space-6) var(--space-8);
  overflow: hidden;}
.profile-hero-bg {
  position: absolute; inset: 0; pointer-events: none; background: var(--color-surface);}
.profile-hero-inner {
  max-width: var(--content-wide); margin: 0 auto;
  display: flex; align-items: flex-start; gap: var(--space-6);
  flex-wrap: wrap; position: relative;}
.profile-avatar-lg {
  width: 80px; height: 80px; border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--text-lg);
  border: 2px solid var(--color-border);
  flex-shrink: 0;}
.profile-hero-info { flex: 1; min-width: 0;}
.profile-certs-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3);}
.cert-badge-lg {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700;
  background: var(--color-primary-light); color: var(--color-primary-text);
  border: 1px solid var(--color-primary-mid);}
.cert-badge-lg.pcab { background: var(--color-primary-light); color: var(--color-primary-text); border-color: var(--color-primary-mid);}
.cert-badge-lg.cgmp { background: var(--color-primary-light); color: var(--color-primary-text); border-color: #B5D9B8;}
.profile-name { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); margin-bottom: var(--space-3);}
.profile-rating-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4);}
.rating-score-lg { font-size: var(--text-xl); font-weight: 800; color: var(--color-text);}
.stars-lg { color: var(--color-accent); font-size: var(--text-2xl); letter-spacing: 2px;}
.rating-link { font-size: var(--text-sm); color: var(--color-primary-text); text-decoration: underline;}
.profile-address-short { font-size: var(--text-sm); color: var(--color-text-muted);}
.profile-tags-row { display: flex; flex-wrap: wrap; gap: var(--space-2);}
.profile-hero-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; align-self: flex-end;}
.save-btn {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); background: var(--color-field);}
.save-btn:hover { color: var(--color-error); border-color: var(--color-error);}

/* --- TABS --- */
.profile-tabs-bar {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 65px; z-index: 50;}
.profile-tabs-inner {
  max-width: var(--content-wide); margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex; gap: 0; overflow-x: auto;}
.profile-tab {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;}
.profile-tab:hover { color: var(--color-text);}
.profile-tab.active { color: var(--color-primary-text); border-bottom-color: var(--color-primary-text); font-weight: 600;}

/* --- LAYOUT --- */
.profile-layout {
  max-width: var(--content-wide); margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: grid; grid-template-columns: 1fr 320px; gap: var(--space-8);
  align-items: flex-start;}
.profile-main { display: flex; flex-direction: column; gap: var(--space-6);}
.profile-section {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-5); box-shadow: var(--shadow-sm);}
.profile-section-title { font-size: var(--text-lg); font-weight: 800; color: var(--color-text);}
.profile-about { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7;}

/* Stats strip */
.profile-stats {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg);
  flex-wrap: wrap; box-shadow: var(--shadow-sm);}
.pstat { display: flex; flex-direction: column; gap: 2px;}
.pstat-num { font-size: var(--text-lg); font-weight: 800; color: var(--color-text); font-family: var(--font-display);}
.pstat-label { font-size: var(--text-xs); color: var(--color-text-muted);}
.pstat-div { width: 1px; height: 36px; background: var(--color-border);}

/* Services grid */
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);}
.service-card {
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-sm);}
.service-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;}
.service-card h3 { font-size: var(--text-base); font-weight: 700; color: var(--color-text);}
.service-card p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65;}

/* Certification table */
.cert-table { border: none; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);}
.cert-row {
  display: grid; grid-template-columns: 2fr 1fr 2fr 1.5fr;
  padding: var(--space-4) var(--space-5); gap: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);}
.cert-row:last-child { border-bottom: none;}
.cert-row.header {
  background: var(--color-surface-offset);
  font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted);}
.cert-name { font-weight: 600; color: var(--color-text);}
.cert-status { font-weight: 700;}
.cert-status.verified { color: var(--color-success);}
.sterility-note {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-mid);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm); color: var(--color-text-muted);}

/* Rating summary */
.rating-summary {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-8);
  align-items: center;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);}
.rating-big { display: flex; flex-direction: column; align-items: center; gap: var(--space-2);}
.rating-big-num { font-size: var(--text-3xl); font-weight: 800; color: var(--color-text); font-family: var(--font-display);}
.stars-xl { color: var(--color-accent); font-size: var(--text-2xl); letter-spacing: 2px;}
.rating-total { font-size: var(--text-xs); color: var(--color-text-muted);}
.rating-bars { display: flex; flex-direction: column; gap: var(--space-2);}
.rbar-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted);}
.rbar { flex: 1; height: 8px; background: var(--color-surface-offset); border-radius: var(--radius-full); overflow: hidden;}
.rbar-fill { height: 100%; background: var(--color-accent); border-radius: var(--radius-full);}
.rating-cats { display: flex; flex-direction: column; gap: var(--space-3);}
.rcat { display: flex; justify-content: space-between; gap: var(--space-6);}
.rcat-label { font-size: var(--text-xs); color: var(--color-text-muted);}
.rcat-score { font-size: var(--text-xs); font-weight: 700; color: var(--color-text);}

/* Reviews controls */
.reviews-controls { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);}
.reviews-filter-row { display: flex; gap: var(--space-2); flex-wrap: wrap;}
.review-filter-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); border: none;
  font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); background: var(--color-field);}
.review-filter-btn:hover { color: var(--color-primary-text); border-color: var(--color-primary-mid);}
.review-filter-btn.active { background: var(--color-primary-light); color: var(--color-primary-text); border-color: var(--color-primary-mid); font-weight: 600;}

/* Full review */
.review-list { display: flex; flex-direction: column; gap: var(--space-5);}
.review-full {
  padding: var(--space-5);
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-sm);}
.rf-header { display: flex; align-items: flex-start; gap: var(--space-3);}
.rf-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;}
.rf-meta { flex: 1; display: flex; flex-direction: column; gap: 2px;}
.rf-name { font-weight: 700; font-size: var(--text-sm); color: var(--color-text);}
.rf-type { font-size: var(--text-xs); color: var(--color-primary-text); font-weight: 600;}
.rf-location { font-size: var(--text-xs); color: var(--color-text-faint);}
.rf-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;}
.rf-stars { color: var(--color-accent); font-size: var(--text-lg); letter-spacing: 1px;}
.rf-date { font-size: var(--text-xs); color: var(--color-text-faint);}
.rf-text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7;}

/* Write review */
.review-write {
  background: var(--color-bg);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);}
.review-write h3 { font-size: var(--text-base); font-weight: 700; color: var(--color-text);}
.review-star-select { display: flex; gap: var(--space-1);}
.star-select { font-size: var(--text-3xl); color: var(--color-text-faint);}
.star-select:hover, .star-select.active { color: var(--color-accent);}
.review-textarea {
  padding: var(--space-4); border: none;
  border-radius: var(--radius-lg); 
  font-size: var(--text-sm); color: var(--color-text);
  resize: vertical; outline: none; background: var(--color-field);}
.review-textarea:focus { border-color: var(--color-primary-text);}

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8);}
.contact-info { display: flex; flex-direction: column; gap: var(--space-4);}
.contact-row { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted);}
.contact-row svg { flex-shrink: 0; margin-top: 2px;}
.contact-row a { color: var(--color-primary-text);}
.hours-table { display: flex; flex-direction: column; gap: 0; border: none; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);}
.hours-row {
  display: flex; justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);}
.hours-row:last-child { border-bottom: none;}
.hours-row span:first-child { font-weight: 600; color: var(--color-text);}
.hours-row span:last-child { color: var(--color-text-muted);}
.hours-row.closed span:last-child { color: var(--color-text-faint);}

/* SIDEBAR */
.profile-sidebar { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: 120px;}
.sidebar-card {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-sm);}
.sidebar-card h3 { font-size: var(--text-base); font-weight: 700; color: var(--color-text);}
.sidebar-actions { display: flex; flex-direction: column; gap: var(--space-3);}
.ships-note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted);}
.quick-info-list { display: flex; flex-direction: column; gap: 0;}
.qi-row {
  display: flex; justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-xs); gap: var(--space-3);}
.qi-row:last-child { border-bottom: none;}
.qi-key { color: var(--color-text-muted); font-weight: 600; flex-shrink: 0;}
.qi-val { color: var(--color-text); text-align: right;}
.sidebar-map { border-radius: var(--radius-lg); overflow: hidden;}
.sidebar-map-bg {
  height: 140px;
  background: var(--color-surface-2);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 19px, var(--color-divider) 19px, var(--color-divider) 20px),
    repeating-linear-gradient(90deg, transparent, transparent 19px, var(--color-divider) 19px, var(--color-divider) 20px);}
.sidebar-pin { display: flex; flex-direction: column; align-items: center;}
.get-directions-link {
  display: block; padding: var(--space-3) var(--space-4);
  background: var(--color-bg); border-top: 1px solid var(--color-border);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-primary-text);
  text-align: center;}

/* cert-badge (reused from results) */
.cert-badge {
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700;
  background: var(--color-primary-light); color: var(--color-primary-text);
  border: 1px solid var(--color-primary-mid);}
.cert-badge.pcab { background: var(--color-primary-light); color: var(--color-primary-text); border-color: var(--color-primary-mid);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .profile-layout { grid-template-columns: 1fr;}
  .profile-sidebar { position: static;}
  .cert-row { grid-template-columns: 1fr 1fr;}
  .cert-row > span:nth-child(3), .cert-row > span:nth-child(4) { display: none;}
}
@media (max-width: 768px) {
  .profile-hero-inner { flex-direction: column;}
  .profile-hero-actions { width: 100%;}
  .rating-summary { grid-template-columns: 1fr;}
  .services-grid { grid-template-columns: 1fr;}
  .contact-grid { grid-template-columns: 1fr;}
}

/* ============================================================
   PROFILE PAGE (extracted from inline styles)
   ============================================================ */
/* ── Report tab badge ── */
.report-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent-strong); color: var(--color-text-inverse);
  font-size: var(--text-2xs); font-weight: 700;
  border-radius: 999px; padding: 1px 6px; margin-left: 4px;
  vertical-align: middle;}
.report-tab-btn { border-left: none !important;}

/* ── Community section ── */
.community-section { padding: var(--space-6) 0;}
.community-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); margin-bottom: var(--space-7);
  flex-wrap: wrap;}
.community-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--color-text); margin: 0 0 var(--space-1);}
.community-subtitle { font-size: var(--text-lg); color: var(--color-text-muted); margin: 0;}

/* ── Report trigger button ── */
.btn-report-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-primary); color: var(--color-text-inverse);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-lg);
  border: none; cursor: pointer; transition: opacity 0.15s; white-space: nowrap;}
.btn-report-trigger:hover { opacity: 0.88;}

/* ── Snapshot grid ── */
.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-8);}
.snapshot-card {
  background: var(--color-surface); border: none;
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm);}
.snap-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-1);}
.snap-value { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--color-text); margin-bottom: 2px;}
.snap-value.in-stock { color: var(--color-success);}
.snap-value.cold { color: var(--color-primary-text);}
.snap-value.price { color: var(--color-accent);}
.snap-value.trust { color: var(--color-primary-text); font-size: var(--text-lg);}
.snap-meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3);}
.snap-bar { height: 4px; background: var(--color-border); border-radius: 2px; margin-bottom: var(--space-2); overflow: hidden;}
.snap-fill { height: 100%; background: var(--color-primary); border-radius: 2px;}
.snap-chips { display: flex; flex-wrap: wrap; gap: 4px;}
.snap-chip {
  font-size: var(--text-xs); font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: var(--color-bg);
  border: none; color: var(--color-text-muted); box-shadow: var(--shadow-sm);}
.snap-chip.active { background: var(--color-primary-light); border-color: var(--color-primary-text); color: var(--color-primary-text);}
.snap-chip.cold { background: color-mix(in srgb, var(--color-primary) 10%, transparent); border-color: var(--color-primary-text); color: var(--color-primary-text);}

/* ── Flags section ── */
.flags-section { margin-bottom: var(--space-8);}
.flags-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-4);}
.flags-list { display: flex; flex-direction: column; gap: var(--space-2);}
.flag-row {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-lg); color: var(--color-text); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-surface);
  border: none; box-shadow: var(--shadow-sm);}
.flag-row svg { flex-shrink: 0; margin-top: 2px;}
.flag-row.flag-ok svg { color: var(--color-primary-text);}
.flag-row.flag-warn svg { color: var(--color-accent);}
.flag-count { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); margin-left: 6px;}

/* ── Report feed ── */
.report-feed { margin-bottom: var(--space-8);}
.report-entry {
  border: none; border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3);
  background: var(--color-surface); box-shadow: var(--shadow-sm);}
.report-entry-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3);}
.reporter-type {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;}
.reporter-type.patient { background: var(--color-primary-light); color: var(--color-primary-text);}
.reporter-type.clinician { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent);}
.report-time { font-size: var(--text-sm); color: var(--color-text-muted);}
.report-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3);}
.rchip {
  font-size: var(--text-xs); font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: var(--color-bg);
  border: none; color: var(--color-text-muted); box-shadow: var(--shadow-sm);}
.rchip.cold { color: var(--color-primary-text); border-color: var(--color-primary-text); background: color-mix(in srgb, var(--color-primary) 8%, transparent);}
.rchip.warn { color: var(--color-accent); border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent);}
.report-note { font-size: var(--text-lg); color: var(--color-text-muted); font-style: italic; margin: 0; line-height: 1.6;}
.report-cta-bar { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1.5px solid var(--color-border);}
.report-cta-note { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0;}

/* ── Modal overlay ── */
.report-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);}
.report-modal-overlay[hidden] { display: none;}
.report-modal {
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  width: 100%; max-width: 680px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;}

/* ── Modal header ── */
.report-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-5) var(--space-6);
  border-bottom: 1.5px solid var(--color-border);
  background: var(--color-bg);}
.report-modal-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--color-text); margin: 0 0 3px;}
.report-modal-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0;}
.report-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); padding: 4px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color 0.15s, background 0.15s;}
.report-modal-close:hover { color: var(--color-text); background: var(--color-border);}

/* ── Step indicators ── */
.report-steps {
  display: flex; align-items: center; padding: var(--space-4) var(--space-6);
  background: var(--color-bg); border-bottom: 1.5px solid var(--color-border);
  gap: 0; overflow-x: auto;}
.report-step {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted);
  flex-shrink: 0;}
.report-step span {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-border); color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 800;}
.report-step.active { color: var(--color-primary-text);}
.report-step.active span { background: var(--color-primary); color: var(--color-text-inverse);}
.report-step.done span { background: var(--color-primary); color: var(--color-text-inverse);}
.report-step.done { color: var(--color-primary-text);}
.report-step-line { flex: 1; height: 1.5px; background: var(--color-border); min-width: 16px; margin: 0 var(--space-2);}

/* ── Modal body ── */
.report-modal-body { flex: 1; overflow-y: auto; padding: var(--space-6);}
.report-step-panel { display: none;}
.report-step-panel.active { display: block;}
.step-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-5);}
.step-hint { font-size: var(--text-lg); color: var(--color-text-muted); margin: 0 0 var(--space-4); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;}
.step-inline-input {
  border: none; border-radius: var(--radius-md);
  padding: 4px 10px; font-size: var(--text-lg);  color: var(--color-text);
  outline: none; transition: border-color 0.15s; background: var(--color-field);}
.step-inline-input:focus { border-color: var(--color-primary-text);}

/* ── Choice grid ── */
.choice-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-6);}
.choice-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; padding: var(--space-3) var(--space-4);
  border: none; border-radius: var(--radius-lg);
  background: var(--color-bg); cursor: pointer;
  text-align: left; transition: border-color 0.15s, background 0.15s; box-shadow: var(--shadow-sm);}
.choice-btn:hover { border-color: var(--color-primary-text); background: var(--color-primary-light);}
.choice-btn.selected { border-color: var(--color-primary-text); background: var(--color-primary-light);}
.choice-icon { font-size: var(--text-xl); margin-bottom: 2px;}
.choice-label { font-size: var(--text-base); font-weight: 700; color: var(--color-text);}
.choice-sub { font-size: var(--text-xs); color: var(--color-text-muted);}

/* ── Small choice grid ── */
.choice-grid-sm {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2); margin-bottom: var(--space-2);}
.choice-btn-sm {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: none; border-radius: var(--radius-md);
  background: var(--color-bg); cursor: pointer; font-size: var(--text-base);
  color: var(--color-text); transition: border-color 0.15s, background 0.15s; box-shadow: var(--shadow-sm);}
.choice-btn-sm:hover { border-color: var(--color-primary-text); background: var(--color-primary-light);}
.choice-btn-sm.selected { border-color: var(--color-primary-text); background: var(--color-primary-light);}

/* ── Pill row ── */
.choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2);}
.choice-pill {
  padding: var(--space-1) var(--space-4);
  border: none; border-radius: 999px;
   cursor: pointer;
  font-size: var(--text-base); font-weight: 600; color: var(--color-text-muted);
  transition: border-color 0.15s, background 0.15s, color 0.15s; background: var(--color-field);}
.choice-pill:hover { border-color: var(--color-primary-text); color: var(--color-primary-text);}
.choice-pill.selected, .choice-pill.active {
  border-color: var(--color-primary-text); background: var(--color-primary-light); color: var(--color-primary-text);}

/* ── Form fields ── */
.step-row { margin-bottom: var(--space-5);}
.step-label { display: block; font-size: var(--text-base); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2);}
.step-input {
  width: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-3);
  border: none; border-radius: var(--radius-md);
   color: var(--color-text); font-size: var(--text-lg);
  outline: none; transition: border-color 0.15s; background: var(--color-field);}
.step-input:focus { border-color: var(--color-primary-text);}
.step-textarea {
  width: 100%; box-sizing: border-box; padding: var(--space-3);
  border: none; border-radius: var(--radius-md);
   color: var(--color-text); font-size: var(--text-lg);
  resize: vertical; outline: none; transition: border-color 0.15s; font-family: var(--font-body); background: var(--color-field);}
.step-textarea:focus { border-color: var(--color-primary-text);}
.price-input-row { display: flex; align-items: center; gap: var(--space-2);}
.price-prefix, .price-suffix { font-size: var(--text-lg); color: var(--color-text-muted); font-weight: 600; flex-shrink: 0;}
.price-input { width: 100px !important;}
.price-unit { flex: 1;}

/* ── Checkboxes ── */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2);}
.check-item {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-base); color: var(--color-text); cursor: pointer;}
.check-item input { accent-color: var(--color-primary-text); width: 15px; height: 15px; flex-shrink: 0;}

/* ── Flag checkboxes ── */
.flag-check-grid { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5);}
.flag-check-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md); border: none;
  font-size: var(--text-lg); cursor: pointer; transition: border-color 0.15s; box-shadow: var(--shadow-sm);}
.flag-check-item input { accent-color: var(--color-primary-text); width: 15px; height: 15px; flex-shrink: 0;}
.flag-check-item.flag-ok { background: var(--color-primary-light);}
.flag-check-item.flag-ok:has(input:checked) { border-color: var(--color-primary-text); background: var(--color-primary-light);}
.flag-check-item.flag-warn { background: color-mix(in srgb, var(--color-accent) 5%, transparent);}
.flag-check-item.flag-warn:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent);}
.flag-check-item.flag-bad { background: rgba(180,30,30,0.03);}
.flag-check-item.flag-bad:has(input:checked) { border-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 10%, transparent);}

/* ── Success state ── */
.report-success { text-align: center; padding: var(--space-10) 0;}
.report-success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-primary-light); color: var(--color-primary-text);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);}
.report-success h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--color-text); margin: 0 0 var(--space-3);}
.report-success p { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.6; margin: 0 auto var(--space-6); max-width: 380px;}

/* ── Modal footer ── */
.report-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-top: 1.5px solid var(--color-border); background: var(--color-bg);}
.report-nav-btn { min-width: 100px;}
.report-step-counter { font-size: var(--text-base); color: var(--color-text-muted); font-weight: 600;}

/* ============================================================
   RATINGS & REVIEWS (Supabase-backed) — Yelp/Realme style
   ============================================================ */
.rating-empty { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0;}
.rating-empty .stars-xl.muted { color: var(--color-text-faint);}
.rating-empty p { color: var(--color-text-muted); font-size: var(--text-sm);}

/* Google rating row */
.google-rating {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5);
  margin: var(--space-5) 0; text-decoration: none; color: var(--color-text);}
.google-rating:hover { box-shadow: var(--shadow-md);}
.google-rating-badge {
  font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.04em;
  background: var(--color-field); color: var(--color-text-muted);
  padding: 3px var(--space-3); border-radius: var(--radius-full);}
.google-rating .stars-inline { color: var(--color-accent);}
.google-rating-go { margin-left: auto; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-text);}

/* Write bar */
.rv-writebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin: var(--space-6) 0;}
#rv-auth { font-size: var(--text-sm); color: var(--color-text-muted);}
.rv-signed strong { color: var(--color-text);}
.rv-link { color: var(--color-primary-text); font-weight: 600; font-size: inherit; text-decoration: underline; background: none; border: none; cursor: pointer; padding: 0;}
.rv-note { font-size: var(--text-sm); color: var(--color-text-muted); background: var(--color-field); border-radius: var(--radius-md); padding: var(--space-4); line-height: 1.6;}
.rv-note code { background: var(--color-surface); padding: 1px 5px; border-radius: 4px; font-size: 0.85em;}

/* Review title */
.rf-title { margin-bottom: var(--space-1); color: var(--color-text);}

/* Write form */
.rv-form { background: var(--color-surface); box-shadow: var(--shadow-sm); border-radius: var(--radius-xl); padding: var(--space-6); margin-top: var(--space-5);}
.rv-form h3 { margin-bottom: var(--space-4);}
.rv-field { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-4);}
.rv-field input, .rv-field select, .rv-field textarea {
  font: inherit; font-weight: 400; color: var(--color-text);
  background: var(--color-field); border: none; border-radius: var(--radius-md);
  padding: var(--space-3); outline: none;}
.rv-field textarea { resize: vertical;}
.rv-form-actions { display: flex; align-items: center; gap: var(--space-4);}
.rv-auth-err { color: var(--color-accent); font-size: var(--text-sm); font-weight: 600;}
.review-star-select { display: flex; gap: 4px; margin-bottom: var(--space-4);}
.star-select { font-size: var(--text-3xl); line-height: 1; color: var(--color-text-faint); background: none; border: none; cursor: pointer; transition: color var(--transition-fast);}
.star-select.active { color: var(--color-accent);}

/* Auth modal */
.rv-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;}
.rv-modal[hidden] { display: none;}
.rv-modal-backdrop { position: absolute; inset: 0; background: rgba(37,56,48,0.55);}
.rv-modal-card {
  position: relative; z-index: 1; width: min(420px, 92vw);
  background: var(--color-surface); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl); padding: var(--space-8);}
.rv-modal-close { position: absolute; top: var(--space-4); right: var(--space-5); font-size: var(--text-3xl); line-height: 1; color: var(--color-text-faint); background: none; border: none; cursor: pointer;}
.rv-modal-card h3 { margin-bottom: var(--space-2);}
.rv-modal-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5);}
.rv-google { width: 100%; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-field); font-weight: 600; color: var(--color-text); border: none; cursor: pointer;}
.rv-google:hover { background: var(--color-primary-light);}
.rv-or { text-align: center; margin: var(--space-4) 0; position: relative; color: var(--color-text-faint); font-size: var(--text-xs);}
.rv-or span { background: var(--color-surface); padding: 0 var(--space-3); position: relative; z-index: 1;}
.rv-or::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-field);}
#rv-auth-form { display: flex; flex-direction: column; gap: var(--space-3);}
#rv-auth-form label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted);}
#rv-auth-form input { font: inherit; font-weight: 400; color: var(--color-text); background: var(--color-field); border: none; border-radius: var(--radius-md); padding: var(--space-3); outline: none;}
#rv-auth-form .btn-primary-lg { margin-top: var(--space-2);}
.rv-modal-switch { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-4); text-align: center;}

/* FTC material-connection attestation on the review form */
.rv-attest { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-2) 0;
  font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; cursor: pointer; }
.rv-attest input { margin-top: 2px; accent-color: var(--color-primary); flex: none; }