/* App-specific styles */

/* Hide scrollbar for horizontal scroll */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

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

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

/* Selection color */
::selection {
  background-color: rgba(244, 122, 31, 0.3);
  color: #3c1c10;
}

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

/* Button hover lift effect */
button, .btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:active, .btn:active {
  transform: scale(0.98);
}

/* Image loading placeholder */
img {
  background-color: #f3f4f6;
}

/* Card hover effects */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #f47a1f 0%, #e86a0f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glass effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Responsive typography */
@media (max-width: 640px) {
  h1 {
    font-size: 2.5rem !important;
  }
  h2 {
    font-size: 2rem !important;
  }
}