/* ==========================================================================
   Wadantech HMS — Components
   ========================================================================== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 22px;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }

.btn-primary {
  background: linear-gradient(180deg, var(--cyan-500), var(--cyan-700));
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(0, 144, 168, 0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover {
  color: #fff;
  filter: brightness(1.05);
  box-shadow: 0 10px 24px -4px rgba(0, 144, 168, 0.55), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.btn-dark {
  background: var(--ink-900);
  color: #fff;
}
.btn-dark:hover { background: var(--ink-800); color: #fff; transform: translateY(-1px); }

.btn-success {
  background: var(--green-500);
  color: #fff;
}
.btn-success:hover { background: #059669; color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }

.btn-outline {
  background: transparent;
  color: var(--cyan-600);
  border-color: var(--cyan-600);
}
.btn-outline:hover { background: var(--cyan-600); color: #fff; }

.btn-sm { padding: 8px 14px; font-size: 0.8125rem; }
.btn-lg { padding: 16px 28px; font-size: 1rem; }
.btn-icon { padding: 10px; aspect-ratio: 1; }

.btn-link {
  color: var(--accent);
  background: none;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-link:hover { color: var(--accent-hover); gap: 10px; }

/* --- Cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card-interactive { cursor: pointer; }
.card-interactive:hover { transform: translateY(-3px); }
.card-flat { border: 1px solid var(--border); }
.card-elev { box-shadow: var(--shadow-md); }

/* --- Badges / Pills / Chips --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-soft);
}
.badge-cyan { background: var(--cyan-50); color: var(--cyan-700); }
.badge-green { background: #DCFCE7; color: #15803D; }
.badge-amber { background: #FEF3C7; color: #B45309; }
.badge-red { background: #FEE2E2; color: #B91C1C; }
[data-theme="dark"] .badge-cyan { background: rgba(0,144,168,0.18); color: var(--cyan-400); }
[data-theme="dark"] .badge-green { background: rgba(16,185,129,0.18); color: #6EE7B7; }
[data-theme="dark"] .badge-amber { background: rgba(245,158,11,0.18); color: #FCD34D; }
[data-theme="dark"] .badge-red { background: rgba(239,68,68,0.18); color: #FCA5A5; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-green { background: #10B981; box-shadow: 0 0 0 4px rgba(16,185,129,0.18); }
.dot-amber { background: #F59E0B; box-shadow: 0 0 0 4px rgba(245,158,11,0.18); }
.dot-red { background: #EF4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.18); }
.dot-grey { background: #9CA3AF; }

/* --- Header / Nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
[data-theme="dark"] .site-header { background: rgba(8, 21, 43, 0.82); }
.site-header.scrolled { box-shadow: var(--shadow-sm); }

/* Scoped to .site-header so this wins specificity against Bootstrap's .nav (which sets
   flex-wrap:wrap and would push our login/book-appointment buttons onto a second row).
   Keeping the scope tight avoids breaking Bootstrap's .nav-tabs / .nav-pills elsewhere. */
.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  height: var(--header-h);
  flex-wrap: nowrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
[data-theme="dark"] .brand { color: var(--text); }
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--ink-900), var(--cyan-600));
  color: #fff;
  border-radius: 11px;
  box-shadow: 0 4px 10px -2px rgba(0,144,168,0.5);
}
.brand-mark svg { width: 22px; height: 22px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  padding: 10px 14px;
  border-radius: var(--r-full);
  color: var(--text-soft);
  font-weight: 500;
  font-size: 0.9375rem;
  position: relative;
}
.nav-link:hover { color: var(--ink-900); background: var(--surface-2); }
.nav-link.active { color: var(--cyan-600); background: var(--cyan-50); }
[data-theme="dark"] .nav-link:hover { color: var(--text); }
[data-theme="dark"] .nav-link.active { background: rgba(0,144,168,0.18); color: var(--cyan-400); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: inline-flex; align-items: center; gap: 6px;
}
/* Invisible bridge between toggle and menu so the dropdown stays open
   while the cursor crosses the visual gap. Without this the dropdown
   snaps shut the moment the mouse leaves the toggle. */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: 100%;
  height: 12px;
  opacity: 0;
  pointer-events: none;
}
.nav-dropdown:hover::after,
.nav-dropdown:focus-within::after {
  pointer-events: auto;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  list-style: none;
  margin: 0;
  z-index: 70;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; transform: none; pointer-events: auto;
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 12px;
  color: var(--text-soft);
  font-weight: 500;
  font-size: 0.9375rem;
  border-radius: var(--r-sm);
}
.nav-dropdown-menu a:hover { background: var(--surface-2); color: var(--ink-900); }
[data-theme="dark"] .nav-dropdown-menu a:hover { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: var(--s-2); }

/* Language switcher */
.lang-switch {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-soft);
}
.lang-btn:hover { border-color: var(--border-strong); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 6px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  z-index: 80;
}
.lang-switch.open .lang-menu { opacity: 1; pointer-events: auto; transform: none; }
.lang-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  color: var(--text-soft);
  text-align: start;
}
.lang-menu button:hover { background: var(--surface-2); color: var(--text); }
.lang-menu button.active { background: var(--cyan-50); color: var(--cyan-700); font-weight: 600; }
[data-theme="dark"] .lang-menu button.active { background: rgba(0,144,168,0.18); color: var(--cyan-400); }
.lang-flag { font-size: 1.05rem; line-height: 1; }

/* Theme toggle */
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.theme-toggle:hover { background: var(--surface-2); transform: rotate(15deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

/* Mobile nav */
.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.menu-toggle svg { width: 22px; height: 22px; }

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  display: none;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.mobile-nav-links { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; margin: 0 0 24px; }
.mobile-nav-links a {
  display: block;
  padding: 16px;
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.mobile-nav-links a:hover { background: var(--surface-2); }
.mobile-nav-links a.active { background: var(--cyan-50); color: var(--cyan-700); }
[data-theme="dark"] .mobile-nav-links a.active { background: rgba(0,144,168,0.18); color: var(--cyan-400); }

@media (max-width: 1024px) {
  .nav-links, .nav-actions .desktop-only { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* --- Hero --- */
.hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 80px) clamp(60px, 8vw, 110px);
  background: var(--bg);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-12);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: var(--s-5);
}
.hero-eyebrow .pip {
  background: var(--green-500);
  color: #fff;
  font-size: 0.6875rem;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hero h1 {
  color: var(--ink-900);
  font-size: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
  font-weight: 800;
  margin-bottom: var(--s-5);
  letter-spacing: -0.03em;
}
[data-theme="dark"] .hero h1 { color: var(--text); }
.hero p.lead { font-size: 1.125rem; color: var(--muted); max-width: 540px; margin-bottom: var(--s-6); }
.hero-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-8); }

.hero-trust { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.hero-trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--text-soft); }
.hero-trust-item .ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--cyan-50); color: var(--cyan-700); }
[data-theme="dark"] .hero-trust-item .ico { background: rgba(0,144,168,0.2); color: var(--cyan-400); }
.hero-trust-item .ico svg { width: 18px; height: 18px; }

/* Decorative frame around the hero photo. Soft pale gradient by default (matches the
   light page surface); darkens to a navy/cyan gradient under dark mode. The image is
   fully opaque so no dark gradient bleeds through and tints the photo. */
.hero-visual,
.feature-visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-2xl);
  background: linear-gradient(140deg, var(--cyan-50), var(--cyan-100));
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
[data-theme="dark"] .hero-visual,
[data-theme="dark"] .feature-visual {
  background: linear-gradient(140deg, var(--ink-900), var(--cyan-600));
}
.hero-visual img,
.feature-visual img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }

.hero-floater {
  position: absolute;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--ink-900);
}
[data-theme="dark"] .hero-floater { background: rgba(20,42,81,0.92); color: var(--text); }
.hero-floater strong { display: block; font-size: 0.9375rem; }
.hero-floater small { color: var(--muted); font-size: 0.75rem; }
.hero-floater .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #F59E0B, #EF4444); color: #fff; display: grid; place-items: center; font-weight: 700; }

.hero-float-1 { top: 24px; inset-inline-start: -16px; }
.hero-float-2 { bottom: 28px; inset-inline-end: -8px; max-width: 240px; }
.hero-float-3 { top: 77%; inset-inline-end: 9px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { aspect-ratio: 16/13; max-width: 560px; margin-inline: auto; }
}

/* --- Booking strip --- */
.booking-strip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr auto;
  gap: var(--s-4);
  align-items: end;
  box-shadow: var(--shadow-lg);
  margin-top: calc(-1 * var(--s-12));
  position: relative;
  z-index: 2;
}
.booking-strip h3 { font-size: 1.0625rem; margin: 0; color: var(--ink-900); align-self: center; padding-inline-end: 8px; }
[data-theme="dark"] .booking-strip h3 { color: var(--text); }
@media (max-width: 900px) {
  .booking-strip { grid-template-columns: 1fr 1fr; }
  .booking-strip h3 { grid-column: 1 / -1; }
  .booking-strip .btn { grid-column: 1 / -1; }
}

/* --- Forms --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--text-soft); }
.field label .req { color: var(--red-500); }

.input, .select, .textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #9CA3AF; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--cyan-600);
  box-shadow: 0 0 0 3px rgba(0,144,168,0.16);
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
[dir="rtl"] .select { background-position: left 14px center; padding-right: 14px; padding-left: 36px; }
.textarea { min-height: 110px; resize: vertical; }

.input-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.input-group:focus-within { border-color: var(--cyan-600); box-shadow: 0 0 0 3px rgba(0,144,168,0.16); }
.input-group .input { border: none; background: transparent; padding: 12px 14px; }
.input-group .input:focus { box-shadow: none; }
.input-group .ico { color: var(--muted); padding-inline-start: 14px; display: grid; place-items: center; }
.input-group .ico svg { width: 18px; height: 18px; }

/* Checkbox & radio (custom) */
.check, .radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--text-soft);
}
.check input, .radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}
.check input { border-radius: 4px; }
.radio input { border-radius: 50%; }
.check input:checked, .radio input:checked { background: var(--cyan-600); border-color: var(--cyan-600); }
.check input:checked::after {
  content: ''; position: absolute; inset: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.radio input:checked::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff;
}

/* --- Service / Department Card --- */
.dept-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: all var(--dur-2) var(--ease);
  position: relative;
  overflow: hidden;
}
.dept-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, transparent 40%, rgba(0,144,168,0.06));
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.dept-card:hover { border-color: var(--cyan-600); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.dept-card:hover::before { opacity: 1; }
.dept-card-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--cyan-500), var(--cyan-700));
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: var(--s-4);
  box-shadow: 0 6px 14px -4px rgba(0,144,168,0.4);
}
.dept-card-icon svg { width: 28px; height: 28px; }
.dept-card h3 { font-size: 1.125rem; margin-bottom: 6px; color: var(--ink-900); }
[data-theme="dark"] .dept-card h3 { color: var(--text); }
.dept-card p { font-size: 0.9375rem; margin-bottom: var(--s-3); }
.dept-card .row-actions { display: flex; align-items: center; justify-content: space-between; }
.dept-card .row-actions .meta { font-size: 0.75rem; color: var(--muted); }

/* --- Doctor card --- */
.doctor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--dur-2) var(--ease);
  display: flex;
  flex-direction: column;
}
.doctor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.doctor-avatar {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 4rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-sans);
  position: relative;
}
.doctor-avatar .badge-status {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  background: rgba(255,255,255,0.95);
  color: var(--ink-900);
  padding: 5px 10px;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.doctor-avatar.av-1 { background: linear-gradient(135deg, #FBBF24, #F97316); }
.doctor-avatar.av-2 { background: linear-gradient(135deg, #F97316, #DC2626); }
.doctor-avatar.av-3 { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.doctor-avatar.av-4 { background: linear-gradient(135deg, #38BDF8, #0284C7); }
.doctor-avatar.av-5 { background: linear-gradient(135deg, #0EA5E9, #0369A1); }
.doctor-avatar.av-6 { background: linear-gradient(135deg, #FB7185, #BE185D); }
.doctor-avatar.av-7 { background: linear-gradient(135deg, #34D399, #059669); }
.doctor-avatar.av-8 { background: linear-gradient(135deg, #2DD4BF, #0D9488); }

.doctor-body { padding: var(--s-5); }
.doctor-body h4 { margin: 0 0 4px; color: var(--ink-900); font-size: 1.0625rem; }
[data-theme="dark"] .doctor-body h4 { color: var(--text); }
.doctor-meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; color: var(--muted); margin-bottom: var(--s-3); }
.doctor-meta .spec { color: var(--cyan-700); font-weight: 600; font-size: 0.875rem; }
[data-theme="dark"] .doctor-meta .spec { color: var(--cyan-400); }
.doctor-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: var(--s-3); border-top: 1px solid var(--border); }
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--text-soft); font-weight: 600; }
.rating .star { color: var(--amber-500); }

/* --- Stats card --- */
.stat-card {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  text-align: center;
}
.stat-card .num {
  font-size: 2.75rem;
  font-weight: 800;
  font-family: var(--font-sans);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.stat-card .label { color: var(--text-soft); font-size: 0.9375rem; }
.stat-1 { background: #DCFCE7; }
.stat-1 .num { color: #15803D; }
.stat-2 { background: #FEE2E2; }
.stat-2 .num { color: #B91C1C; }
.stat-3 { background: var(--surface-2); }
.stat-3 .num { color: var(--cyan-600); }
.stat-4 { background: #FEF3C7; }
.stat-4 .num { color: #B45309; }
[data-theme="dark"] .stat-1 { background: rgba(16,185,129,0.12); }
[data-theme="dark"] .stat-1 .num { color: #6EE7B7; }
[data-theme="dark"] .stat-2 { background: rgba(239,68,68,0.12); }
[data-theme="dark"] .stat-2 .num { color: #FCA5A5; }
[data-theme="dark"] .stat-3 { background: var(--surface-2); }
[data-theme="dark"] .stat-3 .num { color: var(--cyan-400); }
[data-theme="dark"] .stat-4 { background: rgba(245,158,11,0.12); }
[data-theme="dark"] .stat-4 .num { color: #FCD34D; }

/* --- Steps progress --- */
.steps {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}
.step {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.875rem;
  color: var(--muted);
  flex: 1;
}
.step .n {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-soft);
  flex-shrink: 0;
}
.step.is-active .n { background: var(--cyan-600); color: #fff; border-color: var(--cyan-600); }
.step.is-done .n { background: var(--green-500); color: #fff; border-color: var(--green-500); }
.step.is-active .label { color: var(--ink-900); font-weight: 600; }
[data-theme="dark"] .step.is-active .label { color: var(--text); }
.step::after {
  content: '';
  height: 2px;
  flex: 1;
  background: var(--border);
  border-radius: 2px;
}
.step:last-child::after { display: none; }
.step.is-done::after, .step.is-active::after { background: var(--cyan-500); }
@media (max-width: 700px) {
  .step .label { display: none; }
}

/* --- Page header / breadcrumb --- */
.page-hero {
  position: relative;
  padding-block: clamp(60px, 7vw, 100px);
  background: linear-gradient(140deg, var(--bg) 0%, var(--surface-2) 100%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
[data-theme="dark"] .page-hero { background: linear-gradient(140deg, var(--bg) 0%, var(--surface) 100%); }
.page-hero h1 { color: var(--ink-900); font-size: clamp(2rem, 3vw + 1rem, 3rem); margin-bottom: 6px; }
[data-theme="dark"] .page-hero h1 { color: var(--text); }
.breadcrumb { font-size: 0.875rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.breadcrumb a { color: var(--cyan-600); }
.breadcrumb span.sep { color: var(--border-strong); }

/* --- Footer --- */
.site-footer {
  background: var(--ink-900);
  color: #CBD5E1;
  padding-top: var(--s-16);
  padding-bottom: var(--s-6);
  margin-top: var(--s-12);
}
[data-theme="dark"] .site-footer { background: #050E1E; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--s-10);
  margin-bottom: var(--s-12);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.site-footer h4 {
  color: var(--cyan-400);
  font-size: 1rem;
  margin-bottom: var(--s-5);
  font-weight: 600;
}
.site-footer .brand { color: #fff; margin-bottom: var(--s-4); }
.site-footer p { color: #94A3B8; font-size: 0.9375rem; line-height: 1.7; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer ul a { color: #CBD5E1; font-size: 0.9375rem; transition: color var(--dur-2) var(--ease); }
.site-footer ul a:hover { color: var(--cyan-400); }
.contact-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--s-3); }
.contact-row .ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,144,168,0.2); color: var(--cyan-400); flex-shrink: 0; }
.contact-row .ico svg { width: 18px; height: 18px; }
.contact-row strong { display: block; color: #fff; font-size: 0.9375rem; font-weight: 600; }
.contact-row span { font-size: 0.8125rem; color: #94A3B8; }
.socials { display: flex; gap: 10px; margin-top: var(--s-4); }
.socials a {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  display: grid; place-items: center;
  color: #CBD5E1;
  transition: all var(--dur-2) var(--ease);
}
.socials a:hover { background: var(--cyan-600); color: #fff; transform: translateY(-2px); }
.socials a svg { width: 18px; height: 18px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: 0.875rem;
  color: #94A3B8;
}

/* --- Chat / WhatsApp floating --- */
.chat-fab {
  position: fixed;
  bottom: 28px;
  inset-inline-end: 28px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.chat-fab-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--cyan-500), var(--cyan-700));
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 28px -6px rgba(0,144,168,0.55);
  transition: transform var(--dur-2) var(--ease);
  position: relative;
}
.chat-fab-btn:hover { transform: scale(1.05); }
.chat-fab-btn svg { width: 26px; height: 26px; }
.chat-fab-btn.whatsapp { background: linear-gradient(140deg, #22C55E, #16A34A); box-shadow: 0 12px 28px -6px rgba(34,197,94,0.55); }
.chat-fab-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: pulse 2.4s infinite var(--ease);
}
@keyframes pulse {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

.chat-panel {
  position: fixed;
  bottom: 100px;
  inset-inline-end: 28px;
  width: 360px;
  max-width: calc(100vw - 56px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  z-index: 91;
  overflow: hidden;
  display: none;
  flex-direction: column;
  max-height: 70vh;
}
.chat-panel.open { display: flex; }
.chat-head {
  background: linear-gradient(140deg, var(--ink-900), var(--cyan-700));
  color: #fff;
  padding: var(--s-5);
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-head .av { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.18); display: grid; place-items: center; }
.chat-head strong { display: block; font-size: 1rem; }
.chat-head small { font-size: 0.75rem; opacity: 0.85; display: inline-flex; align-items: center; gap: 6px; }
.chat-head .x { margin-inline-start: auto; color: #fff; opacity: 0.8; }
.chat-head .x:hover { opacity: 1; }
.chat-body { padding: var(--s-5); flex: 1; overflow-y: auto; background: var(--surface-2); }
.chat-msg { background: var(--surface); border: 1px solid var(--border); padding: 12px 14px; border-radius: var(--r-md); margin-bottom: 10px; font-size: 0.875rem; max-width: 85%; }
.chat-msg.me { background: var(--cyan-600); color: #fff; border-color: var(--cyan-600); margin-inline-start: auto; }
.chat-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px var(--s-5) 0; }
.chat-quick button { font-size: 0.75rem; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); color: var(--text-soft); }
.chat-quick button:hover { border-color: var(--cyan-600); color: var(--cyan-600); }
.chat-input { padding: 12px var(--s-5); border-top: 1px solid var(--border); display: flex; gap: 8px; background: var(--surface); }
.chat-input .input { flex: 1; }
.chat-input button { padding: 10px 14px; background: var(--cyan-600); color: #fff; border-radius: var(--r-md); }

/* --- Tabs --- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: var(--s-6); overflow-x: auto; }
.tab {
  padding: 12px 16px;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--cyan-600); border-color: var(--cyan-600); font-weight: 600; }
[data-theme="dark"] .tab.active { color: var(--cyan-400); border-color: var(--cyan-400); }

/* --- Accordion --- */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.acc-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color var(--dur-2) var(--ease); }
.acc-item.open { border-color: var(--cyan-600); }
.acc-trigger {
  width: 100%;
  text-align: start;
  padding: var(--s-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.acc-trigger .chev { transition: transform var(--dur-2) var(--ease); color: var(--muted); }
.acc-item.open .acc-trigger .chev { transform: rotate(180deg); color: var(--cyan-600); }
.acc-content { padding: 0 var(--s-5); max-height: 0; overflow: hidden; transition: max-height var(--dur-3) var(--ease), padding var(--dur-3) var(--ease); }
.acc-item.open .acc-content { max-height: 500px; padding-bottom: var(--s-5); }
.acc-content p { margin: 0; color: var(--text-soft); }

/* --- Toast --- */
.toast {
  position: fixed;
  bottom: 28px;
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--ink-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  transition: transform var(--dur-3) var(--ease-out);
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
[dir="rtl"] .toast { transform: translateX(50%) translateY(120%); }
.toast.show { transform: translateX(-50%) translateY(0); }
[dir="rtl"] .toast.show { transform: translateX(50%) translateY(0); }
.toast .ok { width: 20px; height: 20px; border-radius: 50%; background: var(--green-500); display: grid; place-items: center; }

/* --- Misc --- */
.section-alt { background: var(--surface); }
[data-theme="dark"] .section-alt { background: var(--surface); }
.divider { height: 1px; background: var(--border); margin-block: var(--s-8); }

/* Subtle decorative element */
.glow {
  position: absolute;
  inset: auto;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,144,168,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}
[data-theme="dark"] .glow { background: radial-gradient(circle, rgba(0,144,168,0.28) 0%, transparent 70%); }

/* ============= Password field with our own eye toggle =============
   .pw-field is a position:relative wrapper around <input type="password"> + .pw-toggle.
   The defensive selectors below also neutralise any sibling wrapper a global
   "show-password" jQuery plugin might inject (which on this site renders BELOW the
   input instead of beside it). */
.pw-field { position: relative; }
.pw-field .input { padding-inline-end: 44px; }
.pw-field .pw-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 8px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 6px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    z-index: 2;
}
.pw-field .pw-toggle:hover { color: var(--text); }
/* Some legacy themes paint an eye icon as a CSS background on the input itself.
   Make sure our input never inherits one. */
.pw-field input[type="password"],
.pw-field input[type="text"] { background-image: none !important; }
/* Hide common plugin-injected eye icons that may sit as siblings/descendants of our input. */
.pw-field i[class*="fa-eye"],
.pw-field span[class*="fa-eye"],
.pw-field span[class*="show-pass"],
.pw-field span[class*="eye-icon"],
.pw-field i.toggle-password,
.pw-field svg.show-pwd,
.pw-field [data-show-password],
.pw-field .password-toggle:not(.pw-toggle) { display: none !important; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: var(--s-10); }
.pagination button {
  min-width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0 12px;
}
.pagination button:hover { border-color: var(--cyan-600); color: var(--cyan-600); }
.pagination button.active { background: var(--cyan-600); color: #fff; border-color: var(--cyan-600); }

/* Avatar */
.avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar-md { width: 48px; height: 48px; font-size: 0.9375rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.25rem; }

/* Brand row (Phase 13 — Wadan HOS): flex-center logo + wordmark, slight optical lift.
   flex-shrink:0 + nowrap keep "Wadan HOS" on one line when the logged-in nav
   (Dashboard button etc.) squeezes the header. */
.site-header .brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-header .brand-logo { transform: translateY(-2px); }
.site-header .brand-name { white-space: nowrap; }

/* ==========================================================================
   Testimonials.

   The cards were a squashed avatar, a name, the words "Our Testimonials"
   repeated under every one of them, and a paragraph. The avatar was an ellipse
   because it sat in a flex row with no flex-shrink, so it was squeezed by the
   text beside it; the subtitle was the section heading restated six times; and
   the cards ended at different heights because nothing stretched them.

   A testimonial reads quote-first, signed off by the person who said it.
   ========================================================================== */

.tm-grid {
    /* Every card the height of the tallest in its row, so the signatures line
       up instead of floating at six different heights. */
    align-items: stretch;
}

.tm-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* A quote mark, set large and faint behind the text — enough to say "someone
   said this" without competing with the words. */
.tm-card::before {
    content: "\201C";
    position: absolute;
    inset-inline-start: var(--s-5);
    inset-block-start: -0.35em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--border);
    pointer-events: none;
}

.tm-quote {
    margin: 0;
    /* Pushes the first line clear of the quote mark. */
    padding-block-start: var(--s-4);
    /* The quote is the content: give it room to breathe and a size that reads
       as speech rather than as body copy. */
    font-size: 1rem;
    line-height: 1.7;
    /* --text, not --ink-800: the ink-* scale is the fixed brand navy and is
       not re-defined for dark mode, so it would be navy on navy. */
    color: var(--text-soft, var(--ink-800));
    /* Fills the card so the attribution is pinned to the bottom. */
    flex: 1 1 auto;
}

.tm-by {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--border);
}

.tm-avatar {
    /* flex-shrink:0 and a fixed aspect ratio are what keep this a circle. As a
       plain flex child with width/height it was compressed into an ellipse the
       moment the name beside it needed room. */
    flex: 0 0 auto;
    inline-size: 48px;
    block-size: 48px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
}

.tm-name {
    font-weight: 600;
    color: var(--text, var(--ink-900));
    /* A long name shortens itself rather than pushing the avatar out of shape. */
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .tm-card::before { font-size: 3.5rem; }
    .tm-quote { font-size: 0.9375rem; }
}