/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-block-start: var(--space-16);
  padding-block-end: var(--space-12);
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, var(--color-primary-soft) 0%, transparent 60%),
    var(--color-bg);
  overflow: hidden;
}
.hero__inner {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  position: relative;
  z-index: 2;
}
.hero__inner h1 { max-width: 16ch; }
.hero__subtitle { font-size: var(--text-lg); max-width: 46ch; }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-block-start: var(--space-2); }

/* the "smile" — signature arc divider between the hero copy and the stat strip */
.hero__arc-wrap {
  position: relative;
  height: 70px;
  margin-block-start: var(--space-12);
}
.hero__arc {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
  height: 140px;
  overflow: visible;
}
.hero__arc path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: draw-arc 1.4s var(--ease-out) 0.3s forwards;
}
.hero__arc circle { opacity: 0; animation: fade-in-dot 0.5s var(--ease-out) 1.5s forwards; }
.hero__arc .dot-accent { fill: var(--color-accent); }
.hero__arc .dot-primary { fill: var(--color-primary-light); }

.stat-strip {
  position: relative;
  z-index: 3;
  display: flex;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6) var(--space-8);
  gap: var(--space-4);
}
.stat-strip__item {
  flex: 1;
  text-align: center;
  padding-inline: var(--space-4);
  position: relative;
}
.stat-strip__item + .stat-strip__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: var(--color-border);
}
.stat-strip__number {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  display: block;
}
.stat-strip__label { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* Adaptive "your next appointment" banner replaces the stat strip when relevant */
.next-appt-banner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: var(--color-primary);
  background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 3;
}
.next-appt-banner__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.next-appt-banner__body { flex: 1; text-align: start; }
.next-appt-banner__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; margin-block-end: 4px; }
.next-appt-banner__title { font-size: var(--text-lg); font-weight: 700; }
.next-appt-banner__meta { font-size: var(--text-sm); opacity: 0.85; margin-block-start: 2px; }

@media (max-width: 720px) {
  .stat-strip { flex-direction: column; }
  .stat-strip__item + .stat-strip__item::before { display: none; }
  .stat-strip__item { padding-block: var(--space-3); }
  .stat-strip__item:not(:last-child) { border-bottom: 1px solid var(--color-border); }
  .next-appt-banner { flex-direction: column; text-align: center; }
  .next-appt-banner__body { text-align: center; }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card--hoverable { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.card--hoverable:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

/* Feature cards */
.feature-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card { text-align: center; }
.feature-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto;
  margin-block-end: var(--space-4);
}
.feature-card h3 { margin-block-end: var(--space-2); font-size: var(--text-base); }
.feature-card p { font-size: var(--text-sm); }

/* Department cards */
.dept-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .dept-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dept-grid { grid-template-columns: 1fr; } }
.dept-card { display: flex; flex-direction: column; gap: var(--space-3); cursor: pointer; }
.dept-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  display: flex; align-items: center; justify-content: center;
}
.dept-card h3 { font-size: var(--text-lg); }
.dept-card p { font-size: var(--text-sm); flex: 1; }
.dept-card__footer { display: flex; align-items: center; justify-content: space-between; padding-block-start: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.dept-card__count { color: var(--color-ink-faint); }
.dept-card__link { color: var(--color-primary); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* Doctor cards */
.doctor-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .doctor-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .doctor-grid { grid-template-columns: 1fr; } }
.doctor-card { text-align: center; }
.doctor-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  margin-inline: auto;
  margin-block-end: var(--space-4);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); font-weight: 700;
  overflow: hidden;
}
.doctor-avatar img { width: 100%; height: 100%; object-fit: cover; }
.doctor-card h3 { font-size: var(--text-base); margin-block-end: 2px; }
.doctor-card__title { font-size: var(--text-sm); color: var(--color-primary); font-weight: 600; margin-block-end: var(--space-2); }
.doctor-card__dept { font-size: var(--text-xs); color: var(--color-ink-faint); margin-block-end: var(--space-4); }

/* ==========================================================================
   Badges / status pills
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-confirmed { background: var(--color-success-soft); color: var(--color-success); }
.badge-cancelled { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-completed { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge-no_show { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-neutral { background: var(--color-surface-alt); color: var(--color-ink-soft); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }

/* ==========================================================================
   Booking wizard: step indicator
   ========================================================================== */
.steps { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-block-end: var(--space-10); flex-wrap: wrap; }
.step {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-ink-faint);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}
.step__num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-ink-faint);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
  transition: all var(--duration-base) var(--ease-standard);
}
.step.is-active { color: var(--color-ink); background: var(--color-primary-soft); }
.step.is-active .step__num { background: var(--color-primary); color: #fff; }
.step.is-done .step__num { background: var(--color-primary-light); color: #fff; }
.step-connector { width: 24px; height: 2px; background: var(--color-border); }

.wizard-panel { display: none; animation: fade-up 0.4s var(--ease-out); }
.wizard-panel.is-active { display: block; }

/* ==========================================================================
   Calendar
   ========================================================================== */
.calendar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.calendar__header { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-4); }
.calendar__title { font-weight: 700; font-size: var(--text-base); }
.calendar__nav { display: flex; gap: var(--space-2); }
.calendar__nav button {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
}
.calendar__nav button:hover:not(:disabled) { background: var(--color-surface-alt); }
.calendar__weekdays, .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar__weekdays span { text-align: center; font-size: var(--text-xs); color: var(--color-ink-faint); font-weight: 600; padding-block: var(--space-2); }
.calendar__day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  position: relative;
}
.calendar__day.is-empty { visibility: hidden; }
.calendar__day.is-available { color: var(--color-ink); cursor: pointer; font-weight: 600; }
.calendar__day.is-available:hover { background: var(--color-primary-soft); }
.calendar__day.is-available::after {
  content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary-light);
}
.calendar__day.is-selected { background: var(--color-primary); color: #fff; }
.calendar__day.is-selected::after { background: #fff; }
.calendar__day.is-today { border: 1.5px solid var(--color-accent); }
.calendar__day.is-past, .calendar__day.is-unavailable { color: var(--color-border); cursor: default; }

/* Time slot grid */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); }
.slot {
  padding: var(--space-3) var(--space-2);
  text-align: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--color-surface);
  transition: all var(--duration-fast) var(--ease-standard);
}
.slot:hover { border-color: var(--color-primary-light); }
.slot.is-selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: scale(1.03); }

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(23, 35, 31, 0.45);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--space-4);
  backdrop-filter: blur(2px);
}
.modal-overlay.is-open { display: flex; animation: fade-in 0.2s var(--ease-standard); }
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: 480px; width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.25s var(--ease-out);
}
.modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6) var(--space-6) 0; }
.modal__header h3 { font-size: var(--text-lg); }
.modal__close { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-ink-faint); }
.modal__close:hover { background: var(--color-surface-alt); }
.modal__body { padding: var(--space-6); }
.modal__footer { display: flex; gap: var(--space-3); padding: 0 var(--space-6) var(--space-6); justify-content: flex-end; }

/* ==========================================================================
   Toasts
   ========================================================================== */
.toast-container { position: fixed; bottom: var(--space-6); inset-inline-end: var(--space-6); z-index: 300; display: flex; flex-direction: column; gap: var(--space-3); max-width: 340px; }
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  animation: slide-in-toast 0.3s var(--ease-out);
}
.toast--success { background: var(--color-primary-dark); }
.toast--error { background: var(--color-danger); }
.toast__icon { flex-shrink: 0; margin-block-start: 2px; }

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty-state { text-align: center; padding-block: var(--space-16); color: var(--color-ink-faint); }
.empty-state svg { margin-inline: auto; margin-block-end: var(--space-4); opacity: 0.6; }
.empty-state h3 { color: var(--color-ink); margin-block-end: var(--space-2); }

/* ==========================================================================
   Auth card (login/register)
   ========================================================================== */
.auth-wrap { min-height: calc(100vh - var(--header-height)); display: flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); }
.auth-card { width: 100%; max-width: 420px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-8); box-shadow: var(--shadow-lg); animation: fade-up 0.5s var(--ease-out); }
.auth-card__icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-block-end: var(--space-5); }
.auth-card h1 { font-size: var(--text-2xl); text-align: center; margin-block-end: var(--space-2); }
.auth-card__subtitle { text-align: center; margin-block-end: var(--space-8); font-size: var(--text-sm); }
.auth-card__footer { text-align: center; font-size: var(--text-sm); margin-block-start: var(--space-4); }
.auth-card__footer a { color: var(--color-primary); font-weight: 600; }

/* ==========================================================================
   Appointment list cards (account page)
   ========================================================================== */
.appt-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.appt-card + .appt-card { margin-block-start: var(--space-3); }
.appt-card__date {
  width: 60px; flex-shrink: 0; text-align: center;
  background: var(--color-primary-soft); color: var(--color-primary-dark);
  border-radius: var(--radius-md); padding: var(--space-2) 0;
}
.appt-card__date .day { font-size: var(--text-xl); font-weight: 800; line-height: 1; }
.appt-card__date .month { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }
.appt-card__body { flex: 1; min-width: 0; }
.appt-card__body h4 { font-size: var(--text-base); margin-block-end: 2px; }
.appt-card__meta { font-size: var(--text-sm); color: var(--color-ink-soft); }
.appt-card__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

@media (max-width: 560px) {
  .appt-card { flex-wrap: wrap; }
  .appt-card__actions { width: 100%; justify-content: flex-end; }
}

/* ==========================================================================
   Admin: tabs, tables, stat tiles
   ========================================================================== */
.admin-shell { display: flex; min-height: calc(100vh - var(--header-height)); }
.admin-tabs {
  width: 220px; flex-shrink: 0;
  border-inline-end: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-4);
  display: flex; flex-direction: column; gap: 2px;
}
.admin-tab-btn {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-ink-soft);
  text-align: start;
}
.admin-tab-btn:hover { background: var(--color-surface-alt); }
.admin-tab-btn.is-active { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.admin-content { flex: 1; padding: var(--space-8); min-width: 0; }
.admin-panel { display: none; }
.admin-panel.is-active { display: block; animation: fade-up 0.3s var(--ease-out); }

@media (max-width: 860px) {
  .admin-shell { flex-direction: column; }
  .admin-tabs { width: 100%; flex-direction: row; overflow-x: auto; border-inline-end: none; border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); }
}

.admin-stat-grid { grid-template-columns: repeat(4, 1fr); margin-block-end: var(--space-8); }
@media (max-width: 800px) { .admin-stat-grid { grid-template-columns: 1fr 1fr; } }
.admin-stat-card { display: flex; align-items: center; gap: var(--space-4); }
.admin-stat-card__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-stat-card__number { font-size: var(--text-2xl); font-weight: 800; line-height: 1; }
.admin-stat-card__label { font-size: var(--text-xs); color: var(--color-ink-faint); }

.filter-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-end: var(--space-6); align-items: center; }
.filter-bar .form-input, .filter-bar .form-select { width: auto; min-width: 160px; }

.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.data-table th { text-align: start; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-faint); padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); }
.data-table td { padding: var(--space-4); font-size: var(--text-sm); border-top: 1px solid var(--color-border); vertical-align: middle; }
.data-table tr:hover td { background: var(--color-surface-alt); }
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-6); }
.pagination button {
  min-width: 36px; height: 36px; padding-inline: var(--space-2);
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  font-size: var(--text-sm); font-weight: 600;
}
.pagination button.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination button:disabled { opacity: 0.4; }

.icon-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--color-ink-soft); }
.icon-btn:hover { background: var(--color-surface-alt); color: var(--color-ink); }

.schedule-day-row { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.schedule-day-row:last-child { border-bottom: none; }
.schedule-day-row__name { width: 110px; font-weight: 600; font-size: var(--text-sm); flex-shrink: 0; }
.schedule-day-row__blocks { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.schedule-block-row { display: flex; align-items: center; gap: var(--space-2); }
.schedule-block-row .form-input { max-width: 130px; }

/* ==========================================================================
   Skeleton loading
   ========================================================================== */
.skeleton { background: linear-gradient(90deg, var(--color-surface-alt) 25%, #e2e8e5 37%, var(--color-surface-alt) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-md); }

/* ==========================================================================
   Clinic gallery carousel (landing page)
   ========================================================================== */
.gallery-carousel { position: relative; display: flex; align-items: center; gap: var(--space-3); }
.gallery-carousel__track {
  display: flex;
  gap: 16px; /* keep in sync with slideWidth() in home.js */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1;
  border-radius: var(--radius-lg);
}
.gallery-carousel__track::-webkit-scrollbar { display: none; }
.gallery-slide {
  flex: 0 0 min(420px, 82%);
  scroll-snap-align: start;
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.gallery-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gallery-slide figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-4) var(--space-5);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}
.gallery-carousel__btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.gallery-carousel__btn:hover { background: var(--color-primary); color: #fff; }
.gallery-carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-5); }
.gallery-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.gallery-carousel__dot.is-active { background: var(--color-primary); transform: scale(1.25); }
@media (max-width: 640px) {
  .gallery-carousel__btn { display: none; } /* swipe is the natural control on touch */
}

/* Admin: gallery management grid (Settings tab) */
.gallery-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-block-start: var(--space-4);
}
.gallery-admin-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.gallery-admin-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-admin-item__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.gallery-admin-item__actions { display: flex; gap: var(--space-2); justify-content: space-between; align-items: center; }