/* ==========================================================================
   FA Medicare Clinic — Global Stylesheet
   Load order: Bootstrap 5 -> variables.css -> style.css -> (page).css
   ========================================================================== */

@import url("animations.css");

*,*::before,*::after{ box-sizing:border-box; }

html, body{ max-width:100%; overflow-x:hidden; }
img, svg{ max-width:100%; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  font-size: var(--fs-base);
  line-height: 1.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink-teal-900);
  letter-spacing: -0.01em;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brass-600);
  font-weight: 600;
}

a{ color: var(--color-ink-teal-700); text-decoration:none; }
a:hover{ color: var(--color-ink-teal-500); }

::selection{ background: var(--color-brass-400); color: var(--color-ink-teal-900); }

:focus-visible{
  outline: 2px solid var(--color-brass-500);
  outline-offset: 2px;
}

.container-narrow{ max-width: 860px; margin-inline:auto; }

/* --- Signature element: EKG / vitals rule --- */
.vitals-rule{ width:100%; height:34px; overflow:hidden; display:block; }
.vitals-rule svg{ width:100%; height:100%; display:block; }
.vitals-rule path{
  fill:none; stroke:var(--color-brass-500); stroke-width:2;
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: draw-vitals 2.6s ease-out forwards;
}
@keyframes draw-vitals{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  .vitals-rule path{ animation:none; stroke-dashoffset:0; }
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index:1030; background:transparent; border:none;
}
.nav-float-wrap{ padding: .85rem 1rem 0; }
.nav-float{
  max-width:1240px; margin-inline:auto; background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-pill);
  padding: .55rem 1rem;
  box-shadow: 0 10px 30px rgba(11,47,43,.10);
  transition: all 300ms ease;
}
.site-header.scrolled .nav-float-wrap{ padding-top:.4rem; }
.site-header.scrolled .nav-float{ box-shadow: 0 14px 34px rgba(11,47,43,.16); background: rgba(255,255,255,.92); }
@media (max-width: 991.98px){
  .nav-float{ border-radius: var(--radius-lg); }
}
.topbar{
  background: var(--color-ink-teal-900);
  color: var(--color-ink-teal-100);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing:.03em;
}
.topbar a{ color: var(--color-brass-400); }
.topbar a:hover{ color: var(--color-brass-100); }

.navbar-brand{ font-family: var(--font-display); font-weight:700; font-size:1.45rem; color:var(--color-ink-teal-900); display:flex; align-items:center; gap:.55rem; }
.navbar-brand .brand-mark{
  display:inline-flex; align-items:center; justify-content:center; line-height:0;
  filter: drop-shadow(0 4px 10px rgba(11,79,74,.35));
  transition: transform 300ms ease;
}
.navbar-brand:hover .brand-mark{ transform: rotate(-4deg) scale(1.05); }
.navbar-brand .brand-sub{ display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; color:var(--color-ink-faint); font-weight:600; text-transform:uppercase; }

.navbar .nav-link{
  font-weight:600; color:var(--color-ink-soft); padding:.6rem 1rem !important;
  position:relative;
}
.navbar .nav-link.active, .navbar .nav-link:hover{ color: var(--color-ink-teal-800); }
.navbar .nav-link.active::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.25rem; height:2px;
  background: var(--color-brass-500); border-radius:2px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{ font-weight:600; border-radius: var(--radius-pill); padding:.62rem 1.5rem; transition: all var(--transition-base); }
.btn-primary{ background: var(--color-ink-teal-800); border-color: var(--color-ink-teal-800); }
.btn-primary:hover,.btn-primary:focus{ background: var(--color-ink-teal-700); border-color: var(--color-ink-teal-700); transform: translateY(-1px); }
.btn-brass{ background: var(--color-brass-500); border-color: var(--color-brass-500); color: var(--color-ink-teal-900); }
.btn-brass:hover{ background: var(--color-brass-400); border-color: var(--color-brass-400); color: var(--color-ink-teal-900); transform: translateY(-1px); }
.btn-outline-primary{ color: var(--color-ink-teal-800); border-color: var(--color-ink-teal-800); }
.btn-outline-primary:hover{ background: var(--color-ink-teal-800); border-color: var(--color-ink-teal-800); }
.btn-sm{ padding:.4rem 1rem; font-size:var(--fs-sm); }
.btn-lg{ padding:.85rem 2rem; font-size:var(--fs-md); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background: linear-gradient(180deg, var(--color-ink-teal-50) 0%, var(--color-paper) 100%);
  padding: 4.5rem 0 3.5rem;
  position: relative;
  overflow:hidden;
}
.hero h1{ font-size: var(--fs-4xl); line-height:1.05; }
.hero .lead{ font-size: var(--fs-md); color: var(--color-ink-soft); max-width:520px; }
.hero-stats{ display:flex; gap:2.2rem; margin-top:2rem; flex-wrap:wrap; }
.hero-stats .stat-num{ font-family:var(--font-mono); font-size:var(--fs-2xl); font-weight:700; color:var(--color-ink-teal-800); }
.hero-stats .stat-label{ font-size:var(--fs-xs); color:var(--color-ink-faint); text-transform:uppercase; letter-spacing:.08em; }
.hero-media{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); }

.page-hero{
  background: var(--color-ink-teal-900);
  color: var(--color-ink-teal-100);
  padding: 3.5rem 0 4.5rem;
}
.page-hero-wave{
  height:48px; margin-top:-1px;
  background-color: var(--color-ink-teal-900);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,60 350,0 600,30 C850,60 1050,0 1200,30 L1200,60 L0,60 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,60 350,0 600,30 C850,60 1050,0 1200,30 L1200,60 L0,60 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size:100% 100%;
}
.page-hero h1{ color:#fff; font-size:var(--fs-3xl); }
.page-hero .eyebrow{ color: var(--color-brass-400); }
.page-hero p{ color: var(--color-ink-teal-100); opacity:.85; max-width:640px; }
.breadcrumb-clinic a{ color: var(--color-brass-400); }
.breadcrumb-clinic .active{ color:#fff; }

/* ==========================================================================
   Sections & cards
   ========================================================================== */
.section{ padding: 4.5rem 0; }
.section-tight{ padding: 3rem 0; }
.section-alt{ background: var(--color-ink-teal-50); }
.section-title{ font-size: var(--fs-2xl); margin-bottom:.5rem; }
.section-sub{ color: var(--color-ink-soft); max-width:640px; }

/* ==========================================================================
   Photography treatment — applied globally so every image (existing or
   future real photos) reads as part of one cohesive, branded photo system.
   ========================================================================== */
.hero-media, .doctor-photo, .dept-photo, .about-photo{
  filter: saturate(1.12) contrast(1.03);
  transition: transform .6s cubic-bezier(.16,.8,.28,1), filter .4s ease;
}
.hero-media:hover{ transform: scale(1.015); }
.doctor-card{ overflow:hidden; border-radius: var(--radius-md); }
.doctor-card .doctor-photo{ transition: transform .6s cubic-bezier(.16,.8,.28,1); }
.doctor-card:hover .doctor-photo{ transform: scale(1.07); }
.dept-photo-wrap{ overflow:hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.dept-photo-wrap img{ transition: transform .6s cubic-bezier(.16,.8,.28,1); display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.dept-photo-wrap:hover img{ transform: scale(1.08); }

/* Global card polish */
.card-clinic{
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(11,47,43,.06);
  transition: all var(--transition-base);
  height:100%;
}
.card-clinic:hover{ box-shadow: 0 22px 44px -12px rgba(11,79,74,.28); transform: translateY(-4px); border-color: var(--color-ink-teal-100); }



.doctor-card .doctor-photo{ aspect-ratio: 4/5; object-fit:cover; width:100%; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.doctor-card .doctor-body{ padding:1.25rem 1.25rem 1.5rem; }
.doctor-card .doctor-specialty{ font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--color-brass-600); }
.doctor-card .doctor-name{ font-size:var(--fs-lg); margin:.25rem 0 .15rem; }
.rating-stars{ color: var(--color-brass-500); font-size:var(--fs-sm); }

.dept-icon-wrap{
  width:58px; height:58px; border-radius:var(--radius-md);
  background: var(--color-ink-teal-100); color: var(--color-ink-teal-800);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  margin-bottom:1rem;
}

.service-item{ padding:1.5rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); height:100%; }
.service-item .service-price{ font-family:var(--font-mono); color:var(--color-ink-teal-700); font-weight:700; }

.testimonial-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.75rem; height:100%; }
.testimonial-card .quote-mark{ font-family:var(--font-display); font-size:2.5rem; color:var(--color-brass-400); line-height:.5; display:block; margin-bottom:.75rem; }

.badge-clinic{ background: var(--color-vital-green-100); color: var(--color-vital-green); font-weight:600; padding:.35rem .75rem; border-radius:var(--radius-pill); font-size:var(--fs-xs); }
.badge-pending{ background:#FEF3E1; color:#9A6A1E; font-weight:600; padding:.35rem .75rem; border-radius:var(--radius-pill); font-size:var(--fs-xs); }
.badge-cancel{ background: var(--color-alert-coral-100); color: var(--color-alert-coral); font-weight:600; padding:.35rem .75rem; border-radius:var(--radius-pill); font-size:var(--fs-xs); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-clinic label{ font-weight:600; font-size:var(--fs-sm); color:var(--color-ink-teal-900); margin-bottom:.35rem; }
.form-clinic .form-control, .form-clinic .form-select{
  border-radius: var(--radius-sm); border-color: var(--color-border-strong); padding:.65rem .9rem;
}
.form-clinic .form-control:focus, .form-clinic .form-select:focus{
  border-color: var(--color-ink-teal-500); box-shadow: 0 0 0 .2rem rgba(27,122,114,.15);
}
.form-clinic .invalid-feedback{ font-size:var(--fs-xs); }
.auth-card{ max-width:460px; margin-inline:auto; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:2.5rem; box-shadow: var(--shadow-md); }

/* ==========================================================================
   Booking flow (appointment.html)
   ========================================================================== */
.step-marker{ position:relative; color: var(--color-ink-faint); }
.step-marker:not(:last-child)::before{
  content:""; position:absolute; top:17px; left:calc(50% + 22px); width:calc(100% - 44px); height:2px;
  background: var(--color-border-strong); z-index:0; transition: background 400ms ease;
}
.step-marker.done:not(:last-child)::before{ background: var(--color-vital-green); }
.step-marker > div:first-child{ position:relative; z-index:1; }
.step-marker > div:first-child{
  width:34px; height:34px; border-radius:50%; background:var(--color-surface); border:2px solid var(--color-border-strong);
  display:flex; align-items:center; justify-content:center; margin:0 auto .4rem; color:var(--color-ink-faint);
}
.step-marker.active > div:first-child{ background: var(--color-ink-teal-800); border-color: var(--color-ink-teal-800); color:#fff; }
.step-marker.done > div:first-child{ background: var(--color-vital-green); border-color: var(--color-vital-green); color:#fff; }
.step-marker.active{ color: var(--color-ink-teal-800); font-weight:600; }
.booking-option{ border:2px solid var(--color-border); border-radius:var(--radius-md); padding:1rem; cursor:pointer; transition: all var(--transition-base); background:var(--color-surface); }
.booking-option:hover{ border-color: var(--color-ink-teal-500); }
.booking-option.selected{ border-color: var(--color-ink-teal-700); background: var(--color-ink-teal-50); }
.time-slot-btn{ border:1px solid var(--color-border-strong); background:var(--color-surface); border-radius:var(--radius-sm); padding:.4rem .85rem; font-family:var(--font-mono); font-size:var(--fs-sm); cursor:pointer; }
.time-slot-btn.selected{ background: var(--color-ink-teal-800); color:#fff; border-color: var(--color-ink-teal-800); }

/* ==========================================================================
   Split-screen auth pages (login / register / forgot-password)
   ========================================================================== */
.auth-split{ display:grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 90px); }
.auth-split-media{
  background-size:cover; background-position:center; position:relative;
  display:flex; align-items:flex-end; padding:3rem;
}
.auth-split-media::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,46,43,.2), rgba(11,46,43,.85)); }
.auth-split-overlay{ position:relative; z-index:1; max-width:420px; }
.auth-split-form{ display:flex; align-items:center; justify-content:center; padding: 3rem 1.5rem; }
.auth-split .auth-card{ box-shadow:none; border:none; padding:0; }
@media (max-width: 991.98px){
  .auth-split{ grid-template-columns: 1fr; }
  .auth-split-media{ min-height:220px; padding:1.5rem; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--color-ink-teal-900); color: var(--color-ink-teal-100); padding:3.5rem 0 1.5rem; }
.site-footer h6{ color:#fff; font-family:var(--font-mono); text-transform:uppercase; font-size:var(--fs-xs); letter-spacing:.1em; margin-bottom:1rem; }
.site-footer a{ color: var(--color-ink-teal-100); opacity:.8; }
.site-footer a:hover{ color: var(--color-brass-400); opacity:1; }
.site-footer .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.5rem; font-size:var(--fs-xs); opacity:.7; }
.social-icon{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem; }
.social-icon:hover{ background: var(--color-brass-500); color: var(--color-ink-teal-900); }

/* ==========================================================================
   Dashboards (admin / doctor / patient)
   ========================================================================== */
.dash-body{ background: var(--color-paper-dim); min-height:100vh; }
.dash-sidebar{
  background: var(--color-ink-teal-900); color: var(--color-ink-teal-100);
  min-height:100vh; padding:1.5rem 1rem; position:sticky; top:0;
}
.dash-sidebar .brand{ color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.2rem; padding:.5rem .75rem 1.5rem; display:flex; align-items:center; gap:.5rem; }
.dash-sidebar .nav-link{
  color: var(--color-ink-teal-100); border-radius: var(--radius-sm); padding:.65rem .9rem; font-weight:600; font-size:var(--fs-sm);
  display:flex; align-items:center; gap:.65rem; margin-bottom:.15rem;
}
.dash-sidebar .nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.dash-sidebar .nav-link.active{ background: var(--color-brass-500); color: var(--color-ink-teal-900); }
.dash-sidebar .nav-section-label{ font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; color: var(--color-ink-teal-100); opacity:.5; margin:1.25rem .75rem .4rem; }

.dash-topbar{ background:var(--color-surface); border-bottom:1px solid var(--color-border); padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.dash-content{ padding:1.75rem; }

.stat-card{ background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding:1.4rem; height:100%; }
.stat-card .stat-icon{ width:44px; height:44px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:.85rem; }
.stat-card .stat-value{ font-family:var(--font-mono); font-size:var(--fs-2xl); font-weight:700; color:var(--color-ink-teal-900); }
.stat-card .stat-label{ color:var(--color-ink-soft); font-size:var(--fs-sm); }
.stat-card .stat-delta{ font-size:var(--fs-xs); font-weight:600; }
.stat-delta.up{ color:var(--color-vital-green); }
.stat-delta.down{ color:var(--color-alert-coral); }

.table-clinic{ background:var(--color-surface); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--color-border); }
.table-clinic thead th{ font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--color-ink-faint); border-bottom:1px solid var(--color-border); font-weight:600; }
.table-clinic td{ vertical-align:middle; font-size:var(--fs-sm); }
.avatar-sm{ width:36px; height:36px; border-radius:50%; object-fit:cover; }

.panel-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.5rem; }

/* ==========================================================================
   Misc utilities
   ========================================================================== */
.text-brass{ color: var(--color-brass-600) !important; }
.bg-ink-teal{ background: var(--color-ink-teal-800) !important; }
.divider-dot{ width:4px; height:4px; border-radius:50%; background: var(--color-ink-faint); display:inline-block; margin:0 .5rem; }
.back-to-top{
  position:fixed; right:1.5rem; bottom:1.5rem; width:44px; height:44px; border-radius:50%;
  background: var(--color-ink-teal-800); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md); opacity:0; visibility:hidden; transition: all var(--transition-base); z-index:1040;
}
.back-to-top.show{ opacity:1; visibility:visible; }

@media (max-width: 991.98px){
  .hero h1{ font-size: var(--fs-3xl); }
  .dash-sidebar{ position:relative; min-height:auto; }
}

/* ==========================================================================
   Mobile responsiveness hardening
   ========================================================================== */
@media (max-width: 767.98px){
  .hero{ padding: 2.5rem 0 2rem; text-align:left; }
  .hero h1{ font-size: var(--fs-2xl); }
  .hero-stats{ gap:1.1rem; }
  .hero-stats .stat-num{ font-size: var(--fs-lg); }
  .hero-stats .stat-label{ font-size: 0.65rem; }
  .section{ padding: 2.75rem 0; }
  .section-tight{ padding: 1.75rem 0; }
  .page-hero{ padding: 2.25rem 0 3rem; }
  .page-hero h1{ font-size: var(--fs-xl); }
  .nav-float{ padding:.45rem .75rem; }
  .nav-float-wrap{ padding: .6rem .75rem 0; }
  .navbar-brand span > span.brand-sub{ display:none; }
  .dash-content{ padding:1rem; }
  .dash-topbar{ padding:.75rem 1rem; flex-wrap:wrap; gap:.5rem; }
  .stat-card{ padding:1rem; }
  .stat-card .stat-value{ font-size: var(--fs-xl); }
  .panel-card{ padding:1.1rem; }
  .auth-card{ padding:1.5rem !important; }
  .table-clinic{ font-size: var(--fs-sm); }
  .float-chip{ display:none !important; }
  .back-to-top{ right:1rem; bottom:1rem; width:40px; height:40px; }
  .booking-option{ padding:.75rem; }
  h1, h2, .section-title{ overflow-wrap: break-word; word-break: break-word; }
}

/* Prevent any wide inline content (long emails, code, etc.) from forcing a
   horizontal scrollbar on small screens. */
@media (max-width: 575.98px){
  .topbar .container{ font-size: 0.7rem; }
  .stat-card, .panel-card, .card-clinic{ overflow-wrap:break-word; }
  table{ font-size: 0.8rem; }
}