/* PageFairy Custom Styles */
/* Extends Tailwind/DaisyUI with minimal custom CSS */

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

/* Hide scrollbar but keep functionality */
body::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* Hero gradient animation */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

/* Line clamp for product names */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hide elements until Alpine loads */
[x-cloak] {
  display: none !important;
}

/* Custom primary gradient */
.text-gradient {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

.card:hover {
  transform: translateY(-2px);
}

/* Input focus states for Telegram Web App */
input:focus,
select:focus {
  outline: none;
  border-color: var(--tg-theme-button-color, #3b82f6);
}

/* Range slider thumb for Telegram theme */
input[type="range"]::-webkit-slider-thumb {
  background: var(--tg-theme-button-color, #3b82f6);
}

/* Loading spinner color */
.loading-spinner {
  color: var(--tg-theme-button-color, #3b82f6);
}

/* Responsive typography */
@media (max-width: 640px) {
  h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.5rem;
  }
}

/* Safe area insets for mobile */
@supports (padding: max(0px)) {
  .safe-area-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}