/* Custom Stylesheet for W3Parking Landing Page */

/* Base Transitions & Scroll Behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #090d10;
}

::-webkit-scrollbar-thumb {
  background: #17242d;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #10b981;
}

/* Range Slider Customization */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #090d10;
  cursor: pointer;
  transition: transform 0.15s ease-in-out, background-color 0.15s;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: #fbbf24;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.6);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #090d10;
  cursor: pointer;
  transition: transform 0.15s ease-in-out, background-color 0.15s;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
  background: #fbbf24;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.6);
}

/* Ripple emulation */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.4s;
  pointer-events: none;
}

.btn-ripple:active::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: 0s;
}

/* Interactive Ledger/Feed Item animations */
.ledger-item {
  animation: slide-in-bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slide-in-bottom {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom Accordion smooth heights */
.accordion-open {
  max-height: 500px !important;
}

/* Smooth opacity transitions for translation text swap */
[data-i18n] {
  transition: opacity 0.15s ease-in-out;
}

/* Theme Toggle Variables & General Overrides */
:root {
  --brand-dark: 248 250 252;
  --brand-surface: 241 245 249;
  --brand-card: 255 255 255;
  --brand-border: 226 232 240;
  --brand-primary: 5 150 105;
  --brand-primary-hover: 4 120 87;
  --brand-accent: 13 148 136;
  --brand-muted: 100 116 139;
  --brand-text: 30 41 59;
  --brand-heading: 15 23 42;
}

html.dark {
  --brand-dark: 6 9 12;
  --brand-surface: 13 19 26;
  --brand-card: 18 27 36;
  --brand-border: 30 45 59;
  --brand-primary: 16 185 129;
  --brand-primary-hover: 52 211 153;
  --brand-accent: 45 212 191;
  --brand-muted: 82 102 122;
  --brand-text: 226 232 240;
  --brand-heading: 255 255 255;
}

.theme-transition, .theme-transition * {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

body {
  background-color: rgb(var(--brand-dark)) !important;
  color: rgb(var(--brand-text)) !important;
}

/* headings and text override in light mode */
html:not(.dark) h1:not(.text-transparent), 
html:not(.dark) h2:not(.text-transparent), 
html:not(.dark) h3:not(.text-transparent), 
html:not(.dark) h4:not(.text-transparent), 
html:not(.dark) h5:not(.text-transparent), 
html:not(.dark) h6:not(.text-transparent) {
  color: rgb(var(--brand-heading)) !important;
}

html:not(.dark) p:not(.text-brand-muted) {
  color: rgb(var(--brand-text)) !important;
}

html:not(.dark) .text-white {
  color: rgb(var(--brand-text)) !important;
}

html:not(.dark) .bg-brand-surface {
  background-color: rgb(var(--brand-surface)) !important;
}

html:not(.dark) .bg-brand-card {
  background-color: rgb(var(--brand-card)) !important;
}

html:not(.dark) .bg-brand-dark {
  background-color: rgb(var(--brand-dark)) !important;
}

html:not(.dark) .border-brand-border {
  border-color: rgb(var(--brand-border)) !important;
}

html:not(.dark) button.text-white, 
html:not(.dark) a.text-white,
html:not(.dark) button .text-white, 
html:not(.dark) a .text-white,
html:not(.dark) .bg-brand-primary .text-white,
html:not(.dark) .bg-brand-accent .text-brand-dark {
  color: #000000 !important;
}

html:not(.dark) .bg-brand-primary {
  background-color: rgb(var(--brand-primary)) !important;
  color: #ffffff !important;
}

html:not(.dark) .bg-brand-primary .text-brand-dark {
  color: #ffffff !important;
}

html:not(.dark) .bg-brand-accent {
  background-color: rgb(var(--brand-accent)) !important;
  color: #000000 !important;
}

html:not(.dark) .bg-brand-accent .text-brand-dark {
  color: #000000 !important;
}

html:not(.dark) .bg-brand-surface\/40 {
  background-color: rgba(var(--brand-surface), 0.4) !important;
}

html:not(.dark) .bg-brand-surface\/95 {
  background-color: rgba(var(--brand-surface), 0.95) !important;
}

html:not(.dark) input, html:not(.dark) select, html:not(.dark) textarea {
  background-color: rgb(var(--brand-card)) !important;
  color: rgb(var(--brand-text)) !important;
  border-color: rgb(var(--brand-border)) !important;
}

html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}