/* ============================================
   E-SCOOTER GUIDE - GREEN DOMINANT THEME
   More Green, Less Black - Fresh & Vibrant!
   ============================================ */

/* ============================================
   GLOBAL: ALL GREEN BUTTONS = WHITE TEXT
   ============================================ */
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.card-cta,
.card-cta:hover,
.cta-button,
.cta-button:hover,
a.btn-primary,
a.card-cta,
button.btn-primary,
[class*="btn"][style*="green"],
[class*="btn"][style*="0ACF83"] {
  color: #ffffff !important;
}

/* Ensure links inside green buttons are white */
.btn-primary a,
.card-cta a,
.cta-button a {
  color: #ffffff !important;
}

/* ============================================
   OVERRIDE ROOT COLORS - GREEN FOCUS
   ============================================ */

:root {
  /* Green Variations - DOMINANT */
  --neo-green: #0ACF83;
  --neo-green-light: #2EE89E;
  --neo-green-lighter: #7EFFC1;
  --neo-green-pale: #E8FFF5;
  --neo-green-dark: #08a869;
  --neo-green-deep: #067a4d;

  /* Secondary accent - kept but reduced */
  --electric-blue: #0A84FF;

  /* Reduce black usage */
  --carbon-black: #2d3a3a;
  /* Softer, greener black */
  --text-primary: #1e2f2f;
  /* Dark green-tinted */

  /* Green-tinted grays */
  --text-secondary: #4a6363;
  --text-muted: #7a9999;

  /* Green-tinted backgrounds */
  --ultra-light-bg: #f0faf6;
  --card-border: #d0e8e0;
}

/* ============================================
   ANIMATED ORBS - MORE GREEN!
   ============================================ */

.orb-1 {
  background: radial-gradient(circle, rgba(10, 207, 131, 0.5) 0%, transparent 70%) !important;
}

.orb-2 {
  background: radial-gradient(circle, rgba(46, 232, 158, 0.45) 0%, transparent 70%) !important;
}

.orb-3 {
  background: radial-gradient(circle, rgba(126, 255, 193, 0.35) 0%, transparent 70%) !important;
}

.orb-4 {
  background: radial-gradient(circle, rgba(10, 207, 131, 0.4) 0%, transparent 70%) !important;
}

/* ============================================
   NAVIGATION - GREEN ACTIVE STATE
   ============================================ */

.nav-link.active {
  background: linear-gradient(135deg, #0ACF83 0%, #08a869 100%) !important;
  color: #fff !important;
  box-shadow:
    0 4px 15px rgba(10, 207, 131, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.nav-link:hover {
  color: var(--neo-green) !important;
  background: rgba(10, 207, 131, 0.1) !important;
}

/* ============================================
   HERO SECTION - GREEN FOCUS
   ============================================ */

.hero {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(10, 207, 131, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 0%, rgba(46, 232, 158, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(126, 255, 193, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(10, 207, 131, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f0faf6 100%) !important;
}

.hero-badge {
  background: linear-gradient(135deg, rgba(10, 207, 131, 0.25), rgba(46, 232, 158, 0.2)) !important;
  border: 1px solid rgba(10, 207, 131, 0.5) !important;
  color: var(--neo-green-dark) !important;
  box-shadow:
    0 0 40px rgba(10, 207, 131, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.hero h1 {
  background: linear-gradient(135deg, #1e2f2f 0%, #2d4a4a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero h1 .highlight {
  background: linear-gradient(135deg, #0ACF83 0%, #2EE89E 50%, #0ACF83 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero h1 .highlight::after {
  background: linear-gradient(90deg, #0ACF83, #2EE89E, #0ACF83) !important;
  opacity: 0.5 !important;
}

/* Hero Stats */
.hero-stats {
  background: linear-gradient(135deg, rgba(10, 207, 131, 0.08), rgba(255, 255, 255, 0.9)) !important;
  border: 1px solid rgba(10, 207, 131, 0.2) !important;
}

.stat-number {
  background: linear-gradient(135deg, #0ACF83 0%, #08a869 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.stat-number span {
  background: linear-gradient(135deg, #2EE89E 0%, #0ACF83 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ============================================
   BUTTONS - GREEN PRIMARY
   ============================================ */

.btn-primary {
  background: linear-gradient(135deg, #0ACF83 0%, #08a869 100%) !important;
  color: #fff !important;
  box-shadow:
    0 8px 32px rgba(10, 207, 131, 0.4),
    0 2px 8px rgba(10, 207, 131, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2EE89E 0%, #0ACF83 100%) !important;
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow:
    0 16px 48px rgba(10, 207, 131, 0.5),
    0 4px 12px rgba(10, 207, 131, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.btn-secondary {
  background: linear-gradient(135deg, #2d4a4a 0%, #1e2f2f 100%) !important;
  box-shadow:
    0 8px 32px rgba(45, 74, 74, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #3d5a5a 0%, #2d4a4a 100%) !important;
}

.btn-outline {
  border: 2px solid rgba(10, 207, 131, 0.4) !important;
  color: var(--neo-green-dark) !important;
}

.btn-outline:hover {
  border-color: var(--neo-green) !important;
  background: rgba(10, 207, 131, 0.1) !important;
  color: var(--neo-green) !important;
  box-shadow:
    0 8px 32px rgba(10, 207, 131, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Blog Category Filter Buttons - Always readable */
button.btn-outline,
button.btn-outline:link,
button.btn-outline:visited,
button[data-category] {
  color: #047857 !important;
  /* Dark green for readability */
  -webkit-text-fill-color: #047857 !important;
}

button.btn-outline:hover,
button.btn-outline:focus,
button[data-category]:hover,
button[data-category]:focus {
  color: #065f46 !important;
  -webkit-text-fill-color: #065f46 !important;
  background: rgba(10, 207, 131, 0.25) !important;
}

button.btn-outline.active,
button[data-category].active {
  background: var(--neo-green) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ============================================
   CATEGORY CARDS - GREEN ACCENTS
   ============================================ */

.category-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(240, 250, 246, 0.8)) !important;
  border: 1px solid rgba(10, 207, 131, 0.15) !important;
}

.category-card::before {
  background: linear-gradient(90deg, #0ACF83, #2EE89E, #7EFFC1) !important;
}

.category-card:hover {
  border-color: rgba(10, 207, 131, 0.4) !important;
  box-shadow:
    0 24px 64px rgba(10, 207, 131, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.category-icon {
  background: linear-gradient(135deg, #0ACF83 0%, #2EE89E 100%) !important;
  box-shadow:
    0 8px 24px rgba(10, 207, 131, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.category-card:hover .category-icon {
  background: linear-gradient(135deg, #2EE89E 0%, #7EFFC1 100%) !important;
  box-shadow:
    0 12px 32px rgba(10, 207, 131, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.category-arrow {
  background: rgba(10, 207, 131, 0.1) !important;
  color: var(--neo-green) !important;
}

.category-card:hover .category-arrow {
  background: linear-gradient(135deg, #0ACF83, #2EE89E) !important;
  color: #fff !important;
}

.category-card h3 {
  color: #1e2f2f !important;
}

.category-card:hover h3 {
  color: var(--neo-green-dark) !important;
}

/* Category meta tags */
.category-meta span {
  background: rgba(10, 207, 131, 0.1) !important;
  color: var(--neo-green-dark) !important;
}

/* ============================================
   PRODUCT CARDS - GREEN GLOW
   ============================================ */

.product-card {
  border: 1px solid rgba(10, 207, 131, 0.1) !important;
}

.product-card:hover {
  border-color: rgba(10, 207, 131, 0.25) !important;
  box-shadow:
    0 32px 64px rgba(10, 207, 131, 0.15),
    0 16px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.product-image {
  background: linear-gradient(145deg, #f0faf6 0%, #fff 100%) !important;
}

.product-image::before {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(10, 207, 131, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(46, 232, 158, 0.08) 0%, transparent 50%) !important;
}

.product-badge {
  background: linear-gradient(135deg, #0ACF83 0%, #2EE89E 100%) !important;
  box-shadow:
    0 4px 16px rgba(10, 207, 131, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.product-badge.new {
  background: linear-gradient(135deg, #2EE89E 0%, #7EFFC1 100%) !important;
  color: #067a4d !important;
}

.product-brand {
  color: var(--neo-green) !important;
}

.product-card h3 {
  color: #1e2f2f !important;
}

.product-card:hover h3 {
  color: var(--neo-green-dark) !important;
}

.spec-item {
  background: rgba(10, 207, 131, 0.08) !important;
  border: 1px solid rgba(10, 207, 131, 0.1) !important;
}

.spec-item svg {
  color: var(--neo-green) !important;
}

.product-card:hover .spec-item {
  background: rgba(10, 207, 131, 0.15) !important;
  border-color: rgba(10, 207, 131, 0.25) !important;
}

.product-price {
  color: var(--neo-green-dark) !important;
  font-weight: 800 !important;
}

.product-action {
  background: linear-gradient(135deg, #0ACF83 0%, #08a869 100%) !important;
  box-shadow:
    0 8px 24px rgba(10, 207, 131, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.product-action:hover {
  background: linear-gradient(135deg, #2EE89E 0%, #0ACF83 100%) !important;
  box-shadow:
    0 12px 32px rgba(10, 207, 131, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   BENEFITS SECTION - GREEN ICONS
   ============================================ */

.benefit-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 250, 246, 0.8)) !important;
  border: 1px solid rgba(10, 207, 131, 0.1) !important;
}

.benefit-card::before {
  background: linear-gradient(135deg, #0ACF83, #2EE89E) !important;
}

.benefit-card:hover {
  box-shadow:
    0 24px 48px rgba(10, 207, 131, 0.15),
    0 12px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.benefit-icon {
  background: linear-gradient(135deg, #0ACF83 0%, #2EE89E 100%) !important;
  box-shadow:
    0 12px 32px rgba(10, 207, 131, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
}

.benefit-card:hover .benefit-icon {
  background: linear-gradient(135deg, #2EE89E 0%, #7EFFC1 100%) !important;
  box-shadow:
    0 16px 40px rgba(10, 207, 131, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}

.benefit-card h3 {
  color: #1e2f2f !important;
}

/* ============================================
   NEWSLETTER - GREEN GRADIENT BG
   ============================================ */

.newsletter-section {
  background: linear-gradient(135deg, #0ACF83 0%, #08a869 50%, #067a4d 100%) !important;
}

.newsletter-section::before {
  background: radial-gradient(circle, rgba(126, 255, 193, 0.4) 0%, transparent 60%) !important;
}

.newsletter-section::after {
  background: radial-gradient(circle, rgba(46, 232, 158, 0.3) 0%, transparent 60%) !important;
}

.newsletter-text h2 {
  color: #fff !important;
}

.newsletter-text p {
  color: rgba(255, 255, 255, 0.85) !important;
}

.newsletter-input:focus {
  border-color: #2EE89E !important;
  box-shadow:
    0 0 0 4px rgba(46, 232, 158, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

.newsletter-section .btn-primary {
  background: linear-gradient(135deg, #fff 0%, #f0faf6 100%) !important;
  color: var(--neo-green-dark) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.newsletter-section .btn-primary:hover {
  background: #fff !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ============================================
   COUNTRY CARDS - GREEN ACCENTS
   ============================================ */

.country-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 250, 246, 0.8)) !important;
  border: 1px solid rgba(10, 207, 131, 0.15) !important;
}

.country-card:hover {
  border-color: rgba(10, 207, 131, 0.3) !important;
  box-shadow:
    0 20px 48px rgba(10, 207, 131, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.country-rules svg {
  color: var(--neo-green) !important;
}

.country-header {
  border-bottom: 1px solid rgba(10, 207, 131, 0.15) !important;
}

/* ============================================
   FOOTER - GREEN ACCENTS
   ============================================ */

.footer {
  background: linear-gradient(180deg, #f0faf6 0%, #fff 50%, #f5faf8 100%) !important;
}

.footer::before {
  background: linear-gradient(90deg, transparent, rgba(10, 207, 131, 0.3), transparent) !important;
}

.footer-column h4 {
  color: var(--neo-green-dark) !important;
}

.footer-links a {
  color: #4a6363 !important;
}

.footer-links a:hover {
  color: var(--neo-green) !important;
}

.footer-links a::after {
  background: linear-gradient(90deg, #0ACF83, #2EE89E) !important;
}

.social-link {
  border: 1px solid rgba(10, 207, 131, 0.2) !important;
  color: var(--neo-green) !important;
}

.social-link:hover {
  background: linear-gradient(135deg, #0ACF83, #2EE89E) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow:
    0 8px 24px rgba(10, 207, 131, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   SCROLL TO TOP - GREEN
   ============================================ */

.scroll-to-top {
  background: linear-gradient(135deg, #0ACF83 0%, #2EE89E 100%) !important;
  box-shadow:
    0 8px 24px rgba(10, 207, 131, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.scroll-to-top:hover {
  background: linear-gradient(135deg, #2EE89E 0%, #7EFFC1 100%) !important;
  box-shadow:
    0 12px 32px rgba(10, 207, 131, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   COOKIE BANNER - GREEN ACCENT
   ============================================ */

.cookie-banner {
  border: 1px solid rgba(10, 207, 131, 0.2) !important;
}

.cookie-banner h4 {
  color: var(--neo-green-dark) !important;
}

/* ============================================
   PAGE HEADER - GREEN GRADIENT
   ============================================ */

.page-header {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(10, 207, 131, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(46, 232, 158, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 0%, rgba(126, 255, 193, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f0faf6 100%) !important;
}

.page-header h1 {
  background: linear-gradient(135deg, #1e2f2f 0%, var(--neo-green-dark) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.breadcrumb a {
  color: var(--neo-green) !important;
}

/* ============================================
   FILTER BAR - GREEN
   ============================================ */

.filter-bar {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 250, 246, 0.85)) !important;
  border: 1px solid rgba(10, 207, 131, 0.15) !important;
}

.search-input:focus,
.filter-select:focus,
.filter-select:hover {
  border-color: var(--neo-green) !important;
  box-shadow: 0 0 0 4px rgba(10, 207, 131, 0.15) !important;
}

/* ============================================
   INFO BOXES - GREEN VARIANTS
   ============================================ */

.info-box.success {
  border-left: 4px solid var(--neo-green) !important;
  background: linear-gradient(135deg, rgba(10, 207, 131, 0.12), rgba(255, 255, 255, 0.95)) !important;
}

.info-box.info {
  border-left: 4px solid var(--neo-green-light) !important;
  background: linear-gradient(135deg, rgba(46, 232, 158, 0.1), rgba(255, 255, 255, 0.95)) !important;
}

/* ============================================
   CONTENT SECTIONS - GREEN
   ============================================ */

.content-section article {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 250, 246, 0.85)) !important;
  border: 1px solid rgba(10, 207, 131, 0.1) !important;
}

.content-section article h2 {
  border-bottom: 2px solid rgba(10, 207, 131, 0.25) !important;
}

.content-section article h2::after {
  background: linear-gradient(90deg, var(--neo-green), var(--neo-green-light)) !important;
}

/* ============================================
   FEATURE/CRITERIA CARDS - GREEN
   ============================================ */

.feature-item,
.criteria-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 250, 246, 0.85)) !important;
  border: 1px solid rgba(10, 207, 131, 0.1) !important;
}

.feature-item:hover,
.criteria-card:hover {
  border-color: rgba(10, 207, 131, 0.25) !important;
  box-shadow:
    0 16px 40px rgba(10, 207, 131, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ============================================
   COMPARISON TABLE - GREEN HEADER
   ============================================ */

.comparison-table thead {
  background: linear-gradient(135deg, #0ACF83, #08a869) !important;
}

.comparison-table th {
  color: #fff !important;
}

.comparison-table tbody tr:hover td {
  background: rgba(10, 207, 131, 0.08) !important;
}

/* ============================================
   LINKS - GREEN
   ============================================ */

a {
  color: var(--neo-green) !important;
}

a:hover {
  color: var(--neo-green-dark) !important;
}

/* Helper for links on dark/green backgrounds */
.text-white-link {
  color: #ffffff !important;
}

.text-white-link:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ============================================
   LOADER - GREEN
   ============================================ */

.loader-icon {
  border-top-color: var(--neo-green) !important;
}

/* ============================================
   CURSOR GLOW - GREEN
   ============================================ */

.cursor-glow {
  background: radial-gradient(circle, rgba(10, 207, 131, 0.2) 0%, transparent 70%) !important;
}

/* ============================================
   SELECTION - GREEN
   ============================================ */

::selection {
  background: var(--neo-green) !important;
  color: white !important;
}

/* ============================================
   LOGO TEXT ACCENT
   ============================================ */

.logo-text span {
  color: var(--neo-green) !important;
}

/* ============================================
   SECTION HEADERS
   ============================================ */

.section-header h2 {
  color: #1e2f2f !important;
}

.section-header h2::after {
  background: linear-gradient(90deg, #0ACF83, #2EE89E) !important;
}

/* ============================================
   BODY BACKGROUND TINT
   ============================================ */

body {
  background: linear-gradient(180deg, #fff 0%, #f8fcfa 50%, #f0faf6 100%) !important;
}

/* ============================================
   ACCORDION - GREEN
   ============================================ */

.accordion-item {
  border: 1px solid rgba(10, 207, 131, 0.1) !important;
}

.accordion-item:hover {
  box-shadow: 0 8px 24px rgba(10, 207, 131, 0.1) !important;
}

.accordion-header:hover {
  background: rgba(10, 207, 131, 0.08) !important;
}

.accordion-item.active .accordion-header svg {
  color: var(--neo-green) !important;
}

/* ============================================
   FINAL OVERRIDE: ALL GREEN BUTTONS WHITE TEXT
   ============================================ */

/* Force white text on ALL green buttons */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
a.btn-primary,
button.btn-primary,
.card-cta,
.card-cta:link,
.card-cta:visited,
.card-cta:hover,
.card-cta:active,
a.card-cta,
.cta-button,
.cta-button:hover,
.hero-cta .btn-primary,
.product-cta,
.product-cta:hover,
.bestseller-card .card-cta,
.bestseller-card .card-cta:hover,
.quiz-cta,
.quiz-cta:hover,
[class*="btn-primary"],
[class*="card-cta"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Cookie banner buttons */
.cookie-btn-accept,
.cookie-btn-accept:hover {
  color: #ffffff !important;
}

/* Produkte page - btn-affiliate */
.btn-affiliate,
.btn-affiliate:link,
.btn-affiliate:visited,
.btn-affiliate:hover,
.btn-affiliate:active,
.btn-affiliate:focus,
a.btn-affiliate,
.modal-cta .btn-affiliate {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}