/* ===================================================================
   LBKMCH - Public Site Stylesheet
   Used by: doctor.php, profile.php, contact.php, login.php, etc.
   =================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* Fluid base font-size: every rem-based size in this file scales smoothly on
   small phones (14px at ~320px wide) up to the original 16px baseline from
   ~460px wide upward — desktop/tablet is unaffected, only cramped small-phone
   text gets a gentle auto-resize instead of staying fixed at 16px. */
html{font-size:clamp(14px, 3.5vw, 16px)}
:root{
  --navy:#0B1D51;--royal:#1A3A8F;--blue:#2855C7;--sky:#4A90D9;
  --teal:#00B4D8;--teal-light:#90E0EF;--gold:#F4B942;--gold-light:#FDEDB8;
  --cream:#F8F7F3;--white:#FFFFFF;
  --gray-50:#F9FAFB;--gray-100:#F3F4F6;--gray-200:#E5E7EB;
  --gray-400:#9CA3AF;--gray-600:#4B5563;--gray-800:#1F2937;
  --red:#DC2626;--green:#16A34A;
  --header-h:70px;--announce-h:32px;
  --radius-sm:8px;--radius-md:16px;--radius-lg:24px;
  --shadow-sm:0 1px 4px rgba(11,29,81,.07);
  --shadow-md:0 4px 20px rgba(11,29,81,.10);
  --shadow-lg:0 12px 40px rgba(11,29,81,.14);
  --shadow-blue:0 8px 24px rgba(40,85,199,.25);
  --trans:all .3s cubic-bezier(.4,0,.2,1);
  --font-head:'DM Serif Display',Georgia,serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--cream);color:var(--gray-800);min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:99px}

/* ───── Announce Bar ───── */
.announce-bar{
  background:linear-gradient(90deg,var(--navy),var(--royal),var(--blue));
  color:#fff;font-size:.78rem;font-weight:600;
  padding:6px 0;overflow:hidden;position:fixed;top:0;left:0;width:100%;z-index:1200;
  transition:transform .35s ease,opacity .3s ease;height:var(--announce-h);
}
.announce-bar.hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
.announce-track{display:flex;gap:4rem;white-space:nowrap;animation:tickerScroll 50s linear infinite}
.announce-bar:hover .announce-track{animation-play-state:paused}
.announce-item{display:flex;align-items:center;gap:8px;flex-shrink:0}
.announce-item i{color:var(--gold)}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─────────────────────────────────────────────────────────
   FIX FOR NAVBAR-SCROLL ISSUE
   We use a "shifting" header: the header sits *just below*
   the announcement bar (top:32px) initially. When the user
   scrolls, the announcement bar slides up AND the header
   slides up by exactly --announce-h pixels, leaving NO blank
   space at the top.
   ───────────────────────────────────────────────────────── */
.site-header{
  position:fixed;top:var(--announce-h);left:0;width:100%;z-index:1100;
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--gray-200);box-shadow:var(--shadow-sm);
  height:var(--header-h);display:flex;align-items:center;
  padding:0 1.5rem;transition:top .35s ease,box-shadow .3s ease;
}
.site-header.stuck{top:0;box-shadow:var(--shadow-md)}
.header-brand{display:flex;align-items:center;gap:12px;padding-right:1.5rem;border-right:1px solid var(--gray-200);height:100%;flex-shrink:0}
.brand-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--teal));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;box-shadow:var(--shadow-blue)}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-name{font-family:var(--font-head);font-size:1.1rem;color:var(--navy)}
.brand-sub{font-size:.65rem;color:var(--gray-400);font-weight:500;text-transform:uppercase;letter-spacing:.8px}

.header-nav{display:flex;align-items:center;gap:.25rem;margin-left:1.5rem;flex:1}
.h-nav-item{padding:8px 14px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;color:var(--gray-600);cursor:pointer;transition:var(--trans)}
.h-nav-item:hover,.h-nav-item.active{color:var(--blue);background:rgba(40,85,199,.07)}

.header-actions{display:flex;align-items:center;gap:.75rem;margin-left:auto}
.badge-emergency{display:flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:8px 14px;border-radius:var(--radius-sm);font-size:.78rem;font-weight:700;animation:pulseRed 2s infinite}
@keyframes pulseRed{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}
.btn-appoint{background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;padding:10px 16px;border-radius:var(--radius-sm);border:none;font-size:.82rem;font-weight:700;cursor:pointer;transition:var(--trans);display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-blue);font-family:var(--font-body)}
.btn-portal{background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;padding:10px 16px;border-radius:var(--radius-sm);border:none;font-size:.82rem;font-weight:700;cursor:pointer;transition:var(--trans);display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-blue);font-family:var(--font-body)}
.btn-appoint:hover{transform:translateY(-2px)}
.btn-portal:hover{transform:translateY(-2px)}
.mobile-toggle{display:none;background:var(--blue);color:#fff;border:none;width:42px;height:42px;border-radius:var(--radius-sm);font-size:1.1rem;cursor:pointer}
/* ───── Portal Button ───── */
.btn-portal{
  background:linear-gradient(135deg,var(--royal),var(--blue));
  color:#fff;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  border:none;
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  box-shadow:var(--shadow-blue);
  transition:var(--trans);
  position:relative;
  overflow:hidden;
}

/* hover effect */
.btn-portal:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(26,58,143,.35);
}

/* subtle shine animation */
.btn-portal::after{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transition:all .6s;
}

.btn-portal:hover::after{
  left:100%;
}

/* Hidden by default (desktop shows the real <span> label instead) — only
   unhidden on mobile while the header is scrolled, in the media query below. */
.btn-portal-tip{display:none}

/* ───── Main Content offset (so it doesn't hide behind fixed header) ───── */
.site-main{padding-top:calc(var(--header-h) + var(--announce-h) + 16px);min-height:80vh}

/* ───── Generic helpers ───── */
.container{max-width:1280px;margin:0 auto;padding:0 1.25rem}
.section{padding:3rem 0}
.section-title{font-family:var(--font-head);font-size:2rem;color:var(--navy);margin-bottom:.4rem}
.section-sub{color:var(--gray-600);margin-bottom:2rem}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;padding:12px 24px;border-radius:var(--radius-sm);border:none;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);box-shadow:var(--shadow-blue);transition:var(--trans)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--blue);border:1px solid var(--blue);padding:11px 20px;border-radius:var(--radius-sm);font-weight:700;cursor:pointer}
.muted{color:var(--gray-600);font-size:.9rem}

/* ───── Page Hero ───── */
.page-hero{
  background:linear-gradient(135deg,var(--navy),var(--royal) 60%,var(--blue));
  color:#fff;padding:3.5rem 0 3rem;
}
.page-hero h1{font-family:var(--font-head);font-size:2.6rem;margin-bottom:.5rem}
.page-hero p{opacity:.85;font-size:1.05rem}
.breadcrumb{font-size:.85rem;opacity:.8;margin-top:.5rem}
.breadcrumb a{color:var(--gold)}

/* ───── Doctor cards ───── */
.doctor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem}
.doctor-card{
  background:var(--white);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:var(--trans);border:1px solid var(--gray-100);
}
.doctor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.doctor-card .avatar{aspect-ratio:1/1;background:linear-gradient(135deg,var(--teal-light),var(--gold-light));display:flex;align-items:center;justify-content:center;font-size:3.5rem;color:var(--navy);overflow:hidden}
.doctor-card .avatar img{width:100%;height:100%;object-fit:cover}
.doctor-card .body{padding:1rem 1.1rem 1.25rem}
.doctor-card .name{font-family:var(--font-head);font-size:1.15rem;color:var(--navy);margin-bottom:.15rem}
.doctor-card .desg{font-size:.8rem;color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.doctor-card .dept{font-size:.85rem;color:var(--gray-600);margin:.4rem 0 .8rem}
.doctor-card .footer{display:flex;justify-content:space-between;align-items:center;padding-top:.5rem;border-top:1px dashed var(--gray-200)}
.doctor-card .exp{font-size:.78rem;color:var(--gray-600)}
.doctor-card .view{font-size:.78rem;color:var(--blue);font-weight:700}
.expertise-badges {display: flex;    flex-wrap: wrap;    gap: 8px;    margin-top: 8px;}
.badge {    background: #e6f0ff;    color: #1a73e8;    padding: 6px 12px;    border-radius: 20px;    font-size: 13px;    border: 1px solid #cce0ff;    transition: 0.3s;}
.badge:hover {    background: #1a73e8;    color: #fff;}

/* ───── Filters Bar ───── */
.filter-bar{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
.filter-bar select,.filter-bar input{padding:10px 12px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-family:inherit;background:#fff;min-width:180px}

/* ───── Doctor Profile ───── */
.profile-grid{display:grid;grid-template-columns:280px 1fr;gap:2rem;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:2rem;margin-top:-3rem;position:relative}
.profile-grid .photo{aspect-ratio:1/1;background:linear-gradient(135deg,var(--teal-light),var(--gold-light));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:5rem;color:var(--navy)}
.profile-grid .photo img{width:100%;height:100%;object-fit:cover}
.profile-grid h1{font-family:var(--font-head);font-size:2rem;color:var(--navy);margin-bottom:.25rem}
.profile-grid .desg{display:inline-block;background:rgba(40,85,199,.1);color:var(--blue);padding:4px 12px;border-radius:99px;font-size:.78rem;font-weight:700;margin-bottom:1rem}
.profile-grid .meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin:1rem 0}
.profile-grid .meta div{background:var(--gray-50);padding:.75rem 1rem;border-radius:var(--radius-sm)}
.profile-grid .meta strong{display:block;font-size:.7rem;color:var(--gray-600);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.2rem}
.profile-grid .bio{margin-top:1rem;color:var(--gray-600);line-height:1.7}
.profile-grid .actions{margin-top:1.25rem;display:flex;gap:.75rem;flex-wrap:wrap}

/* ───── Modal ───── */
.modal-overlay{position:fixed;inset:0;background:rgba(11,29,81,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:2000;padding:1rem}
.modal-overlay.open{display:flex;animation:fadeIn .25s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{background:#fff;border-radius:var(--radius-md);max-width:760px;width:100%;padding:2rem;position:relative;box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto}
.modal-close{position:absolute;top:1rem;right:1rem;border:none;background:var(--gray-100);width:36px;height:36px;border-radius:50%;font-size:1.4rem;cursor:pointer}
.modal-card h3{font-family:var(--font-head);color:var(--navy);margin-bottom:.5rem;display:flex;align-items:center;gap:8px}

/* ───── Form ───── */
.appt-form{margin-top:1rem}
.appt-form .row{display:flex;gap:.75rem;margin-bottom:.85rem;flex-wrap:wrap}
.appt-form .col{flex:1;min-width:160px;display:flex;flex-direction:column}
.appt-form .col-full{flex-basis:100%}
.appt-form label{font-size:.78rem;color:var(--gray-600);font-weight:600;margin-bottom:.3rem}
.appt-form input,.appt-form select,.appt-form textarea{padding:10px 12px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-family:inherit;font-size:.9rem;background:#fff}
.appt-form input:focus,.appt-form select:focus,.appt-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(40,85,199,.12)}
.form-status{margin-top:.75rem;font-size:.85rem;font-weight:600}
.form-status.ok{color:var(--green)}
.form-status.err{color:var(--red)}

/* ───── Footer ───── */
.site-footer{background:var(--navy);color:#fff;padding:3rem 0 1rem;margin-top:3rem}
.footer-grid{max-width:1280px;margin:0 auto;padding:0 1.25rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
.footer-grid h4{font-family:var(--font-head);margin-bottom:.75rem;color:var(--gold)}
.footer-grid a,.footer-grid p{display:block;color:rgba(255,255,255,.75);font-size:.85rem;padding:3px 0}
.footer-grid a:hover{color:var(--gold)}
.footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.1);margin-top:2rem;padding-top:1rem;font-size:.78rem;color:rgba(255,255,255,.6)}
.footer-bottom a{color:var(--gold)}

/* ───── Auth Pages ───── */
.auth-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.auth-card{background:#fff;padding:2.5rem;max-width:440px;width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.auth-card h2{font-family:var(--font-head);color:var(--navy);margin-bottom:.4rem}
.auth-card .auth-hint{font-size:.8rem;background:var(--gold-light);padding:.7rem;border-radius:var(--radius-sm);margin:1rem 0;color:var(--navy)}

/* ───── Section utilities ───── */
.cards-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.feature-card{background:#fff;padding:1.5rem;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:var(--trans)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.feature-card .ico{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:.75rem}

/* ───── Responsive ───── */
@media(max-width:992px){
  .header-nav{display:none}
  .mobile-toggle{display:flex}
  .header-brand{padding-right:.75rem;border-right:none}
  .brand-sub{display:none}
  .badge-emergency span{display:none}
  .profile-grid{grid-template-columns:1fr}
  .page-hero h1{font-size:2rem}
}
@media(max-width:600px){
  .site-header{padding:0 .75rem}
  .btn-appoint{display:none}
  .btn-portal span{display:none}
  .announce-item:nth-child(n+3){display:none}
  /* Icon-only .btn-portal on mobile gives no clue it switches portals — show a
     small tooltip label under it always (not gated on a scroll-triggered class:
     relying on that proved unreliable in testing — a plain always-on label is
     simpler and works everywhere). */
  .btn-portal .btn-portal-tip{
    display:block;position:absolute;top:100%;left:50%;transform:translateX(-50%);
    margin-top:8px;background:var(--navy,#0B1D51);color:#fff;font-size:.62rem;font-weight:700;
    white-space:nowrap;padding:5px 9px;border-radius:7px;box-shadow:0 6px 16px rgba(0,0,0,.25);
    pointer-events:none;z-index:20;
  }
  .btn-portal .btn-portal-tip::before{
    content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
    border:5px solid transparent;border-bottom-color:var(--navy,#0B1D51);
  }
}


/* ── Data tables ────────────────────────────────────────────────────────────
   The base .data-table rules lived only in college.css, so every table on a
   page served with style.css or hospital.css (doctors, blood bank, grievance,
   CCTV notice…) rendered with no borders, no header background and no row
   separators at all. Defined here so all portals share one table look. */
.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;
  border:1px solid var(--gray-200,#e5e7eb);box-shadow:0 1px 3px rgba(11,29,81,.06);margin-bottom:1.5rem;font-size:.88rem}
.data-table thead th{background:var(--navy,#0B1D51);color:#fff;padding:.85rem 1rem;text-align:left;
  font-size:.8rem;font-weight:700;letter-spacing:.3px}
.data-table th{background:var(--gray-50,#f9fafb);color:var(--navy,#0B1D51);padding:.75rem 1rem;
  text-align:left;font-weight:700;font-size:.85rem;vertical-align:top}
.data-table td{padding:.75rem 1rem;border-top:1px solid var(--gray-100,#f1f5f9);
  color:var(--gray-700,#374151);vertical-align:top}
.data-table tbody tr:hover td{background:var(--gray-50,#f9fafb)}
.data-table a{color:var(--blue,#2563EB);font-weight:600}
@media(max-width:640px){.data-table{font-size:.82rem}.data-table th,.data-table td{padding:.6rem .7rem}}