/* Custom Styles for Digital Wealth Partners */

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Glass panel effect */
.glass-panel {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark .glass-panel {
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Vertical text (if needed) */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

/* Smooth transitions for all interactive elements */
* {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

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

::-webkit-scrollbar-thumb:hover {
  background: #B5942B;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
  background: #1f2937;
}

.dark ::-webkit-scrollbar-thumb {
  background: #D4AF37;
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
}

/* ============ Material Icons ============ */
/* Prevent FOUT (Flash of Unstyled Text) for icon font */
/* Icons are COMPLETELY hidden until the font loads, then fade in smoothly */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  /* Hide icon text completely until font loads */
  font-size: 0 !important;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Once body gets 'icons-loaded' class, show all icons with proper size */
body.icons-loaded .material-symbols-outlined {
  font-size: 24px !important;
  width: auto;
  height: auto;
  display: inline;
}

/* Support for different icon sizes */
body.icons-loaded .material-symbols-outlined.text-sm,
body.icons-loaded .material-symbols-outlined.text-lg,
body.icons-loaded .material-symbols-outlined.text-xl,
body.icons-loaded .material-symbols-outlined.text-2xl,
body.icons-loaded .material-symbols-outlined.text-3xl,
body.icons-loaded .material-symbols-outlined.text-4xl,
body.icons-loaded span.material-symbols-outlined[class*="text-"] {
  font-size: inherit !important;
}