@import "tailwindcss";

@theme {
  --font-sans: "Inter", sans-serif;
  --font-serif: "Caladea", serif;

  --color-mad-white: #ffffff;
  --color-mad-black: #111111;
  --color-mad-overlay: rgba(0, 0, 0, 0.4);

  --animate-fade-in: fadeIn 0.5s ease-out forwards;
  --animate-slide-up: slideUp 0.6s ease-out forwards;

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Global styles for Restaurant Nögen */
@import url('https://fonts.googleapis.com/css2?family=Caladea:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@300;400;500;600;700;900&display=swap');


body {
  margin: 0;
  overflow-x: hidden;
  background-color: #050505;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Custom scrollbar for chat */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

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

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

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

/* Shimmer/Skeleton Animation */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.animate-shimmer {
  position: relative;
  overflow: hidden;
}

.animate-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 50%,
      transparent 100%);
  animation: shimmer 2s infinite linear;
}

.premium-card-shadow {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  outline: 1px solid rgba(255, 255, 255, 0.1);
}

/* Remove native calendar glyph so the custom icon is the only visible one */
.custom-date-input::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 1.5rem;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}