/* ============================================
   GLOBAL STYLES
   All pages use CSS variables from themes.css
   ============================================ */

:root {
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

/* ============================================
   RESET & BASE STYLES
   ============================================ */

/*
   NOTE: We are removing the aggressive reset here because it conflicts with the template's style.css.
   We only keep the essential variables and utility classes.
*/

body {
  /* Only set variables that themes need to override, but don't force unrelated properties */
  background-color: var(--color-dark-bg) !important;
  color: var(--color-paragraph) !important;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Ensure all text elements use theme-aware colors */
p,
span,
div,
section,
article,
label,
li,
button,
.text,
.title,
.heading {
  color: var(--color-paragraph) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-heading) !important;
}

/* Links use primary color */
a {
  color: var(--color-primary) !important;
}

a:hover {
  color: var(--color-secondary) !important;
}

/* Ensure backgrounds and colors transition smoothly on all elements */
* {
  transition: background-color 300ms ease-in-out,
    color 300ms ease-in-out,
    border-color 300ms ease-in-out !important;
}

/* ============================================
   FALLBACK EXPLICIT COLORS
   If variables don't work, force colors directly
   ============================================ */

/* Dark mode is default - force light text */
html,
:root {
  background: #0f172a;
}

body {
  background: #0f172a;
  color: #cbd5e1 !important;
}

body p,
body span,
body div,
body section,
body article,
body label,
body li {
  color: #cbd5e1 !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: #f1f5f9 !important;
}

/* Light mode explicit colors */
[data-scheme="light"] body {
  background: #ffffff !important;
  color: #475569 !important;
}

[data-scheme="light"] body p,
[data-scheme="light"] body span,
[data-scheme="light"] body div,
[data-scheme="light"] body section,
[data-scheme="light"] body article,
[data-scheme="light"] body label,
[data-scheme="light"] body li {
  color: #475569 !important;
}

[data-scheme="light"] body h1,
[data-scheme="light"] body h2,
[data-scheme="light"] body h3,
[data-scheme="light"] body h4,
[data-scheme="light"] body h5,
[data-scheme="light"] body h6 {
  color: #0f172a !important;
}

/* Logo Utility */
.logo-light {
  display: none !important;
}

.logo-dark {
  display: block !important;
}

[data-scheme="light"] .logo-light {
  display: block !important;
}

[data-scheme="light"] .logo-dark {
  display: none !important;
}

/* ============================================
   DARK MODE SECTION OVERRIDES
   Ensure all major sections properly theme
   ============================================ */

/* Header and Navigation */
header {
  background-color: var(--color-card-bg) !important;
  color: var(--color-paragraph) !important;
}

nav {
  background-color: var(--color-card-bg) !important;
  color: var(--color-paragraph) !important;
}

/* Any light backgrounds should be dark in dark mode */
[data-scheme="light"] {

  .bg-light,
  .light-bg {
    background-color: var(--bg-gray-secondary) !important;
  }
}

/* Default dark mode: light backgrounds stay dark */
.bg-light,
.light-bg {
  background-color: var(--bg-gray) !important;
}

/* Text in various elements */
.default-padding,
.default-padding-bottom,
.default-padding-top,
section,
article,
.blog-area,
.service-area,
.about-area,
.pricing-area,
.footer {
  color: var(--color-paragraph) !important;
  background-color: var(--bg-gray, transparent) !important;
}

/* Headings in sections */
.default-padding h1,
.default-padding h2,
.default-padding h3,
.default-padding h4,
.default-padding h5,
.default-padding h6,
.default-padding-bottom h1,
.default-padding-bottom h2,
.default-padding-bottom h3,
.default-padding-bottom h4,
.default-padding-bottom h5,
.default-padding-bottom h6,
section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  color: var(--color-heading) !important;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-heading) !important;
}

/* ============================================
   COMMON TEMPLATE CLASSES THEMING
   ============================================ */

/* Container items */
.item,
.box,
.card,
.content,
.container {
  color: var(--color-paragraph) !important;
}

/* Common element styling */
.info,
.text,
.description {
  color: var(--color-paragraph) !important;
}

/* Ensure footer is properly themed */
footer,
.footer {
  background-color: var(--bg-gray) !important;
  color: var(--color-paragraph) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
  color: var(--color-heading) !important;
}

/* ============================================
   CARD & ITEM STYLING
   Ensure cards use proper colors in both modes
   ============================================ */

/* Keep outer blog container visible - hide inner wrapper */
.blog-style-one,
.blog-style-one.item,
div.blog-style-one.item {
  background-color: var(--color-card-bg) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  padding: 40px !important;
  margin: 0 !important;
  border-radius: 15px !important;
}

html:not([data-scheme]) .blog-style-one,
html:not([data-scheme]) .blog-style-one.item,
html:not([data-scheme]) div.blog-style-one.item {
  background-color: var(--color-card-bg) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  padding: 40px !important;
  margin: 0 !important;
  border-radius: 15px !important;
}

[data-scheme="light"] .blog-style-one,
[data-scheme="light"] .blog-style-one.item,
[data-scheme="light"] div.blog-style-one.item {
  background-color: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  padding: 40px !important;
  margin: 0 !important;
  border-radius: 15px !important;
}

/* Hide inner blog-item-box wrapper */
.blog-item-box {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html:not([data-scheme]) .blog-item-box {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

[data-scheme="light"] .blog-item-box {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Blog card styling */
.blog-item-box,
.home-blog-style-one-item,
.circle-text-card,
.chat-card {
  background-color: var(--color-card-bg) !important;
  color: var(--color-paragraph) !important;
  border-color: var(--color-border) !important;
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out, border-color 300ms ease-in-out !important;
}

/* Ensure text inside cards is visible */
.blog-style-one p,
.blog-item-box p,
.home-blog-style-one-item p,
.circle-text-card p,
.chat-card p,
.blog-style-one span,
.blog-item-box span,
.home-blog-style-one-item span,
.circle-text-card span,
.chat-card span {
  color: var(--color-paragraph) !important;
}

.blog-style-one h1,
.blog-style-one h2,
.blog-style-one h3,
.blog-style-one h4,
.blog-style-one h5,
.blog-style-one h6,
.blog-item-box h1,
.blog-item-box h2,
.blog-item-box h3,
.blog-item-box h4,
.blog-item-box h5,
.blog-item-box h6,
.home-blog-style-one-item h1,
.home-blog-style-one-item h2,
.home-blog-style-one-item h3,
.home-blog-style-one-item h4,
.home-blog-style-one-item h5,
.home-blog-style-one-item h6,
.circle-text-card h1,
.circle-text-card h2,
.circle-text-card h3,
.circle-text-card h4,
.circle-text-card h5,
.circle-text-card h6,
.chat-card h1,
.chat-card h2,
.chat-card h3,
.chat-card h4,
.chat-card h5,
.chat-card h6 {
  color: var(--color-heading) !important;
}

/* Info boxes and metadata */
.blog-style-one .info,
.blog-item-box .info,
.blog-style-one .meta,
.blog-item-box .meta,
.home-blog-style-one-item .info,
.home-blog-style-one-item .meta {
  color: var(--color-paragraph) !important;
}

.blog-style-one .meta a,
.blog-item-box .meta a,
.home-blog-style-one-item .meta a,
.blog-style-one .meta a,
.blog-item-box .meta a {
  color: var(--color-primary) !important;
}

.blog-style-one .meta a:hover,
.blog-item-box .meta a:hover,
.home-blog-style-one-item .meta a:hover {
  color: var(--color-secondary) !important;
}

/* Light mode specific: ensure cards have proper light backgrounds */
[data-scheme="light"] .blog-style-one,
[data-scheme="light"] .blog-item-box,
[data-scheme="light"] .home-blog-style-one-item,
[data-scheme="light"] .circle-text-card,
[data-scheme="light"] .chat-card {
  background-color: #ffffff !important;
  border-color: var(--color-border) !important;
}

/* Dark mode specific: ensure cards have proper dark backgrounds */
html:not([data-scheme]) .blog-style-one,
html:not([data-scheme]) .blog-item-box,
html:not([data-scheme]) .home-blog-style-one-item,
html:not([data-scheme]) .circle-text-card,
html:not([data-scheme]) .chat-card {
  background-color: var(--dark) !important;
  border-color: var(--dark-secondary) !important;
}

/* Override any light text colors in dark mode */
html:not([data-scheme]) .blog-style-one,
html:not([data-scheme]) .blog-item-box,
html:not([data-scheme]) .home-blog-style-one-item,
html:not([data-scheme]) .circle-text-card,
html:not([data-scheme]) .chat-card,
html:not([data-scheme]) .blog-style-one *,
html:not([data-scheme]) .blog-item-box *,
html:not([data-scheme]) .home-blog-style-one-item *,
html:not([data-scheme]) .circle-text-card *,
html:not([data-scheme]) .chat-card * {
  color: var(--color-paragraph) !important;
}

html:not([data-scheme]) .blog-style-one h1,
html:not([data-scheme]) .blog-style-one h2,
html:not([data-scheme]) .blog-style-one h3,
html:not([data-scheme]) .blog-item-box h1,
html:not([data-scheme]) .blog-item-box h2,
html:not([data-scheme]) .blog-item-box h3,
html:not([data-scheme]) .home-blog-style-one-item h1,
html:not([data-scheme]) .home-blog-style-one-item h2,
html:not([data-scheme]) .home-blog-style-one-item h3 {
  color: var(--color-heading) !important;
}

/* Light mode overrides for cards */
[data-scheme="light"] .blog-style-one,
[data-scheme="light"] .blog-item-box,
[data-scheme="light"] .home-blog-style-one-item,
[data-scheme="light"] .circle-text-card,
[data-scheme="light"] .chat-card {
  background-color: #ffffff !important;
  color: var(--color-paragraph) !important;
}

/* Ensure all nested elements in cards follow card theme */
.blog-style-one *,
.blog-item-box *,
.home-blog-style-one-item *,
.circle-text-card *,
.chat-card * {
  transition: color 300ms ease-in-out, background-color 300ms ease-in-out !important;
}

/* ============================================
   SERVICE ITEMS & BUTTONS
   Override all light text colors for dark mode
   ============================================ */

/* ============================================
   AGGRESSIVE COLOR FORCE
   Ensure dark mode text is always visible
   ============================================ */

/* For dark mode (no data-scheme attribute), force all text to use theme colors */
html:not([data-scheme]) {
  /* This catches dark mode - force all text to be light */
}

html:not([data-scheme]) body,
html:not([data-scheme]) p,
html:not([data-scheme]) span,
html:not([data-scheme]) div,
html:not([data-scheme]) a,
html:not([data-scheme]) button,
html:not([data-scheme]) ul,
html:not([data-scheme]) li,
html:not([data-scheme]) h1,
html:not([data-scheme]) h2,
html:not([data-scheme]) h3,
html:not([data-scheme]) h4,
html:not([data-scheme]) h5,
html:not([data-scheme]) h6 {
  color: var(--color-paragraph, #cbd5e1) !important;
}

/* Headings should be even lighter in dark mode */
html:not([data-scheme]) h1,
html:not([data-scheme]) h2,
html:not([data-scheme]) h3,
html:not([data-scheme]) h4,
html:not([data-scheme]) h5,
html:not([data-scheme]) h6 {
  color: var(--color-heading, #f1f5f9) !important;
}

/* Light mode - ensure dark text */
[data-scheme="light"] p,
[data-scheme="light"] span,
[data-scheme="light"] div,
[data-scheme="light"] a,
[data-scheme="light"] button,
[data-scheme="light"] ul,
[data-scheme="light"] li {
  color: var(--color-paragraph, #475569) !important;
}

[data-scheme="light"] h1,
[data-scheme="light"] h2,
[data-scheme="light"] h3,
[data-scheme="light"] h4,
[data-scheme="light"] h5,
[data-scheme="light"] h6 {
  color: var(--color-heading, #0f172a) !important;
}

/* Service Items */
.service-style-one-item,
.service-style-one-item p,
.service-style-one-item span,
.service-style-one-item h4,
.service-style-one-item a.btn-style-four {
  color: var(--color-paragraph) !important;
}

.service-style-one-item h4 {
  color: var(--color-heading) !important;
}

.service-style-one-item h4 a {
  color: var(--color-heading) !important;
}

.service-style-one-item h4 a:hover {
  color: var(--color-primary) !important;
}

/* Button styling */
a.btn-style-four,
.btn-style-four {
  color: var(--color-paragraph) !important;
  text-decoration: none !important;
}

a.btn-style-four:hover,
.btn-style-four:hover {
  color: var(--color-primary) !important;
}

/* Force text visibility in service items */
.service-style-one-item {
  background-color: var(--color-card-bg) !important;
  color: var(--color-paragraph) !important;
}

/* Override any white/light backgrounds in service items */
.service-style-one-item * {
  background-color: transparent !important;
  color: var(--color-paragraph) !important;
}

.service-style-one-item h1,
.service-style-one-item h2,
.service-style-one-item h3,
.service-style-one-item h4,
.service-style-one-item h5,
.service-style-one-item h6 {
  color: var(--color-heading) !important;
}

/* Specific paragraph and span fixes */
.service-style-one-item p {
  color: var(--color-paragraph) !important;
  background-color: transparent !important;
}

.service-style-one-item span {
  color: var(--color-paragraph) !important;
  background-color: transparent !important;
}

/* Force all text in any item classes to use theme colors */
.item p,
.item span,
.item h4,
.item a {
  color: var(--color-paragraph) !important;
}

.item h1,
.item h2,
.item h3,
.item h4,
.item h5,
.item h6 {
  color: var(--color-heading) !important;
}

/* Buttons within items */
.item a.btn,
.item a.btn-style-four,
.item .btn,
.service-style-one-item .btn-style-four {
  color: var(--color-paragraph) !important;
}

/* ============================================
   THEME SWITCHER
   ============================================ */

.theme-controls {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 1000;
}

.theme-switcher-vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.theme-switcher {
  position: relative;
}

.theme-switch-btn {
  background: var(--color-primary);
  color: var(--color-dark-bg);
  border: none;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 0 !important;
}

.theme-switch-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

.theme-switch-btn:hover {
  transform: scale(1.1);
  background: var(--color-secondary);
}

.theme-switch-btn:active {
  transform: scale(0.95);
}

/* Light/Dark scheme toggle button */
.scheme-toggle-btn {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-light-text);
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 0 !important;
}

.scheme-toggle-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

.scheme-toggle-btn:hover {
  background: var(--color-hover);
  transform: translateY(-2px);
  color: var(--color-primary);
}

/* ====== PROTECTIVE RULES: Prevent template styles from affecting theme buttons ====== */
.theme-controls button,
.theme-controls button:before,
.theme-controls button:after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  outline: none !important;
  margin: 0 !important;
}

.theme-switch-btn,
.scheme-toggle-btn {
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Ensure SVGs are visible */
.theme-switch-btn svg,
.scheme-toggle-btn svg {
  font-size: 24px !important;
  line-height: 24px !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
}

.scheme-toggle-btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* ====== END PROTECTIVE RULES ====== */

.theme-menu {
  position: absolute;
  top: 60px;
  right: 0;
  background: var(--color-card-bg);
  color: var(--color-light-text);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  min-width: 200px;
  animation: slideDown var(--transition-normal);
  z-index: 1000;
  backdrop-filter: blur(8px);
}

.theme-menu.hidden {
  display: none;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--color-light-text);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  font-size: 14px;
  font-family: var(--font-family);
}

[data-scheme="light"] .theme-option {
  color: #0F172A !important;
}

[data-scheme="light"] .theme-option:not(.active):hover {
  color: #ffffff !important;
  background: var(--color-primary) !important;
}

[data-scheme="light"] .theme-option.active,
[data-scheme="light"] .theme-option.active:hover {
  color: #ffffff !important;
}

.theme-option:hover {
  background-color: var(--color-hover);
}

.theme-option.active {
  background-color: var(--color-primary);
  color: var(--color-dark-bg);
  font-weight: 600;
}

/* Fix for Minimalist theme active state (Black bg + Dark text = invisible) */
[data-theme="minimalist"] .theme-option.active {
  color: #FFFFFF;
}

.theme-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.theme-name {
  flex: 1;
  text-align: left;
}

.checkmark {
  font-weight: bold;
  color: var(--color-accent);
}

/* ============================================
   NAVIGATION
   ============================================ */

/*
   NOTE: We are removing intrusive .navbar styles that break the template layout.
   The template's validnavs.css should handle the navbar layout.
   We only keep unrelated utility classes.
*/

.navbar {
  /* Only apply glass effect if explicitly desired, but don't force margins/width */
  /* background: var(--glass-bg, rgba(15, 23, 42, 0.8)); */
  /* backdrop-filter: blur(12px); */
  /* z-index: 1000; */
}

.navbar-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 2rem;
  gap: 2rem;
}

.navbar.hidden {
  transform: translateY(-100%);
}

.minimized-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1001;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all var(--transition-normal);
  transform: translateX(-100px);
  opacity: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.minimized-toggle.visible {
  transform: translateX(0);
  opacity: 1;
}

.minimized-toggle:hover {
  background: var(--color-primary);
  color: var(--color-dark-bg);
}

.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-dark-bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-normal);
  transform: translateY(100px);
  opacity: 0;
}

.scroll-top-btn.visible {
  transform: translateY(0);
  opacity: 1;
}

.scroll-top-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  background: var(--color-secondary);
}

/* Glassmorphism Utilities */
.glass-effect {
  background: var(--glass-bg, rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  box-shadow: var(--glass-shadow, 0 8px 32px 0 rgba(0, 0, 0, 0.37));
}

.glass-card {
  background: var(--color-card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  box-shadow: var(--glass-shadow, 0 10px 30px rgba(0, 0, 0, 0.2));
}

.glass-card p,
.glass-card li {
  color: var(--color-light-text);
  opacity: 0.9;
}

/* Advanced header additions */
.nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.nav-search:focus-within {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.2);
}

.nav-search input {
  background: transparent;
  border: none;
  color: var(--color-light-text);
  outline: none;
  padding: 4px;
  width: 240px;
  font-size: 0.9rem;
}

.nav-ctas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  color: var(--color-light-text);
  font-size: 1.5rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile behavior */
@media (max-width: 880px) {
  .nav-search input {
    width: 120px;
  }

  .navbar-menu {
    display: none;
  }

  .nav-ctas {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .navbar.open .navbar-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 12px;
  }

  .navbar.open .navbar-menu a {
    padding: 12px 16px;
  }
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.brand-icon {
  font-size: 1.8rem;
}

.navbar-menu {
  display: flex;
  list-style: none;
  gap: 0;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.navbar-menu li {
  margin: 0;
}

.navbar-menu a {
  display: block;
  padding: 0.75rem 1.25rem;
  color: var(--color-light-text);
  text-decoration: none;
  font-weight: 500;
  transition: all var(--transition-fast);
  border-radius: 6px;
}

.navbar-menu a:hover {
  background: var(--color-primary);
  color: var(--color-dark-bg);
}

.navbar-menu a:active {
  color: var(--color-secondary);
}

/* ============================================
   COMMON COMPONENTS
   ============================================ */

.card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--spacing-lg);
  transition: all var(--transition-normal);
}

.card:hover {
  background-color: var(--color-hover);
  border-color: var(--color-primary);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-dark-bg);
  border: none;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--color-secondary);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
}

.btn-secondary:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.accent-text {
  color: var(--color-accent);
}

.border-bottom {
  border-bottom: 1px solid var(--color-border);
}

/* ============================================
   FOOTER
   Uses theme-provided --footer-bg and --footer-foreground for correct contrast
   ============================================ */

.footer {
  background: var(--footer-bg, var(--color-card-bg));
  color: var(--footer-foreground, var(--color-light-text));
  padding: var(--spacing-xl);
  text-align: center;
  border-top: 1px solid var(--color-border);
  opacity: 0.98;
  font-size: 0.95rem;
}

.footer a {
  color: var(--color-primary);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer .footer-content {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  padding: 0 2rem;
  margin: 0 auto 1rem;
  flex-wrap: wrap;
}

.footer .footer-section {
  flex: 1 1 200px;
  min-width: 180px;
}

.footer .footer-bottom {
  text-align: center;
  margin-top: 1rem;
  opacity: 0.9;
}

/* ============================================
   SCROLL TO TOP
   ============================================ */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Ensure scroll-to-top is visible in all modes */
html:not([data-scheme]) .scroll-to-top {
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

html:not([data-scheme]) .scroll-to-top i {
  color: #ffffff !important;
}

.scroll-to-top.active {
  opacity: 1;
  visibility: visible;
  bottom: 30px;
}

.scroll-to-top:hover {
  background: var(--color-heading);
  transform: translateY(-3px);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
  .theme-controls {
    top: 10px;
    right: 10px;
  }

  .theme-switch-btn {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    border-radius: 50% !important;
  }

  .scheme-toggle-btn {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    border-radius: 50% !important;
  }

  .theme-menu {
    right: -10px;
  }

  .nav {
    gap: var(--spacing-md);
    padding: var(--spacing-md);
  }

  .nav a {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}

/* ============================================
   FINAL OVERRIDES (highest priority)
   Ensure dark mode text is readable by overriding any template rules
   ============================================ */

/* Dark mode: when no data-scheme attribute is present on <html> */
html:not([data-scheme]) * {
  /* Prefer paragraph color for all text unless element is a link or button */
  color: var(--color-paragraph) !important;
  background-color: transparent !important;
}

/* Stronger card/service text for dark mode (improve contrast and remove low-opacity styles) */
html:not([data-scheme]) .service-style-one-item p,
html:not([data-scheme]) .service-style-one-item span,
html:not([data-scheme]) .service-style-one-item .info,
html:not([data-scheme]) .service-style-one-item .description,
html:not([data-scheme]) .blog-style-one p,
html:not([data-scheme]) .blog-item-box p,
html:not([data-scheme]) .home-blog-style-one-item p,
html:not([data-scheme]) .card p,
html:not([data-scheme]) .card span,
html:not([data-scheme]) .card .info {
  color: var(--color-light-text) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}


/* Headings remain brighter */
html:not([data-scheme]) h1,
html:not([data-scheme]) h2,
html:not([data-scheme]) h3,
html:not([data-scheme]) h4,
html:not([data-scheme]) h5,
html:not([data-scheme]) h6 {
  color: var(--color-heading) !important;
}

/* Ensure buttons and links are visible and use theme colors */
/* Links remain primary color */
html:not([data-scheme]) a,
html:not([data-scheme]) a *:not(i) {
  color: var(--color-primary) !important;
}

/* Force white text for buttons and their icons/spans */
html:not([data-scheme]) button,
html:not([data-scheme]) button *,
html:not([data-scheme]) .btn,
html:not([data-scheme]) .btn *,
html:not([data-scheme]) .btn-style-regular:not(.btn-border),
html:not([data-scheme]) .btn-style-regular:not(.btn-border) *,
html:not([data-scheme]) a.btn-style-four,
html:not([data-scheme]) a.btn-style-four *,
html:not([data-scheme]) a.btn-style-one,
html:not([data-scheme]) a.btn-style-one *,
html:not([data-scheme]) .btn-style-two,
html:not([data-scheme]) .btn-style-two *,
html:not([data-scheme]) a.btn-style-two,
html:not([data-scheme]) a.btn-style-two *,
html:not([data-scheme]) .navbar .attr-right .attr-nav li.button a,
html:not([data-scheme]) .navbar .attr-right .attr-nav li.button a * {
  color: #ffffff !important;
}

/* If an element explicitly had white text, force it to paragraph color */
html:not([data-scheme]) [style*="color: #fff"],
html:not([data-scheme]) [style*="color:#fff"],
html:not([data-scheme]) [style*="color: #ffffff"],
html:not([data-scheme]) [style*="color:#ffffff"] {
  color: var(--color-paragraph) !important;
}

/* ============================================
   SERVICE CARD DARK MODE OVERRIDE
   Force service cards to have dark backgrounds in dark mode
   ============================================ */
html:not([data-scheme]) .service-style-one-item {
  background: var(--color-card-bg) !important;
  border-color: var(--color-border) !important;
}

html:not([data-scheme]) .service-style-one-item p {
  color: var(--color-light-text) !important;
  opacity: 1 !important;
}

html:not([data-scheme]) .service-style-one-item span {
  background: var(--bg-gradient) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
}

html:not([data-scheme]) .service-style-one-item h4 {
  color: var(--color-heading) !important;
}

html:not([data-scheme]) .service-style-one-item h4 a {
  color: var(--color-heading) !important;
}

html:not([data-scheme]) .service-style-one-item a.btn-style-four {
  color: var(--color-light-text) !important;
}

/* ============================================
   HOME BLOG CARD DARK MODE OVERRIDE
   ============================================ */
html:not([data-scheme]) .home-blog-style-one-item {
  background: var(--color-card-bg) !important;
  border-color: var(--color-border) !important;
}

html:not([data-scheme]) .home-blog-style-one-item p {
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .home-blog-style-one-item .content {
  background: var(--color-card-bg) !important;
}

html:not([data-scheme]) ul.home-blog-meta li a {
  border-color: var(--color-border) !important;
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) a.btn-read-more {
  color: var(--color-primary) !important;
}

/* ============================================
   TIMELINE CARDS DARK MODE OVERRIDE
   ============================================ */
html:not([data-scheme]) .timeline-style-one-item {
  background: var(--color-card-bg) !important;
  border-color: var(--color-border) !important;
}

html:not([data-scheme]) .timeline-header {
  border-bottom-color: var(--color-border) !important;
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .timeline-header span {
  background: var(--bg-gradient) !important;
  color: #ffffff !important;
}

html:not([data-scheme]) .timeline-body {
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .timeline-body p,
html:not([data-scheme]) .timeline-header p {
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .timeline-header h4 {
  color: var(--color-heading) !important;
}

/* ============================================
   TESTIMONIALS DARK MODE OVERRIDE
   ============================================ */
html:not([data-scheme]) .testimonial-style-one .item {
  background: var(--color-card-bg) !important;
  border: 5px solid var(--color-border) !important;
}

html:not([data-scheme]) .testimonial-style-one .item .content {
  background: transparent !important;
}

html:not([data-scheme]) .testimonial-style-one .item .content p {
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .testimonial-style-one .tm-review {
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .testimonial-style-one .tm-review p {
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .testimonial-style-one .tm-footer {
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .testimonial-style-one .provider h4 {
  color: var(--color-heading) !important;
}

html:not([data-scheme]) .testimonial-style-one .provider span {
  color: var(--color-paragraph) !important;
}

/* ============================================
   FUN FACT / TECHNICAL SKILLS DARK MODE OVERRIDE
   ============================================ */
html:not([data-scheme]) .funfact-style-two-item {
  background: var(--color-card-bg) !important;
  border-color: var(--color-border) !important;
  border: 1px solid var(--color-border) !important;
}

html:not([data-scheme]) .funfact-style-two-item .fun-fact .counter .timer {
  color: var(--color-heading) !important;
}

html:not([data-scheme]) .funfact-style-two-item .fun-fact .counter .operator {
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .funfact-style-two-item .fun-fact .medium {
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .funfact-style-two-item .icon {
  background: transparent !important;
}

/* ============================================
   CONTACT FORM DARK MODE OVERRIDE
   ============================================ */
html:not([data-scheme]) .contact-form {
  background: transparent !important;
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .contact-form .form-group input,
html:not([data-scheme]) .contact-form .form-group textarea,
html:not([data-scheme]) .contact-form .form-control {
  background: var(--color-card-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .contact-form .form-group input::placeholder,
html:not([data-scheme]) .contact-form .form-group textarea::placeholder {
  color: var(--color-paragraph) !important;
}

html:not([data-scheme]) .contact-form label {
  color: var(--color-light-text) !important;
}

html:not([data-scheme]) .fixed-text {
  color: var(--color-light-text) !important;
}

/* ============================================
   FOOTER & COPYRIGHT TEXT (DARK IN BOTH MODES)
   Footer has specific background, keep text dark
   ============================================ */
html:not([data-scheme]) footer p {
  color: var(--color-dark-text) !important;
}

html:not([data-scheme]) footer a {
  color: var(--color-primary) !important;
}

html:not([data-scheme]) .foter-menu a {
  color: var(--color-dark-text) !important;
}

html:not([data-scheme]) .foter-menu a:hover {
  color: var(--color-primary) !important;
}

/* Light mode footer */
[data-scheme="light"] footer p {
  color: var(--color-dark-text) !important;
}

[data-scheme="light"] footer a {
  color: var(--color-primary) !important;
}

/* ============================================
   UTILITIES
   ============================================ */
.text-gradient {
  background: var(--bg-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  display: inline-block;
}

/* ============================================
   HERO SECTION OVERRIDES
   Remove text outline/stroke from rotating text
   ============================================ */
.banner-style-one-items h2 {
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  /* color handles by text-gradient or default */
}

/* ============================================
   UNIVERSAL: WHITE TEXT ON GRADIENT BACKGROUNDS
   Any element with bg-gradient class, or known gradient-backed
   patterns (timeline spans, overlay icons, circle cards) must
   keep white text in ALL modes.
   ============================================ */
[data-scheme="light"] .bg-gradient,
[data-scheme="light"] .bg-gradient *,
[data-scheme="light"] .bg-gradient-secondary,
[data-scheme="light"] .bg-gradient-secondary * {
  color: #ffffff !important;
}

/* ============================================
   CIRCLE BUTTON ARROW VISIBILITY
   Ensure arrows are visible in dark mode
   ============================================ */
html:not([data-scheme]) .banner-style-one-items .d-grid .circle-text-card a {
  background: var(--color-primary) !important;
}

html:not([data-scheme]) .banner-style-one-items .d-grid .circle-text-card a i {
  color: #ffffff !important;
  font-size: 30px !important;
}

/* Light mode: circle-text-card arrow sits on dark/primary background */
[data-scheme="light"] .banner-style-one-items .d-grid .circle-text-card a {
  background: var(--color-primary) !important;
}

[data-scheme="light"] .banner-style-one-items .d-grid .circle-text-card a i {
  color: #ffffff !important;
}

/* ============================================
   GALLERY ICON ARROW VISIBILITY
   Ensure project gallery arrows are white in ALL modes
   ============================================ */
html:not([data-scheme]) .gallery-style-one .overlay .icon a {
  background: var(--bg-gradient) !important;
  color: #ffffff !important;
}

html:not([data-scheme]) .gallery-style-one .overlay .icon a i {
  color: #ffffff !important;
}

/* Light mode: gallery overlay arrows sit on gradient background */
[data-scheme="light"] .gallery-style-one .overlay .icon a {
  background: var(--bg-gradient) !important;
  color: #ffffff !important;
}

[data-scheme="light"] .gallery-style-one .overlay .icon a i {
  color: #ffffff !important;
}

/* ============================================
   SERVICE CARD STATS (6+ Extensions, etc.)
   Ensure counter/stat spans are visible in service cards
   ============================================ */
.service-style-one-item>span {
  color: #ffffff !important;
}

html.light .service-style-one-item>span,
[data-scheme="light"] .service-style-one-item>span {
  color: #1e293b !important;
}

html.light .service-style-one-item:hover>span,
html.light .service-style-one-item.active>span,
[data-scheme="light"] .service-style-one-item:hover>span,
[data-scheme="light"] .service-style-one-item.active>span {
  color: #ffffff !important;
}

/* ============================================
   TIMELINE DATES & LABELS
   Ensure dates and spans in timeline are visible
   ============================================ */
.timeline-style-one-item .timeline-header .right span {
  color: #ffffff !important;
}

.timeline-style-one-item .timeline-header .left h4,
.timeline-style-one-item .timeline-header .left p {
  color: #ffffff !important;
}

html:not([data-scheme]) .timeline-style-one-item .timeline-header .right span {
  color: #ffffff !important;
}

html:not([data-scheme]) .timeline-style-one-item .timeline-header .left h4,
html:not([data-scheme]) .timeline-style-one-item .timeline-header .left p {
  color: #ffffff !important;
}

/* Light mode: date spans sit on gradient background, must stay white */
[data-scheme="light"] .timeline-style-one-item .timeline-header .right span {
  color: #ffffff !important;
}

/* Light mode: timeline headings/text NOT on gradient, should be dark */
[data-scheme="light"] .timeline-style-one-item .timeline-header .left h4,
[data-scheme="light"] .timeline-style-one-item .timeline-header .left p {
  color: #1e293b !important;
}

/* ============================================
   HOME BLOG CARD BOXES - IMPROVED STYLING
   Make blog boxes clearly visible with borders and rounded corners
   ============================================ */
html:not([data-scheme]) .home-blog-style-one-item {
  background-color: var(--color-card-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  padding: 15px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-scheme="light"] .home-blog-style-one-item {
  background-color: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  padding: 15px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Light mode button text */
/* Light mode button text - Force white for filled buttons */
[data-scheme="light"] .btn-style-regular:not(.btn-border),
[data-scheme="light"] .btn-style-regular:not(.btn-border) *,
[data-scheme="light"] a.btn-style-one,
[data-scheme="light"] a.btn-style-one *,
[data-scheme="light"] .btn-style-two,
[data-scheme="light"] .btn-style-two *,
[data-scheme="light"] .navbar .attr-right .attr-nav li.button a,
[data-scheme="light"] .navbar .attr-right .attr-nav li.button a * {
  color: #ffffff !important;
}

/* Light mode - Dark text for outlined/text buttons */
[data-scheme="light"] .btn-style-regular.btn-border,
[data-scheme="light"] .btn-style-regular.btn-border *,
[data-scheme="light"] .btn-style-three,
[data-scheme="light"] .btn-style-four {
  color: var(--dark) !important;
}

[data-scheme="light"] .scroll-to-top {
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

[data-scheme="light"] .scroll-to-top i {
  color: #ffffff !important;
}

/* Light Mode Global Background Override */
[data-scheme="light"],
[data-scheme="light"] body {
  background-color: var(--bg-gray) !important;
  color: var(--dark) !important;
}

/* Light Mode Footer Override */
[data-scheme="light"] footer {
  background-image: none !important;
  background-color: var(--bg-gray) !important;
  color: var(--dark) !important;
}

[data-scheme="light"] footer p,
[data-scheme="light"] footer li,
[data-scheme="light"] footer a,
[data-scheme="light"] footer .footer-logot,
[data-scheme="light"] footer .foter-menu li a {
  color: var(--dark) !important;
}

[data-scheme="light"] footer a:hover,
[data-scheme="light"] footer .foter-menu li a:hover {
  color: var(--color-primary) !important;
}

/* ============================================
   BLOG POST CONTENT SPACING & ROUNDED CORNERS
   Add proper spacing and styling to blog post containers
   ============================================ */

/* Blog post container - styling now on outer .blog-style-one */

/* Ensure blog-style-one wrapper has proper display */
.blog-style-one.item,
div.blog-style-one {
  display: block !important;
  width: 100% !important;
}

/* Blog content info section */
.blog-item-box .info {
  padding: 15px 0 !important;
}

.blog-item-box .info p {
  margin-bottom: 20px !important;
  line-height: 1.8 !important;
}

.blog-item-box .info h3,
.blog-item-box .info h4,
.blog-item-box .info h5 {
  margin-top: 30px !important;
  margin-bottom: 15px !important;
  line-height: 1.4 !important;
}

.blog-item-box .info ul {
  margin-left: 20px !important;
  margin-bottom: 20px !important;
}

.blog-item-box .info ul li {
  margin-bottom: 10px !important;
}

.blog-item-box .info blockquote {
  padding: 20px 20px 20px 30px !important;
  margin: 30px 0 !important;
  border-left: 4px solid var(--color-primary) !important;
  background-color: rgba(99, 102, 241, 0.05) !important;
  border-radius: 8px !important;
}

html:not([data-scheme]) .blog-item-box .info blockquote {
  background-color: rgba(99, 102, 241, 0.1) !important;
  color: var(--color-light-text) !important;
}

[data-scheme="light"] .blog-item-box .info blockquote {
  background-color: rgba(99, 102, 241, 0.05) !important;
  color: var(--color-dark-text) !important;
}

/* Blog thumbnail spacing */
.blog-item-box .thumb {
  margin-bottom: 30px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.blog-item-box .thumb img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
}




/* ============================================
   UNIVERSAL OVERRIDES FOR FILLED BUTTONS (Double Specificity + Corruption Fix)
   Force white text on all gradient/filled buttons.
   Using html:not(#z) body:not(#z) to boost specificity to (2,x,x).
   APPLY BACKGROUND ONLY TO CONTAINER, NOT CHILDREN (*).
   ============================================ */
/* Containers: Background + Color */
/* btn-style-regular uses background-image in ::after, so container must be transparent */
html:not(#z) body:not(#z) .btn-style-regular:not(.btn-border) {
  color: #ffffff !important;
  background: transparent !important;
  /* Enforce layout to prevent overlap */
  padding-right: 100px !important;
  position: relative !important;
}

/* Other buttons needing forced gradient */
html:not(#z) body:not(#z) a.btn-style-one,
html:not(#z) body:not(#z) .btn-style-two {
  color: #ffffff !important;
  background: var(--bg-gradient) !important;
}

/* Children: Color ONLY */
html:not(#z) body:not(#z) .btn-style-regular:not(.btn-border) *,
html:not(#z) body:not(#z) a.btn-style-one *,
html:not(#z) body:not(#z) .btn-style-two * {
  color: #ffffff !important;
  background: none !important;
}

/* Prevent color flash on theme switch: themes.css applies transition: color 300ms
   to body *, which causes button text to briefly flash dark when switching to light mode.
   Override transition for filled button containers and children. */
html:not(#z) body:not(#z) .btn-style-regular:not(.btn-border),
html:not(#z) body:not(#z) .btn-style-regular:not(.btn-border) *,
html:not(#z) body:not(#z) a.btn-style-one,
html:not(#z) body:not(#z) a.btn-style-one *,
html:not(#z) body:not(#z) .btn-style-two,
html:not(#z) body:not(#z) .btn-style-two *,
html:not(#z) body:not(#z) .navbar .attr-right .attr-nav li.button a,
html:not(#z) body:not(#z) .navbar .attr-right .attr-nav li.button a * {
  transition: none !important;
}

/* Enforce Icon Position for Regular Button to prevent overlap */
html:not(#z) body:not(#z) .btn-style-regular:not(.btn-border) i {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-45deg) !important;
}

/* Donate Button Container */
html:not(#z) body:not(#z) .navbar .attr-right .attr-nav li.button a {
  color: #ffffff !important;
  background: var(--dark) !important;
}

/* Donate Button Children */
html:not(#z) body:not(#z) .navbar .attr-right .attr-nav li.button a * {
  color: #ffffff !important;
  background: none !important;
}

/* Scroll to Top Container */
html:not(#z) body:not(#z) .scroll-to-top {
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

/* Scroll to Top Icon */
html:not(#z) body:not(#z) .scroll-to-top i {
  color: #ffffff !important;
  background: none !important;
}


/* ============================================
   THEME SWITCHER STYLES
   ============================================ */
/* ============================================
   THEME SWITCHER STYLES
   ============================================ */
.theme-controls {
  position: fixed;
  right: 30px;
  /* Aligned with Scroll To Top (30px) */
  top: 100px;
  /* Restored to 100px as per original JS intent */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Allow JS to control top if needed, or stick to 100px */
.theme-controls[style] {
  top: 100px !important;
}

.theme-switcher-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Common Button Styles */
.scheme-toggle-btn,
.theme-switch-btn {
  width: 45px;
  height: 45px;
  background: var(--white);
  color: var(--dark);
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* border-right: none; */
  /* Removed for floating style */
  border-radius: 50%;
  /* Match Scroll To Top roundness */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* Floating shadow */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
}

.scheme-toggle-btn:hover,
.theme-switch-btn:hover {
  background: var(--bg-gray);
  color: var(--color-primary);
}

.scheme-toggle-btn svg,
.theme-switch-btn svg {
  pointer-events: none;
  /* Prevent click stealing */
}

/* Dark Mode Overrides (Covers Default and Explicit Dark) */
html:not([data-scheme="light"]) .scheme-toggle-btn,
html:not([data-scheme="light"]) .theme-switch-btn {
  background: var(--dark);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.1);
}

html:not([data-scheme="light"]) .scheme-toggle-btn:hover,
html:not([data-scheme="light"]) .theme-switch-btn:hover {
  background: #2d3748;
  /* Slightly lighter dark */
  color: var(--color-primary);
}

/* Theme Menu Dropdown Wrapper */
.theme-switcher {
  position: relative;
}

/* Dropdown Menu */
.theme-menu {
  position: absolute;
  right: 55px;
  /* To the left of the button */
  top: 0;
  width: 240px;
  background: var(--white);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: block;
  /* Default display loop handled by hidden class */
  transition: all 0.3s ease;
}

/* Hidden State */
.theme-menu.hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/* Dark Mode Dropdown */
html:not([data-scheme="light"]) .theme-menu {
  background: var(--dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}

/* Theme Options List */
.theme-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 5px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-paragraph);
  transition: all 0.2s;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}

html:not([data-scheme="light"]) .theme-option {
  color: var(--white);
}

.theme-option:last-child {
  margin-bottom: 0;
}

/* Hover States - Ensure contrast */
.theme-option:not(.active):hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-primary);
}

html:not([data-scheme="light"]) .theme-option:not(.active):hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

/* Active Theme State - High Specificity */
.theme-option.active {
  background: var(--bg-gradient) !important;
  color: #ffffff !important;
  /* Force white text on gradient */
}

/* Ensure active state persists on hover */
.theme-option.active:hover {
  background: var(--bg-gradient) !important;
  color: #ffffff !important;
  opacity: 0.9;
}

/* Swatch Circle */
.theme-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: inline-block;
}

/* Checkmark */
.checkmark {
  margin-left: auto;
  font-size: 12px;
  font-weight: bold;
}

/* ============================================
   LIGHT MODE: Theme Switcher Hover/Active Fix
   Must be at end of file for cascade priority
   ============================================ */
[data-scheme="light"] .theme-option:not(.active):hover {
  color: #ffffff !important;
  background: var(--color-primary) !important;
}

[data-scheme="light"] .theme-option:not(.active):hover .theme-name,
[data-scheme="light"] .theme-option:not(.active):hover .checkmark {
  color: #ffffff !important;
}

[data-scheme="light"] .theme-option.active,
[data-scheme="light"] .theme-option.active .theme-name,
[data-scheme="light"] .theme-option.active .checkmark,
[data-scheme="light"] .theme-option.active:hover,
[data-scheme="light"] .theme-option.active:hover .theme-name,
[data-scheme="light"] .theme-option.active:hover .checkmark {
  color: #ffffff !important;
}