@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import mobile-specific fixes */
@import './styles/mobile-fixes.css';

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 150 67% 31%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 43 73% 53%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 150 67% 31%;

    --radius: 0.75rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 150 67% 42%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 43 73% 53%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 150 67% 42%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    @apply w-full;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground w-full;
    font-feature-settings: "rlig" 1, "calt" 1;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
}

@layer components {
  /* Enhanced Glass Card with better mobile responsiveness */
  .glass-card {
    @apply bg-white/80 dark:bg-black/60 backdrop-blur-xl border border-white/30 dark:border-white/20 shadow-2xl shadow-primary/5;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  
  .cag-gradient {
    @apply bg-gradient-to-r from-cag-dark via-cag to-cag-light;
  }
  
  .hero-text-gradient {
    @apply bg-gradient-to-r from-cag-accent via-white to-cag-light bg-clip-text text-transparent;
  }
  
  .section-title {
    @apply text-2xl sm:text-3xl lg:text-4xl font-bold mb-6 text-cag-navy dark:text-white;
  }
  
  /* Enhanced button with futuristic effects */
  .btn-shine {
    @apply relative overflow-hidden before:absolute before:top-0 before:left-[-100%] before:w-full before:h-full before:bg-white/20 before:transition-all before:duration-500 hover:before:left-[100%];
  }

  /* Enhanced container with better mobile support */
  .container {
    @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Mobile-first responsive content */
  .mobile-centered-content {
    @apply w-full flex flex-col items-center justify-center px-4 sm:px-6;
  }

  /* Enhanced section styling */
  .content-section {
    @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-20;
  }

  /* Futuristic progress tracker */
  .progress-step {
    @apply relative z-10 flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-300;
  }

  .progress-step.active {
    @apply bg-gradient-to-r from-primary to-primary/80 text-white shadow-lg shadow-primary/25 animate-pulse;
  }

  .progress-step.completed {
    @apply bg-gradient-to-r from-green-500 to-green-600 text-white shadow-lg shadow-green-500/25;
  }

  .progress-step.inactive {
    @apply bg-muted text-muted-foreground border-2 border-muted;
  }

  /* Enhanced form inputs with futuristic styling */
  .futuristic-input {
    @apply glass-card border-2 border-primary/20 focus:border-primary/60 focus:ring-2 focus:ring-primary/20 transition-all duration-200 h-12 px-4 text-base;
  }

  /* Mobile-optimized booking cards */
  .booking-card {
    @apply glass-card rounded-xl p-4 sm:p-6 mb-4 sm:mb-6 transition-all duration-300 hover:shadow-xl hover:shadow-primary/10 hover:-translate-y-1;
  }

  /* ... keep existing code (dot matrix receipt styles) */
  .dot-matrix-receipt {
    font-family: 'Courier New', 'Monaco', 'Lucida Console', monospace !important;
    font-weight: normal !important;
    letter-spacing: 0.5px;
  }

  .dot-matrix-font {
    font-family: 'Courier New', 'Monaco', 'Lucida Console', monospace !important;
    font-weight: normal !important;
    letter-spacing: 0.5px;
  }

  .dot-matrix-border {
    border-style: dotted !important;
    border-width: 1px !important;
    border-color: #333 !important;
  }

  .dot-matrix-border-bottom {
    border-bottom: 1px dotted #333 !important;
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
  }

  .dot-matrix-separator {
    height: 1px;
    background: repeating-linear-gradient(
      to right,
      #333 0px,
      #333 2px,
      transparent 2px,
      transparent 4px
    );
    margin: 8px 0;
  }

  .thermal-receipt {
    @apply font-mono;
    font-size: 10px;
    line-height: 1.2;
  }

  .thermal-receipt .text-xs {
    font-size: 9px;
  }

  .thermal-receipt .text-sm {
    font-size: 10px;
  }

  .thermal-receipt .text-lg {
    font-size: 12px;
  }

  .receipt-card {
    @apply shadow-2xl border-2 border-gray-200;
    font-family: 'Arial', sans-serif;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  @media print {
    .thermal-receipt {
      width: 58mm !important;
      margin: 0 !important;
      box-shadow: none !important;
      border: none !important;
    }
    
    .thermal-receipt * {
      font-size: 8px !important;
      line-height: 1.1 !important;
    }

    .receipt-card {
      box-shadow: none !important;
      border: 1px solid #000 !important;
      margin: 0 !important;
      width: 100% !important;
      max-width: none !important;
    }

    .receipt-card * {
      print-color-adjust: exact !important;
      -webkit-print-color-adjust: exact !important;
    }

    .dot-matrix-font {
      font-family: 'Courier New', monospace !important;
    }
  }

  /* Enhanced mobile responsive section styling */
  .section-container {
    @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Fleet section specific improvements */
  .fleet-card {
    @apply glass-card rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden;
  }

  .fleet-card:hover {
    @apply -translate-y-2 shadow-2xl shadow-primary/10;
  }

  /* Enhanced mobile breakpoints */
  @media (max-width: 768px) {
    .section-container {
      @apply px-3;
    }
    
    .mobile-centered-content {
      @apply px-3;
    }

    .content-section {
      @apply px-3 py-8;
    }

    .fleet-card {
      @apply mb-4;
    }

    .progress-step {
      @apply w-8 h-8 text-xs;
    }

    .section-title {
      @apply text-xl;
    }
  }

  @media (max-width: 640px) {
    .content-section {
      @apply px-2 py-6;
    }
    
    .section-title {
      @apply text-lg;
    }

    .glass-card {
      @apply mx-2;
    }

    .booking-card {
      @apply p-3 mx-1;
    }
  }

  /* Enhanced mobile touch targets */
  @media (max-width: 768px) {
    button, .clickable {
      @apply min-h-[44px] min-w-[44px];
    }

    input, select, textarea {
      @apply min-h-[44px] text-base;
    }
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /* Enhanced animations for mobile */
  @media (max-width: 640px) {
    .animate-fade-in {
      animation: fadeInMobile 0.4s ease-out;
    }

    @keyframes fadeInMobile {
      from {
        opacity: 0;
        transform: translateY(15px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  /* Futuristic glow effects */
  .glow-primary {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.3);
  }

  .glow-accent {
    box-shadow: 0 0 20px hsl(var(--accent) / 0.3);
  }

  /* Enhanced gradient text */
  .gradient-text {
    @apply bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent;
  }
}

/* Enhanced keyframes for futuristic effects */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.2);
  }
  50% {
    box-shadow: 0 0 30px hsl(var(--primary) / 0.4);
  }
}

.float {
  animation: float 6s ease-in-out infinite;
}

.shimmer {
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Enhanced responsive utilities */
@media (max-width: 768px) {
  .mobile-stack {
    @apply flex-col space-y-4 space-x-0;
  }

  .mobile-full {
    @apply w-full;
  }

  .mobile-text-sm {
    @apply text-sm;
  }

  .mobile-p-4 {
    @apply p-4;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .float,
  .shimmer,
  .pulse-glow {
    animation: none;
  }

  .transition-all {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .glass-card {
    @apply bg-background border-2 border-foreground;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}