@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

/* === ROOT VARIABLES === */
:root {
  --primary-blue: #2563eb;
  --primary-blue-dark: #1d4ed8;
  --primary-blue-light: #3b82f6;
  --neutral-gray: #64748b;
  --light-gray: #f1f5f9;
  --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* === GLOBAL TWEAKS === */
html {
  scroll-behavior: smooth;
}

body {
  @apply font-body leading-relaxed text-gray-900 bg-white antialiased;
  font-feature-settings: 'rlig' 1, 'calt' 1;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  overflow-x: hidden;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  @apply font-display font-semibold tracking-tight text-neutral-900;
}

h1 {
  @apply text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900;
}

h2 {
  @apply text-3xl md:text-4xl lg:text-5xl;
}

h3 {
  @apply text-2xl md:text-3xl;
}

p {
  @apply text-neutral-600 leading-relaxed;
}

a {
  @apply transition-all duration-300 ease-in-out text-primary-600 hover:text-primary-700;
  position: relative;
}

a:hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

a:hover::after {
  transform: scaleX(1);
}

/* === ENHANCED FOCUS STYLES === */
*:focus {
  @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-white;
}

button:focus,
a:focus {
  @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-white;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
}

/* === MODERN BUTTON STYLES === */
.btn-primary {
  @apply inline-flex items-center justify-center px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 hover:shadow-lg transition-all duration-200;
}

.btn-secondary {
  @apply inline-flex items-center justify-center px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg border border-blue-600 shadow-sm hover:bg-blue-50 transition-all duration-200;
}

.btn-accent {
  @apply inline-flex items-center justify-center px-8 py-4 bg-purple-600 text-white font-semibold rounded-lg shadow-sm hover:bg-purple-700 transition-all duration-200;
}


.btn-ghost {
  @apply inline-flex items-center justify-center px-6 py-3 text-neutral-600 font-semibold rounded-lg hover:bg-neutral-100 hover:text-neutral-800 transition-all duration-200;
}

/* === PROFESSIONAL TEXT === */
.gradient-text {
  @apply text-blue-600 font-bold;
}

.holographic {
  @apply text-blue-600 font-bold;
}

/* === GLASS EFFECTS === */
.glass-light {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  @apply shadow-xl;
}

.glass-primary {
  @apply bg-primary-50/80 backdrop-blur-lg border border-primary-200/50 shadow-xl;
}

.glass-morphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  @apply shadow-2xl;
}

/* === PROFESSIONAL ANIMATIONS === */

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gentle-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes subtle-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Animation Classes */
.animate-fade-in {
  animation: fade-in 0.8s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

.animate-slide-in-left {
  animation: slide-in-left 0.8s ease-out forwards;
}

.animate-slide-in-right {
  animation: slide-in-right 0.8s ease-out forwards;
}

.animate-scale-in {
  animation: scale-in 0.6s ease-out forwards;
}

.animate-gentle-float {
  animation: gentle-float 4s ease-in-out infinite;
}

.animate-subtle-pulse {
  animation: subtle-pulse 3s ease-in-out infinite;
}

.animate-gradient {
  @apply bg-blue-600;
}

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

.animate-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: shine 3s ease-in-out infinite;
}

/* Stagger animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* === MODERN CARD STYLES === */
.card {
  @apply bg-white rounded-xl shadow-lg border border-neutral-200 p-6 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

.card:hover {
  box-shadow: var(--shadow-medium);
}

.card-accent {
  @apply rounded-xl shadow-lg border p-6 transition-all duration-200 hover:shadow-xl;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.card-feature {
  @apply bg-white rounded-xl shadow-lg border border-gray-200 p-8 transition-all duration-200 hover:shadow-xl;
}

.card-modern {
  @apply rounded-xl shadow-md border p-8 transition-all duration-200 hover:shadow-lg relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-blue);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.card-modern:hover::before {
  transform: scaleX(1);
}

/* === SECTION BACKGROUNDS === */
.section-light {
  @apply relative bg-gray-50;
}

.section-primary {
  @apply relative bg-blue-50;
}

.section-accent {
  @apply relative bg-slate-50;
}

.section-modern {
  @apply relative bg-white;
}

/* === PROFESSIONAL HOVER EFFECTS === */
.hover-lift {
  @apply transition-all duration-200 hover:-translate-y-1 hover:shadow-lg;
}

.hover-scale {
  @apply transition-transform duration-200 hover:scale-102;
}

.hover-glow {
  @apply transition-all duration-200 hover:shadow-md;
}

.interactive-card {
  @apply transition-all duration-200 hover:scale-102 cursor-pointer;
}

.interactive-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-medium);
}

/* === PROFESSIONAL VISUAL ELEMENTS === */
.pulse-orb {
  @apply relative;
}

.pulse-orb::before {
  content: '';
  @apply absolute inset-0 rounded-full opacity-10;
  background: var(--primary-blue);
}

.pulse-orb::after {
  content: '';
  @apply absolute inset-2 rounded-full opacity-20;
  background: var(--primary-blue-light);
}

/* === PROFESSIONAL BACKGROUNDS === */
.mesh-bg {
  @apply bg-gray-50;
}

/* === PROFESSIONAL GLASS EFFECTS === */
.glass-ultra {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-medium);
}

.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-subtle);
}






/* === BADGES === */
.badge {
  @apply inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold;
}

.badge-primary {
  @apply bg-primary-100 text-primary-800 border border-primary-200;
}

.badge-accent {
  @apply bg-accent-100 text-accent-800 border border-accent-200;
}

.badge-success {
  @apply bg-emerald-100 text-emerald-800 border border-emerald-200;
}

/* === DIVIDERS === */
.divider {
  @apply border-t border-neutral-200;
}

.divider-primary {
  @apply border-t-2;
  border-image: var(--primary-gradient) 1;
}

/* === ACCESSIBILITY === */
.sr-only {
  @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
}

.skip-link {
  @apply absolute top-0 left-0 -translate-y-full bg-primary-600 text-white px-4 py-2 rounded-b-md transition-transform focus:translate-y-0 z-50;
}

/* Enhanced focus styles */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-white;
}

.card:focus-within {
  @apply ring-2 ring-primary-500 ring-offset-2 ring-offset-white;
}

/* === RESPONSIVE OPTIMIZATIONS === */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-slide-in-left,
  .animate-gentle-float,
  .animate-subtle-pulse,
  .animate-gradient {
    animation: none;
  }
  
  .interactive-card:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  .hover-lift:hover,
  .hover-scale:hover,
  .hover-glow:hover {
    transform: none;
    box-shadow: none;
  }
  
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-slide-in-left,
  .animate-slide-in-right,
  .animate-scale-in {
    animation-duration: 0.5s;
  }
  
  h1 {
    @apply text-3xl md:text-4xl;
  }
  
  h2 {
    @apply text-2xl md:text-3xl;
  }
  
  .card,
  .card-accent,
  .card-feature,
  .card-modern {
    @apply p-4;
  }
  
  .btn-primary,
  .btn-secondary,
  .btn-accent {
    @apply px-6 py-3 text-base;
  }
}

/* === HIGH CONTRAST SUPPORT === */
@media (prefers-contrast: high) {
  .card,
  .card-accent,
  .card-feature,
  .card-modern {
    @apply border-2 border-neutral-900;
  }
  
  .btn-primary {
    @apply bg-neutral-900 border-2 border-neutral-900;
  }
  
  .btn-secondary {
    @apply border-2 border-neutral-900 text-neutral-900;
  }
}

/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg: rgba(0, 0, 0, 0.1);
    --glass-border: rgba(255, 255, 255, 0.1);
  }
  
  .card,
  .card-modern {
    @apply bg-neutral-800 border-neutral-700 text-white;
  }
  
  .section-light {
    @apply bg-neutral-900;
  }
}

/* === PROFESSIONAL PATTERNS === */
.pattern-dots {
  background-image: radial-gradient(circle at 2px 2px, rgba(0, 0, 0, 0.05) 2px, transparent 0);
  background-size: 40px 40px;
}

.cyber-grid {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* === PROFESSIONAL TYPOGRAPHY === */
.text-modern {
  @apply text-blue-600 font-bold;
}

.text-future {
  @apply text-2xl font-bold tracking-wide text-gray-900;
}

/* === CALENDAR STYLES === */
.react-calendar {
  @apply w-full bg-white border border-gray-300 rounded-lg shadow-sm font-sans;
  line-height: 1.125em;
}

.react-calendar--doubleView {
  @apply w-full;
}

.react-calendar--doubleView .react-calendar__viewContainer {
  @apply flex items-start;
}

.react-calendar--doubleView .react-calendar__viewContainer > * {
  @apply w-1/2 mx-1;
}

.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
  @apply box-border;
}

.react-calendar button {
  @apply m-0 border-0 outline-none;
}

.react-calendar button:enabled:hover,
.react-calendar button:enabled:focus {
  @apply bg-blue-50 text-blue-600;
}

.react-calendar__navigation {
  @apply flex h-12 mb-1;
}

.react-calendar__navigation button {
  @apply min-w-12 bg-white text-gray-700 font-medium text-lg hover:bg-gray-50 focus:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400;
}

.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
  @apply bg-gray-50;
}

.react-calendar__month-view__weekdays {
  @apply text-center text-sm font-semibold text-gray-600;
}

.react-calendar__month-view__weekdays__weekday {
  @apply p-2;
}

.react-calendar__month-view__weekNumbers .react-calendar__tile {
  @apply flex items-center justify-center text-sm font-medium text-gray-500;
}

.react-calendar__month-view__days__day--weekend {
  @apply text-red-600;
}

.react-calendar__month-view__days__day--neighboringMonth {
  @apply text-gray-400;
}

.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
  @apply p-4 text-center;
}

.react-calendar__tile {
  @apply max-w-full text-center p-2 relative bg-white text-gray-700 border-0 hover:bg-blue-50 focus:bg-blue-50 active:bg-blue-100 transition-colors;
}

.react-calendar__tile:disabled {
  @apply bg-gray-100 text-gray-300 cursor-not-allowed;
}

.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
  @apply bg-blue-50 text-blue-600;
}

.react-calendar__tile--now {
  @apply bg-blue-100 text-blue-900 font-semibold;
}

.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
  @apply bg-blue-200;
}

.react-calendar__tile--hasActive {
  @apply bg-blue-600 text-white;
}

.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
  @apply bg-blue-700;
}

.react-calendar__tile--active {
  @apply bg-blue-600 text-white font-semibold;
}

.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
  @apply bg-blue-700;
}

.react-calendar--selectRange .react-calendar__tile--hover {
  @apply bg-blue-100;
}

/* === BOOKING FORM STYLES === */
.booking-form-container {
  @apply max-w-4xl mx-auto p-6;
}

.booking-step {
  @apply space-y-6;
}

.booking-step.hidden {
  @apply hidden;
}

.booking-progress-bar {
  @apply w-full bg-gray-200 rounded-full h-2;
}

.booking-progress-fill {
  @apply bg-blue-600 h-2 rounded-full transition-all duration-300;
}

.time-slot-grid {
  @apply grid grid-cols-2 gap-2;
}

.time-slot-option {
  @apply p-3 text-center border border-gray-300 rounded-lg cursor-pointer transition-all duration-200 hover:bg-blue-50 hover:border-blue-300;
}

.time-slot-option.selected {
  @apply bg-blue-600 text-white border-blue-600;
}

.booking-summary {
  @apply bg-gray-50 border border-gray-200 rounded-lg p-6 space-y-3;
}

.booking-total {
  @apply text-2xl font-bold text-blue-600;
}