/* ===================================================================
   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%;
}

/* Scroll-triggered tooltip (both mobile & desktop) — portal-nav.js adds
   body.portal-tip-show while the page is scrolling and for ~3.5s after it
   stops; faded in/out via opacity rather than display so the transition runs.
   position:fixed (not absolute) — .btn-portal has overflow:hidden for its
   shine-sweep ::after effect, which would otherwise clip an absolutely-
   positioned child sitting outside the button's own box; portal-nav.js sets
   top/left inline via the button's getBoundingClientRect() each time it shows. */
.btn-portal-tip{
  display:block;position:fixed;
  background:var(--navy,#0B1D51);color:#fff;font-size:.68rem;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:1200;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
.btn-portal-tip::before{
  content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:var(--navy,#0B1D51);
}
body.portal-tip-show .btn-portal-tip{opacity:1;visibility:visible}

/* ───── 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;
  position:relative;overflow:hidden;
}
.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)}
.page-hero .container{position:relative;z-index:1}

/* Optional department photo (Admin → Departments → "Card background image") on the
   right of a department's hero — fades in from the left via a mask, so it blends
   into the navy gradient instead of a hard edge. */
.hero-dept-img{
  position:absolute;top:0;right:0;bottom:0;width:52%;
  background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 45%);
  mask-image:linear-gradient(to right,transparent 0%,#000 45%);
  pointer-events:none;
}
@media(max-width:768px){.hero-dept-img{display:none}}

/* ───── 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:not(.btn-portal-tip){display:none}
  .announce-item:nth-child(n+3){display:none}
}


/* ── 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}}