/* Flaticon Hotel Icons */
/* Note: Tailwind CSS is loaded via CDN, so @tailwind directives are not needed */
@font-face {
  font-family: 'flaticon-set-hotel';
  src: url('/sevenbrother-hotel-icon/fonts/flaticon-set-hotel.eot?y2wn11');
  src: url('/sevenbrother-hotel-icon/fonts/flaticon-set-hotel.eot?y2wn11#iefix') format('embedded-opentype'),
    url('/sevenbrother-hotel-icon/fonts/flaticon-set-hotel.ttf?y2wn11') format('truetype'),
    url('/sevenbrother-hotel-icon/fonts/flaticon-set-hotel.woff?y2wn11') format('woff'),
    url('/sevenbrother-hotel-icon/fonts/flaticon-set-hotel.svg?y2wn11#flaticon-set-hotel') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="flaticon-hotel-"], [class*=" flaticon-hotel-"] {
  font-family: 'flaticon-set-hotel' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Icon Classes - Section Headers */
.flaticon-hotel-005-resort-2:before { content: "\f125"; }
.flaticon-hotel-007-review:before { content: "\f126"; }
.flaticon-hotel-008-bedroom:before { content: "\f127"; }
.flaticon-hotel-010-date:before { content: "\f10a"; }
.flaticon-hotel-022-pool:before { content: "\f116"; }
.flaticon-hotel-023-customer-service:before { content: "\f117"; }
.flaticon-hotel-025-room-service-2:before { content: "\f129"; }
.flaticon-hotel-025-travel:before { content: "\f119"; }
.flaticon-hotel-027-breakfast:before { content: "\f11b"; }
.flaticon-hotel-028-swimming-pool:before { content: "\f11c"; }
.flaticon-hotel-070-breakfast-1:before { content: "\f146"; }
.flaticon-hotel-120-wifi:before { content: "\f178"; }
.flaticon-hotel-144-lotus:before { content: "\f190"; }
.flaticon-hotel-151-massage:before { content: "\f197"; }
.flaticon-hotel-218-tuxedo:before { content: "\f1da"; }
.flaticon-hotel-230-wine:before { content: "\f1e6"; }

/* Icon Classes - Room Features */
.flaticon-hotel-002-drawers:before { content: "\f102"; }
.flaticon-hotel-005-bathroom:before { content: "\f105"; }
.flaticon-hotel-007-sofa:before { content: "\f107"; }
.flaticon-hotel-008-hangers:before { content: "\f108"; }
.flaticon-hotel-012-lamp:before { content: "\f10c"; }
.flaticon-hotel-015-table:before { content: "\f10f"; }
.flaticon-hotel-016-bed-1:before { content: "\f110"; }
.flaticon-hotel-019-table-2:before { content: "\f113"; }
.flaticon-hotel-020-hanger:before { content: "\f114"; }
.flaticon-hotel-023-customer-service:before { content: "\f117"; }
.flaticon-hotel-033-sofa-3:before { content: "\f121"; }
.flaticon-hotel-051-bed-4:before { content: "\f133"; }
.flaticon-hotel-065-group:before { content: "\f141"; }
.flaticon-hotel-083-coffee-cup:before { content: "\f153"; }
.flaticon-hotel-099-car-key:before { content: "\f163"; }
.flaticon-hotel-110-air-conditioner:before { content: "\f16e"; }
.flaticon-hotel-123-air-conditioner-4:before { content: "\f17b"; }
.flaticon-hotel-133-fridge:before { content: "\f185"; }
.flaticon-hotel-158-shower-1:before { content: "\f19e"; }
.flaticon-hotel-160-bathtub-1:before { content: "\f1a0"; }
.flaticon-hotel-175-sun-bath:before { content: "\f1af"; }
.flaticon-hotel-185-espresso:before { content: "\f1b9"; }
.flaticon-hotel-189-hair-dryer:before { content: "\f1bd"; }
.flaticon-hotel-190-slippers:before { content: "\f1be"; }
.flaticon-hotel-255-cctv:before { content: "\f1ff"; }

:root {
    --font-sevenbrothers: var(--font-sevenbrothers);
    --font-sevenbrothers-black: var(--font-sevenbrothers-black);
    
    /* Semantic color tokens - Light mode */
    --background: 250 250 249; /* #FAFAF9 */
    --foreground: 28 28 28; /* #1C1C1C */
    --card: 255 255 255;
    --card-foreground: 28 28 28;
    --muted: 245 245 244; /* #F5F5F4 */
    --muted-foreground: 75 85 99; /* #4B5563 - Darker gray for better readability */
    --border: 229 231 235; /* #E5E7EB */
    --primary: 220 38 38; /* #DC2626 - Red */
    --primary-foreground: 255 255 255;
    --ring: 220 38 38; /* Red focus ring */
  }

  .dark {
    /* Semantic color tokens - Dark mode (Anthracite/Charcoal - NO BLUE) */
    --background: 23 23 23; /* #171717 - Pure charcoal/anthracite (no blue hue) */
    --foreground: 245 245 245; /* #F5F5F5 - Off-white for high contrast */
    --card: 38 38 38; /* #262626 - Slightly lighter than background */
    --card-foreground: 245 245 245;
    --muted: 38 38 38; /* #262626 */
    --muted-foreground: 163 163 163; /* #A3A3A3 - Medium gray */
    --border: 64 64 64; /* #404040 - Low contrast border */
    --primary: 220 38 38; /* #DC2626 - Vibrant red (same in light/dark) */
    --primary-foreground: 255 255 255;
    --ring: 220 38 38; /* Red focus ring */
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: rgb(var(--background));
    color: rgb(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-sevenbrothers), sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sevenbrothers-black), sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em; /* Slight negative tracking for headings */
    line-height: 1.2; /* Tight line height for headings */
  }

  /* Minimal typography scale */
  h1 {
    font-size: 1.875rem; /* 30px */
    line-height: 2.25rem; /* 36px */
  }
  @media (min-width: 640px) {
    h1 {
      font-size: 2.25rem; /* 36px */
      line-height: 2.5rem; /* 40px */
    }
  }

  h2 {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
  }
  @media (min-width: 640px) {
    h2 {
      font-size: 1.875rem; /* 30px */
      line-height: 2.25rem; /* 36px */
    }
  }

  h3 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
  }
  @media (min-width: 640px) {
    h3 {
      font-size: 1.5rem; /* 24px */
      line-height: 2rem; /* 32px */
    }
  }

  body {
    font-size: 1rem; /* 16px */
    line-height: 1.625; /* 26px - comfortable line height */
  }

  small {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Premium Button Styles - Red Primary with Gradient */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  min-height: 48px;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  color: rgb(var(--primary-foreground));
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 200ms ease-out;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 6px 12px -2px rgba(220, 38, 38, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: scale(0.98) translateY(0);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--ring)), 0 0 0 4px rgba(var(--ring), 0.2);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}

.btn-primary:disabled:hover {
  transform: translateY(0);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  border: 2px solid rgb(var(--border));
  background-color: transparent;
  color: rgb(var(--foreground));
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 200ms ease-out;
}

.btn-secondary:hover {
  background-color: rgb(var(--muted));
  border-color: rgb(var(--foreground));
}

.btn-secondary:active {
  transform: scale(0.98);
}

.btn-secondary:focus-visible {
  outline: 2px solid rgb(var(--ring));
  outline-offset: 2px;
}

/* Premium Card Styles */
.card {
  background-color: rgb(var(--card));
  color: rgb(var(--card-foreground));
  border-radius: 16px;
  border: 1px solid rgb(var(--border));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 200ms ease-out;
}

.card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

/* Premium Input Styles */
.input {
  width: 100%;
  padding: 0.75rem 1rem;
  min-height: 44px;
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  border: 1px solid rgb(var(--border));
  border-radius: 0.5rem;
  transition: all 200ms;
}

.input::placeholder {
  color: rgb(var(--muted-foreground));
}

.input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--ring));
  border-color: transparent;
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Custom utility classes - DO NOT override Tailwind defaults */

  /* Lightbox animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Prevent layout shift */
  .aspect-ratio-fix {
    aspect-ratio: 16 / 9;
  }
  
  /* Smooth transitions */
  .transition-smooth {
    transition: all 200ms ease-out;
  }

  /* Scroll reveal animations */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Card hover lift with image scale */
  .card-hover-lift {
    transition: all 300ms ease-out;
  }

  .card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .card-hover-lift:hover img {
    transform: scale(1.03);
    transition: transform 300ms ease-out;
  }

  /* Respect reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .card-hover-lift,
    .btn-primary,
    .btn-secondary {
      opacity: 1;
      transform: none;
      transition: none;
    }
    
    .card-hover-lift:hover img {
      transform: none;
    }
  }

  /* Container max width - Override Tailwind default */
  .container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  
  @media (min-width: 1280px) {
    .container {
      max-width: 1100px !important;
    }
  }

  /* Override md:py-16 padding-bottom */
  @media (min-width: 768px) {
    .md\:py-16 {
      padding-top: 4rem;
      padding-bottom: 0rem;
    }
  }

  /* Reservation Button with Shiny Glass Effect */
  .reservation-btn {
    position: relative;
  }

  .reservation-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transition: left 0.5s ease-out;
    z-index: 1;
    pointer-events: none;
  }

  .reservation-btn:hover {
    background-color: #991b1b !important;
  }

  .reservation-btn:hover::before {
    left: 100%;
  }

  /* Social media icons hover border in dark mode */
  .dark footer a[aria-label="Google"]:hover,
  .dark footer a[aria-label="Instagram"]:hover,
  .dark footer a[aria-label="Facebook"]:hover,
  .dark footer a[aria-label="TripAdvisor"]:hover {
    border-color: rgb(var(--primary)) !important;
  }

  /* Homepage Amenities Section - Less padding-top to appear right after booking form */
  .amenities-home-wrapper .amenities-section {
    padding-top: 2rem !important;
  }

  @media (min-width: 768px) {
    .amenities-home-wrapper .amenities-section {
      padding-top: 3rem !important;
    }
  }

  /* Amenities Page - Reduce spacing between title and subtitle */
  .amenities-page-header h1 {
    margin-bottom: 0.75rem !important;
  }

  .amenities-page-header {
    margin-bottom: 2rem !important;
  }

  @media (min-width: 768px) {
    .amenities-page-header {
      margin-bottom: 2.5rem !important;
    }
  }

  /* Amenities Page - Reduce padding-top of amenities section */
  .amenities-page-content .amenities-section {
    padding-top: 0 !important;
  }

  /* Hide amenities section header on amenities page (page has its own header) */
  .amenities-page-content .amenities-section-header {
    display: none;
  }

  /* Contact page icon hover grow effect */
  .contact-icon-wrapper {
    transition: transform 0.3s ease-out;
  }

  .contact-icon-wrapper:hover {
    transform: scale(1.15);
  }

  /* Amenities page cards - slide up animation with delay */
  .amenities-page-content .amenities-section .grid .reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .amenities-page-content .amenities-section .grid .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

}

/* Dark mode is handled via Tailwind's dark: prefix in components */

/* Custom responsive padding - REMOVED to prevent conflicts with Tailwind */

/* Focus visible for accessibility - Red ring */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--ring)), 0 0 0 4px rgba(var(--ring), 0.2);
}

/* Link underline animation - Removed ::after styles */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Hero slider specific - disable transforms on reduced motion */
  [class*="translate-y"],
  [class*="scale-"] {
    transform: none !important;
  }
}

/* Custom renovation intro styles */
.renovation-intro-container {
  max-width: 55rem !important;
}

.renovation-intro-text {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  .renovation-intro-text {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* Room detail page banner description */
.room-banner-description {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  .room-banner-description {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* Room detail page description text */
.room-description-text {
  font-size: 0.9rem;
  line-height: 1.3rem;
}

/* Container is now configured via Tailwind config only */
/* No CSS override needed - this prevents conflicts */