/* Reon Appliance Repair — minimal CSS layer on top of Tailwind CDN */
:root{
  --trust-700:#2F4F4F;
  --action-500:#7E2217;
}
*{ -webkit-tap-highlight-color: rgba(47,79,79,.1); }
html{ scroll-behavior:smooth; }
body{ overscroll-behavior-y:none; }

/* Custom selection */
::selection{ background:#7E2217; color:#fff; }

/* Hide AI panel by default but allow JS to show via .is-open */
#aiPanel{ display:none; }
#aiPanel.is-open{ display:flex; }

/* Success animation */
@keyframes drawCircle{ to{ stroke-dashoffset:0; } }
@keyframes drawCheck{ to{ stroke-dashoffset:0; } }
.success-circle{ stroke-dasharray:151; stroke-dashoffset:151; animation:drawCircle .55s ease-out forwards; }
.success-check{ stroke-dasharray:48; stroke-dashoffset:48; animation:drawCheck .35s .35s ease-out forwards; }

/* AI message bubbles */
.bubble{ padding:.55rem .8rem; border-radius:14px; max-width:85%; line-height:1.35; word-wrap:break-word; }
.bubble.user{ background:#2F4F4F; color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.bubble.bot{ background:#fff; color:#1F3333; border:1px solid #D6E4FF; border-bottom-left-radius:4px; }
.bubble.typing{ background:#fff; border:1px solid #D6E4FF; color:#5C6685; font-style:italic; }
.dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#5C6685; margin-right:3px; animation:b 1.2s infinite; }
.dot:nth-child(2){ animation-delay:.15s; } .dot:nth-child(3){ animation-delay:.3s; }
@keyframes b{ 0%,80%,100%{ transform:translateY(0); opacity:.4 } 40%{ transform:translateY(-4px); opacity:1 } }

/* Reduce motion respect */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Bottom padding so mobile sticky bar never overlaps last section */
@media (max-width: 1024px){
  footer{ padding-bottom: 96px; }
}

/* Quick chip suggestions in chat */
.chip{ display:inline-block; padding:.3rem .65rem; border-radius:9999px; background:#F2F5F5; color:#2F4F4F; font-size:11px; font-weight:600; margin:2px 4px 2px 0; cursor:pointer; border:1px solid transparent; transition:all .15s; }
.chip:hover{ border-color:#2F4F4F; background:#fff; }

/* ========== Status pills (shared by CRM + Tech apps) ========== */
.s-new{ background:#7E2217; color:#fff; }
.s-assigned{ background:#436F6F; color:#fff; }
.s-en_route{ background:#D6E4FF; color:#2F4F4F; }
.s-on_site{ background:#FFF1E0; color:#E5560A; }
.s-diagnosed{ background:#FFE4B5; color:#9a6300; }
.s-repaired{ background:#D1FADF; color:#067647; }
.s-invoiced{ background:#10B981; color:#fff; }
.s-closed{ background:#A6AEC9; color:#fff; }
.s-recall{ background:#DC2626; color:#fff; }

/* ========== Admin Dashboard ========== */
.row-enter{ animation:row-fade-in .25s ease both; }
@keyframes row-fade-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }

/* ========== Operations CRM ========== */
.stat{ padding:1rem; border-radius:1rem; border:1px solid #D6E4FF; background:#fff; }
.pill{ padding:.15rem .55rem; border-radius:9999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.col{ min-width:240px; border-radius:1rem; background:#fff; border:1px solid #D6E4FF; padding:.75rem; }
.tag{ display:inline-block; background:#F2F5F5; color:#2F4F4F; border:1px solid #D6E4FF; border-radius:9999px; padding:.1rem .55rem; font-size:11px; font-weight:700; margin:2px; }

/* ========== Tech PWA ========== */
body.tech-app{ font:16px system-ui,-apple-system,sans-serif; background:#F2F5F540; color:#1F3333; padding-bottom:env(safe-area-inset-bottom); }
body.tech-app *{ -webkit-tap-highlight-color:transparent; }
body.tech-app .btn{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:1rem; border-radius:1rem; font-weight:800; font-size:15px; min-height:56px; transition:transform .1s; }
body.tech-app .btn:active{ transform:scale(.97); }
body.tech-app canvas{ touch-action:none; border:2px dashed #D6E4FF; border-radius:.75rem; background:#fff; width:100%; height:180px; }


/* ========== Hero geo-detection badge (privacy-first) ========== */
.hero-geo-badge{
  display:inline-flex; align-items:center; gap:8px;
  margin:14px 0 22px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(244,244,242,.10);
  border:1px solid rgba(244,244,242,.22);
  color:#F4F4F2; font-size:12px; font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.hero-geo-badge:hover{
  background:rgba(244,244,242,.16);
  border-color:rgba(244,244,242,.34);
}
.hero-geo-badge:active{ transform:scale(.98); }
.hero-geo-badge .hgb-icon{
  width:22px; height:22px; display:grid; place-items:center;
  border-radius:999px;
  background:#7E2217; color:#F4F4F2;
  flex:0 0 22px;
}
.hero-geo-badge.is-locating{ opacity:.85; cursor:wait; }
.hero-geo-badge.is-resolved{
  background:rgba(126,34,23,.20);
  border-color:rgba(126,34,23,.42);
}
.hero-geo-badge.is-resolved .hgb-icon{
  background:#F4F4F2; color:#7E2217;
}
.hero-geo-badge.is-denied{
  background:rgba(244,244,242,.06);
  border-color:rgba(244,244,242,.14);
  opacity:.75;
  cursor:default;
}
.hero-geo-city{
  display:inline-flex; align-items:baseline; gap:6px;
  font-weight:700;
  color:#FBFAF8;
}
.hero-geo-city strong{ color:#FBFAF8; font-weight:900; }
.hero-geo-city[hidden]{ display:none; }


/* ========== Privacy-first Geo block (booking form) ========== */
.reon-geo-block{
  margin-top:6px;
  padding:14px 14px 12px;
  border:1.5px dashed rgba(47,79,79,.22);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(47,79,79,.04) 0%, rgba(244,244,242,1) 100%);
}
.reon-geo-row{ display:flex; align-items:center; gap:10px; }
.reon-geo-icon{
  flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center;
  border-radius:10px; background:#2F4F4F; color:#F4F4F2;
}
.reon-geo-copy{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.reon-geo-copy strong{ font-size:13px; font-weight:900; color:#2F4F4F; }
.reon-geo-copy span{ font-size:11.5px; color:#5e7878; font-weight:600; }
.reon-geo-btn{
  flex:0 0 auto; padding:9px 14px; border-radius:999px;
  background:#7E2217; color:#fff; font-size:12px; font-weight:800; letter-spacing:.01em;
  border:0; cursor:pointer; white-space:nowrap;
  transition:background-color .15s ease, transform .1s ease;
}
.reon-geo-btn:hover{ background:#5d1810; }
.reon-geo-btn:active{ transform:scale(.97); }
.reon-geo-btn:disabled{ opacity:.6; cursor:wait; }
.reon-geo-resolved{
  margin-top:10px;
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  background:rgba(47,79,79,.08); border:1px solid rgba(47,79,79,.18);
  border-radius:10px;
  font-size:13px; color:#2F4F4F; font-weight:700;
}
.reon-geo-resolved svg{ color:#7E2217; flex:0 0 auto; }
.reon-geo-resolved strong{ font-weight:900; }
.reon-geo-clear{
  margin-left:auto; padding:4px 10px; border-radius:999px;
  background:transparent; border:1px solid rgba(47,79,79,.30);
  color:#2F4F4F; font-size:11px; font-weight:800; cursor:pointer;
}
.reon-geo-clear:hover{ background:rgba(47,79,79,.08); }
.reon-geo-fallback{ margin-top:10px; display:block; }
.reon-geo-fallback > span{
  display:block; font-size:11.5px; font-weight:900; color:#7E2217;
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:5px;
}
.reon-geo-fallback select,
.reon-geo-fallback input{
  width:100%; padding:11px 12px; border-radius:10px;
  border:1.5px solid rgba(47,79,79,.25); background:#fff;
  font-size:14px; font-weight:700; color:#2F4F4F;
}
.reon-geo-fallback input{ margin-top:8px; }
.reon-geo-fallback select:focus,
.reon-geo-fallback input:focus{
  outline:none; border-color:#7E2217;
  box-shadow:0 0 0 3px rgba(126,34,23,.18);
}

/* ========== 3-City showcase cards (above footer) ========== */
.reon-cities-section{
  padding:clamp(64px, 8vw, 110px) 0 clamp(48px, 6vw, 80px);
  background:#F4F4F2;
  border-top:1px solid rgba(47,79,79,.10);
}
.reon-cities-inner{ max-width:1200px; margin:0 auto; padding:0 clamp(20px, 4vw, 40px); }
.reon-cities-eyebrow{
  display:block; font:900 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.22em; text-transform:uppercase;
  color:#7E2217; margin-bottom:14px;
}
.reon-cities-title{
  font-family: var(--font-display, ui-sans-serif, system-ui);
  font-size:clamp(1.75rem, 4vw, 2.75rem); font-weight:800;
  letter-spacing:-.025em; line-height:1.08; color:#2F4F4F;
  max-width:32ch; margin-bottom:8px;
}
.reon-cities-sub{
  font-size:1rem; line-height:1.55; color:#5e7878; font-weight:600;
  max-width:60ch; margin-bottom:36px;
}
.reon-cities-grid{
  display:grid; gap:clamp(18px, 2.4vw, 28px);
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.reon-city-card{
  position:relative; overflow:hidden;
  border-radius:22px;
  min-height:420px;
  background:#2F4F4F;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px 26px 26px;
  color:#F4F4F2;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease;
  isolation:isolate;
}
.reon-city-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 50px -22px rgba(47,79,79,.45);
}
.reon-city-card::before{
  /* Tinted dark veil so foreground text stays legible over the illustration */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(47,79,79,.30) 0%,
    rgba(47,79,79,.55) 55%,
    rgba(47,79,79,.92) 100%);
}
.reon-city-card .reon-city-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  display:block;
}
.reon-city-card .reon-city-body{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:8px;
}
.reon-city-card .reon-city-pill{
  align-self:flex-start;
  font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.22em; text-transform:uppercase;
  color:#F4F4F2; opacity:.72;
  padding:5px 10px 4px; border-radius:999px;
  background:rgba(244,244,242,.12); border:1px solid rgba(244,244,242,.22);
  margin-bottom:6px;
}
.reon-city-card .reon-city-name{
  font-family: var(--font-display, ui-sans-serif, system-ui);
  font-size:2.125rem; font-weight:800; letter-spacing:-.025em; line-height:1;
  color:#F4F4F2;
}
.reon-city-card .reon-city-tagline{
  font-size:.9375rem; font-weight:600; color:rgba(244,244,242,.82);
  line-height:1.45; max-width:30ch;
}
.reon-city-card .reon-city-cta-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px;
}
.reon-city-card .reon-city-phone{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:999px;
  background:#7E2217; color:#fff; font-size:.875rem; font-weight:800;
  text-decoration:none;
  transition:background-color .15s ease, transform .1s ease;
}
.reon-city-card .reon-city-phone:hover{ background:#5d1810; }
.reon-city-card .reon-city-phone svg{ width:14px; height:14px; flex:0 0 14px; }
.reon-city-card .reon-city-book{
  display:inline-flex; align-items:center; gap:6px;
  padding:11px 14px; border-radius:999px;
  background:rgba(244,244,242,.10);
  border:1px solid rgba(244,244,242,.30);
  color:#F4F4F2; font-size:.8125rem; font-weight:800;
  text-decoration:none;
  transition:background-color .15s ease;
}
.reon-city-card .reon-city-book:hover{ background:rgba(244,244,242,.20); color:#fff; }

/* SVG illustration must fully fill the card and never grow taller than the card. */
.reon-city-card svg.reon-city-bg{ display:block; }

/* ── City-aware promotion: matched card lights up, others soften ─────── */
.reon-city-card.is-matched{
  outline: 2px solid #7E2217;
  outline-offset: -2px;
  box-shadow: 0 24px 50px -18px rgba(126,34,23,.45);
  transform: translateY(-4px);
}
.reon-city-card.is-matched .reon-city-here{
  display: inline-flex;
}
.reon-city-card .reon-city-here{
  display: none;
  align-self: flex-start;
  align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: #7E2217;
  color: #F4F4F2;
  font: 900 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 8px;
}
.reon-city-card .reon-city-here svg{
  width: 12px; height: 12px;
}
.reon-city-card.is-matched .reon-city-pill{ display: none; }
.reon-city-card.is-matched .reon-city-book{
  background:#F4F4F2; color:#7E2217;
  border-color:#F4F4F2;
}
.reon-city-card.is-matched .reon-city-book:hover{
  background:#fff; color:#5d1810;
}

.reon-city-card.is-other{
  opacity: .58;
  filter: saturate(.85);
  transform: scale(.985);
}
.reon-city-card.is-other:hover{
  opacity: .85;
  transform: scale(1) translateY(-2px);
}

@media (max-width: 640px){
  .reon-city-card{ min-height:340px; padding:22px 20px; border-radius:18px; }
  .reon-city-card .reon-city-name{ font-size:1.75rem; }
}