/* =====================================================================
   LUGGA CLINICS — Design System v2
   Palette: deep forest-teal + warm jade + single papaya accent on cream.
   Type: Fraunces (display serif, warmth/trust) + Plus Jakarta Sans (UI).
   Signature device: a single pulse/heartbeat trace, used sparingly.
   ===================================================================== */

:root {
  --forest: #0b3d3a;
  --forest-deep: #06211f;
  --jade: #159489;
  --jade-soft: #e8f3f1;
  --papaya: #ff6b4a;
  --papaya-deep: #e1502f;
  --cream: #fbf7f0;
  --cream-dim: #f3ede1;
  --ink: #12211f;
  --ink-soft: #5b6b68;
  --line: #e5ddcd;

  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(11,61,58,.06);
  --shadow-2: 0 12px 32px rgba(11,61,58,.10);
  --shadow-3: 0 20px 48px rgba(11,61,58,.16);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

h1, h2, h3, .font-display {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--forest-deep);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h4, h5, h6 { color: var(--forest-deep); font-weight: 700; }

a { text-decoration: none; color: var(--jade); }
a:hover { color: var(--forest); }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn { border-radius: 999px; font-weight: 600; padding: .7rem 1.5rem; border: none; transition: transform .15s ease, box-shadow .15s ease; }
.btn:active { transform: scale(.97); }
.btn-lg { padding: .9rem 2rem; font-size: 1.02rem; }
.btn-primary { background: var(--forest); border-color: var(--forest); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--forest-deep); border-color: var(--forest-deep); color:#fff; }
.btn-outline-primary { color: var(--forest); border: 1.5px solid var(--forest); background: transparent; }
.btn-outline-primary:hover { background: var(--forest); border-color: var(--forest); color: #fff; }
.btn-outline-light { border: 1.5px solid rgba(255,255,255,.6); color:#fff; background:transparent; }
.btn-outline-light:hover { background: rgba(255,255,255,.15); color:#fff; }
.btn-coral, .btn-papaya { background: var(--papaya); color: #fff; }
.btn-coral:hover, .btn-papaya:hover { background: var(--papaya-deep); color:#fff; }
.btn-outline-secondary { border-radius: 999px; }
.btn-outline-danger { border-radius: 999px; }

/* ---------- Header ---------- */
.site-header .navbar { padding: .7rem 0; background: rgba(251,247,240,.92) !important; backdrop-filter: blur(10px); }
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--forest); color: #fff; display:flex; align-items:center; justify-content:center; font-size: 1.05rem;
}
.brand-text { font-family:'Fraunces', serif; font-weight: 600; font-size: 1.3rem; color: var(--forest-deep); }
.nav-link { font-weight: 500; color: var(--ink) !important; }
.nav-link:hover { color: var(--jade) !important; }

/* ---------- Hero: asymmetric, pulse-line signature ---------- */
.hero-section {
  position: relative; overflow: hidden;
  background: var(--forest-deep);
  color: #fff;
  padding: 5.5rem 0 6.5rem;
}
.hero-section::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(6,33,31,.94) 15%, rgba(11,61,58,.55)), var(--hero-bg, none) center/cover no-repeat;
  z-index: 0;
}
.hero-section .container { position: relative; z-index: 1; }
.hero-kicker { color: var(--papaya); font-weight: 600; font-size: .95rem; }
.hero-section h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.08; margin: .5rem 0 1.1rem; }
.hero-section p.lead { color: rgba(255,255,255,.82); font-size: 1.1rem; max-width: 46ch; }
.hero-pulse { display:block; width: 100%; max-width: 420px; opacity: .9; margin: 1.75rem 0 .5rem; }
.hero-pulse path { stroke: var(--papaya); }
.hero-stat-strip { display: flex; gap: 0; margin-top: 2rem; flex-wrap: wrap; }
.hero-stat-strip .stat { padding: 0 1.4rem; border-left: 1px solid rgba(255,255,255,.2); }
.hero-stat-strip .stat:first-child { padding-left: 0; border-left: none; }
.hero-stat-strip .num { font-family:'Fraunces', serif; font-size: 1.6rem; font-weight: 600; color: #fff; display:block; }
.hero-stat-strip .lbl { font-size: .82rem; color: rgba(255,255,255,.65); }

.hero-curve { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 1; pointer-events: none; }
.hero-curve svg { display: block; width: 100%; height: 56px; }
.hero-curve path { fill: var(--cream); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.hero-section .hero-kicker { animation: fadeUp .6s ease both; }
.hero-section h1 { animation: fadeUp .6s ease .08s both; }
.hero-section p.lead { animation: fadeUp .6s ease .16s both; }
.hero-section .hero-pulse { animation: fadeUp .6s ease .24s both; }
.hero-section .hero-actions { animation: fadeUp .6s ease .32s both; }
.hero-section .hero-stat-strip { animation: fadeUp .6s ease .4s both; }

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.section-sm { padding: 3.25rem 0; }
.kicker { color: var(--papaya); font-weight: 600; font-size: .95rem; display:inline-block; margin-bottom:.35rem; }
.section-title { font-weight: 600; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.section-sub { color: var(--ink-soft); max-width: 620px; font-size: 1.03rem; }

.pulse-divider { width: 100%; height: 44px; opacity: .5; }
.pulse-divider path { stroke: var(--jade); }

/* ---------- Cards: varied treatment by hierarchy, not one repeated kit ---------- */
.service-card {
  background: #fff; border-left: 3px solid var(--jade); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-1); padding: 1.9rem 1.6rem; height: 100%; transition: box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover { box-shadow: var(--shadow-2); border-color: var(--papaya); }
.service-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, var(--jade-soft), #ffffff);
  box-shadow: inset 0 0 0 1px rgba(11,61,58,.07);
  color: var(--forest);
  display:flex; align-items:center; justify-content:center; font-size: 1.25rem; margin-bottom: 1rem;
}

.dept-card { background: transparent; border-bottom: 1px solid var(--line); padding: 1.3rem 0; transition: padding-left .2s ease; }
.dept-card:hover { padding-left: .4rem; }

.doctor-card { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); height: 100%; transition: box-shadow .2s ease, transform .2s ease; }
.doctor-card:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); }
.doctor-photo { width: 100%; height: 230px; object-fit: cover; background: var(--jade-soft); }
.doctor-card .card-body { padding: 1.3rem; }
.doctor-avail { font-size: .76rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; background: var(--jade-soft); color: var(--forest); }

.info-card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-1); }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative; overflow: hidden;
  background: var(--forest); border-radius: var(--radius-lg); color: #fff; padding: 3.25rem 2rem; text-align:center;
}
.cta-banner .cta-pulse { position:absolute; bottom:-6px; left:0; right:0; width:100%; opacity:.35; }
.cta-banner h2 { color: #fff; }

/* ---------- Gallery ---------- */
.gallery-item { border-radius: var(--radius-md); overflow: hidden; position: relative; box-shadow: var(--shadow-1); }
.gallery-item img { width: 100%; height: 230px; object-fit: cover; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption { position: absolute; left:0; right:0; bottom:0; padding: .9rem 1rem; background: linear-gradient(to top, rgba(6,33,31,.85), transparent); color:#fff; font-weight:600; font-size:.9rem; }

/* ---------- Testimonials ---------- */
.testimonial-card { background: var(--cream-dim); border-radius: var(--radius-md); padding: 2rem; height: 100%; }
.testimonial-stars { color: var(--papaya); }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest-deep); color: rgba(255,255,255,.72); }
.footer-brand { color: #fff; font-family:'Fraunces', serif; font-weight: 600; }
.footer-heading { color: #fff; font-weight: 700; font-size: .92rem; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; font-size: .88rem; }
.footer-links a { color: rgba(255,255,255,.72); }
.footer-links a:hover { color: #fff; }
.social-links a { display:inline-flex; width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.1); color:#fff; align-items:center; justify-content:center; margin-right:.5rem; }
.social-links a:hover { background: var(--jade); }

/* ---------- Public bottom app-nav (guest/patient browsing on mobile) ---------- */
@media (max-width: 991.98px) {
  body:not(.portal-body) { padding-bottom: 4.7rem; }
}
@media (display-mode: standalone) and (max-width: 991.98px) {
  .site-header .navbar .btn.ms-lg-2 { display: none; }
}

/* ---------- Auth ---------- */
.auth-wrapper { min-height: 100vh; display:flex; align-items:center; background: var(--jade-soft); padding: 2rem 0; }
.auth-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 2.5rem; }
.form-control, .form-select { border-radius: var(--radius-sm); padding: .65rem .9rem; border-color: var(--line); background:#fff; }
.form-control:focus, .form-select:focus { border-color: var(--jade); box-shadow: 0 0 0 .2rem rgba(21,148,137,.15); }
.form-label { font-weight: 600; font-size: .88rem; color: var(--forest-deep); }

/* ---------- Portal shell — designed to feel like an installed app ---------- */
.portal-body { background: var(--cream-dim); min-height: 100vh; }
.portal-sidebar { background: var(--forest-deep); color: #fff; min-height: 100vh; position: sticky; top: 0; }
.portal-sidebar .brand { padding: 1.3rem 1.2rem; font-family:'Fraunces',serif; font-weight: 600; font-size: 1.1rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.portal-sidebar .nav-link { color: rgba(255,255,255,.72) !important; padding: .72rem 1.2rem; border-radius: var(--radius-sm); margin: .12rem .7rem; font-weight: 500; }
.portal-sidebar .nav-link i { width: 22px; }
.portal-sidebar .nav-link.active, .portal-sidebar .nav-link:hover { background: rgba(255,255,255,.1); color:#fff !important; }

.portal-topbar {
  background: var(--cream); border-bottom: 1px solid var(--line);
  padding: calc(.85rem + var(--safe-top)) 1.3rem .85rem; position: sticky; top: 0; z-index: 20;
}
.portal-main { padding: 1.5rem; max-width: 1180px; }

.stat-card { background: #fff; border-radius: var(--radius-md); padding: 1.35rem; box-shadow: var(--shadow-1); height: 100%; }
.stat-card .stat-value { font-family:'Fraunces',serif; font-size: 1.7rem; font-weight: 600; color: var(--forest-deep); }
.stat-card .stat-icon { width: 44px; height: 44px; border-radius: 12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem; }

.badge-status { font-weight: 600; padding: .35rem .75rem; border-radius: 999px; font-size: .76rem; }
.badge-pending { background: #fdf1dd; color: #8a5f1d; }
.badge-checked_in { background: #ddeef7; color: #0a5f8a; }
.badge-in_consultation { background: #ece2fb; color: #5b3ba3; }
.badge-reviewed { background: var(--jade-soft); color: var(--forest); }
.badge-cancelled { background: #fbe3e0; color: #b3382a; }
.badge-no_show { background: #ece7dc; color: #6b6252; }

.table-portal thead { background: var(--cream-dim); }
.table-portal td, .table-portal th { vertical-align: middle; }

/* App-style bottom nav (patient/doctor/admin) */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
  border-top: 1px solid var(--line); z-index: 1030;
  padding: .5rem 0 calc(.4rem + var(--safe-bottom));
}
.mobile-bottom-nav a { flex: 1; text-align: center; color: var(--ink-soft); font-size: .68rem; font-weight: 500; transition: color .15s ease, transform .15s ease; }
.mobile-bottom-nav a:active { transform: scale(.92); }
.mobile-bottom-nav a.active, .mobile-bottom-nav a:hover { color: var(--forest); }
.mobile-bottom-nav i { display: block; font-size: 1.2rem; margin-bottom: .18rem; }
.mobile-bottom-nav a.active i { color: var(--papaya); }

@media (max-width: 991.98px) {
  .portal-sidebar { display: none; }
  .mobile-bottom-nav { display: flex; }
  .portal-main { padding-bottom: 5.5rem; }
}

/* When launched as an installed PWA (standalone), lean further into an
   app-like chrome: tighter top padding using safe-area, no browser-style
   affordances. Public marketing chrome (footer developer credit, mobile
   FAB) stays but portal chrome tightens up. */
@media (display-mode: standalone) {
  .portal-topbar { padding-top: calc(1.1rem + var(--safe-top)); }
  .site-header .navbar { padding-top: calc(.7rem + var(--safe-top)); }
}

/* ---------- Empty / error states ---------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.empty-state i { font-size: 2.4rem; color: var(--jade); margin-bottom: 1rem; }

/* ---------- Utilities ---------- */
.text-teal { color: var(--jade); }
.bg-teal-100 { background: var(--jade-soft); }
.rounded-24 { border-radius: var(--radius-lg); }
.shadow-soft { box-shadow: var(--shadow-1); }