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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    @apply font-sans text-brand-dark bg-white;
  }
  h1, h2, h3, h4 {
    @apply font-serif;
  }
  h1 { @apply text-4xl md:text-5xl lg:text-6xl font-bold leading-tight; }
  h2 { @apply text-3xl md:text-4xl font-semibold; }
  h3 { @apply text-xl md:text-2xl font-semibold; }
  h4 { @apply text-lg md:text-xl font-medium; }
  p { @apply leading-relaxed; }
  a { @apply transition-colors duration-200; }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-8 py-3 
           bg-brand-dark text-white font-medium rounded-lg
           hover:bg-brand transition-all duration-300 
           focus:outline-none focus:ring-2 focus:ring-brand-dark focus:ring-offset-2
           text-sm md:text-base;
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center px-8 py-3
           border-2 border-brand-dark text-brand-dark font-medium rounded-lg
           hover:bg-brand-dark hover:text-white transition-all duration-300
           focus:outline-none focus:ring-2 focus:ring-brand-dark focus:ring-offset-2
           text-sm md:text-base;
  }
  .btn-cta {
    @apply inline-flex items-center justify-center px-10 py-4
           bg-brand-dark text-white font-semibold rounded-lg text-lg
           hover:bg-brand hover:scale-105 transition-all duration-300 shadow-lg
           focus:outline-none focus:ring-2 focus:ring-brand-dark focus:ring-offset-2;
  }
  .section-padding {
    @apply py-16 md:py-24 px-4 md:px-8;
  }
  .container-site {
    @apply max-w-7xl mx-auto px-4 md:px-8;
  }
  .card {
    @apply bg-white rounded-xl shadow-md overflow-hidden
           hover:shadow-xl transition-shadow duration-300;
  }
  .badge-award {
    @apply inline-flex items-center gap-2 px-4 py-2 
           bg-brand-lightest border border-brand-light 
           rounded-full text-sm font-medium text-brand-dark;
  }
  .input-field {
    @apply w-full px-4 py-3 border border-brand-light rounded-lg
           focus:outline-none focus:ring-2 focus:ring-brand-dark focus:border-transparent
           bg-white text-brand-dark placeholder-brand;
  }
  .gallery-grid {
    @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-4;
  }
  .overlay-gradient {
    @apply absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent;
  }
}

/* Booking Award Card Custom Style */
.booking-award-card {
  background: linear-gradient(135deg, #624943 0%, #a1897c 100%);
  border-radius: 16px;
  padding: 1.5rem;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.booking-award-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(98, 73, 67, 0.3);
}
.booking-award-card .score {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  line-height: 1;
}
.booking-award-card .year {
  font-size: 0.875rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.booking-award-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Calendar styles */
.calendar-day {
  @apply w-10 h-10 flex items-center justify-center rounded-lg text-sm cursor-default;
}
.calendar-day.available {
  @apply bg-green-100 text-green-800;
}
.calendar-day.booked {
  @apply bg-red-100 text-red-800;
}
.calendar-day.blocked {
  @apply bg-gray-200 text-gray-500;
}

/* Cookie consent banner */
.cookie-banner {
  @apply fixed bottom-0 left-0 right-0 z-50 
         bg-brand-dark text-white p-4 md:p-6
         shadow-2xl;
}

/* Maintenance screen */
.maintenance-screen {
  @apply min-h-screen flex items-center justify-center
         bg-brand-lightest text-brand-dark;
}

/* Lightbox */
.lightbox-overlay {
  @apply fixed inset-0 z-50 bg-black/90 flex items-center justify-center;
}