/* ==========================================================
   MediBook — Premium Healthcare Theme
   ========================================================== */
:root{
  --brand:#0B7FFF;          /* electric medical blue */
  --brand-dk:#0055C7;
  --brand-soft:#EAF3FF;
  --accent:#00D4B8;         /* mint accent */
  --ink:#0B1B2B;
  --ink-2:#3A4A5B;
  --muted:#6B7A8E;
  --line:#E6ECF3;
  --bg:#F6F9FC;
  --card:#FFFFFF;
  --success:#16A34A;
  --warn:#F59E0B;
  --danger:#EF4444;
  --shadow-sm: 0 2px 8px rgba(11,27,43,.06);
  --shadow-md: 0 8px 24px rgba(11,27,43,.08);
  --shadow-lg: 0 20px 50px rgba(11,27,43,.12);
  --radius:14px;
  --radius-lg:20px;
}
*{box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
h1,h2,h3,h4,h5{font-weight:700;color:var(--ink);letter-spacing:-.01em}
h1,h2{font-family:'Fraunces','Plus Jakarta Sans',serif;letter-spacing:-.02em}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dk)}

/* Buttons */
.btn{font-weight:600;border-radius:10px;padding:.6rem 1.1rem;transition:transform .15s,box-shadow .15s}
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dk);border-color:var(--brand-dk);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline-primary{color:var(--brand);border-color:var(--brand)}
.btn-outline-primary:hover{background:var(--brand);border-color:var(--brand)}
.btn.rounded-pill{padding:.55rem 1.3rem}

/* Top strip */
.top-strip{background:linear-gradient(90deg,var(--brand-dk),var(--brand));color:#fff;padding:.45rem 0;font-size:.85rem}

/* Navbar */
.navbar{border-bottom:1px solid var(--line);padding:.7rem 0}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;display:inline-grid;place-items:center;box-shadow:var(--shadow-sm)
}
.brand-text{font-family:'Fraunces',serif;font-size:1.35rem;color:var(--ink)}
.navbar .nav-link{color:var(--ink-2);font-weight:500;padding:.5rem 1rem !important;border-radius:8px}
.navbar .nav-link:hover{color:var(--brand);background:var(--brand-soft)}

/* Hero Slider */
.hero-slider{position:relative;background:var(--card)}
.hero-slide{
  min-height:520px;position:relative;overflow:hidden;
  background-size:cover;background-position:center;
  display:flex;align-items:center;color:#fff;
}
.hero-slide::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,20,60,.85) 0%,rgba(0,60,140,.55) 60%,rgba(0,60,140,.2) 100%);
}
.hero-slide .hero-inner{position:relative;z-index:2;padding:3rem 0;max-width:640px}
.hero-slide h1{font-size:clamp(1.8rem,4vw,3.4rem);color:#fff;line-height:1.15}
.hero-slide .subtitle{font-size:1.05rem;color:rgba(255,255,255,.85);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:2px;font-weight:600}
.hero-slide p{color:rgba(255,255,255,.9);font-size:1.1rem}
.carousel-indicators [data-bs-target]{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.5}
.carousel-indicators .active{opacity:1;background:var(--accent)}

/* Search bar over hero */
.doc-search{
  background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:1rem;
  margin-top:-40px;position:relative;z-index:5
}
.doc-search .form-control,.doc-search .form-select{border:1px solid var(--line);height:52px;border-radius:10px}
.doc-search .btn-primary{height:52px;border-radius:10px}

/* Section */
.section{padding:4rem 0}
.section-title{margin-bottom:2.2rem;text-align:center}
.section-title .eyebrow{color:var(--brand);text-transform:uppercase;letter-spacing:3px;font-weight:700;font-size:.8rem}
.section-title h2{font-size:clamp(1.6rem,3vw,2.5rem);margin-top:.4rem}
.section-title p{color:var(--muted);max-width:640px;margin:.7rem auto 0}

/* Category card */
.cat-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1rem;text-align:center;transition:.2s;height:100%
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-soft)}
.cat-icon{
  width:60px;height:60px;border-radius:14px;background:var(--brand-soft);
  color:var(--brand);display:grid;place-items:center;margin:0 auto 1rem;font-size:1.4rem
}
.cat-card h6{margin:0;font-weight:700}

/* Doctor card */
.doc-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.2s;height:100%
}
.doc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand-soft)}
.doc-card .doc-img{
  aspect-ratio:1/1;background:var(--brand-soft) center/cover no-repeat;
  position:relative
}
.doc-card .status-pill{
  position:absolute;top:12px;right:12px;
  background:#fff;padding:.3rem .7rem;border-radius:100px;
  font-size:.75rem;font-weight:600;box-shadow:var(--shadow-sm)
}
.status-available{color:var(--success)}
.status-busy{color:var(--warn)}
.status-closed{color:var(--muted)}
.status-on_leave{color:var(--danger)}
.doc-card .doc-body{padding:1.2rem}
.doc-card h5{margin:0 0 .2rem;font-size:1.05rem}
.doc-card .qual{color:var(--muted);font-size:.85rem;margin-bottom:.5rem}
.doc-card .spec{color:var(--brand);font-weight:600;font-size:.9rem;margin-bottom:.7rem}
.doc-card .meta{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink-2);padding-top:.7rem;border-top:1px solid var(--line);margin-top:.7rem}
.doc-card .fee{color:var(--brand);font-weight:700}

/* Doctor profile page */
.doc-cover{
  height:280px;background:linear-gradient(135deg,var(--brand),var(--accent)) center/cover no-repeat;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);position:relative
}
.doc-hero{margin-top:-90px;position:relative;z-index:2}
.doc-hero-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:1.6rem}
.doc-avatar{
  width:150px;height:150px;border-radius:20px;
  background:var(--brand-soft) center/cover no-repeat;
  border:5px solid #fff;box-shadow:var(--shadow-md)
}

/* Ads / banners */
.ad-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);position:relative}
.ad-card img{width:100%;display:block;transition:.3s}
.ad-card:hover img{transform:scale(1.03)}

/* Blog card */
.blog-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);transition:.2s;height:100%}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.blog-card .thumb{aspect-ratio:16/10;background:var(--brand-soft) center/cover no-repeat}
.blog-card .body{padding:1.2rem}
.blog-card .cat{color:var(--brand);font-size:.75rem;text-transform:uppercase;letter-spacing:2px;font-weight:700}
.blog-card h5{margin:.4rem 0 .5rem;font-size:1.05rem;line-height:1.3}

/* Footer */
.site-footer{background:#0B1B2B;color:#fff}
.site-footer h5,.site-footer h6{color:#fff}
.footer-links li{margin-bottom:.5rem}
.footer-links a{color:rgba(255,255,255,.7)}
.footer-links a:hover{color:#fff}
.social-icons a{
  width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);
  color:#fff;display:inline-grid;place-items:center;margin-right:.4rem;transition:.2s
}
.social-icons a:hover{background:var(--brand);transform:translateY(-2px)}

/* Auth page */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:2rem 1rem;background:linear-gradient(135deg,var(--brand-soft) 0%,#fff 60%)}
.auth-card{max-width:440px;width:100%;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:2.2rem}
.auth-card h3{margin-bottom:.4rem}
.auth-card .muted{color:var(--muted);margin-bottom:1.4rem}
.auth-card .form-control{height:48px;border-radius:10px}
.auth-card label{font-weight:600;font-size:.9rem;margin-bottom:.4rem}

/* Panel */
.panel-body{background:var(--bg);color:var(--ink)}
.side-nav{
  position:fixed;top:0;left:0;bottom:0;width:260px;background:#0B1B2B;color:#fff;
  padding:1rem;overflow-y:auto;z-index:1030;transition:transform .25s;
}
.side-brand{display:flex;justify-content:space-between;align-items:center;padding:.5rem .5rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:1rem}
.side-user{display:flex;gap:.7rem;align-items:center;padding:.6rem;background:rgba(255,255,255,.05);border-radius:12px;margin-bottom:1rem}
.side-user .avatar{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;color:#fff;font-weight:700}
.side-menu{list-style:none;padding:0;margin:0}
.side-menu li a{
  display:flex;align-items:center;gap:.8rem;padding:.65rem .8rem;color:rgba(255,255,255,.75);
  border-radius:10px;margin-bottom:.15rem;font-size:.92rem;font-weight:500;transition:.15s
}
.side-menu li a i{width:20px;text-align:center;font-size:.95rem}
.side-menu li a:hover{background:rgba(255,255,255,.08);color:#fff}
.side-menu li a.active{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(11,127,255,.35)}
.side-menu li a.logout{color:#ffb4b4}
.side-menu li a.logout:hover{background:rgba(239,68,68,.15);color:#fff}
.panel-main{margin-left:260px;padding:1.5rem}
.panel-topbar{
  background:#fff;border-radius:var(--radius);padding:.8rem 1rem;margin-bottom:1.25rem;
  box-shadow:var(--shadow-sm);display:flex;gap:.7rem;align-items:center
}
.panel-content > .stat-card,.stat-card{
  background:#fff;border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow-sm);border:1px solid var(--line)
}
.stat-card .icon{
  width:48px;height:48px;border-radius:12px;background:var(--brand-soft);
  color:var(--brand);display:grid;place-items:center;font-size:1.1rem;margin-bottom:.8rem
}
.stat-card h2{font-size:1.8rem;margin:0}
.stat-card small{color:var(--muted)}
.card,.dash-card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* Tables */
.table{--bs-table-bg:transparent;background:#fff;border-radius:var(--radius);overflow:hidden}
.table thead th{background:#F1F6FB;border:0;color:var(--ink-2);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}
.table tbody td{vertical-align:middle;border-color:var(--line)}
.badge.bg-primary-subtle{background:var(--brand-soft) !important;color:var(--brand) !important}
.badge.bg-success-subtle{background:#DCFCE7 !important;color:#166534 !important}
.badge.bg-warning-subtle{background:#FEF3C7 !important;color:#92400E !important}
.badge.bg-danger-subtle{background:#FEE2E2 !important;color:#991B1B !important}
.badge.bg-secondary-subtle{background:#F1F5F9 !important;color:#475569 !important}

/* Booking modal */
.booking-card{max-width:520px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:2rem}
.step-indicator{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.5rem}
.step-indicator .step{width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:700}
.step-indicator .step.active{background:var(--brand);color:#fff}
.step-indicator .step.done{background:var(--accent);color:#fff}

/* Slip printable */
@media print{
  .no-print,nav,footer,.side-nav,.panel-topbar{display:none !important}
  .panel-main{margin-left:0}
  body{background:#fff}
}
.slip{max-width:640px;margin:auto;background:#fff;padding:2rem;border:1px solid var(--line);border-radius:12px}
.slip h3{color:var(--brand)}
.slip table td{padding:.5rem .3rem;border-bottom:1px dashed var(--line)}

/* Responsive */
@media (max-width:991.98px){
  .side-nav{transform:translateX(-100%)}
  .side-nav.show{transform:translateX(0)}
  .panel-main{margin-left:0;padding:1rem}
}
@media (max-width:575.98px){
  .hero-slide{min-height:440px}
  .section{padding:2.5rem 0}
  .doc-search{margin-top:-30px}
}

/* Mobile sticky action bar */
.mobile-book-bar{
  position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);
  padding:.6rem 1rem;box-shadow:0 -4px 14px rgba(0,0,0,.08);z-index:100;display:none
}
@media(max-width:767.98px){.mobile-book-bar{display:flex;gap:.5rem;align-items:center;justify-content:space-between}}

/* Utility */
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border-radius:100px;background:var(--brand-soft);color:var(--brand);font-size:.8rem;font-weight:600}
.divider{height:1px;background:var(--line);margin:1rem 0}