/* ============================================================
   ServerFee 2026 — LIGHT THEME
   Palette: navy #083160 · teal #337E81 · amber #F9B91B
   WCAG-checked role mapping:
     navy  -> text/headings (12.9:1 on white, AAA)
     teal  -> links/icons/secondary (4.73:1 on white, AA)
     amber -> CTA FILLS ONLY, with navy ink (7.41:1, AAA)
             (amber on white = 1.75:1 → never used as text/thin line)
   Activated by html[data-theme="light"] (set pre-paint in head.php).
   Loaded AFTER serverfee-2026.css → wins. !important used where the
   dark layer also used !important.
   ============================================================ */

html[data-theme="light"] {
  /* Surfaces */
  --sf-bg:        #EAF1F8;
  --sf-bg-2:      #F5F8FC;
  --sf-surface:   #FFFFFF;
  --sf-surface-2: #EFF4FA;
  --sf-glass-brd: #D7E1EE;
  --sf-glass-brd-hover: #337E81;

  /* Accents — repurpose dark tokens to the new palette */
  --sf-cyan:    #337E81;   /* teal becomes the "accent" */
  --sf-cyan-2:  #2A6669;
  --sf-blue:    #083160;   /* navy */
  --sf-violet:  #1C5E73;   /* navy→teal mid, for gradient variety */
  --sf-indigo:  #083160;

  /* Text (all AA+ on white) */
  --sf-fg:        #0E2C4D;  /* headings — 11:1 */
  --sf-fg-soft:   #3C5476;  /* body — 7.4:1 */
  --sf-fg-muted:  #5B6B83;  /* muted — 5.4:1 */

  /* Status (accessible on white) */
  --sf-green:   #1E7A53;
  --sf-amber:   #B07A00;    /* dark amber when amber must be TEXT */
  --sf-red:     #C0392B;

  /* Gradients — navy→teal for accents/lines/text (visible on white) */
  --sf-grad:        linear-gradient(120deg, #083160 0%, #1C5E73 55%, #337E81 100%);
  --sf-grad-soft:   linear-gradient(120deg, rgba(8,49,96,.07), rgba(51,126,129,.10));
  --sf-grad-text:   linear-gradient(100deg, #083160 0%, #337E81 100%);

  /* Amber CTA tokens (fills with navy ink) */
  --sf-cta:      linear-gradient(120deg, #FFC734, #F9B91B 55%, #EBA200);
  --sf-cta-ink:  #08233F;

  /* Effects */
  --sf-glow-cyan:   0 0 22px rgba(51,126,129,.22);
  --sf-glow-violet: 0 0 24px rgba(8,49,96,.16);
  --sf-shadow:      0 16px 44px -22px rgba(8,49,96,.32);

  color-scheme: light;
}

/* ---------- Base ---------- */
html[data-theme="light"] body {
  background-color: var(--sf-bg) !important;
  color: var(--sf-fg-soft) !important;
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(51,126,129,.14), transparent 60%),
    radial-gradient(800px 600px at 0% 10%, rgba(8,49,96,.10), transparent 55%),
    radial-gradient(1000px 700px at 50% 110%, rgba(249,185,27,.08), transparent 60%),
    var(--sf-bg);
}
html[data-theme="light"] body::after {
  background-image:
    linear-gradient(rgba(8,49,96,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,49,96,.05) 1px, transparent 1px);
}
html[data-theme="light"] ::selection { background: rgba(51,126,129,.25); color: #08233F; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: #DCE5F0; }
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(#083160, #337E81); border-color: #DCE5F0;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #337E81; }

/* ---------- Solid surfaces (replace dark glass) ---------- */
html[data-theme="light"] .sf-glass,
html[data-theme="light"] .why-choose-us-block,
html[data-theme="light"] .serverfee-single-pricing,
html[data-theme="light"] .server-pack,
html[data-theme="light"] .sf-bento-card,
html[data-theme="light"] .serverfee-blog-post,
html[data-theme="light"] .isr_content_07_col,
html[data-theme="light"] .isr_content_09_col,
html[data-theme="light"] .megamenu-panel,
html[data-theme="light"] .nav-dropdown,
html[data-theme="light"] .switch-nav,
html[data-theme="light"] .switch-nav.nav-pills,
html[data-theme="light"] .accordion .card,
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .domain-search-form-group,
html[data-theme="light"] .pricing-info,
html[data-theme="light"] .location_details,
html[data-theme="light"] .serverfee-sidebar-widget,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .feature-toggle {
  background: #FFFFFF !important;
  border-color: var(--sf-glass-brd) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: var(--sf-shadow);
}
html[data-theme="light"] .sf-bento-card.feature {
  background: linear-gradient(135deg, rgba(8,49,96,.05), rgba(51,126,129,.07)), #FFFFFF !important;
}
html[data-theme="light"] .megamenu-panel,
html[data-theme="light"] .nav-dropdown {
  box-shadow: var(--sf-shadow) !important;
}

/* ---------- Header / nav ---------- */
html[data-theme="light"] .serverfee-header {
  background: rgba(255,255,255,.86) !important;
  border-bottom-color: var(--sf-glass-brd);
}
html[data-theme="light"] .serverfee-default-header.nav-sticky.sf-scrolled .serverfee-header,
html[data-theme="light"] .serverfee-header.sf-scrolled {
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 30px -16px rgba(8,49,96,.28);
}
html[data-theme="light"] .serverfee-top-bar {
  background: linear-gradient(90deg, #FFFFFF, #E7EFF8) !important;
  border-bottom-color: var(--sf-glass-brd);
}
html[data-theme="light"] .serverfee-top-bar .text-head,
html[data-theme="light"] .serverfee-top-bar .text-head p { color: var(--sf-fg-soft) !important; }
html[data-theme="light"] .nav-menu > li > a { color: var(--sf-fg) !important; }
html[data-theme="light"] .nav-menu > li:hover > a { color: var(--sf-cyan) !important; }
html[data-theme="light"] .nav-menu > li > a.portal {
  background: var(--sf-cta) !important; color: var(--sf-cta-ink) !important;
  box-shadow: 0 8px 22px -10px rgba(249,185,27,.55);
}
html[data-theme="light"] .megamenu-panel .media:hover { background: rgba(51,126,129,.07); }
html[data-theme="light"] .head-area .social-header a {
  background: #FFFFFF !important; border-color: var(--sf-glass-brd); color: var(--sf-cyan) !important;
}
html[data-theme="light"] .head-area .social-header a:hover {
  background: var(--sf-cyan) !important; color: #FFFFFF !important;
}
@media (max-width: 991px){
  html[data-theme="light"] .nav-menus-wrapper { background: #FFFFFF !important; }
  html[data-theme="light"] .nav-menu > li > a { color: var(--sf-fg) !important; }
}

/* ---------- Primary action = AMBER fill + navy ink ---------- */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .sf-btn-primary,
html[data-theme="light"] .pack-btn a,
html[data-theme="light"] .domain-search-form input[type="submit"],
html[data-theme="light"] .switch-nav .nav-link.active,
html[data-theme="light"] .switch-nav .show .switch-nav_a,
html[data-theme="light"] .switch-nav_a.active,
html[data-theme="light"] .feature-toggle:hover,
html[data-theme="light"] .feature-toggle.active {
  background: var(--sf-cta) !important;
  color: var(--sf-cta-ink) !important;
  border: none !important;
  box-shadow: 0 10px 26px -10px rgba(249,185,27,.6);
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .sf-btn-primary:hover,
html[data-theme="light"] .pack-btn a:hover,
html[data-theme="light"] .domain-search-form input[type="submit"]:hover {
  color: var(--sf-cta-ink) !important;
  box-shadow: 0 16px 36px -12px rgba(249,185,27,.75);
}
/* Secondary / ghost = white with navy ink, teal on hover */
html[data-theme="light"] .btn-outline-secondary,
html[data-theme="light"] .sf-btn-ghost {
  background: #FFFFFF !important; color: var(--sf-fg) !important;
  border: 1px solid var(--sf-glass-brd) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="light"] .btn-outline-secondary:hover,
html[data-theme="light"] .sf-btn-ghost:hover {
  border-color: var(--sf-cyan) !important; color: var(--sf-cyan) !important;
  box-shadow: var(--sf-glow-cyan);
}

/* check bullets: teal disc + WHITE glyph (white on teal 4.73:1) */
html[data-theme="light"] .serverfee-list.check li::before,
html[data-theme="light"] .pack-features ul li::before {
  background: var(--sf-cyan); color: #FFFFFF;
}
html[data-theme="light"] .pricing-page-list li a::before,
html[data-theme="light"] .pricing-info .serverfee-list li i,
html[data-theme="light"] .check-list-item i,
html[data-theme="light"] .icon-check,
html[data-theme="light"] .check-list li i,
html[data-theme="light"] .serverfee-icon-menu .single-menu-item a i { color: var(--sf-cyan); }

/* ---------- Hero ---------- */
html[data-theme="light"] .sf-orbit-core svg,
html[data-theme="light"] .sf-orbit-core .sf-svg-icon { color: #FFFFFF; } /* white glyph on navy→teal core */
html[data-theme="light"] .sf-orbit .sf-chip {
  background: #FFFFFF; border-color: var(--sf-glass-brd); color: var(--sf-cyan);
  box-shadow: 0 6px 16px -8px rgba(8,49,96,.35);
}
html[data-theme="light"] .sf-orbit { border-color: rgba(8,49,96,.18); }
html[data-theme="light"] .sf-stat .sf-stat-label { color: var(--sf-fg-muted); }

/* ---------- Domain search ---------- */
html[data-theme="light"] .domain-search-form input[type="search"]#domain-search,
html[data-theme="light"] .domain-search-form select {
  background: #FFFFFF !important; border-color: #7F90A8 !important; color: var(--sf-fg) !important;
}
html[data-theme="light"] .domain-search-form input#domain-search::placeholder { color: var(--sf-fg-muted); }
html[data-theme="light"] .domain-search-form input#domain-search:focus {
  border-color: var(--sf-cyan) !important; box-shadow: 0 0 0 3px rgba(51,126,129,.25);
}
html[data-theme="light"] .serverfee-domain-info .domain-name { background: #FFFFFF; border-color: var(--sf-glass-brd); }
html[data-theme="light"] .serverfee-domain-info .domain-name strong { color: var(--sf-cyan); }

/* ---------- Pricing / plan cards ---------- */
html[data-theme="light"] .serverfee-single-pricing.active { border-color: var(--sf-cyan) !important; }
html[data-theme="light"] .serverfee-single-pricing.active::after,
html[data-theme="light"] .server-pack.active::before,
html[data-theme="light"] .server-pack.featured::before { background: var(--sf-cta); color: var(--sf-cta-ink); }
html[data-theme="light"] .pack-discount {
  background: rgba(30,122,83,.10); color: var(--sf-green) !important; border-color: rgba(30,122,83,.30);
}
html[data-theme="light"] .pack-features ul li { border-bottom-color: rgba(8,49,96,.10); }
html[data-theme="light"] .pricing-page-list li { border-top-color: rgba(8,49,96,.10); }
html[data-theme="light"] .server-pack.active,
html[data-theme="light"] .server-pack.featured,
html[data-theme="light"] .serverfee-single-pricing.active {
  box-shadow: var(--sf-shadow), 0 0 22px rgba(51,126,129,.20);
}

/* ---------- Banners (page hero) ---------- */
html[data-theme="light"] .serverfee-banner,
html[data-theme="light"] .service-banner {
  background-color: #EAF1F8 !important; border-bottom-color: var(--sf-glass-brd);
}
html[data-theme="light"] .serverfee-banner::before {
  background:
    linear-gradient(90deg, rgba(234,241,248,.92), rgba(234,241,248,.55)),
    radial-gradient(600px 300px at 85% 20%, rgba(51,126,129,.20), transparent 60%),
    radial-gradient(500px 300px at 10% 90%, rgba(8,49,96,.16), transparent 60%);
}
html[data-theme="light"] .serverfee-banner .banner-sub-title { color: var(--sf-cyan) !important; }
html[data-theme="light"] .banner-ico { filter: drop-shadow(0 0 16px rgba(51,126,129,.35)); }

/* animated banner FX → navy/teal/amber on light */
html[data-theme="light"] .sf-bfx-grid {
  background-image:
    linear-gradient(rgba(8,49,96,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,49,96,.10) 1px, transparent 1px);
}
html[data-theme="light"] .sf-bfx-beam {
  background: linear-gradient(90deg, transparent, rgba(51,126,129,.14), transparent);
}
html[data-theme="light"] .sf-bfx-orb1 { background: radial-gradient(circle, rgba(8,49,96,.40), transparent 70%); }
html[data-theme="light"] .sf-bfx-orb2 { background: radial-gradient(circle, rgba(51,126,129,.40), transparent 70%); }
html[data-theme="light"] .sf-bfx-dot { background: #337E81; box-shadow: 0 0 8px rgba(51,126,129,.7); }

/* ---------- Icons ---------- */
html[data-theme="light"] .sf-svg-icon { color: var(--sf-cyan); }              /* teal 4.73:1 on white */
html[data-theme="light"] .why-choose-us-block .choose-us-img .sf-svg-icon { color: #083160; }
html[data-theme="light"] .why-choose-us-block .choose-us-img { background: var(--sf-grad-soft); }
html[data-theme="light"] .sf-bento-card .sf-ico { background: var(--sf-grad-soft); color: var(--sf-cyan); border-color: var(--sf-glass-brd); }
html[data-theme="light"] .pricing-img-block .sf-svg-icon,
html[data-theme="light"] .server-pack .sf-svg-icon { color: var(--sf-cyan); filter: drop-shadow(0 0 10px rgba(51,126,129,.30)); }

/* ---------- CTA / clients / map ---------- */
html[data-theme="light"] .single-client { filter: grayscale(1) brightness(.55); opacity: .6; }
html[data-theme="light"] .single-client:hover { filter: none; opacity: 1; }
html[data-theme="light"] .map-location-area .map-image img { filter: none; opacity: .9; }
html[data-theme="light"] .location_indicator { background: var(--sf-cyan) !important; box-shadow: var(--sf-glow-cyan); }
html[data-theme="light"] .location-name { color: var(--sf-cyan) !important; }

/* ---------- Footer ---------- */
html[data-theme="light"] .serverfee-footer-section {
  background: linear-gradient(180deg, transparent, #E7EFF8 35%, #DDE7F2) !important;
  border-top-color: var(--sf-glass-brd);
}
html[data-theme="light"] .footer-bottom { border-bottom-color: var(--sf-glass-brd); }
html[data-theme="light"] .footer-widget p a,
html[data-theme="light"] .footer-widget .blogroll li a:hover { color: var(--sf-cyan) !important; }
html[data-theme="light"] .social-list.version-3 li a,
html[data-theme="light"] .social-list li a {
  background: #FFFFFF; border-color: var(--sf-glass-brd); color: var(--sf-fg-soft) !important;
}
html[data-theme="light"] .social-list li a:hover { background: var(--sf-cyan); color: #FFFFFF !important; }

/* ---------- Marquee / misc accents ---------- */
html[data-theme="light"] .sf-marquee { border-color: var(--sf-glass-brd); }
html[data-theme="light"] .sf-marquee-track span::before { color: var(--sf-cyan); }
html[data-theme="light"] .sf-marquee-track span { color: var(--sf-fg-muted); }

/* ---------- Forms / inputs / tables ---------- */
html[data-theme="light"] .serverfee-login-from .form-control,
html[data-theme="light"] .serverfee-search-group .form-control {
  background: #FFFFFF !important; border-color: #7F90A8 !important; color: var(--sf-fg) !important;
}
html[data-theme="light"] table { color: var(--sf-fg-soft); }
html[data-theme="light"] table td, html[data-theme="light"] table th { border-color: var(--sf-glass-brd) !important; }

/* ---------- Accordion / tabs text ---------- */
html[data-theme="light"] .switch-nav_a,
html[data-theme="light"] .switch-nav .nav-link { color: var(--sf-fg-soft) !important; }
html[data-theme="light"] .accordion .card .card-header .h4 a,
html[data-theme="light"] .accordion .card .card-header .h4 .accordion-span,
html[data-theme="light"] .panel-title, html[data-theme="light"] .panel-title a { color: var(--sf-fg) !important; }
html[data-theme="light"] .accordion .card .card-header .h4 .accordion-span::before,
html[data-theme="light"] .accordion .card .card-header .h4 a::before { color: var(--sf-cyan) !important; }

/* ---------- Focus ring (navy, max contrast on light) ---------- */
html[data-theme="light"] a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] input:focus-visible,
html[data-theme="light"] select:focus-visible,
html[data-theme="light"] .btn:focus-visible,
html[data-theme="light"] [tabindex]:focus-visible {
  outline: 2px solid #083160; outline-offset: 2px;
}

/* ============================================================
   THEME TOGGLE BUTTON (injected by serverfee-motion.js)
   ============================================================ */
.sf-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  background: var(--sf-surface-2); border: 1px solid var(--sf-glass-brd);
  color: var(--sf-cyan); transition: all var(--sf-fast) var(--sf-ease);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  margin-inline-start: .6rem; flex: 0 0 auto;
}
.sf-theme-toggle:hover { border-color: var(--sf-glass-brd-hover); color: var(--sf-fg); transform: translateY(-2px); }
.sf-theme-toggle-float {
  position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 9000;
  width: 46px; height: 46px; box-shadow: var(--sf-shadow);
}
/* when injected as a nav <li> next to the portal button */
.sf-theme-toggle-li {
  list-style: none; display: flex; align-items: center;
}
.nav-menu > li.sf-theme-toggle-li > .sf-theme-toggle::after { display: none; }
@media (max-width: 991px) {
  .sf-theme-toggle-li { justify-content: center; padding: .6rem 0; }
}
.sf-theme-toggle svg { width: 20px; height: 20px; }
.sf-theme-toggle .sf-ic-sun { display: none; }
.sf-theme-toggle .sf-ic-moon { display: block; }
html[data-theme="light"] .sf-theme-toggle .sf-ic-sun { display: block; }
html[data-theme="light"] .sf-theme-toggle .sf-ic-moon { display: none; }