/*  */

/* =========================================================
   styles.css — Table of Contents
   =========================================================
   1) Variables & color themes
   2) Base / element defaults
   3) Header & navigation
   4) Layout & components (cards, grids, buttons)
   5) Forms
   6) Tables
   7) Flash messages
   8) Admin / tab helpers
   9) Footer
   10) Utilities (spacing, flex, widths, type)
   ========================================================= */



/* =========================================================
   1) Variables & color themes
   ========================================================= */
:root {
  --c-bg: #ffffff;
  --c-surface: #fafafa;
  --c-text: #111111;
  --c-text-muted: #767676;
  --c-text-inverted: #ffffff;
  --c-border: #e5e5e5;
  --c-radius: 12px;
  --c-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.25);
  --c-max-width: 1000px;
  color-scheme: light;

  --c-brand: #1f1f1f;
  --c-brand-hover: #0c0c0c;
  --c-brand-strong: #030303;
  --c-link: var(--c-brand);
  --c-success: #4a4a4a;
  --c-danger: #6c6c6c;

  --c-on-brand: #ffffff;

  --c-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.25);
  --c-shadow-header: 0 28px 55px rgba(0, 0, 0, 0.65);
  --c-shadow-header-dark: 0 25px 50px rgba(0, 0, 0, 0.6);
  --c-shadow-overlay-light: rgba(0, 0, 0, 0.14);

  --c-scroll-thumb: rgba(255, 255, 255, 0.35);
  --c-scroll-thumb-hover: rgba(255, 255, 255, 0.75);

  --c-header-backdrop: rgba(15, 15, 15, 0.92);
  --c-header-backdrop-dark: rgba(10, 10, 10, 0.75);
  --c-header-border: rgba(255, 255, 255, 0.1);
  --c-header-border-dark: rgba(255, 255, 255, 0.08);
  --c-header-btn-border: rgba(255, 255, 255, 0.35);
  --c-header-btn-text: rgba(255, 255, 255, 0.95);
  --c-header-brand-text: #ffffff;
  --c-header-brand-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  --c-header-brand-gradient: linear-gradient(135deg, var(--c-brand), var(--c-brand-strong));

  --c-footer-bg: rgba(15, 15, 15, 0.55);
  --c-footer-border: rgba(255, 255, 255, 0.06);
  --c-footer-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --c-footer-heart-glow: rgba(255, 90, 140, 0.75);

  --c-hero-overlay: rgba(0, 0, 0, 0.45);
  --c-hero-card-border: rgba(255, 255, 255, 0.35);
  --c-service-card-bg: rgba(255, 255, 255, 0.02);
  --c-service-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  --c-glass-card-border: rgba(255, 255, 255, 0.06);


  --c-passkey-bg: rgba(255, 255, 255, 0.04);
  --c-passkey-border: rgba(255, 255, 255, 0.35);
  --c-passkey-border-focus: rgba(255, 255, 255, 0.9);
  --c-passkey-bg-hover: rgba(255, 255, 255, 0.06);
  --c-passkey-bg-drag: rgba(255, 255, 255, 0.08);
  --c-passkey-text: #ffffff;
  --c-passkey-text-muted: rgba(255, 255, 255, 0.7);
  --c-passkey-drag-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
  --c-passkey-drag-shadow-strong: 0 0 0 3px rgba(255, 255, 255, 0.28);
  --c-passkey-bg-light: #f7f7f7;
  --c-passkey-border-light: #d7d7d7;
  --c-passkey-border-focus-light: #dcdcdc;
  --c-passkey-bg-focus-light: #f2f2f2;
  --c-passkey-bg-drag-light: #e5e5e5;
  --c-passkey-text-dark: #111111;

  --c-profile-btn-bg: rgba(15, 23, 42, 0.7);
  --c-profile-btn-border: rgba(255, 255, 255, 0.35);
  --c-profile-btn-text: #f3f4f6;
  --c-profile-btn-hover-bg: rgba(255, 255, 255, 0.25);
  --c-profile-btn-hover-border: rgba(255, 255, 255, 0.45);
  --c-profile-btn-hover-shadow: 0 0 28px rgba(255, 255, 255, 0.15);
  --c-profile-card-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
  --c-profile-card-inner-bg: rgba(10, 14, 30, 0.82);
  --c-profile-card-inner-border: rgba(255, 255, 255, 0.15);
  --c-profile-card-inner-shadow: 0 20px 60px rgba(2, 6, 23, 0.55);
  --c-profile-overlay: rgba(255, 255, 255, 0.1);
  --c-profile-overlay-strong: rgba(255, 255, 255, 0.2);
  --c-profile-overlay-bright: rgba(255, 255, 255, 0.08);
  --c-profile-overlay-muted: rgba(255, 255, 255, 0.25);
  --c-profile-overlay-dense: rgba(255, 255, 255, 0.3);
  --c-profile-highlight-text: #ffffff;
  --c-profile-highlight-muted: rgba(248, 250, 252, 0.8);
  --c-profile-link-muted: #d7d7d7;
  --c-profile-danger-bg: rgba(0, 0, 0, 0.15);
  --c-profile-danger-bg-strong: rgba(0, 0, 0, 0.2);
  --c-profile-danger-border: rgba(0, 0, 0, 0.6);
  --c-profile-danger-border-strong: rgba(0, 0, 0, 0.7);
  --c-profile-danger-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
  --c-profile-action-bg: rgba(15, 23, 42, 0.92);
  --c-profile-action-border: rgba(255, 255, 255, 0.2);
  --c-profile-action-shadow: -4px 10px 40px rgba(0, 0, 0, 0.6);
  --c-profile-action-shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.5);
  --c-transparent: rgba(255, 255, 255, 0);
  --c-shadow-strong: rgba(0, 0, 0, 0.7);
  --c-shadow-medium: rgba(0, 0, 0, 0.5);
  --c-save-overlay-bg: rgba(3, 5, 12, 0.75);
  --c-save-card-bg: rgba(12, 16, 32, 0.95);
  --c-hcn-card-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  --c-profile-email-border: rgba(255, 255, 255, 0.18);
  --gradient-profile-toggle: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.95));
  --c-profile-toggle-shadow: 0 18px 45px rgba(4, 8, 24, 0.55);
  --c-profile-toggle-shadow-hover: 0 24px 55px rgba(4, 8, 24, 0.65);
  --c-profile-toggle-border: rgba(255, 255, 255, 0.4);
  --c-profile-toggle-border-hover: rgba(255, 255, 255, 0.85);
  --c-profile-toggle-outline: rgba(255, 255, 255, 0.9);
  --c-profile-accent-border: rgba(255, 255, 255, 0.6);
  --c-profile-accent-bg: rgba(255, 255, 255, 0.25);
  --c-profile-glass-btn-bg: rgba(15, 23, 42, 0.78);
  --c-profile-glass-icon-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
  --c-profile-glass-icon-shadow-hover: 0 0 18px rgba(255, 255, 255, 0.35);
  --c-profile-glass-icon-shadow-glow: 0 0 24px rgba(255, 255, 255, 0.5);
  --c-profile-overlay-heavy: rgba(255, 255, 255, 0.45);
  --c-profile-overlay-vivid: rgba(255, 255, 255, 0.85);
  --c-profile-icon-shadow-light-hover: 0 20px 36px rgba(0, 0, 0, 0.55);
  --c-profile-icon-shadow-light-glow: 0 0 20px rgba(255, 255, 255, 0.2);
  --c-document-panel-bg: rgba(15, 23, 42, 0.95);
  --c-document-panel-shadow: -6px 12px 35px rgba(0, 0, 0, 0.6);
  --c-document-panel-accent: rgba(255, 255, 255, 0.6);
  --c-document-panel-accent-shadow: -2px 0 8px rgba(0, 0, 0, 0.4);
  --c-signup-prefix-border: rgba(255, 255, 255, 0.14);

  --c-booked-bg: rgba(255, 255, 255, 0.15);
  --c-booked-border: rgba(255, 255, 255, 0.3);
  --c-booked-hover-bg: rgba(255, 255, 255, 0.25);
  --c-booked-text: rgba(255, 255, 255, 0.85);
  --c-booked-hover-text: rgba(255, 255, 255, 0.9);
  --c-booked-text-strong: #ffffff;

  --gradient-hero-base: radial-gradient(1200px 600px at -10% -10%, rgba(255, 255, 255, 0.15), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(0, 0, 0, 0.14), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.06));
  --gradient-hero-strong: radial-gradient(120% 90% at 15% -10%, rgba(255, 255, 255, 0.2), transparent 60%), radial-gradient(120% 90% at 85% 0%, rgba(0, 0, 0, 0.18), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.1));
  --gradient-hero-spot: radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.14), transparent), radial-gradient(120% 80% at 80% 0%, rgba(0, 0, 0, 0.14), transparent), linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.05));
  --gradient-hero-overlay-a: conic-gradient(from 0deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
  --gradient-hero-overlay-b: conic-gradient(from 180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.1));
  --gradient-cta: linear-gradient(135deg, #f5f5f5, #d9d9d9);
  --c-cta-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  --c-cta-shadow-strong: 0 10px 22px rgba(0, 0, 0, 0.30);
  --c-cta-shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.28);
  --gradient-marquee-left: linear-gradient(90deg, rgba(10, 12, 28, 0.9), transparent);
  --gradient-marquee-right: linear-gradient(270deg, rgba(10, 12, 28, 0.9), transparent);
  --c-text-shadow-strong: 0 2px 6px rgba(0, 0, 0, 0.9);

  /* legal/static page palette */
  --c-legal-bg: #0f0f0f;
  --c-legal-text: #e6e6e6;
  --c-legal-heading: #ffffff;
  --c-legal-link: #c4c4c4;
  --c-legal-muted: rgba(230, 230, 230, 0.85);

  /* reusable email snippet palette */
  --c-email-border: var(--c-border);
  --c-email-text: var(--c-text);
  --c-email-pin-bg: #111111;
  --c-email-pin-text: #ffffff;
  --c-email-link: var(--c-brand);
  --c-email-note-bg: #f8f8f8;
  --c-email-note-border: var(--c-border);
  --c-email-note-text: #333333;
  --c-email-note-radius: 12px;

  --c-input-bg: #ffffff;
  --c-input-text: #111111;
  --c-input-border: #d4d4d4;
  --c-input-placeholder: #6b7280;
  --c-input-disabled-bg: #f3f4f6;
  --c-input-disabled-text: #9ca3af;
  --c-input-disabled-border: #e5e7eb;
  --c-input-focus-border: #2563eb;

  --c-modal-overlay: rgba(15, 23, 42, 0.25);
  --c-modal-bg: #ffffff;
  --c-modal-border: rgba(15, 23, 42, 0.12);
  --c-modal-text: #111111;
  --c-modal-muted: #6b7280;

  --c-dropdown-bg: #ffffff;
  --c-dropdown-border: rgba(15, 23, 42, 0.14);
  --c-dropdown-text: #111111;
  --c-dropdown-hover-bg: rgba(37, 99, 235, 0.08);

  /* legacy aliases */
  --bg: var(--c-bg);
  --bg-elev: var(--c-surface);
  --text: var(--c-text);
  --muted: var(--c-text-muted);
  --line: var(--c-border);
  --brand: var(--c-brand);
  --brand-600: var(--c-brand-hover);
  --brand-700: var(--c-brand-strong);
  --success: var(--c-success);
  --warning: var(--c-text-muted);
  --danger: var(--c-danger);
  --radius: var(--c-radius);
  --shadow: var(--c-shadow-card);
  --focus: var(--c-focus-ring);
  --maxw: var(--c-max-width);
}

html[data-theme="dark"] {
  --c-bg: #0b1020;
  --c-surface: #0f162e;
  --c-text: #e5e7eb;
  --c-text-muted: #94a3b8;
  --c-border: #23304f;
  color-scheme: dark;

  --c-brand: #b5b5b5;
  --c-brand-hover: #d6d6d6;
  --c-brand-strong: #2c2c2c;

  --c-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
  --c-shadow-header: 0 25px 50px rgba(0, 0, 0, 0.6);

  --c-header-backdrop: rgba(6, 10, 24, 0.75);
  --c-header-border: rgba(255, 255, 255, 0.08);
  --c-footer-bg: rgba(6, 8, 16, 0.75);
  --c-footer-border: rgba(255, 255, 255, 0.08);

  --c-input-bg: #0d1320;
  --c-input-text: #e9eefc;
  --c-input-border: rgba(255, 255, 255, 0.18);
  --c-input-placeholder: rgba(226, 232, 240, 0.6);
  --c-input-disabled-bg: rgba(255, 255, 255, 0.06);
  --c-input-disabled-text: rgba(226, 232, 240, 0.65);
  --c-input-disabled-border: rgba(255, 255, 255, 0.14);
  --c-input-focus-border: rgba(112, 162, 255, 0.9);

  --c-modal-overlay: rgba(15, 23, 42, 0.72);
  --c-modal-bg: rgba(15, 23, 42, 0.92);
  --c-modal-border: rgba(255, 255, 255, 0.1);
  --c-modal-text: #ffffff;
  --c-modal-muted: rgba(255, 255, 255, 0.7);

  --c-dropdown-bg: rgba(15, 23, 42, 0.95);
  --c-dropdown-border: rgba(255, 255, 255, 0.18);
  --c-dropdown-text: #e9eefc;
  --c-dropdown-hover-bg: rgba(59, 130, 246, 0.2);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --c-bg: #0b1020;
    --c-surface: #0f162e;
    --c-text: #e5e7eb;
    --c-text-muted: #94a3b8;
    --c-border: #23304f;
    color-scheme: dark;

    --c-brand: #b5b5b5;
    --c-brand-hover: #d6d6d6;
    --c-brand-strong: #2c2c2c;

    --c-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
    --c-shadow-header: 0 25px 50px rgba(0, 0, 0, 0.6);

    --c-header-backdrop: rgba(6, 10, 24, 0.75);
    --c-header-border: rgba(255, 255, 255, 0.08);
    --c-footer-bg: rgba(6, 8, 16, 0.75);
    --c-footer-border: rgba(255, 255, 255, 0.08);

    --c-input-bg: #0d1320;
    --c-input-text: #e9eefc;
    --c-input-border: rgba(255, 255, 255, 0.18);
    --c-input-placeholder: rgba(226, 232, 240, 0.6);
    --c-input-disabled-bg: rgba(255, 255, 255, 0.06);
    --c-input-disabled-text: rgba(226, 232, 240, 0.65);
    --c-input-disabled-border: rgba(255, 255, 255, 0.14);
    --c-input-focus-border: rgba(112, 162, 255, 0.9);

    --c-modal-overlay: rgba(15, 23, 42, 0.72);
    --c-modal-bg: rgba(15, 23, 42, 0.92);
    --c-modal-border: rgba(255, 255, 255, 0.1);
    --c-modal-text: #ffffff;
    --c-modal-muted: rgba(255, 255, 255, 0.7);

    --c-dropdown-bg: rgba(15, 23, 42, 0.95);
    --c-dropdown-border: rgba(255, 255, 255, 0.18);
    --c-dropdown-text: #e9eefc;
    --c-dropdown-hover-bg: rgba(59, 130, 246, 0.2);
  }
}

.btn.booked {
  background-color: var(--c-booked-bg);
  color: var(--c-booked-text);
  border: 1px solid var(--c-booked-border);
  cursor: not-allowed;
  opacity: .95;
  font-weight: 600;
}

.btn.booked:hover {
  background-color: var(--c-booked-hover-bg);
  color: var(--c-booked-hover-text);
}

/* =========================================================
   2) Base / element defaults (theme-only)
   ========================================================= */
html{
  color-scheme: light;
}
html[data-theme="dark"]{
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    color-scheme: dark;
  }
}
body{
  color:var(--text);
  background:var(--bg);
}

a{ color:var(--brand); }
small,.muted{ color:var(--muted); }

/* =========================================================
   3) Header & navigation colors
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1200;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
}

.brand-mark{
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  color:#fff; font-weight:700; box-shadow:var(--shadow);
}

.btn.mild{
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn.mild:hover{
  background: color-mix(in oklab, var(--bg-elev) 82%, var(--brand) 18%);
}



html[data-theme="dark"] .site-header .primary-nav .btn,
html[data-theme="dark"] .site-header .admin-topnav .btn{
  color: rgba(244,247,255,0.95) !important;
  border-color: rgba(255,255,255,0.55) !important;
  background: rgba(15,23,42,0.65) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.65) !important;
}

html[data-theme="dark"] .site-header .primary-nav .btn:hover,
html[data-theme="dark"] .site-header .admin-topnav .btn:hover{
  background: rgba(248,250,252,0.08) !important;
}

html[data-theme="dark"] .site-header .brand-title,
html[data-theme="dark"] .site-header .brand-subtitle{
  color: rgba(229,239,255,0.95) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65) !important;
}

@media (prefers-color-scheme: dark){
  html:not([data-theme]) .site-header .primary-nav .btn,
  html:not([data-theme]) .site-header .admin-topnav .btn{
    color: rgba(244,247,255,0.95) !important;
    border-color: rgba(255,255,255,0.55) !important;
    background: rgba(15,23,42,0.65) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.65) !important;
  }

  html:not([data-theme]) .site-header .primary-nav .btn:hover,
  html:not([data-theme]) .site-header .admin-topnav .btn:hover{
    background: rgba(248,250,252,0.08) !important;
  }

  html:not([data-theme]) .site-header .brand-title,
  html:not([data-theme]) .site-header .brand-subtitle{
    color: rgba(229,239,255,0.95) !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.65) !important;
  }
}

.site-header .primary-nav .btn.is-static{
  background: transparent !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

.site-header .primary-nav .btn,
.site-header .primary-nav .btn.sm,
.site-header .admin-topnav .btn,
.site-header .admin-topnav .btn.sm{
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .03em;
  min-width: 0;
  border: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* Home page theme overrides */
html{
  background-color: var(--bg);
}
body{
  background-color: var(--bg);
}
@media (prefers-color-scheme: dark){
  html{ background-color: #0c1224; }
  body{ background-color: #0c1224; }
}
html[data-theme="dark"]{
  background-color: #0c1224;
}
html[data-theme="dark"] body{
  background-color: #0c1224;
}

.hero-animated{
  background: var(--bg-elev);
}

.card.glass{
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.card.glass::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(6,9,16,0.92);
  z-index: 0;
  mask-image:
    linear-gradient(180deg,
      transparent 0px,
      rgba(0,0,0,0.6) 6px,
      black 12px,
      black calc(100% - 12px),
      rgba(0,0,0,0.6) calc(100% - 6px),
      transparent 100%),
    linear-gradient(90deg,
      transparent 0px,
      rgba(0,0,0,0.6) 6px,
      black 12px,
      black calc(100% - 12px),
      rgba(0,0,0,0.6) calc(100% - 6px),
      transparent 100%);
  mask-mode: alpha;
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(180deg,
      transparent 0px,
      rgba(0,0,0,0.6) 6px,
      black 12px,
      black calc(100% - 12px),
      rgba(0,0,0,0.6) calc(100% - 6px),
      transparent 100%),
    linear-gradient(90deg,
      transparent 0px,
      rgba(0,0,0,0.6) 6px,
      black 12px,
      black calc(100% - 12px),
      rgba(0,0,0,0.6) calc(100% - 6px),
      transparent 100%);
  -webkit-mask-composite: intersect;
}
.card.glass::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.24) 0%,
      rgba(255,255,255,0.16) 12%,
      rgba(255,255,255,0.08) 28%,
      rgba(255,255,255,0) 45%,
      rgba(255,255,255,0) 100%),
    linear-gradient(0deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,0) 100%);
  mix-blend-mode: screen;
  opacity: 0.35;
  z-index: 0;
}

#services.card.glass::before,
#walkins.card.glass::before{
  backdrop-filter: none;
}

.icon8-inline{
  filter: none;
}

.icon8-inline:hover,
.btn:hover .icon8-inline,
.icon-line:hover .icon8-inline{
  filter: invert(1) hue-rotate(180deg);
}

.icon-radial:hover .icon8-inline,
.dev-note__close:hover .icon8-inline{
  filter: invert(1) hue-rotate(180deg);
}

.icon8-grid img{
  filter: grayscale(0.1);
}
.icon8-grid img:hover{
  filter: invert(1) hue-rotate(180deg);
}
.phone-link{
  color: #dce9ff;
}
.contact-label{
  color: #cfe4ff;
}
.contact-value{
  color: #e9eefc;
}

.avail-chip{
  border:1px solid rgba(120,140,150,.35);
  background:rgba(120,140,150,.15);
}
.avail-chip.has{
  border-color: rgba(40,200,120,.45);
  background: rgba(40,200,120,.18);
  box-shadow: 0 0 0 2px rgba(40,200,120,0.12) inset;
}
.avail-chip.none{
  border-color: rgba(140,160,170,.35);
  background: rgba(140,160,170,.12);
  color: rgba(255,255,255,.66);
  opacity: .6;
}
.avail-chip .badge{
  background: rgba(40,200,120,.9);
  color: #0b1c13;
  border: 1px solid rgba(0,0,0,.2);
}

.avail-chip[data-tip]::after{
  background: rgba(12,16,24,.96);
  color:#e9eefc;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.avail-chip[data-tip]::before{
  border-top-color:rgba(12,16,24,.96);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.avail-chip.none::after{ background: rgba(30,34,42,.96); border-color: rgba(255,255,255,.08); }
.avail-chip.none::before{ border-top-color: rgba(30,34,42,.96); }

@media (max-width:560px){
  .avail-chip[data-tip]::before{ border-bottom-color:rgba(12,16,24,.96); border-top-color:transparent; }
  .avail-chip.none::before{ border-bottom-color: rgba(30,34,42,.96); }
}

/* =========================================================
   4) Layout & components (cards, grids, buttons)
   ========================================================= */

.card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* Archive (navy blue tone) */
.btn.primary {
  background-color: #1e3a5f;   /* deep navy */
  color: #f1f5f9;
  border-color: #2b4a72;
}
.btn.primary:hover {
  background-color: #2b4a72;   /* lighter navy on hover */
}

/* Delete (refined danger red) */
.btn.danger {
  background-color: #8b2d2d;   /* deep red */
  color: #fff;
  border-color: #a84040;
}
.btn.danger:hover {
  background-color: #a84040;   /* lighter red hover */
}

/* Secondary (refresh) */
.btn.secondary {
  background-color: transparent;
  color: #cbd5e0;
  border-color: #4a5568;
}
.btn.secondary:hover {
  background-color: #2d3748;
  color: #fff;
}

.btn:active{ background:var(--brand-700); }
.btn.secondary{
  background:transparent;
  color:var(--text);
  border-color:var(--line);
}
.btn.secondary:hover{ background:var(--bg-elev); }

.btn.sm1{
  background: color-mix(in oklab, var(--brand) 55%, var(--bg-elev));
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--brand-600) 30%, var(--line));
}

/* Compact button row for quick add calendar */
/* Make secondary buttons behave like links on hover */
.btn.secondary:hover {
  background: var(--bg-elev);
  text-decoration: underline;   /* NEW: underline effect */
}

.btn[disabled],
.btn.booked {
  cursor: not-allowed;
  opacity: .55;
  text-decoration: none;
}

/* --- Softer primary button (less bright) --- */
.btn.soft1 {
  background: color-mix(in oklab, var(--brand) 55%, var(--bg-elev));
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--brand-600) 30%, var(--line));
}
.btn.soft1:hover {
  background: color-mix(in oklab, var(--brand) 30%, var(--bg-elev));
}

.btn.soft {
  background: color-mix(in oklab, var(--brand) 22%, var(--bg-elev));
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--brand-600) 30%, var(--line));
}
.btn.soft:hover {
  background: color-mix(in oklab, var(--brand) 30%, var(--bg-elev));
}

/* --- Ghost / subtle button --- */
.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--brand-600) 25%, var(--line));
}
.btn.ghost:hover {
  background: color-mix(in oklab, var(--bg-elev) 70%, transparent);
  text-decoration: underline;
}

/* signup.css or your global styles.css */
.btn[disabled]{
  opacity:.45;
  filter:saturate(.6);
  cursor:not-allowed;
  pointer-events:none;
}

/* --- Signup agreement error layout fix --- */

.pw-toggle:hover,
.pw-toggle:focus-visible { opacity: 1; outline: none; }

/* =========================================================
   5) Forms (theme colors)
   ========================================================= */
input, select, textarea{
  border:1px solid var(--c-input-border);
  background:var(--c-input-bg);
  color:var(--c-input-text);
}
input::placeholder,
textarea::placeholder{
  color: var(--c-input-placeholder);
  opacity: 1;
}
input:disabled,
select:disabled,
textarea:disabled{
  background: var(--c-input-disabled-bg);
  color: var(--c-input-disabled-text);
  border-color: var(--c-input-disabled-border);
}
input:focus,
select:focus,
textarea:focus{
  border-color: var(--c-input-focus-border);
}
select option{
  background: var(--c-input-bg);
  color: var(--c-input-text);
}

/* Compact form style for signup/login */
.auth-form input,
.auth-form label,
.auth-form button,
.auth-form small {
  font-size: 1rem;   /* ↓ about 2px smaller */
}

/* ---- form feedback helpers ---- */
.input-error{ border-color:var(--danger) !important; }

/* =========================================================
   6) Tables
   ========================================================= */

/* Outer wrapper: borders + rounded corners + horizontal scroll if needed */
.table-wrap{
  border:1px solid var(--line);
}

/* Base table */
table{
  background:var(--bg);
}

/* Cells */
th,td{
  border-bottom:1px solid var(--line);
}

/* Header */
th{
  color:var(--muted);
}

/* Row hover */
tr:hover td{
  background:color-mix(in oklab, var(--bg-elev) 60%, transparent);
}

/* Admin "All bookings" table — match dashboard spacing */
/* Admin: booked slot tile */
.btn.booked {
  background: #4f1b1b;       /* dark red */
  border-color: #cc5b5b;
  color: #fff;
}
.btn.booked .hi  { color: #fff; font-weight: 600; text-decoration: underline; }
.btn.booked .tiny { opacity: .9; }
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .btn.booked {
    background: rgba(248,215,218,0.72);
    border-color: rgba(239,182,190,0.8);
    color: rgba(0,0,0,0.88);
  }
  html:not([data-theme]) .btn.booked .hi {
    color: rgba(0,0,0,0.88);
  }
}
html[data-theme="light"] .btn.booked {
  background: rgba(248,215,218,0.72);
  border-color: rgba(239,182,190,0.8);
  color: rgba(0,0,0,0.88);
}
html[data-theme="light"] .btn.booked .hi {
  color: rgba(0,0,0,0.88);
}

/* Status toggle button look */
.status-btn.approved { background: #1f5132; border-color: #49b36b; color: #fff; }

.status-badge {
  font-size: 0.85em;      /* shrink text */
  border: 1px solid var(--line);
  background: var(--bg-elev);
}

.status-badge .shield {
  font-size: 0.9em;       /* shrink shield emoji */
  line-height: 1;
}

.status-btn.approved {
  background: var(--success);
  border-color: transparent;
}
.status-btn.approved:hover {
  background: color-mix(in oklab, var(--success) 86%, black 14%);
}

/* =========================================================
   7) Flash messages
   ========================================================= */

/* Base style for any flash message */
.flash{
  border:1px solid var(--line);     /* thin gray border to separate it from content */
  background:var(--bg-elev);        /* slightly elevated background color */
}

/* By default, insert an info emoji at the start of the box */
.flash::before{
  content:"ℹ️";                     /* Unicode info icon */
}

/* If the element has both .flash and .error, override with a red stop icon */
.flash.error::before{
  content:"⛔";                     /* red “no entry” symbol */
}

/* If it has .flash and .warn, override with a warning triangle */
.flash.warn::before{
  content:"⚠️";                     /* yellow warning triangle */
}

/* If it has .flash and .success, override with a checkmark */
.flash.success::before{
  content:"✅";                     /* green check mark */
}

/* =========================================================
   8) Admin / tab helpers  —  CLEAN REPLACEMENT
   ========================================================= */

/* Admin — top toolbar */
.admin-toolbar{
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* ----- “Prestige” card sheen used on admin hero/email composer */
.prestige{
  background:
    radial-gradient(1200px 400px at -10% -20%, rgba(99,102,241,.08), transparent 60%),
    radial-gradient(900px 300px at 110% 120%, rgba(20,184,166,.08), transparent 60%),
    var(--bg-elev);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* =========================================
   Chips (Cloudflare-like) + suggestions
   ========================================= */
.chip{
  background:color-mix(in oklab, var(--bg-elev) 80%, transparent);
  border:1px solid var(--line);
}
.chip .chip-x{
  color:var(--text);
  background: color-mix(in oklab, var(--bg-elev) 70%, transparent);
  border:1px solid var(--line);
}
.chip .chip-x:hover,
.chip .chip-x:focus-visible{
  background: color-mix(in oklab, var(--danger) 18%, var(--bg));
  color:#fff; outline:none; box-shadow:var(--focus);
}

/* suggestions dropdown */
.suggest{
  border:1px solid var(--line);
  background:var(--bg); box-shadow:var(--shadow);
}
.suggest-item.active, .suggest-item:hover{
  background:color-mix(in oklab, var(--bg-elev) 70%, transparent);
}
.s-email{ font-weight:700; }
.s-name{ color:var(--muted); }
.s-badge{ font-size:.85em; text-transform:capitalize; }
.s-badge.approved{ background:rgba(16,185,129,.15); }
.s-badge.pending{  background:rgba(245,158,11,.15); }
.s-badge.blocked{  background:rgba(239,68,68,.15); }

/* Small tooltip used near labels */
.tip{
  font-size:12px;
  cursor:help;
  color:var(--muted);
  border:1px solid var(--line);
}
.tip:focus-visible{ outline:none; box-shadow:var(--focus); }
.tip-pop{
  white-space:normal;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  box-shadow:var(--shadow);
}

/* Softer voicemail button tone */
.btn.mild{
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn.mild:hover{
  background: color-mix(in oklab, var(--bg-elev) 82%, var(--brand) 18%);
}

/* Keep the admin buttons compact like auth buttons */
/* =========================================================
   8.5) Admin color themes (pagewide)
   ========================================================= */
body.admin-page #all-bookings [role="tab"][aria-selected="true"],
body.admin-page #all-bookings [data-tab].btn:not(.secondary) {
  border-color: var(--brand);
}

body.admin-page .call-fab {
  border: 1px solid var(--c-border);
  background: linear-gradient(135deg,
    color-mix(in oklab, rgba(40,200,120,0.28) 40%, var(--c-surface) 60%),
    color-mix(in oklab, rgba(80,140,255,0.3) 40%, var(--c-surface) 60%));
  color: var(--c-text);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

body.admin-page .call-bubble {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: 0 18px 36px rgba(0,0,0,0.45);
}
body.admin-page .call-bubble .close-bubble {
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
body.admin-page .call-bubble .card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}
body.admin-page .call-bubble .missed-entry {
  border: 1px solid var(--c-border);
  background: color-mix(in oklab, var(--c-surface) 90%, transparent);
}
body.admin-page .call-bubble .missed-entry__remove {
  border: 1px solid var(--c-border);
  color: #f87171;
}
body.admin-page .call-bubble .missed-entry__remove:hover {
  background: rgba(248,113,113,0.15);
  color: #fecaca;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) body.admin-page .call-bubble .missed-entry__remove {
    color: #dc2626;
    border-color: rgba(220,38,38,0.35);
  }
  html:not([data-theme]) body.admin-page .call-bubble .missed-entry__remove:hover {
    background: rgba(220,38,38,0.08);
    color: #b91c1c;
  }
}
html[data-theme="light"] body.admin-page .call-bubble .missed-entry__remove {
  color: #dc2626;
  border-color: rgba(220,38,38,0.35);
}
html[data-theme="light"] body.admin-page .call-bubble .missed-entry__remove:hover {
  background: rgba(220,38,38,0.08);
  color: #b91c1c;
}

body.admin-page .floating-panel {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
body.admin-page .floating-panel .close-bubble {
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
body.admin-page .floating-panel .card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}
body.admin-page .floating-panel .online-list li {
  border-bottom: 1px solid var(--c-border);
}
body.admin-page .floating-panel .online-list li.floating-requested {
  border-color: rgba(245, 158, 11, 0.7);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35);
}
body.admin-page .floating-user-link {
  color: var(--c-text);
}
body.admin-page .floating-user-link:hover,
body.admin-page .floating-user-link:focus {
  color: color-mix(in oklab, var(--c-text) 70%, #2563eb 30%);
}
body.admin-page .floating-panel .meta-chip {
  background: color-mix(in oklab, var(--c-surface) 85%, transparent);
  border: 1px solid var(--c-border);
}
body.admin-page .floating-panel .meta-chip.meta-chip-requested {
  border-color: rgba(245, 158, 11, 0.8);
  background: rgba(245, 158, 11, 0.18);
  color: #ffd68f;
}
body.admin-page .floating-panel .online-status {
  border: 1px solid var(--c-border);
}
body.admin-page .floating-panel .online-status.approved {
  border-color: rgba(40,200,120,0.6);
  color: rgba(140,255,190,0.9);
}
body.admin-page .floating-panel .online-status.blocked {
  border-color: rgba(255,120,120,0.7);
  color: rgba(255,180,180,0.9);
}
body.admin-page .floating-panel .online-status.pending {
  border-color: rgba(180,190,210,0.6);
  color: rgba(200,210,230,0.9);
}
body.admin-page .floating-panel .floating-delete-btn.requested {
  border-color: rgba(239,68,68,0.9);
  background: rgba(239,68,68,0.95);
  color: #fff;
}
body.admin-page .floating-panel .floating-delete-btn.requested:hover {
  background: rgba(239,68,68,1);
}

body.admin-page .shield {
  background-color: rgba(255, 255, 255, 0.05);
  background-image: url('/static/img/Icons8/icons8-shield-50.png');
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
}
body.admin-page .shield:focus,
body.admin-page .shield:hover {
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.9);
}
body.admin-page .shield-hcn {
  background-image: url('/static/img/Icons8/icons8-health-shield-50.png');
  background-color: rgba(22, 163, 74, 0.25);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.6);
  border-color: rgba(34, 197, 94, 0.5);
}
body.admin-page .shield-hcn:focus,
body.admin-page .shield-hcn:hover {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.85);
}

body.admin-page .admin-delete-confirm__backdrop {
  background: var(--c-modal-overlay);
}
body.admin-page .admin-delete-confirm__card {
  background: var(--c-modal-bg);
  border: 1px solid var(--c-modal-border);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  color: var(--c-modal-text);
}
body.admin-page .admin-delete-confirm__card p {
  color: var(--c-modal-muted);
}
body.admin-page .admin-delete-confirm__card input {
  border: 1px solid var(--c-input-border);
  background: var(--c-input-bg);
  color: var(--c-input-text);
}

body.admin-page .fab-bubble {
  border: 1px solid var(--c-border);
  background: linear-gradient(135deg,
    color-mix(in oklab, rgba(80,140,255,0.3) 40%, var(--c-surface) 60%),
    color-mix(in oklab, rgba(40,200,120,0.25) 40%, var(--c-surface) 60%));
  color: var(--c-text);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
body.admin-page .fab-bubble .fab-count {
  background: color-mix(in oklab, var(--c-surface) 70%, var(--c-text) 8%);
  color: var(--c-text);
}

body.admin-page .btn.danger {
  background: color-mix(in oklab, crimson 75%, white 0%);
  border-color: color-mix(in oklab, crimson 60%, black 10%);
  color: #fff;
  box-shadow: 0 0 0 rgba(255, 77, 77, 0);
}
body.admin-page .btn.danger:hover {
  background: color-mix(in oklab, crimson 85%, black 5%);
  border-color: color-mix(in oklab, crimson 90%, black 15%);
  box-shadow: 0 0 18px 6px rgba(255, 115, 115, 0.55);
  filter: drop-shadow(0 0 10px rgba(255, 115, 115, 0.45));
}

body.admin-page .notif-badge {
  background: #ef4444;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

body.admin-page .glass-modal {
  background: var(--c-modal-overlay);
}
body.admin-page .glass-modal .modal-content {
  background: var(--c-modal-bg);
  border: 1px solid var(--c-modal-border);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
  color: var(--c-modal-text);
  --c-input-bg: var(--c-modal-bg);
  --c-input-text: var(--c-modal-text);
  --c-input-border: var(--c-modal-border);
  --c-input-placeholder: var(--c-modal-muted);
  --c-input-disabled-bg: color-mix(in oklab, var(--c-modal-bg) 88%, var(--c-modal-text) 6%);
  --c-input-disabled-text: var(--c-modal-muted);
  --c-input-disabled-border: var(--c-modal-border);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) body.admin-page .glass-modal .modal-content {
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  }
}
html[data-theme="light"] body.admin-page .glass-modal .modal-content {
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}
body.admin-page #fullBookModal .modal-content .muted,
body.admin-page .glass-modal .modal-content .muted {
  color: var(--c-modal-muted);
}
body.admin-page #fullBookModal .modal-content .btn.icon,
body.admin-page .glass-modal .modal-content h4,
body.admin-page .glass-modal .modal-content label,
body.admin-page .glass-modal .modal-content .booking-time-value,
body.admin-page .glass-modal .modal-content .hour-label {
  color: var(--c-modal-text);
}
body.admin-page #fullBookModal .glass-round-btn {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.25);
  background: color-mix(in oklab, var(--c-modal-bg) 85%, var(--c-modal-text) 6%);
  color: var(--c-modal-text);
}
body.admin-page #fullBookModal .glass-round-btn:hover {
  border-color: rgba(59,130,246,0.9);
  background: rgba(59,130,246,0.2);
}
body.admin-page .glass-modal .modal-content select,
body.admin-page .glass-modal .modal-content textarea,
body.admin-page .glass-modal .modal-content input,
body.admin-page .glass-modal .modal-content option {
  color: var(--c-input-text);
  background: var(--c-input-bg);
}

body.admin-page .action-modal {
  background: var(--c-modal-overlay);
}

body.admin-page .action-modal__card {
  background: var(--c-modal-bg);
  color: var(--c-modal-text);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  border: 1px solid var(--c-modal-border);
}

body.admin-page .action-modal__input-wrap input {
  border: 1px solid var(--c-input-border);
  background: var(--c-input-bg);
  color: var(--c-input-text);
}

body.admin-page .admin-main .search-section input {
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  color: var(--c-input-text);
}

body.admin-page .admin-main .search-section input:focus {
  border-color: rgba(59,130,246,0.8);
}

body.admin-page .time-chip {
  border: 1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.6);
  color: #e9eefc;
}

body.admin-page .time-chip small {
  color: #7dd3fc;
}
body.admin-page .time-chip-book {
  background: rgba(59,130,246,0.95);
  color: #fff;
  box-shadow: 0 0 0 rgba(59,130,246,0);
}
body.admin-page .time-chip-book:hover {
  box-shadow: 0 0 10px 3px rgba(59,130,246,0.6);
}
body.admin-page .time-chip-book-delete {
  background: rgba(248,113,113,0.95);
  box-shadow: 0 0 0 rgba(248,113,113,0);
}
body.admin-page .time-chip-book-delete:hover {
  box-shadow: 0 0 10px 3px rgba(248,113,113,0.6);
}

body.admin-page .time-chip--booked {
  border-color: rgba(244,114,182,0.7);
  background: rgba(244,114,182,0.14);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) body.admin-page .time-chip--booked {
    background: rgba(248,215,218,0.55);
    border-color: rgba(239,182,190,0.7);
    color: rgba(15,23,42,0.85);
  }
}
html[data-theme="light"] body.admin-page .time-chip--booked {
  background: rgba(248,215,218,0.55);
  border-color: rgba(239,182,190,0.7);
  /* color already set to #000000 via grouped rule below */
}

body.admin-page .mini-actions .btn.secondary {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
  color: #e9eefc;
}
body.admin-page .mini-actions .btn:hover,
body.admin-page .pending-card .mini-actions .btn:hover {
  background: rgba(255,255,255,0.12);
}

body.admin-page .queue-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
body.admin-page .queue-card__subtitle {
  color: rgba(255,255,255,0.7);
}
body.admin-page .queue-card__badge {
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.35);
  color: #86efac;
}
body.admin-page .queue-card__legend {
  color: rgba(255,255,255,0.65);
}
body.admin-page .queue-entry {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
}
body.admin-page .queue-priority-chip {
  color: rgba(148, 163, 184, 0.9);
}
body.admin-page .queue-index {
  color: rgba(255,255,255,0.6);
}
body.admin-page .admin-rail--left .pending-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.95);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
body.admin-page .pending-card.open,
body.admin-page .pending-card.opened {
  border-color: rgba(56,189,248,0.5);
}

/* =========================================================
   10) Utilities (spacing, flex, widths, minor type)
   ========================================================= */

/* ---- Text & Emphasis ---- */
.muted{ color:var(--muted); }         /* Softer text */
.text-danger{ color:var(--danger);}   /* Red text for errors/warnings */
.text-success{ color:var(--success);} /* Green text for success */
.fw-700{ font-weight:700; }           /* Bold */
.fw-400{ font-weight:400; }           /* Normal */
.fs-90{ font-size:.9rem; }            /* Slightly smaller type */
.tc{ text-align:center; }             /* Center text */
.nowrap{ white-space:nowrap; }        /* Prevent line wrapping */

/* ---- Size / Visibility ---- */
/* same visual as the booked tile, but for rows/cards */
.bad-actor,
tr.bad-actor td {
  background-color: var(--c-booked-bg) !important;
  color: var(--c-booked-text) !important;
}
.bad-actor a { color: #fff; text-decoration: underline; }

/* tiny helper to make <span class="chip">N</span> look nice */
.chip {
  background: var(--bg-secondary, #222);
  border: 1px solid var(--line);
}



/* hero cards keep the default glass background */
.hero-animated{
  background: var(--bg-elev);
  position: relative;
  overflow: hidden;
}
.hero-animated::before,
.hero-animated::after{
  content:none;
}

/* Optional glass look for inner cards sitting on the hero */
.card.glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.06);
}

/* ===== Sticky mini-nav ===== */
.mini-nav {
  background: rgba(12,16,24,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
}

html[data-theme="light"] .mini-nav {
  background: rgba(255, 255, 255, 0.6);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) .mini-nav {
    background: rgba(255, 255, 255, 0.6);
  }
}

.mini-nav .btn.bright {
  background: linear-gradient(180deg, rgba(40,200,120,0.9), rgba(30,180,110,0.9));
  color: #7b91ad;
  border: 1px solid rgba(0,0,0,.25);
}

/* ===== Testimonials ===== */
.quotes blockquote {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

/* ---- Visit (map) ---- */
.visit-wrap .map-wrap {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

/* ---- Services grid ---- */
.svc-card {
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.svc-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border-color: rgba(40,200,120,.35);
}
.svc-img {
  background-color: var(--bg-elev);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* legacy mouse-reactive layers removed */

/* Individual images */
.svc-med      { background-image: url("../img/services/med.png"); }
.svc-icbc     { background-image: url("../img/services/icbc.png"); }
.svc-minor    { background-image: url("../img/services/minor.png"); }
.svc-worksafe { background-image: url("../img/services/worksafe.png"); }
.svc-driver   { background-image: url("../img/services/driver.png"); }
.svc-tb       { background-image: url("../img/services/tb.png"); }
.svc-ultra    { background-image: url("../img/services/ultra.png"); }

/* ===== Scroll-reveal pop ===== */

/* =========================================================
   LIGHT MODE
   Preserves the existing structure and remaps dark-theme colors
   to white / soft rose / black.
   ========================================================= */
html[data-theme="light"] {
  --c-bg: #ffffff;
  --c-surface: #fffafb;
  --c-text: #000000;
  --c-text-muted: #5f5458;
  --c-text-inverted: #000000;
  --c-border: #efcfd6;
  --c-focus-ring: 0 0 0 3px rgba(244, 194, 194, 0.45);
  color-scheme: light;

  --c-brand: #f4c2c2;
  --c-brand-hover: #efb6be;
  --c-brand-strong: #e7a6b2;
  --c-link: #000000;
  --c-success: #f4c2c2;
  --c-danger: #efb6be;
  --c-on-brand: #000000;

  --c-shadow-card: 0 1px 2px rgba(231, 166, 178, 0.18), 0 8px 24px rgba(231, 166, 178, 0.12);
  --c-shadow-header: 0 25px 50px rgba(231, 166, 178, 0.18);
  --c-shadow-header-dark: 0 25px 50px rgba(231, 166, 178, 0.16);
  --c-shadow-overlay-light: rgba(231, 166, 178, 0.12);

  --c-scroll-thumb: rgba(231, 166, 178, 0.35);
  --c-scroll-thumb-hover: rgba(231, 166, 178, 0.55);

  --c-header-backdrop: rgba(255, 255, 255, 0.94);
  --c-header-backdrop-dark: rgba(255, 250, 251, 0.9);
  --c-header-border: rgba(239, 182, 190, 0.55);
  --c-header-border-dark: rgba(239, 182, 190, 0.38);
  --c-header-btn-border: rgba(239, 182, 190, 0.7);
  --c-header-btn-text: #000000;
  --c-header-brand-text: #000000;
  --c-header-brand-shadow: 0 2px 8px rgba(231, 166, 178, 0.18);
  --c-header-brand-gradient: linear-gradient(135deg, #f8d7da, #f4c2c2);

  --c-footer-bg: rgba(255, 250, 251, 0.94);
  --c-footer-border: rgba(239, 182, 190, 0.35);
  --c-footer-shadow: 0 10px 30px rgba(231, 166, 178, 0.15);
  --c-footer-heart-glow: rgba(239, 182, 190, 0.6);

  --c-hero-overlay: rgba(255, 250, 251, 0.6);
  --c-hero-card-border: rgba(239, 182, 190, 0.5);
  --c-service-card-bg: rgba(248, 215, 218, 0.35);
  --c-service-card-shadow: 0 10px 30px rgba(231, 166, 178, 0.12);
  --c-glass-card-border: rgba(239, 182, 190, 0.3);

  --c-passkey-bg: rgba(248, 215, 218, 0.3);
  --c-passkey-border: rgba(239, 182, 190, 0.65);
  --c-passkey-border-focus: rgba(231, 166, 178, 0.85);
  --c-passkey-bg-hover: rgba(244, 194, 194, 0.38);
  --c-passkey-bg-drag: rgba(244, 194, 194, 0.46);
  --c-passkey-text: #000000;
  --c-passkey-text-muted: rgba(0, 0, 0, 0.7);
  --c-passkey-drag-shadow: 0 0 0 3px rgba(244, 194, 194, 0.22);
  --c-passkey-drag-shadow-strong: 0 0 0 3px rgba(244, 194, 194, 0.32);
  --c-passkey-bg-light: #fffafb;
  --c-passkey-border-light: #efcfd6;
  --c-passkey-border-focus-light: #efb6be;
  --c-passkey-bg-focus-light: #fef3f5;
  --c-passkey-bg-drag-light: #fbe6ea;
  --c-passkey-text-dark: #000000;

  --c-profile-btn-bg: rgba(248, 215, 218, 0.7);
  --c-profile-btn-border: rgba(239, 182, 190, 0.65);
  --c-profile-btn-text: #000000;
  --c-profile-btn-hover-bg: rgba(244, 194, 194, 0.65);
  --c-profile-btn-hover-border: rgba(231, 166, 178, 0.8);
  --c-profile-btn-hover-shadow: 0 0 28px rgba(231, 166, 178, 0.18);
  --c-profile-card-shadow: 0 0 12px rgba(231, 166, 178, 0.18);
  --c-profile-card-inner-bg: rgba(255, 250, 251, 0.96);
  --c-profile-card-inner-border: rgba(239, 182, 190, 0.4);
  --c-profile-card-inner-shadow: 0 20px 60px rgba(231, 166, 178, 0.16);
  --c-profile-overlay: rgba(244, 194, 194, 0.14);
  --c-profile-overlay-strong: rgba(244, 194, 194, 0.2);
  --c-profile-overlay-bright: rgba(248, 215, 218, 0.22);
  --c-profile-overlay-muted: rgba(244, 194, 194, 0.28);
  --c-profile-overlay-dense: rgba(239, 182, 190, 0.34);
  --c-profile-highlight-text: #000000;
  --c-profile-highlight-muted: rgba(0, 0, 0, 0.72);
  --c-profile-link-muted: #6b5d62;
  --c-profile-danger-bg: rgba(248, 215, 218, 0.68);
  --c-profile-danger-bg-strong: rgba(244, 194, 194, 0.78);
  --c-profile-danger-border: rgba(239, 182, 190, 0.85);
  --c-profile-danger-border-strong: rgba(231, 166, 178, 0.95);
  --c-profile-danger-shadow: 0 0 12px rgba(231, 166, 178, 0.2);
  --c-profile-action-bg: rgba(255, 250, 251, 0.96);
  --c-profile-action-border: rgba(239, 182, 190, 0.35);
  --c-profile-action-shadow: -4px 10px 40px rgba(231, 166, 178, 0.18);
  --c-profile-action-shadow-soft: 0 12px 28px rgba(231, 166, 178, 0.14);
  --c-transparent: rgba(255, 255, 255, 0);
  --c-shadow-strong: rgba(231, 166, 178, 0.28);
  --c-shadow-medium: rgba(231, 166, 178, 0.18);
  --c-save-overlay-bg: rgba(255, 250, 251, 0.82);
  --c-save-card-bg: rgba(255, 255, 255, 0.98);
  --c-hcn-card-shadow: 0 25px 60px rgba(231, 166, 178, 0.16);
  --c-profile-email-border: rgba(239, 182, 190, 0.35);
  --gradient-profile-toggle: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 194, 194, 0.92));
  --c-profile-toggle-shadow: 0 18px 45px rgba(231, 166, 178, 0.16);
  --c-profile-toggle-shadow-hover: 0 24px 55px rgba(231, 166, 178, 0.2);
  --c-profile-toggle-border: rgba(239, 182, 190, 0.55);
  --c-profile-toggle-border-hover: rgba(231, 166, 178, 0.75);
  --c-profile-toggle-outline: rgba(231, 166, 178, 0.72);
  --c-profile-accent-border: rgba(239, 182, 190, 0.65);
  --c-profile-accent-bg: rgba(248, 215, 218, 0.4);
  --c-profile-glass-btn-bg: rgba(248, 215, 218, 0.68);
  --c-profile-glass-icon-shadow: 0 0 12px rgba(231, 166, 178, 0.18);
  --c-profile-glass-icon-shadow-hover: 0 0 18px rgba(231, 166, 178, 0.26);
  --c-profile-glass-icon-shadow-glow: 0 0 24px rgba(231, 166, 178, 0.32);
  --c-profile-overlay-heavy: rgba(244, 194, 194, 0.4);
  --c-profile-overlay-vivid: rgba(239, 182, 190, 0.75);
  --c-profile-icon-shadow-light-hover: 0 20px 36px rgba(231, 166, 178, 0.18);
  --c-profile-icon-shadow-light-glow: 0 0 20px rgba(231, 166, 178, 0.2);
  --c-document-panel-bg: rgba(255, 250, 251, 0.98);
  --c-document-panel-shadow: -6px 12px 35px rgba(231, 166, 178, 0.18);
  --c-document-panel-accent: rgba(239, 182, 190, 0.65);
  --c-document-panel-accent-shadow: -2px 0 8px rgba(231, 166, 178, 0.14);
  --c-signup-prefix-border: rgba(239, 182, 190, 0.35);

  --c-booked-bg: rgba(248, 215, 218, 0.72);
  --c-booked-border: rgba(239, 182, 190, 0.8);
  --c-booked-hover-bg: rgba(244, 194, 194, 0.82);
  --c-booked-text: rgba(0, 0, 0, 0.88);
  --c-booked-hover-text: rgba(0, 0, 0, 0.92);
  --c-booked-text-strong: #000000;

  --gradient-hero-base: radial-gradient(1200px 600px at -10% -10%, rgba(248, 215, 218, 0.26), transparent 58%), radial-gradient(900px 500px at 110% 10%, rgba(244, 194, 194, 0.16), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 253, 254, 0.98));
  --gradient-hero-strong: radial-gradient(120% 90% at 15% -10%, rgba(248, 215, 218, 0.34), transparent 58%), radial-gradient(120% 90% at 85% 0%, rgba(244, 194, 194, 0.2), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 251, 252, 0.98));
  --gradient-hero-spot: radial-gradient(120% 80% at 20% 0%, rgba(248, 215, 218, 0.28), transparent), radial-gradient(120% 80% at 80% 0%, rgba(244, 194, 194, 0.16), transparent), linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 252, 253, 0.96));
  --gradient-hero-overlay-a: conic-gradient(from 0deg, rgba(248, 215, 218, 0.16), rgba(244, 194, 194, 0.1), rgba(239, 182, 190, 0.08), rgba(255, 255, 255, 0.2));
  --gradient-hero-overlay-b: conic-gradient(from 180deg, rgba(244, 194, 194, 0.12), rgba(239, 182, 190, 0.08), rgba(255, 255, 255, 0.22), rgba(248, 215, 218, 0.14));
  --gradient-cta: linear-gradient(135deg, #ffffff, #f8d7da);
  --c-cta-shadow: 0 6px 14px rgba(231, 166, 178, 0.14);
  --c-cta-shadow-strong: 0 10px 22px rgba(231, 166, 178, 0.2);
  --c-cta-shadow-hover: 0 10px 20px rgba(231, 166, 178, 0.18);
  --gradient-marquee-left: linear-gradient(90deg, rgba(255, 255, 255, 0.96), transparent);
  --gradient-marquee-right: linear-gradient(270deg, rgba(255, 255, 255, 0.96), transparent);
  --c-text-shadow-strong: 0 2px 6px rgba(231, 166, 178, 0.18);

  --c-legal-bg: #ffffff;
  --c-legal-text: #000000;
  --c-legal-heading: #000000;
  --c-legal-link: #000000;
  --c-legal-muted: rgba(0, 0, 0, 0.72);

  --c-email-border: #efcfd6;
  --c-email-text: #000000;
  --c-email-pin-bg: #f8d7da;
  --c-email-pin-text: #000000;
  --c-email-link: #000000;
  --c-email-note-bg: #fffafb;
  --c-email-note-border: #efcfd6;
  --c-email-note-text: #000000;

  --c-input-bg: #ffffff;
  --c-input-text: #000000;
  --c-input-border: rgba(239, 182, 190, 0.7);
  --c-input-placeholder: rgba(0, 0, 0, 0.48);
  --c-input-disabled-bg: #fff5f7;
  --c-input-disabled-text: rgba(0, 0, 0, 0.45);
  --c-input-disabled-border: rgba(239, 182, 190, 0.45);
  --c-input-focus-border: rgba(231, 166, 178, 0.9);

  --c-modal-overlay: rgba(248, 215, 218, 0.56);
  --c-modal-bg: rgba(255, 255, 255, 0.98);
  --c-modal-border: rgba(239, 182, 190, 0.48);
  --c-modal-text: #000000;
  --c-modal-muted: rgba(0, 0, 0, 0.62);

  --c-dropdown-bg: rgba(255, 255, 255, 0.98);
  --c-dropdown-border: rgba(239, 182, 190, 0.48);
  --c-dropdown-text: #000000;
  --c-dropdown-hover-bg: rgba(248, 215, 218, 0.52);

  --bg: var(--c-bg);
  --bg-elev: var(--c-surface);
  --text: var(--c-text);
  --muted: var(--c-text-muted);
  --line: var(--c-border);
  --brand: var(--c-brand);
  --brand-600: var(--c-brand-hover);
  --brand-700: var(--c-brand-strong);
  --success: var(--c-success);
  --warning: var(--c-text-muted);
  --danger: var(--c-danger);
  --shadow: var(--c-shadow-card);
  --focus: var(--c-focus-ring);
}

html[data-theme="light"] body,
html[data-theme="light"] {
  background-color: #ffffff;
}

html[data-theme="light"] .site-header .primary-nav .btn,
html[data-theme="light"] .site-header .primary-nav .btn.sm,
html[data-theme="light"] .site-header .admin-topnav .btn,
html[data-theme="light"] .site-header .admin-topnav .btn.sm {
  color: rgba(15,23,42,0.95) !important;
  border-color: rgba(15,23,42,0.25) !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,0.18) !important;
}

html[data-theme="light"] .site-header .primary-nav .btn:hover,
html[data-theme="light"] .site-header .primary-nav .btn.sm:hover,
html[data-theme="light"] .site-header .admin-topnav .btn:hover,
html[data-theme="light"] .site-header .admin-topnav .btn.sm:hover {
  background: rgba(255,255,255,1) !important;
  border-color: rgba(15,23,42,0.35) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,0.2) !important;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) .site-header .primary-nav .btn,
  html:not([data-theme]) .site-header .primary-nav .btn.sm,
  html:not([data-theme]) .site-header .admin-topnav .btn,
  html:not([data-theme]) .site-header .admin-topnav .btn.sm {
    color: rgba(15,23,42,0.95) !important;
    border-color: rgba(15,23,42,0.25) !important;
    background: rgba(255,255,255,0.95) !important;
    box-shadow: 0 12px 30px rgba(15,23,42,0.18) !important;
  }

  html:not([data-theme]) .site-header .primary-nav .btn:hover,
  html:not([data-theme]) .site-header .primary-nav .btn.sm:hover,
  html:not([data-theme]) .site-header .admin-topnav .btn:hover,
  html:not([data-theme]) .site-header .admin-topnav .btn.sm:hover {
    background: rgba(255,255,255,1) !important;
    border-color: rgba(15,23,42,0.35) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,0.2) !important;
  }
}

html[data-theme="light"] .site-header .brand-title,
html[data-theme="light"] .site-header .brand-subtitle,
html[data-theme="light"] .brand-mark,
html[data-theme="light"] .bad-actor a {
  color: #000000 !important;
  text-shadow: 0 2px 8px rgba(231, 166, 178, 0.14) !important;
}

html[data-theme="light"] .card.glass,
html[data-theme="light"] .quotes blockquote,
html[data-theme="light"] .visit-wrap .map-wrap,
html[data-theme="light"] .svc-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(239, 182, 190, 0.32);
}

html[data-theme="light"] .card.glass::before {
  background: rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .card.glass::after {
  background:
    linear-gradient(180deg,
      rgba(248, 215, 218, 0.32) 0%,
      rgba(248, 215, 218, 0.2) 12%,
      rgba(244, 194, 194, 0.1) 28%,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(0deg,
      rgba(248, 215, 218, 0.16) 0%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0) 100%);
}

html[data-theme="light"] .phone-link,
html[data-theme="light"] .contact-label,
html[data-theme="light"] .contact-value,
html[data-theme="light"] .avail-chip.none,
html[data-theme="light"] .avail-chip[data-tip]::after,
html[data-theme="light"] body.admin-page .time-chip,
html[data-theme="light"] body.admin-page .mini-actions .btn.secondary,
html[data-theme="light"] body.admin-page .queue-card__subtitle,
html[data-theme="light"] body.admin-page .queue-card__legend,
html[data-theme="light"] body.admin-page .queue-index {
  color: #000000;
}

html[data-theme="light"] .avail-chip[data-tip]::after {
  background: rgba(12,16,24,0.98);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  mix-blend-mode: normal;
  color: #1b1b1f;
}

html[data-theme="light"] .avail-chip[data-tip]::before {
  border-top-color: rgba(12,16,24,0.95);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
  mix-blend-mode: normal;
}

html[data-theme="light"] .avail-chip.none::after {
  background: rgba(248, 215, 218, 0.92);
  border-color: rgba(239, 182, 190, 0.4);
  mix-blend-mode: normal;
}

html[data-theme="light"] .avail-chip.none::before {
  border-top-color: rgba(248, 215, 218, 0.92);
}

@media (max-width:560px) {
  html[data-theme="light"] .avail-chip[data-tip]::before {
    border-bottom-color: rgba(255, 250, 251, 0.98);
    border-top-color: transparent;
  }

  html[data-theme="light"] .avail-chip.none::before {
    border-bottom-color: rgba(248, 215, 218, 0.92);
    mix-blend-mode: normal;
  }

html[data-theme="light"] .avail-chip[data-tip]::after {
  box-shadow: 0 10px 26px rgba(15, 23, 34, 0.2);
}
}

html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.mild:hover,
html[data-theme="light"] .btn.secondary:hover,
html[data-theme="light"] .mini-nav .btn.bright,
html[data-theme="light"] body.admin-page .time-chip-book,
html[data-theme="light"] body.admin-page .time-chip-book-delete:hover,
html[data-theme="light"] body.admin-page .time-chip--booked {
  color: #000000;
}

html[data-theme="light"] .btn.primary {
  background-color: #ffffff;
  border-color: #efcfd6;
}

html[data-theme="light"] .btn.primary:hover {
  background-color: #fff3f6;
}

html[data-theme="light"] .btn.secondary,
html[data-theme="light"] .chip,
html[data-theme="light"] .mini-nav,
html[data-theme="light"] body.admin-page .time-chip,
html[data-theme="light"] body.admin-page .mini-actions .btn.secondary,
html[data-theme="light"] body.admin-page .queue-card,
html[data-theme="light"] body.admin-page .queue-entry,
html[data-theme="light"] body.admin-page .admin-rail--left .pending-card {
  background: rgba(248, 215, 218, 0.5);
  border-color: rgba(239, 182, 190, 0.45);
}

html[data-theme="light"] .mini-nav .btn.bright {
  background: linear-gradient(180deg, rgba(248, 215, 218, 0.95), rgba(244, 194, 194, 0.95));
  border-color: rgba(239, 182, 190, 0.55);
}

html[data-theme="light"] .prestige {
  background:
    radial-gradient(1200px 420px at -10% -20%, rgba(248, 215, 218, 0.24), transparent 60%),
    radial-gradient(900px 320px at 110% 120%, rgba(244, 194, 194, 0.18), transparent 60%),
    #ffffff;
}

html[data-theme="light"] body::before,
html[data-theme="light"] .page-bg::before {
  background: rgba(255, 255, 255, 0.98) !important;
}

html[data-theme="light"] body::after {
  background:
    radial-gradient(140% 120% at 15% 20%, rgba(248, 215, 218, 0.18), transparent 55%),
    radial-gradient(120% 110% at 75% 30%, rgba(244, 194, 194, 0.14), transparent 50%),
    radial-gradient(130% 120% at 45% 80%, rgba(255, 228, 234, 0.16), transparent 52%) !important;
  background-repeat: no-repeat !important;
  background-size: 160% 160%, 150% 150%, 170% 170% !important;
}

html[data-theme="light"] body.home-page .site-header .brand-title,
html[data-theme="light"] body.home-page .site-header .brand-subtitle,
html[data-theme="light"] body.home-page .primary-nav .btn,
html[data-theme="light"] body.home-page .primary-nav .btn.is-static,
html[data-theme="light"] body.home-page .mini-brand .brand-text {
  color: #000000 !important;
}

html[data-theme="light"] body.home-page .mini-brand .brand-mark,
html[data-theme="light"] body.home-page .brand-mark {
  background: linear-gradient(135deg, #f8d7da, #f4c2c2) !important;
  color: #000000 !important;
  box-shadow: 0 10px 22px rgba(231, 166, 178, 0.18) !important;
}

html[data-theme="light"] body.home-page .mini-nav,
html[data-theme="light"] body.home-page .mini-nav.is-stuck {
  background: rgba(255, 250, 251, 0.96) !important;
  border: 1px solid rgba(239, 182, 190, 0.55) !important;
  box-shadow: 0 16px 32px rgba(231, 166, 178, 0.16) !important;
}

html[data-theme="light"] body.home-page .mini-nav::before {
  background: radial-gradient(circle at 50% 45%,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 250, 251, 0.92) 62%,
    rgba(248, 215, 218, 0.22) 100%) !important;
  filter: blur(10px) !important;
  opacity: 0.95 !important;
}

html[data-theme="light"] body.home-page .mini-nav .btn,
html[data-theme="light"] body.home-page .mini-nav .btn.btn-ui--ghost,
html[data-theme="light"] body.home-page .mini-auth .btn {
  background: rgba(248, 215, 218, 0.52) !important;
  border-color: rgba(239, 182, 190, 0.55) !important;
  color: #000000 !important;
  box-shadow: 0 8px 18px rgba(231, 166, 178, 0.12) !important;
}

html[data-theme="light"] body.home-page .mini-nav .btn:hover,
html[data-theme="light"] body.home-page .mini-nav .btn:focus-visible,
html[data-theme="light"] body.home-page .mini-nav .btn.btn-ui--ghost:hover {
  background: rgba(244, 194, 194, 0.74) !important;
  border-color: rgba(231, 166, 178, 0.62) !important;
  color: #000000 !important;
  box-shadow: 0 10px 22px rgba(231, 166, 178, 0.16) !important;
}

html[data-theme="light"] body.home-page .mini-nav .btn.btn-ui--primary,
html[data-theme="light"] body.home-page .btn.btn-ui--primary {
  background: linear-gradient(180deg, #f8d7da, #f4c2c2) !important;
  border-color: #efb6be !important;
  color: #000000 !important;
  box-shadow: 0 12px 22px rgba(231, 166, 178, 0.18) !important;
}

html[data-theme="light"] body.home-page .mini-nav .btn.btn-ui--primary:hover,
html[data-theme="light"] body.home-page .btn.btn-ui--primary:hover {
  background: linear-gradient(180deg, #f9dfe2, #efb6be) !important;
  color: #000000 !important;
  box-shadow: 0 14px 24px rgba(231, 166, 178, 0.2) !important;
}

html[data-theme="light"] body.home-page .mini-call-tooltip {
  background: rgba(255, 250, 251, 0.98) !important;
  color: #000000 !important;
  border-color: rgba(239, 182, 190, 0.45) !important;
  box-shadow: 0 8px 24px rgba(231, 166, 178, 0.14) !important;
}

html[data-theme="light"] body.home-page .mini-call-tooltip::before {
  border-bottom-color: rgba(255, 250, 251, 0.98) !important;
}

html[data-theme="light"] body.home-page .card.glass,
html[data-theme="light"] body.home-page main .card.glass,
html[data-theme="light"] body.home-page .quotes blockquote,
html[data-theme="light"] body.home-page .services .services-marquee,
html[data-theme="light"] body.home-page .services .svc-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(239, 182, 190, 0.38) !important;
  box-shadow: 0 12px 28px rgba(231, 166, 178, 0.14), 0 0 0 1px rgba(239, 182, 190, 0.22) !important;
}

html[data-theme="light"] body.home-page .card.glass::before,
html[data-theme="light"] body.home-page main .card.glass::before {
  background: radial-gradient(circle at 50% 45%,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 250, 251, 0.94) 62%,
    rgba(248, 215, 218, 0.2) 100%) !important;
  filter: blur(12px) !important;
  opacity: 0.92 !important;
}

html[data-theme="light"] body.home-page .services .svc-card:hover,
html[data-theme="light"] body.home-page .quotes blockquote:hover,
html[data-theme="light"] body.home-page .services .services-marquee:hover {
  box-shadow: 0 16px 32px rgba(231, 166, 178, 0.18), 0 0 0 1px rgba(239, 182, 190, 0.28) !important;
  border-color: rgba(239, 182, 190, 0.48) !important;
}

html[data-theme="light"] body.home-page .services .svc-card .svc-label,
html[data-theme="light"] body.home-page .services .svc-card.is-tba::after {
  background: rgba(248, 215, 218, 0.82) !important;
  border-color: rgba(239, 182, 190, 0.42) !important;
  color: #000000 !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.home-page .quotes blockquote,
html[data-theme="light"] body.home-page .services .services-marquee,
html[data-theme="light"] body.home-page .card.glass,
html[data-theme="light"] body.home-page .card.glass > *,
html[data-theme="light"] body.home-page .contact-label,
html[data-theme="light"] body.home-page .contact-value,
html[data-theme="light"] body.home-page .phone-link {
  color: #000000 !important;
}

html[data-theme="light"] body.home-page .card.glass .muted,
html[data-theme="light"] body.home-page .quotes footer,
html[data-theme="light"] body.home-page .mini-brand .brand-subtitle {
  color: rgba(0, 0, 0, 0.62) !important;
}

html[data-theme="light"] body.home-page .drhasan-bubble {
  background: linear-gradient(180deg, #fffafb, #f8d7da) !important;
  border: 1px solid #efb6be !important;
  color: #000000 !important;
  box-shadow: 0 10px 22px rgba(231, 166, 178, 0.14) !important;
}

html[data-theme="light"] body.home-page .drhasan-bubble.to-right::before {
  border-right-color: #efb6be !important;
}

html[data-theme="light"] body.home-page .drhasan-bubble.below::before {
  border-bottom-color: #efb6be !important;
}

html[data-theme="light"] body.home-page .drhasan-img img {
  box-shadow: 0 14px 32px rgba(231, 166, 178, 0.18) !important;
}

html[data-theme="light"] body.home-page .dev-note,
html[data-theme="light"] body #devNote.dev-note,
html[data-theme="light"] body .dev-note {
  background: rgba(248, 215, 218, 0.94) !important;
  color: #000000 !important;
  border: 1px solid rgba(239, 182, 190, 0.6) !important;
  box-shadow: 0 16px 32px rgba(231, 166, 178, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] body.home-page .dev-note *,
html[data-theme="light"] body.home-page .dev-note strong,
html[data-theme="light"] body #devNote.dev-note *,
html[data-theme="light"] body .dev-note * {
  color: #000000 !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.home-page .dev-note strong {
  color: #000000 !important;
}

html[data-theme="light"] body.home-page .dev-note__close {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(239, 182, 190, 0.52) !important;
  color: #000000 !important;
}

html[data-theme="light"] body.home-page .dev-note__close:hover {
  background: rgba(244, 194, 194, 0.7) !important;
}


/* =========================================================
   ADMIN LIGHT MODE — Calendar cards, Pending panel, Call Queue
   Covers both data-theme="light" and prefers-color-scheme:light
   ========================================================= */

/* Shared mixin applied via two selectors below */
html[data-theme="light"] body.admin-page .week-grid-4 .card,
html[data-theme="light"] body.admin-page .week-grid-4 .card.fully-booked-card {
  background: rgba(255,255,255,0.72);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 4px 18px rgba(15,23,42,0.08);
  color: #0f172a;
}
html[data-theme="light"] body.admin-page .week-grid-4 .card h3,
html[data-theme="light"] body.admin-page .week-grid-4 .card .fully-booked-label {
  color: #0f172a;
}
html[data-theme="light"] body.admin-page .week-grid-4 .card .btn:not(.secondary) {
  color: #1d4ed8;
}
html[data-theme="light"] body.admin-page .week-grid-4 .card .btn.secondary {
  color: #334155;
}
html[data-theme="light"] body.admin-page .week-grid-4 .card .btn:hover {
  color: #0f172a;
  background: rgba(15,23,42,0.08);
}

/* Pending rail card */
html[data-theme="light"] body.admin-page .pending-card {
  background: rgba(255,255,255,0.72);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 4px 18px rgba(15,23,42,0.08);
  color: #0f172a;
}
html[data-theme="light"] body.admin-page .pending-card h3,
html[data-theme="light"] body.admin-page .pending-card .muted,
html[data-theme="light"] body.admin-page .pending-card .pending-entry__name {
  color: #0f172a;
}
html[data-theme="light"] body.admin-page .meta-chip {
  background: rgba(15,23,42,0.07);
  border-color: rgba(15,23,42,0.12);
  color: #334155;
}

/* Call Queue card */
html[data-theme="light"] body.admin-page .queue-card {
  background: rgba(255,255,255,0.72);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 4px 18px rgba(15,23,42,0.08);
  color: #0f172a;
}
html[data-theme="light"] body.admin-page .queue-card__title,
html[data-theme="light"] body.admin-page .queue-card__subtitle,
html[data-theme="light"] body.admin-page .queue-card__legend,
html[data-theme="light"] body.admin-page .queue-name,
html[data-theme="light"] body.admin-page .queue-index {
  color: #0f172a;
}

/* Same for prefers-color-scheme: light (no data-theme attribute) */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) body.admin-page .week-grid-4 .card,
  html:not([data-theme]) body.admin-page .week-grid-4 .card.fully-booked-card {
    background: rgba(255,255,255,0.72);
    border-color: rgba(15,23,42,0.10);
    box-shadow: 0 4px 18px rgba(15,23,42,0.08);
    color: #0f172a;
  }
  html:not([data-theme]) body.admin-page .week-grid-4 .card .btn:not(.secondary) { color: #1d4ed8; }
  html:not([data-theme]) body.admin-page .week-grid-4 .card .btn.secondary { color: #334155; }
  html:not([data-theme]) body.admin-page .week-grid-4 .card .btn:hover { color: #0f172a; background: rgba(15,23,42,0.08); }

  html:not([data-theme]) body.admin-page .pending-card {
    background: rgba(255,255,255,0.72);
    border-color: rgba(15,23,42,0.10);
    box-shadow: 0 4px 18px rgba(15,23,42,0.08);
    color: #0f172a;
  }
  html:not([data-theme]) body.admin-page .pending-card h3,
  html:not([data-theme]) body.admin-page .pending-card .muted,
  html:not([data-theme]) body.admin-page .pending-card .pending-entry__name,
  html:not([data-theme]) body.admin-page .meta-chip { color: #334155; }

  html:not([data-theme]) body.admin-page .queue-card {
    background: rgba(255,255,255,0.72);
    border-color: rgba(15,23,42,0.10);
    box-shadow: 0 4px 18px rgba(15,23,42,0.08);
    color: #0f172a;
  }
  html:not([data-theme]) body.admin-page .queue-card__title,
  html:not([data-theme]) body.admin-page .queue-card__subtitle,
  html:not([data-theme]) body.admin-page .queue-card__legend,
  html:not([data-theme]) body.admin-page .queue-name,
  html:not([data-theme]) body.admin-page .queue-index { color: #0f172a; }
}