casino/frontend/src/styles.css

@import 'tailwindcss';

@theme {
  --color-deep-blue: #0a1219;
  --color-deep-blue-light: #121e27;
  --color-deep-blue-contrast: #1a2835;

  --color-emerald: #10b981;
  --color-emerald-dark: #059669;
  --color-emerald-light: #34d399;

  --color-text-primary: #ffffff;
  --color-text-secondary: #94a3b8;
  --color-text-tertiary: #64748b;

  --color-accent-yellow: #fbbf24;
  --color-accent-red: #ef4444;
  --color-accent-purple: #8b5cf6;
}

body {
  @apply bg-deep-blue text-text-primary h-full;
}

button,
a {
  @apply cursor-pointer active:scale-95 text-text-primary transition-all duration-200;
}

.card {
  @apply bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300;
}

.button-primary {
  @apply bg-emerald hover:bg-emerald-dark text-text-primary transition-all duration-300 active:scale-95 rounded;
}

.button-secondary {
  @apply bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded my-2;
}

.game-card-content {
  @apply p-4;
}

.nav-button {
  @apply hidden lg:block absolute top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110;
}

.slider-container {
  @apply flex transition-transform duration-500 ease-out;
}

.slider-grid {
  @apply min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4;
}

.welcome-bonus {
  @apply text-4xl sm:text-5xl lg:text-7xl font-extrabold text-emerald-light mb-3 sm:mb-4;
}

.bonus-description {
  @apply text-text-secondary text-base sm:text-lg mb-6 sm:mb-8;
}

.section-heading {
  @apply font-bold text-text-primary;
}

.game-heading-sm {
  @apply font-bold text-text-primary text-sm mb-2;
}

.game-heading-xl {
  @apply font-bold text-text-primary text-xl mb-2;
}

.game-text {
  @apply text-text-secondary text-sm mb-4;
}

.stat-container {
  @apply bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center;
}

.stat-number {
  @apply text-xl sm:text-2xl font-bold text-emerald;
}

.stat-text {
  @apply text-text-secondary text-sm;
}

.nav-brand {
  @apply flex items-center text-text-primary text-xl font-semibold;
}

.nav-link {
  @apply px-3 py-2 rounded-md font-normal text-sm text-text-secondary hover:text-text-primary hover:bg-deep-blue-contrast transition-all duration-200;
}

.nav-toggle {
  @apply text-text-secondary hover:text-text-primary transition-colors duration-200;
}

.nav-mobile-menu {
  @apply p-2 pt-2 mb-4 space-y-1 bg-deep-blue-contrast rounded-b-lg;
}

.nav-mobile-link {
  @apply block px-3 py-2 rounded-md text-sm text-text-secondary hover:text-text-primary hover:bg-deep-blue-light transition-all duration-200;
}

.footer-section {
  @apply col-span-2 md:col-span-1;
}

.footer-heading {
  @apply text-text-primary text-sm font-semibold mb-4;
}

.footer-link {
  @apply text-text-secondary hover:text-text-primary text-sm transition-all duration-200;
}

.footer-payment-method {
  @apply bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-all duration-200;
}

.footer-payment-icon {
  @apply text-text-secondary text-lg;
}

.footer-payment-text {
  @apply text-text-secondary text-xs whitespace-nowrap;
}

.footer-copyright {
  @apply text-text-secondary text-sm;
}

.footer-disclaimer {
  @apply text-xs;
}

.modal-bg {
  @apply fixed inset-0 bg-black/80 backdrop-blur-sm z-50 focus:outline-none focus:ring-2 focus:ring-emerald-light;
}

.modal-card {
  @apply bg-deep-blue-contrast overflow-hidden hover:shadow-xl transition-shadow duration-300 p-6 rounded-xl shadow-2xl z-50 min-w-[300px] max-w-[400px] w-full mx-auto border border-deep-blue-light/20 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}

.modal-heading {
  @apply text-2xl font-bold text-text-primary mb-4;
}

.modal-card input {
  @apply w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200;
}

.modal-card label {
  @apply text-text-secondary text-sm font-medium mb-1 block;
}

.modal-card button {
  @apply transition-all duration-200;
}

.modal-card .button-primary {
  @apply bg-emerald hover:bg-emerald-dark text-text-primary transition-all duration-300 active:scale-95 shadow-lg shadow-emerald/20;
}

.modal-card .button-secondary {
  @apply bg-deep-blue-light/50 hover:bg-deep-blue-light w-full py-2.5 my-2 border border-deep-blue-light/30 hover:border-deep-blue-light/50;
}