/* Base layout + typography for all WTS pages (Pricing background everywhere) */
.wts-body {
  min-height: 100vh;
  background-color: #020617;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(circle at 80% 0%, rgba(16, 185, 129, 0.12), transparent 60%),
    linear-gradient(to bottom, #020617, #020617 55%, #020617);
  background-attachment: fixed;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================================================
   HOMEPAGE FIX (dark mode):
   Keep background visible, but make cards a touch darker
   (only for wts-body--hero)
   Requires <main class="... wts-main"> in ui.py
   ========================================================= */

.wts-favbtn { background: transparent; border: 0; padding: 0; cursor: pointer; }
.wts-favbtn .wts-star { font-size: 14px; line-height: 1; }
.wts-favbtn.is-fav .wts-star { color: #FACC15; } /* gold */


.wts-body.wts-body--hero .wts-main .bg-slate-900\/60,
.wts-body.wts-body--hero .wts-main .bg-slate-900\/70,
.wts-body.wts-body--hero .wts-main .bg-slate-900\/80,
.wts-body.wts-body--hero .wts-main .bg-slate-900\/90 {
  background-color: rgba(15, 23, 42, 0.50) !important; /* darker than 0.40 */
  backdrop-filter: blur(6px);
}

.wts-body.wts-body--hero .wts-main thead.bg-slate-950,
.wts-body.wts-body--hero .wts-main thead.bg-slate-950.sticky {
  background-color: rgba(2, 6, 23, 0.55) !important;
}

/* Make homepage hero cards feel more “lifted” and less boxed-in */
.wts-body.wts-body--hero .wts-main .card-lift:hover {
  box-shadow: 0 20px 55px rgba(16, 185, 129, 0.12), 0 18px 40px rgba(15, 23, 42, 0.55);
}

/* Optional: subtle text clarity on hero */
.wts-body.wts-body--hero .wts-main h1 {
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Subtle card “lift” effect (used in your HTML as .card-lift) */
.card-lift {
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.card-lift:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.75);
  border-color: rgba(148, 163, 184, 0.6);
}

/* Cleaner underline-soft (no dashed/dotted look) */
.underline-soft {
  text-decoration: none;
  border-bottom: none;
  background-image: linear-gradient(currentColor,currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .18s ease;
}
.underline-soft:hover {
  background-size: 100% 1px;
}

/* =========================================================
   LIGHT MODE (Apple-clean tuning)
   - Background slightly darker
   - Cards clearly whiter (more contrast)
   - CTA band fixed (no dark gradient)
   ========================================================= */
html[data-theme="light"]{
  color-scheme: light;
}

/* Page background (slightly darker so content pops) */
html[data-theme="light"] .wts-body{
  background-color: #E9EFF6 !important;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.08), transparent 60%),
    radial-gradient(circle at 80% 0%, rgba(16, 185, 129, 0.06), transparent 60%),
    linear-gradient(to bottom, #E9EFF6, #E9EFF6 55%, #E9EFF6) !important;
  color: #0F172A !important;
}

/* Header separation / surface */
html[data-theme="light"] header{
  border-bottom-color: rgba(15,23,42,.14) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.06);
}

html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-950\/70,
html[data-theme="light"] .bg-slate-950\/60{
  background-color: rgba(255,255,255,.78) !important;
}

/* Make default “dark text utilities” readable in light mode */
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200{ color:#0F172A !important; }
html[data-theme="light"] .text-slate-300{ color:#1F2937 !important; }
html[data-theme="light"] .text-slate-400{ color:#475569 !important; }
html[data-theme="light"] .text-slate-500{ color:#64748B !important; }
html[data-theme="light"] .text-emerald-200{ color:#059669 !important; } /* active nav link */

/* Borders (tailwind border utilities) */
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-slate-600{
  border-color: rgba(15,23,42,.14) !important;
}

/* Cards / panels (make them whiter than the page) */
html[data-theme="light"] .bg-slate-900\/40,
html[data-theme="light"] .bg-slate-900\/50,
html[data-theme="light"] .bg-slate-900\/60,
html[data-theme="light"] .bg-slate-900\/70,
html[data-theme="light"] .bg-slate-900\/80,
html[data-theme="light"] .bg-slate-900\/90,
html[data-theme="light"] .bg-slate-950\/20,
html[data-theme="light"] .bg-slate-950\/30,
html[data-theme="light"] .bg-slate-950\/40,
html[data-theme="light"] .bg-slate-950\/50,
html[data-theme="light"] .bg-slate-950\/60,
html[data-theme="light"] .bg-slate-950\/70,
html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-700,
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-950{
  background-color: rgba(255,255,255,.92) !important;  /* whiter cards */
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(15,23,42,.10) !important;
}

/* Hero cards in light mode (keep consistent “white card” look) */
html[data-theme="light"] .wts-body.wts-body--hero .wts-main .bg-slate-900\/60,
html[data-theme="light"] .wts-body.wts-body--hero .wts-main .bg-slate-900\/70,
html[data-theme="light"] .wts-body.wts-body--hero .wts-main .bg-slate-900\/80,
html[data-theme="light"] .wts-body.wts-body--hero .wts-main .bg-slate-900\/90{
  background-color: rgba(255,255,255,.92) !important;
}

/* Tables: zebra + hover */
html[data-theme="light"] .wts-main table{
  border-color: rgba(15,23,42,.14);
  color: #0F172A !important;
}
html[data-theme="light"] .wts-main thead{
  background-color: rgba(15,23,42,.04) !important;
}
html[data-theme="light"] .wts-main tbody tr:nth-child(even){
  background-color: rgba(15,23,42,.02);
}
html[data-theme="light"] .wts-main tbody tr:hover{
  background-color: rgba(16,185,129,.10) !important;
}

/* IMPORTANT: override literal Tailwind variant classes used in HTML */
html[data-theme="light"] .wts-main .odd\:bg-slate-900\/40:nth-child(odd){
  background-color: rgba(15,23,42,.02) !important;
}
html[data-theme="light"] .wts-main .hover\:bg-slate-800\/30:hover{
  background-color: rgba(16,185,129,.10) !important;
}
html[data-theme="light"] .wts-main .hover\:bg-slate-700:hover{
  background-color: rgba(226,232,240,.85) !important;
}

/* Inputs */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  color: #0F172A !important;
  background-color: rgba(255,255,255,.96) !important;
  border-color: rgba(15,23,42,.18) !important;
}

/* Softer hover shadow in light mode */
html[data-theme="light"] .card-lift:hover{
  box-shadow: 0 14px 30px rgba(15,23,42,.12) !important;
  border-color: rgba(15,23,42,.18) !important;
}

/* =========================================================
   CTA BAND FIX (homepage only)
   Scope to .wts-body--hero so other pages can still use
   their own gradients without getting overwritten.
   ========================================================= */
html[data-theme="light"] .wts-body.wts-body--hero .wts-main .bg-gradient-to-r{
  background-color: rgba(255,255,255,.92) !important;
  background-image: linear-gradient(
    90deg,
    rgba(16,185,129,.12) 0%,
    rgba(255,255,255,.92) 45%,
    rgba(255,255,255,.92) 100%
  ) !important;
  border-color: rgba(15,23,42,.14) !important;
}