/*
 * Project CSS for mega-subscription.
 * Shared classes for website sections.
 * Theme: light blue + bright white.
 */

:root {
  --mega-blue: #60a5fa;
  --mega-blue-hover: #3b82f6;
  --mega-blue-soft: #eef7ff;
  --mega-blue-soft-2: #f7fbff;
  --mega-blue-border: #bfdbfe;
  --mega-text: #0f172a;
}

html, body {
  background: #ffffff;
  color: var(--mega-text);
}

/* Primary actions and dark cards -> light blue */
[class~="bg-black"],
[class~="bg-[#111827]"] {
  background-color: var(--mega-blue) !important;
}

[class~="hover:bg-black/85"]:hover,
[class~="hover:bg-black/80"]:hover,
[class~="hover:bg-black"]:hover {
  background-color: var(--mega-blue-hover) !important;
}

/* Soft section backgrounds -> very light blue */
[class~="bg-[#f7f8fa]"],
[class~="bg-[#f6f7f8]"],
[class~="bg-[#eef1f6]"],
[class~="bg-black/[0.025]"],
[class~="bg-black/[0.03]"],
[class~="bg-black/[0.035]"],
[class~="bg-black/[0.04]"],
[class~="bg-black/[0.05]"],
[class~="bg-black/[0.06]"] {
  background-color: var(--mega-blue-soft) !important;
}

/* Keep main cards crisp and bright */
[class~="bg-white"] {
  background-color: #ffffff !important;
}

/* Blue accents instead of green */
[class~="bg-emerald-400"] {
  background-color: var(--mega-blue) !important;
}
[class~="hover:bg-emerald-300"]:hover {
  background-color: var(--mega-blue-hover) !important;
}
[class~="text-emerald-600"],
[class~="text-emerald-300"] {
  color: var(--mega-blue-hover) !important;
}

/* Lighter blue borders for the overall visual language */
[class~="border-black/10"],
[class~="border-black/[0.08]"],
[class~="border-black/[0.07]"],
[class~="border-black/[0.06]"] {
  border-color: var(--mega-blue-border) !important;
}

/* Preserve readable dark text on white/light-blue surfaces */
[class~="text-black"] {
  color: var(--mega-text) !important;
}

/* Primary CTA text stays white on blue */
[class~="bg-black"][class~="text-white"],
[class~="bg-[#111827]"][class~="text-white"],
[class~="bg-emerald-400"] {
  color: #ffffff !important;
}

/* Header gets a cleaner white/light-blue treatment */
header[class*="bg-white"] {
  background-color: rgba(255,255,255,0.97) !important;
  border-color: var(--mega-blue-border) !important;
}

/* Focus states use the new blue */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--mega-blue) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.14);
}

/* Keep the total-search field dark across browsers. */
#searchInput {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  -webkit-text-fill-color: #ffffff !important;
  appearance: none;
  -webkit-appearance: none;
}
#searchInput::placeholder {
  color: #64748b !important;
  opacity: 1;
}
#searchInput:-webkit-autofill,
#searchInput:-webkit-autofill:hover,
#searchInput:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* Keep the floating live-chat launcher anchored near the bottom edge. */
#chatToggle {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  top: auto !important;
}

@media (max-width: 640px) {
  #chatToggle {
    right: 14px !important;
    bottom: 14px !important;
  }
}