/* ==========================================================================
   THE ADS ENGINE — Complete Color Scheme Override

   Two-tier green system:
   - Bright #00E676 / #00C853  → buttons, glows, dark-bg accents, nav
   - Dark  #009947 / #007A38   → text labels on white/light backgrounds (via token)

   Dark bg:     #0A1628
   ========================================================================== */

/* ---- NAV ---- */
.site-nav {
  border-bottom-color: rgba(0, 230, 118, 0.15) !important;
}
.site-nav::before {
  background: linear-gradient(90deg, #00E676, #00C853, #00E676) !important;
}
/* Nav logo text — solid bright green with glow */
body[data-brand="ads"] .site-nav__logo-text {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #00E676 !important;
  color: #00E676 !important;
  animation: none !important;
  filter: drop-shadow(0 0 12px rgba(0, 230, 118, 0.6));
  text-shadow: none;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
}
.btn-nav-login {
  border-color: rgba(0, 230, 118, 0.6) !important;
  color: #00E676 !important;
}
.btn-nav-login:hover {
  background: rgba(0, 230, 118, 0.12) !important;
  border-color: #00E676 !important;
}
.site-nav__link {
  font-size: 1rem !important; /* Larger — only 4 nav items on ads site */
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
.site-nav__link:hover,
.site-nav__link.is-active {
  color: #00E676 !important;
}
.site-nav__link::after {
  background: #00E676 !important;
}

/* ---- BUTTONS — always bright green ---- */
.btn-primary,
.btn-primary-dark,
button[type="submit"].btn-primary {
  background: linear-gradient(135deg, #00E676 0%, #00C853 100%) !important;
  color: #0A1628 !important;
  box-shadow: 0 4px 16px rgba(0, 230, 118, 0.3) !important;
}
.btn-primary:hover,
.btn-primary-dark:hover,
button[type="submit"].btn-primary:hover {
  background: linear-gradient(135deg, #00C853 0%, #00A844 100%) !important;
  box-shadow: 0 6px 24px rgba(0, 230, 118, 0.4) !important;
}
.btn-primary:focus-visible,
.btn-primary-dark:focus-visible {
  outline-color: #00E676 !important;
}
.btn-secondary,
.btn-outline {
  color: #009947 !important;
  border-color: #009947 !important;
}
.btn-secondary:hover,
.btn-outline:hover {
  background: rgba(0, 153, 71, 0.08) !important;
  color: #007A38 !important;
}
.btn-secondary-dark {
  border-color: rgba(0, 230, 118, 0.6) !important;
  color: #fff !important;
}
.btn-secondary-dark:hover {
  background: rgba(0, 230, 118, 0.12) !important;
  border-color: #00E676 !important;
}

/* ---- LINKS ---- */
a:not(.btn-primary):not(.btn-secondary):not(.btn-nav-login):not(.site-nav__link):not(.mobile-menu__nav-link):not(.mobile-menu__cta) {
  color: inherit;
}
/* Mobile nav links must stay white on dark background */
body[data-brand="ads"] .mobile-menu__nav-link,
body[data-brand="ads"] .mobile-menu__nav-link:link,
body[data-brand="ads"] .mobile-menu__nav-link:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
body[data-brand="ads"] .mobile-menu__nav-link:hover {
  color: #00E676 !important;
  -webkit-text-fill-color: #00E676 !important;
}
/* Mobile menu logo — same green text fix */
body[data-brand="ads"] .mobile-menu__header .site-nav__logo-text {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #00E676 !important;
  color: #00E676 !important;
}
a[href]:not([class]):hover {
  color: #009947;
}

/* ---- FORMS ---- */
input:focus, select:focus, textarea:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: #009947 !important;
  box-shadow: 0 0 0 3px rgba(0, 153, 71, 0.15) !important;
}
input[type="checkbox"]:checked,
input[type="checkbox"]:checked + label::before {
  background-color: #009947 !important;
  border-color: #009947 !important;
}
input[type="radio"]:checked {
  border-color: #009947 !important;
}
input[type="radio"]:checked::before {
  background: #009947 !important;
}
input[type="checkbox"]:focus, input[type="radio"]:focus {
  box-shadow: 0 0 0 3px rgba(0, 153, 71, 0.20) !important;
}
.file-drop:hover, .file-drop.dragging {
  border-color: #009947 !important;
  background: rgba(0, 153, 71, 0.04) !important;
}

/* ---- SIDEBAR ---- */
.sidebar {
  border-right-color: rgba(0, 230, 118, 0.1) !important;
}
.sidebar__link.is-active {
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.18) 0%, rgba(0, 200, 83, 0.06) 100%) !important;
  box-shadow: -3px 0 16px rgba(0, 230, 118, 0.35), inset 0 0 16px rgba(0, 230, 118, 0.06) !important;
}
.sidebar__link.is-active .sidebar__icon {
  filter: drop-shadow(0 0 4px rgba(0, 230, 118, 0.5)) !important;
}
.sidebar__link:hover {
  background: rgba(0, 230, 118, 0.08) !important;
}

/* ---- TOPBAR ---- */
.topbar {
  border-bottom-color: rgba(0, 230, 118, 0.1) !important;
}

/* ---- DASHBOARD CARDS ---- */
.card:hover {
  border-color: rgba(0, 153, 71, 0.25) !important;
}
.card-stat:nth-child(1) {
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.06), rgba(255, 255, 255, 0.02)) !important;
}
.card-stat__icon {
  background: rgba(0, 230, 118, 0.15) !important;
}
.card-stat__label a,
.card a {
  color: #009947 !important;
}
/* Feature card icons — darker green for contrast on white */
.card-feature__icon,
.card-feature__icon-premium {
  color: #007A38 !important;
  background: rgba(0, 153, 71, 0.12) !important;
  border: 1px solid rgba(0, 153, 71, 0.20) !important;
}

/* ---- BADGES ---- */
.badge--primary,
.status-badge--active {
  background: rgba(0, 153, 71, 0.12) !important;
  color: #007A38 !important;
}

/* ---- PROGRESS ---- */
.progress__bar,
.progress-bar__fill {
  background: linear-gradient(90deg, #00E676, #00C853) !important;
}

/* ---- TOGGLE ---- */
.toggle--active,
.toggle.is-active {
  background-color: #009947 !important;
}

/* ---- ACCORDION ---- */
.accordion__trigger:hover {
  color: #009947 !important;
}

/* ---- TOAST ---- */
.toast--info {
  border-left-color: #009947 !important;
}

/* ---- SPINNER ---- */
.spinner {
  border-top-color: #00E676 !important;
}

/* ---- PAGINATION ---- */
.pagination__link--active,
.pagination__link:hover {
  background: #009947 !important;
  color: #fff !important;
}

/* ---- PWA BANNER ---- */
.pwa-install-banner__cta {
  background: linear-gradient(135deg, #00E676, #00C853) !important;
  color: #0A1628 !important;
}
.pwa-banner__btn {
  background: linear-gradient(135deg, #00E676, #00C853) !important;
}

/* ---- PRICING CARDS ---- */
.pricing-card--featured,
.pricing-card--popular {
  border-color: #009947 !important;
}
.pricing-card__badge {
  background: #009947 !important;
  color: #fff !important;
}

/* ---- MARKETING SECTION OVERLINES — bigger + darker for white-bg readability ---- */
.section-overline,
.overline {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #009947 !important;
}
/* On dark hero backgrounds, keep overlines bright */
.hero-dark-premium .overline,
.hero-dark-premium .section-overline,
.section-header--dark .overline,
.about-hero .about-hero__overline,
[style*="background-color:var(--color-midnight)"] .overline,
[style*="background-color:var(--bg-dark)"] .overline {
  color: #00E676 !important;
}
.hero__headline em,
.hero__headline span.accent {
  color: #00E676 !important;
}

/* ---- DASHBOARD GRADIENT ACCENTS ---- */
.dashboard-header__gradient,
.welcome-banner {
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.12), rgba(0, 200, 83, 0.08)) !important;
}

/* ---- CHARTS ---- */
.chart-legend__dot--primary {
  background: #00E676 !important;
}

/* ---- ONBOARDING ---- */
.onboarding-progress__step--active,
.onboarding-progress__step--complete {
  background: #009947 !important;
  border-color: #009947 !important;
  color: #fff !important;
}
.onboarding-progress__line--complete {
  background: #009947 !important;
}

/* ---- MISC GREEN TEXT ---- */
.text-electric,
.text-primary-accent {
  color: #009947 !important;
}

/* ---- HERO DARK BACKGROUNDS ---- */
.section-hero,
.hero-dark {
  background: linear-gradient(135deg, #0A1628 0%, #0D1F38 100%) !important;
}

/* ---- HERO DARK PREMIUM (marketing hero) ---- */
.hero-dark-premium {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(0, 230, 118, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(0, 200, 83, 0.09) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 30%, rgba(0, 230, 118, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #050D1A 0%, #091520 35%, #0D1A28 65%, #0A1628 100%) !important;
}
.hero-dark-premium::before {
  background-image: radial-gradient(circle, rgba(0, 230, 118, 0.05) 1px, transparent 1px) !important;
}
.hero-dark-premium::after {
  background: radial-gradient(ellipse,
    rgba(0, 230, 118, 0.12) 0%,
    rgba(0, 180, 70, 0.06) 40%,
    transparent 70%) !important;
}

/* ---- HERO LOGO — green glow animation (overrides blue home.css keyframes) ---- */
body[data-brand="ads"] .hero-logo__img {
  animation: ads-hero-logo-glow 4s ease-in-out infinite !important;
  filter: none !important; /* strip any inline filter so animation owns it */
}
@keyframes ads-hero-logo-glow {
  0%, 100% {
    filter: drop-shadow(0 0 40px rgba(0, 230, 118, 0.45))
            drop-shadow(0 0 80px rgba(0, 230, 118, 0.20));
  }
  50% {
    filter: drop-shadow(0 0 60px rgba(0, 230, 118, 0.60))
            drop-shadow(0 0 100px rgba(0, 230, 118, 0.30));
  }
}

/* ---- HERO HEADLINE GRADIENT (higher specificity — no !important so shimmer animation works) ---- */
body[data-brand="ads"] .hero-headline--gradient {
  background: linear-gradient(
    90deg,
    #FFFFFF 0%,
    #00E676 25%,
    #00C853 50%,
    #00E676 75%,
    #FFFFFF 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* ---- FOOTER LOGO — fix size, spacing, and remove blue glow ---- */
body[data-brand="ads"] .site-footer__logo-img {
  height: 80px !important;
  width: auto !important;
  object-fit: initial !important;
  filter: drop-shadow(0 0 12px rgba(0, 230, 118, 0.25)) !important;
  display: block !important;
}
body[data-brand="ads"] .site-footer__logo {
  display: block !important;
  padding-top: 16px !important;
  margin-top: 8px !important;
}

/* ---- PRICING RECOMMENDED CARD — green instead of navy/blue ---- */
body[data-brand="ads"] .card-pricing--recommended {
  border-color: rgba(0, 153, 71, 0.45) !important;
  background: linear-gradient(180deg, #F0FBF5 0%, #ffffff 40%, #F5FBF7 100%) !important;
  box-shadow:
    0 8px 32px -6px rgba(0, 153, 71, 0.25),
    0 0 0 1px rgba(0, 153, 71, 0.20),
    0 2px 8px rgba(0, 30, 15, 0.06) !important;
}
body[data-brand="ads"] .card-pricing--recommended:hover {
  border-color: rgba(0, 153, 71, 0.60) !important;
  box-shadow:
    0 20px 48px -10px rgba(0, 153, 71, 0.30),
    0 0 0 1px rgba(0, 153, 71, 0.35),
    0 4px 12px rgba(0, 30, 15, 0.08) !important;
}
body[data-brand="ads"] .card-pricing--recommended::before {
  background: linear-gradient(135deg, #009947, #007A38) !important;
  box-shadow: 0 4px 14px rgba(0, 153, 71, 0.45), 0 2px 4px rgba(0, 153, 71, 0.20) !important;
}
body[data-brand="ads"] .card-pricing--recommended .card-pricing__amount {
  color: #009947 !important;
  -webkit-text-fill-color: #009947 !important;
  background: none !important;
}

/* ---- VIDEO PLACEHOLDER ---- */
.video-placeholder__play {
  background: linear-gradient(135deg, #00E676, #00C853) !important;
  box-shadow: 0 0 0 8px rgba(0, 230, 118, 0.20), 0 8px 24px rgba(0, 230, 118, 0.30) !important;
}
.video-placeholder:hover .video-placeholder__play {
  box-shadow: 0 0 0 12px rgba(0, 230, 118, 0.25), 0 12px 32px rgba(0, 230, 118, 0.35) !important;
}

/* ---- FOCUS RINGS (GLOBAL) ---- */
*:focus-visible {
  outline-color: #009947 !important;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar-thumb {
  background: rgba(0, 153, 71, 0.3) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 153, 71, 0.5) !important;
}

/* ---- SELECTION ---- */
::selection {
  background: rgba(0, 230, 118, 0.25) !important;
  color: #fff !important;
}

/* ---- PRICING FEATURES GRID — mobile responsive ---- */
body[data-brand="ads"] .pricing-included-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 640px) {
  body[data-brand="ads"] .pricing-included-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1024px) {
  body[data-brand="ads"] .pricing-included-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- PRICING GRID — 3 tiers only, centered ---- */
body[data-brand="ads"] .pricing-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 900px) {
  body[data-brand="ads"] .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
  }
}