/* =========================================================
   Pain Clinic — FULL Stylesheet
   Save as: css/styles.css
   ========================================================= */

/* ---------- CSS Variables ---------- */
:root{
  --ink:#0f172a;            /* dark text */
  --muted:#475569;          /* secondary text */
  --line:#e2e8f0;           /* borders */
  --bg:#f8fafc;             /* page background */

  --primary:#0ea5e9;        /* clinic blue */
  --primary-ink:#ffffff;
  --accent:#22c55e;         /* gentle green accent */

  --card:#ffffff;
  --shadow:0 10px 24px rgba(2,8,23,.08);
  --radius:14px;

  --container:1100px;
}

/* ---------- Reset & Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  padding-top: 120px; /* room for fixed header below */
}

.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.inner{display:flex;justify-content:space-between;align-items:center}
.row{display:flex;gap:12px}
.row>label{flex:1}
.lead{font-size:18px;color:var(--muted)}
.hide-on-mobile{display:inline-block}

/* ---------- Topbar (stays non-fixed) ---------- */
.topbar{
  background:#0b243a;
  color:#cbd5e1;
  font-size:14px;
}
.topbar a{color:#e2e8f0;text-decoration:none;margin-right:14px}
.topbar a span{border-bottom:1px solid transparent}
.topbar a:hover span{border-color:#e2e8f0}
.topbar .inner{padding:8px 0}

/* ---------- Header / Nav (FIXED) ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  /* light blue → white gradient like older version */
  background:linear-gradient(90deg, #e6f0f7 0%, #ffffff 45%, #ffffff 100%);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 18px rgba(2,8,23,.06);
}
.nav{padding:10px 0}
.brand{display:flex;align-items:center;text-decoration:none}

/* Bigger logo */
.logo{height:90px;width:auto;display:block}
@media (max-width:680px){ .logo{height:72px} }

.navlinks a{
  color:var(--ink); text-decoration:none; margin-left:14px;
  font-weight:700;
}
.navlinks a:hover{color:var(--primary)}
.nav .btn{margin-left:14px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; border:1px solid var(--primary);
  background:var(--primary); color:var(--primary-ink);
  padding:10px 14px; border-radius:10px; font-weight:800;
  text-decoration:none; cursor:pointer; transition:.18s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(14,165,233,.24)}
.btn:active{transform:translateY(0)}
.btn-outline{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:#f0f9ff}
.btn-wa-outline{background:#fff;color:#1f2937;border-color:#25D366}
.btn-wa-outline:hover{background:#e9fff2}
.btn.secondary{background:#fff;color:var(--ink);border-color:#cbd5e1}
.icon{width:18px;height:18px;vertical-align:-3px;margin-right:6px}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg, #0b243a 0%, #134266 70%, #0b243a 100%);
  color:#e2e8f0;
  padding:56px 0;
}
.hero h1{font-size:48px;line-height:1.1;margin:8px 0 10px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero .lead{color:#f1f5f9;font-size:19px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.portrait{display:flex;justify-content:center;align-items:center}
.portrait img{max-width:420px;width:100%;height:auto;filter:drop-shadow(0 14px 40px rgba(0,0,0,.35));border-radius:12px}

/* ---------- Sections ---------- */
.section{padding:42px 0;background:#fff}
.section.panel{background:#f8fafc;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{font-size:28px;margin:0 0 10px}
.tag{
  display:inline-block;font-size:12px;letter-spacing:.08em;
  color:#0b243a;background:#e2e8f0;padding:4px 8px;border-radius:999px;margin-bottom:8px;
}
.tag.services{background:#dcf3ff;color:#0b243a}
.tag.conditions{background:#f3e8ff;color:#43206e}
.tag.why{background:#dcfce7;color:#064e3b}
.tag.doctor{background:#fff7ed;color:#7c2d12}

/* ---------- Cards, Grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card .icon{background:#ecfeff;color:#0f766e;border-radius:10px;padding:6px}

/* ---------- Services (refined) ---------- */
#services .grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px; margin-top:16px;
}
#services .card{
  display:flex; flex-direction:column; justify-content:flex-start;
  min-height:200px; padding:20px 18px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#services .card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(2,8,23,.12);
  border-color:#dbeafe;
}
#services .card .icon{
  width:46px;height:46px;line-height:46px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;background:#ecfeff;color:#0f766e;border-radius:12px;margin-bottom:8px;
}
#services .card h3{margin:6px 0 6px;font-size:18px;color:var(--ink)}
#services .card p{margin:0;color:var(--muted);line-height:1.55}
#services.section h2{margin-top:2px;margin-bottom:6px}

/* ---------- Two-column “kv” blocks ---------- */
.kv{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.kv .box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.list{padding-left:18px;margin:8px 0}
.list li{margin:6px 0}

/* ---------- Contact / Map ---------- */
.map-wrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.gmap{width:100%;height:360px;border:0;display:block}
.dir-actions .btn{margin-right:10px}

/* ---------- Footer ---------- */
.footer{background:#0b243a;color:#cbd5e1;padding:18px 0}
.footer .row{display:flex;justify-content:space-between;align-items:center}
.footer a{color:#e2e8f0;text-decoration:none}

/* ---------- Floating WhatsApp Button ---------- */
.fab-outline{
  position:fixed;right:18px;bottom:18px;z-index:15;
  display:flex;align-items:center;gap:8px;
  background:#fff;color:#1f2937;border:2px solid #25D366;
  border-radius:999px;padding:10px 14px;text-decoration:none;
  box-shadow:0 12px 24px rgba(2,8,23,.15);
}
.fab-outline .icon{width:20px;height:20px}
.fab-outline:hover{background:#eafff3}

/* ---------- Booking Modal ---------- */
.modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:30}
.modal.show,.modal[aria-hidden="false"]{display:block}
.panel-modal{
  max-width:720px;margin:8vh auto;background:#fff;border-radius:16px;
  padding:18px;box-shadow:0 24px 60px rgba(2,8,23,.35)
}
.panel-modal .head{margin-bottom:12px}
.form label{display:block;font-size:13px;color:var(--muted);margin:6px 0 6px}
input,select,textarea{
  width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:10px;color:var(--ink);
  font:14px/1.3 system-ui, Segoe UI, Roboto, Arial, sans-serif;background:#fff;
}
textarea{min-height:92px}
.actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:12px}
#booking-msg{font-size:13px}
#booking-msg.ok{color:#059669}
#booking-msg.warn{color:#b45309}
#booking-msg.err{color:#b91c1c}

/* ---------- Misc Helpers ---------- */
.kv .box h2{margin-top:4px}
.tag + h2{margin-top:6px}
.cta .btn{margin-right:10px}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  body{padding-top:110px}
}

@media (max-width: 980px){
  .hero .wrap{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  #services .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hide-on-mobile{display:none}
}

@media (max-width: 680px){
  .grid-3{grid-template-columns:1fr}
  #services .grid-3{grid-template-columns:1fr}
  .row{flex-direction:column}
  .hero{padding:40px 0}
  .hero h1{font-size:38px}
  .panel-modal{margin:5vh 12px}
  .gmap{height:260px}
  .footer .row{flex-direction:column;gap:6px}
}