/* Lifelane clinical white theme.
   Loaded after the Next.js stylesheet (/_next/static/chunks/074dszci8vaay.css) and
   overrides its dark "fx" theme. These rules are unlayered, so they also beat the
   Tailwind utility classes, which sit in @layer utilities. */

:root {
  --bg: #ffffff;
  --soft: #334155;
  --ll-ink: #0f172a;
  --ll-body: #334155;
  --ll-muted: #64748b;
  --ll-line: #e2e8f0;
  --ll-surface: #f8fafc;
  --ll-teal: #0d9488;
  --ll-teal-dark: #0f766e;
  --ll-teal-tint: #f0fdfa;
  --ll-teal-line: #99f6e4;
  --ll-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  color-scheme: light;
}

html, body { background: #fff; }
body { color: var(--ll-body); }

/* Background video, particles and glow effects belong to the dark theme */
.fx-video-bg, .particle-field { display: none; }
.fx-count { text-shadow: none; }

.scroll-progress { background: var(--ll-line); }
.scroll-progress span { background: var(--ll-teal); box-shadow: none; }

/* Top bar and header */
.fx-topbar { background: var(--ll-teal-tint); border-bottom: 1px solid var(--ll-teal-line); }
.fx-topbar, .fx-topbar * { color: var(--ll-teal-dark); }
.fx-header {
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid var(--ll-line);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.fx-title, .fx-gradient-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
.fx-title { color: var(--ll-teal-dark); }
.fx-gradient-text { color: var(--ll-teal); }

/* Cards and panels */
.fx-pill, .fx-panel, .fx-service, .fx-stat, .fx-gallery, .fx-contact {
  background: #fff;
  border: 1px solid var(--ll-line);
  box-shadow: var(--ll-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.fx-panel:hover, .fx-service:hover, .fx-stat:hover, .fx-gallery:hover, .fx-contact:hover {
  border-color: var(--ll-teal-line);
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 32px rgba(15, 23, 42, .08);
}
.fx-panel:before, .fx-service:before, .fx-stat:before, .fx-gallery:before, .fx-contact:before { display: none; }
.fx-cta-panel {
  background: var(--ll-teal-tint);
  border: 1px solid var(--ll-teal-line);
  box-shadow: none;
}
.fx-cta-panel:after { display: none; }

.fx-chip { color: var(--ll-teal-dark); background: var(--ll-teal-tint); border-color: var(--ll-teal-line); }
.fx-icon { background: var(--ll-teal-tint); border: 1px solid var(--ll-teal-line); box-shadow: none; }
.fx-icon, .fx-icon * { color: var(--ll-teal); }
.fx-contact-icon { background: var(--ll-teal-tint); border-color: var(--ll-teal-line); }
.fx-contact-icon, .fx-contact-icon * { color: var(--ll-teal); }
.fx-list-icon { background: var(--ll-teal-tint); }

/* Buttons */
.fx-btn {
  color: #fff;
  background: var(--ll-teal);
  box-shadow: 0 6px 16px rgba(13, 148, 136, .22);
}
.fx-btn:hover { background: var(--ll-teal-dark); }
.fx-btn-secondary { color: var(--ll-teal-dark); background: #fff; border: 1px solid var(--ll-teal-line); }
.fx-btn-secondary:hover { background: var(--ll-teal-tint); }

/* Booking form */
.fx-label { color: var(--ll-body); }
.fx-field-note { color: var(--ll-muted); }
.fx-input {
  color: var(--ll-ink);
  background: #fff;
  border: 1px solid #cbd5e1;
  color-scheme: light;
}
.fx-input option { color: var(--ll-ink); background: #fff; }
.fx-input::placeholder { color: #94a3b8; }
.fx-input:focus { border-color: var(--ll-teal); box-shadow: 0 0 0 3px rgba(13, 148, 136, .15); }
.fx-note { background: var(--ll-teal-tint); border-color: #5eead4; }

/* Section dividers */
.separator-line { background: linear-gradient(90deg, rgba(148, 163, 184, 0), #cbd5e1 40%, #99f6e4 60%, rgba(153, 246, 228, 0)); box-shadow: none; }
.separator-dot { background: var(--ll-teal); box-shadow: none; }
.section-separator.is-visible .separator-dot { animation: none; }
.heartbeat-wave:before { filter: none; }
.heartbeat-wave span { background: var(--ll-teal); box-shadow: none; }

.fx-footer { background: var(--ll-surface); border-top: 1px solid var(--ll-line); }

/* Social media links, added to the footer by /lifelane-social.js */
.ll-social { margin-top: 1.25rem; }
.ll-social-title {
  margin: 0 0 .6rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ll-muted);
}
.ll-social-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.ll-social-links a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  color: var(--ll-teal); background: var(--ll-teal-tint);
  border: 1px solid var(--ll-teal-line); border-radius: 999px;
  transition: background .2s, color .2s, transform .2s;
}
.ll-social-links a:hover, .ll-social-links a:focus-visible {
  color: #fff; background: var(--ll-teal); transform: translateY(-2px);
}
.ll-social-links svg { width: 1.05rem; height: 1.05rem; }

/* Tailwind colour utilities written for a dark background */
.text-white { color: var(--ll-ink); }
.hover\:text-white:hover { color: var(--ll-teal-dark); }
.text-cyan-100, .text-cyan-100\/65, .text-cyan-100\/70, .text-cyan-100\/75,
.text-cyan-100\/80, .text-cyan-100\/85, .text-cyan-100\/90 { color: var(--ll-body); }
.text-cyan-200 { color: var(--ll-teal-dark); }
.text-cyan-300 { color: var(--ll-teal); }
.text-emerald-300 { color: #059669; }
.text-blue-300 { color: #2563eb; }
.text-fuchsia-300 { color: #c026d3; }
.border-cyan-300\/20, .border-cyan-300\/30 { border-color: var(--ll-line); }
.border-cyan-300 { border-color: var(--ll-teal); }
.bg-slate-950\/60, .bg-slate-900\/60 { background: var(--ll-surface); }
.ring-cyan-300\/30 { --tw-ring-color: var(--ll-line); }

/* Keep white text on the solid teal buttons, and teal icons in the icon tiles */
.fx-btn .text-white, .fx-btn.text-white { color: #fff; }
.fx-icon .text-white, .fx-icon.text-white { color: var(--ll-teal); }