/* ============================================================
   INNER PUBLIC PAGES — shared styles (loads after styles.css)
   ============================================================ */

/* compact dark page hero */
.page-hero{
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(255,122,26,.16), transparent 60%),
    radial-gradient(700px 400px at -10% 130%, rgba(14,122,75,.16), transparent 60%),
    var(--charcoal);
  color:var(--on-dark);
  padding:clamp(44px,6vw,72px) 0 clamp(40px,5vw,60px);
}
.page-hero .crumb{
  display:inline-flex; gap:8px; align-items:center; font-size:12.5px; font-weight:700;
  color:var(--on-dark-soft); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:7px 14px; border-radius:999px; margin-bottom:18px;
}
.page-hero .crumb a{ color:var(--saffron); }
.page-hero h1{ font-size:clamp(30px,5vw,46px); color:#fff; max-width:20ch; margin-bottom:12px; }
.page-hero .lede{ color:var(--on-dark-soft); font-size:clamp(15px,2vw,17px); max-width:56ch; }
.page-hero .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* filter bar */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-radius:16px; padding:14px 16px; margin-bottom:28px; box-shadow:var(--shadow);
  position:sticky; top:76px; z-index:20;
}
.filter-bar select, .filter-bar input{
  border:1.5px solid var(--line); border-radius:11px; padding:10px 13px; background:#fff;
  font-size:13.5px; outline:none; min-width:0;
}
.filter-bar select:focus, .filter-bar input:focus{ border-color:var(--saffron); }
.filter-bar .grow{ flex:1; min-width:160px; }
.filter-bar .count{ font-size:12.5px; color:var(--muted); font-weight:700; margin-inline-start:auto; }

/* card grids */
.grid-cards{ display:grid; gap:20px; }
@media (min-width:640px){ .grid-cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1020px){ .grid-cards{ grid-template-columns:repeat(3,1fr); } }
.grid-cards.g4{ }
@media (min-width:1180px){ .grid-cards.g4{ grid-template-columns:repeat(4,1fr); } }

/* doctor profile */
.profile-top{ display:grid; gap:26px; }
@media (min-width:860px){ .profile-top{ grid-template-columns:.95fr 1.6fr; align-items:start; } }
.profile-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden; text-align:center; padding-bottom:24px;
}
.profile-card img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; margin-bottom:18px; }
.profile-card h2{ font-size:22px; }
.profile-card .spec{ color:var(--muted); font-size:13.5px; margin:4px 0 14px; }
.profile-card .row{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:16px; padding:0 18px; }
.profile-card .fee{ font-size:14px; color:var(--muted); margin-bottom:14px; }
.profile-card .fee b{ font-family:var(--font-display); font-size:26px; color:var(--ink); }
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:clamp(20px,3vw,30px); margin-bottom:20px;
}
.panel h3{ font-size:19px; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.panel h3 .ico{ width:34px; height:34px; border-radius:10px; background:var(--saffron-soft); color:var(--saffron-hot); display:grid; place-items:center; }
.kv{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-top:1px dashed var(--line); font-size:14px; }
.kv .k{ color:var(--muted); }
.kv .v{ font-weight:700; text-align:right; }

/* multi-step register forms */
.steps-nav{ display:flex; gap:8px; margin-bottom:26px; flex-wrap:wrap; }
.steps-nav span{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  padding:9px 16px; border-radius:999px; border:1.5px solid var(--line); color:var(--muted); background:#fff;
}
.steps-nav span.on{ border-color:var(--saffron); color:var(--saffron-hot); background:var(--saffron-soft); }
.steps-nav i{ font-style:normal; width:20px; height:20px; border-radius:50%; background:var(--line); display:grid; place-items:center; font-size:11px; }
.steps-nav span.on i{ background:var(--saffron); color:#fff; }
.form-panel{ max-width:760px; }
.form-panel .form-grid{ display:grid; gap:14px; }
@media (min-width:620px){ .form-panel .form-grid{ grid-template-columns:1fr 1fr; } .form-panel .form-grid .full{ grid-column:1/-1; } }
.form-side-note{
  border:1.5px dashed rgba(244,97,10,.4); background:var(--saffron-soft); border-radius:var(--r-md);
  padding:16px 18px; font-size:13px; color:var(--ink-soft); margin-top:18px;
}
.form-side-note b{ color:var(--saffron-hot); }

/* verify page */
.verify-box{ max-width:620px; margin-inline:auto; text-align:center; }
.verify-box .qr{
  width:120px; height:120px; margin:0 auto 22px; border-radius:20px;
  background:var(--charcoal); color:var(--saffron); display:grid; place-items:center;
  box-shadow:var(--shadow-lg);
}
.verify-result{ margin-top:18px; }
.verify-result .ok-card{
  background:var(--green-soft); border:1.5px solid rgba(14,122,75,.35); color:var(--green-deep);
  border-radius:var(--r-md); padding:18px 20px; font-size:14px; font-weight:600; text-align:left;
}

/* portals hub */
.portal-grid{ display:grid; gap:18px; }
@media (min-width:680px){ .portal-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1020px){ .portal-grid{ grid-template-columns:repeat(3,1fr); } }
.portal-tile{
  --pc: var(--saffron);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.portal-tile::before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--pc); }
.portal-tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.portal-tile .pico{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:color-mix(in srgb, var(--pc) 14%, white); color:var(--pc); }
.portal-tile b{ font-family:var(--font-display); font-size:18px; }
.portal-tile p{ font-size:13.5px; color:var(--ink-soft); flex:1; }
.portal-tile .go{ font-size:13.5px; font-weight:800; color:var(--pc); }

/* about page */
.about-vals{ display:grid; gap:16px; margin-top:26px; }
@media (min-width:760px){ .about-vals{ grid-template-columns:repeat(3,1fr); } }
.contact-grid{ display:grid; gap:22px; }
@media (min-width:880px){ .contact-grid{ grid-template-columns:.85fr 1.15fr; align-items:start; } }
.contact-card{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); }
.contact-card .ico{ width:42px; height:42px; border-radius:12px; background:var(--saffron-soft); color:var(--saffron-hot); display:grid; place-items:center; flex:none; }
.contact-card b{ display:block; font-size:15px; }
.contact-card a, .contact-card span.val{ font-size:13.5px; color:var(--ink-soft); }