/* Kiwi Voyages - Main Stylesheet */

/* Import CSS variables and reset first */

/* CSS Variables - Kiwi Voyages Design System */

:root {
  /* Couleurs principales - Thème Vert */
  --primary-green: #2E8B57; /* Vert principal */
  --primary-green-light: #3CB371;
  --primary-green-dark: #1F5F3F;
  
  /* Couleurs secondaires */
  --secondary-blue: #4682B4;
  --accent-orange: #FF8C00;
  
  /* Couleurs neutres */
  --white: #FFFFFF;
  --gray-light: #F8F9FA;
  --gray-medium: #6C757D;
  --gray-dark: #343A40;
  --black: #000000;
  
  /* États */
  --success: #28A745;
  --warning: #FFC107;
  --error: #DC3545;
  --info: #17A2B8;
  
  /* Typographie */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-secondary: 'Poppins', sans-serif;
  
  /* Tailles de police */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  
  /* Poids de police */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Espacement */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  
  /* Alternative spacing names for consistency */
  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-xl);
  --spacing-2xl: var(--space-2xl);
  
  /* Rayons de bordure */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */
  
  /* Ombres */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  /* Breakpoints (pour utilisation dans les media queries) */
  --breakpoint-mobile: 320px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
  
  /* Container max-widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-max-width: 1200px;
  --container-padding: 1rem;
  
  /* Section spacing */
  --section-padding-y: 4rem;
  
  /* Z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* CSS Reset and Normalize - Kiwi Voyages */

/* Box sizing reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */

* {
  margin: 0;
  padding: 0;
}

/* HTML and body setup */

html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--font-normal);
  color: var(--gray-dark);
  background-color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Typography reset */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: 1.2;
  color: var(--gray-dark);
}

h1 { font-size: var(--text-4xl); }

h2 { font-size: var(--text-3xl); }

h3 { font-size: var(--text-2xl); }

h4 { font-size: var(--text-xl); }

h5 { font-size: var(--text-lg); }

h6 { font-size: var(--text-base); }

p {
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

/* Links */

a {
  color: var(--primary-green);
  text-decoration: none;
  transition: color var(--transition-normal);
}

a:hover {
  color: var(--primary-green-dark);
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Lists */

ul, ol {
  list-style: none;
}

/* Images and media */

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements */

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  border: none;
  outline: none;
  background: transparent;
}

/* Remove button styling on iOS */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
}

/* Remove input styling on iOS */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* Table reset */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove outline on focus for mouse users */

:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure focus is visible for keyboard users */

:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Prevent horizontal scroll */

html, body {
  overflow-x: hidden;
}

/* Improve text rendering */

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove default fieldset styling */

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* Remove default legend styling */

legend {
  padding: 0;
}

/* Accessibility improvements */

[hidden] {
  display: none !important;
}

/* Screen reader only content */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Import layout system */

/* Grid System and Layout - Kiwi Voyages */

/* Container */

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Container sizes */

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
    padding: 0 var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
    padding: 0 var(--space-xl);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: var(--container-2xl);
  }
}

/* CSS Grid System */

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* Responsive grid columns */

@media (min-width: 768px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
}

/* Grid gaps */

.gap-xs { gap: var(--space-xs); }

.gap-sm { gap: var(--space-sm); }

.gap-md { gap: var(--space-md); }

.gap-lg { gap: var(--space-lg); }

.gap-xl { gap: var(--space-xl); }

/* Flexbox utilities */

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* Justify content */

.justify-start { justify-content: flex-start; }

.justify-end { justify-content: flex-end; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.justify-around { justify-content: space-around; }

.justify-evenly { justify-content: space-evenly; }

/* Align items */

.items-start { align-items: flex-start; }

.items-end { align-items: flex-end; }

.items-center { align-items: center; }

.items-baseline { align-items: baseline; }

.items-stretch { align-items: stretch; }

/* Align self */

.self-start { align-self: flex-start; }

.self-end { align-self: flex-end; }

.self-center { align-self: center; }

.self-stretch { align-self: stretch; }

/* Flex grow/shrink */

.flex-1 { flex: 1 1 0%; }

.flex-auto { flex: 1 1 auto; }

.flex-initial { flex: 0 1 auto; }

.flex-none { flex: none; }

.grow { flex-grow: 1; }

.grow-0 { flex-grow: 0; }

.shrink { flex-shrink: 1; }

.shrink-0 { flex-shrink: 0; }

/* Responsive flexbox */

@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:flex-col { flex-direction: column; }
  .md\:flex-row { flex-direction: row; }
  .md\:justify-start { justify-content: flex-start; }
  .md\:justify-center { justify-content: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:items-center { align-items: center; }
}

@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:flex-col { flex-direction: column; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:justify-start { justify-content: flex-start; }
  .lg\:justify-center { justify-content: center; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:items-center { align-items: center; }
}

/* Section spacing */

.section {
  padding: var(--space-2xl) 0;
}

.section-sm {
  padding: var(--space-xl) 0;
}

.section-lg {
  padding: var(--space-3xl) 0;
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-3xl) 0;
  }
  
  .section-lg {
    padding: 5rem 0;
  }
}

/* Responsive visibility */

.hidden { display: none; }

.block { display: block; }

.inline { display: inline; }

.inline-block { display: inline-block; }

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:inline { display: inline; }
  .md\:inline-block { display: inline-block; }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:inline { display: inline; }
  .lg\:inline-block { display: inline-block; }
}

/* Responsive Design Utilities and Mobile Optimization - Kiwi Voyages */

/* Mobile-first approach with progressive enhancement */

/* Base mobile styles (320px and up) */

:root {
  /* Touch target sizes for mobile */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  
  /* Mobile-specific spacing */
  --mobile-padding: 1rem;
  --mobile-margin: 0.75rem;
  
  /* Mobile typography adjustments */
  --mobile-text-scale: 0.9;
}

/* Enhanced container system with mobile-first approach */

.container-fluid {
  width: 100%;
  padding: 0 var(--mobile-padding);
  margin: 0 auto;
}

/* Mobile-first responsive breakpoints */

/* Small mobile devices (320px - 479px) */

@media (max-width: 479px) {
  :root {
    --container-padding: 0.75rem;
    --section-padding-y: 2rem;
  }
  
  .container,
  .container-fluid {
    padding: 0 var(--container-padding);
  }
  
  /* Typography scaling for small screens */
  .text-4xl { font-size: 1.75rem; } /* Reduced from 2.25rem */
  .text-3xl { font-size: 1.5rem; }  /* Reduced from 1.875rem */
  .text-2xl { font-size: 1.25rem; } /* Reduced from 1.5rem */
  .text-xl { font-size: 1.125rem; } /* Reduced from 1.25rem */
  
  /* Ensure minimum touch targets */
  .btn,
  .form-input,
  .form-select,
  .header__nav-link,
  .header__mobile-toggle {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }
  
  /* Optimize spacing for small screens */
  .section {
    padding: 2rem 0;
  }
  
  .grid {
    gap: var(--space-sm);
  }
}

/* Mobile devices (480px - 767px) */

@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --container-padding: 1rem;
  }
  
  /* Comfortable touch targets for larger mobile screens */
  .btn,
  .form-input,
  .form-select {
    min-height: var(--touch-target-comfortable);
  }
}

/* Tablet devices (768px - 1023px) */

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-padding: 1.5rem;
    --section-padding-y: 3rem;
  }
  
  /* Tablet-specific grid adjustments */
  .grid-cols-tablet-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-tablet-3 { grid-template-columns: repeat(3, 1fr); }
  
  /* Tablet typography */
  .text-4xl { font-size: 2rem; }
  .text-3xl { font-size: 1.75rem; }
}

/* Desktop devices (1024px and up) */

@media (min-width: 1024px) {
  :root {
    --container-padding: 2rem;
    --section-padding-y: 4rem;
  }
  
  /* Desktop-specific utilities */
  .desktop-only { display: block; }
  .mobile-only { display: none; }
}

/* Large desktop (1440px and up) */

@media (min-width: 1440px) {
  :root {
    --section-padding-y: 5rem;
  }
  
  .container {
    max-width: var(--container-2xl);
  }
}

/* Mobile-specific utilities */

.mobile-only {
  display: block;
}

.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  
  .desktop-only {
    display: block;
  }
}

/* Touch-friendly interactive elements */

.touch-target {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.touch-target-comfortable {
  min-height: var(--touch-target-comfortable);
  min-width: var(--touch-target-comfortable);
}

/* Responsive text utilities */

.text-responsive-sm {
  font-size: var(--text-sm);
}

.text-responsive-base {
  font-size: var(--text-base);
}

.text-responsive-lg {
  font-size: var(--text-lg);
}

@media (min-width: 768px) {
  .text-responsive-sm { font-size: var(--text-base); }
  .text-responsive-base { font-size: var(--text-lg); }
  .text-responsive-lg { font-size: var(--text-xl); }
}

@media (min-width: 1024px) {
  .text-responsive-sm { font-size: var(--text-lg); }
  .text-responsive-base { font-size: var(--text-xl); }
  .text-responsive-lg { font-size: var(--text-2xl); }
}

/* Responsive spacing utilities */

.space-responsive-sm {
  margin: var(--space-sm);
}

.space-responsive-md {
  margin: var(--space-md);
}

.space-responsive-lg {
  margin: var(--space-lg);
}

@media (min-width: 768px) {
  .space-responsive-sm { margin: var(--space-md); }
  .space-responsive-md { margin: var(--space-lg); }
  .space-responsive-lg { margin: var(--space-xl); }
}

/* Mobile navigation enhancements */

@media (max-width: 767px) {
  /* Ensure mobile menu is accessible */
  .header__nav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--white);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-100%);
    transition: transform var(--transition-normal);
    z-index: 1000;
    box-shadow: var(--shadow-lg);
  }
  
  .header__nav.mobile-nav--open {
    transform: translateY(0);
  }
  
  /* Improve mobile menu item spacing */
  .header__nav-link {
    display: block;
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--gray-light);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color var(--transition-fast);
  }
  
  .header__nav-link:hover,
  .header__nav-link:focus {
    background-color: var(--gray-light);
  }
  
  .header__nav-link:last-child {
    border-bottom: none;
  }
  
  /* Mobile menu toggle styling */
  .header__mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  
  .header__mobile-toggle-line {
    width: 24px;
    height: 3px;
    background: var(--primary-green);
    margin: 2px 0;
    transition: all var(--transition-fast);
    border-radius: 2px;
  }
  
  .header__mobile-toggle[aria-expanded="true"] .header__mobile-toggle-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  
  .header__mobile-toggle[aria-expanded="true"] .header__mobile-toggle-line:nth-child(2) {
    opacity: 0;
  }
  
  .header__mobile-toggle[aria-expanded="true"] .header__mobile-toggle-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
}

/* Mobile form enhancements */

@media (max-width: 767px) {
  .search-form__row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .search-form__field {
    margin-bottom: 1rem;
  }
  
  .form-input,
  .form-select {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.875rem 1rem;
  }
}

/* Responsive images */

.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobile-optimized cards */

@media (max-width: 767px) {
  .offers__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding: 0 1rem;
    margin: 0 -1rem;
  }
  
  .offer-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    margin-bottom: 0;
  }
  
  .offer-card__content {
    padding: 1.25rem;
  }
  
  .offer-card__title {
    font-size: 1.125rem;
    line-height: 1.4;
  }
  
  .offer-card__description {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  
  /* Add scroll indicators for mobile */
  .offers__grid::after {
    content: '';
    flex: 0 0 1px;
  }
}

/* Accessibility enhancements for mobile */

@media (max-width: 767px) {
  /* Larger focus indicators on mobile */
  .btn:focus,
  .form-input:focus,
  .header__nav-link:focus {
    outline-width: 3px;
    outline-offset: 3px;
  }
  
  /* Skip link for mobile */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-green);
    color: var(--white);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    font-size: 14px;
  }
  
  .skip-link:focus {
    top: 6px;
  }
}

/* Landscape orientation optimizations */

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 100vh;
    padding: 1rem 0;
  }
  
  .hero__content {
    padding: 1rem;
  }
  
  .hero__title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  
  .hero__subtitle {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  .search-form {
    padding: 1rem;
  }
  
  .search-form__tabs {
    margin-bottom: 1rem;
  }
  
  .search-form__row {
    margin-bottom: 1rem;
  }
}

/* High DPI displays */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize for retina displays */
  .header__logo-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Dark mode support (if user prefers) */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --text-primary: #ffffff;
    --border-color: #333333;
  }
  
  /* Only apply if explicitly enabled */
  .dark-mode-enabled {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
}

/* Reduced motion preferences */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Remove hover transforms */
  .btn:hover,
  .offer-card:hover,
  .header__nav-link:hover {
    transform: none;
  }
}

/* Print styles */

@media print {
  .header__mobile-toggle,
  .hero__search,
  .footer__social {
    display: none;
  }
  
  .hero {
    min-height: auto;
    page-break-inside: avoid;
  }
  
  .offer-card {
    break-inside: avoid;
    margin-bottom: 1rem;
  }
  
  /* Ensure good contrast for printing */
  .btn {
    border: 2px solid #000;
    background: transparent;
    color: #000;
  }
}

/* Container queries support (progressive enhancement) */

@supports (container-type: inline-size) {
  .responsive-container {
    container-type: inline-size;
  }
  
  @container (max-width: 400px) {
    .container-responsive .offer-card {
      padding: 0.75rem;
    }
    
    .container-responsive .offer-card__title {
      font-size: 1rem;
    }
  }
}

/* Import components */

/**
 * Header Component Styles
 * Responsive header with navigation and mobile menu toggle
 * Uses green theme and smooth transitions
 */

/* Header Container */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}

.header--scrolled {
  box-shadow: var(--shadow-md);
}

.header__container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

/* Logo */

.header__logo {
  flex-shrink: 0;
}

.header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--primary-green);
  font-weight: var(--font-bold);
  font-size: var(--text-xl);
  transition: color var(--transition-normal);
}

.header__logo-link:hover {
  color: var(--primary-green-dark);
}

.header__logo-image {
  width: 32px;
  height: 32px;
  margin-right: var(--space-sm);
  object-fit: contain;
}

.header__logo-text {
  font-family: var(--font-secondary);
  font-weight: var(--font-bold);
  letter-spacing: -0.025em;
}

/* Navigation */

.header__nav {
  display: flex;
  align-items: center;
}

.header__nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-lg);
}

.header__nav-item {
  position: relative;
}

.header__nav-link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--gray-dark);
  text-decoration: none;
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  position: relative;
}

.header__nav-link:hover {
  color: var(--primary-green);
  background-color: rgba(46, 139, 87, 0.05);
  transform: translateY(-1px);
}

.header__nav-link:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.header__nav-link--active {
  color: var(--primary-green);
  font-weight: var(--font-semibold);
}

.header__nav-link--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--primary-green);
  border-radius: 1px;
}

/* Mobile Menu Toggle */

.header__mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-normal);
}

.header__mobile-toggle:hover {
  background-color: var(--gray-light);
}

.header__mobile-toggle:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.header__mobile-toggle-line {
  width: 24px;
  height: 2px;
  background: var(--gray-dark);
  border-radius: 1px;
  transition: all var(--transition-normal);
  transform-origin: center;
}

.header__mobile-toggle-line:not(:last-child) {
  margin-bottom: 4px;
}

/* Mobile Menu Toggle Active State */

.header__mobile-toggle--active .header__mobile-toggle-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.header__mobile-toggle--active .header__mobile-toggle-line:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.header__mobile-toggle--active .header__mobile-toggle-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Utility class to prevent body scroll */

.no-scroll {
  overflow: hidden;
}

/* Tablet Styles */

@media (max-width: 1023px) {
  .header__container {
    padding: 0 var(--space-lg);
  }
  
  .header__nav-list {
    gap: var(--space-md);
  }
  
  .header__nav-link {
    padding: var(--space-sm);
    font-size: var(--text-sm);
  }
}

/* Mobile Styles */

@media (max-width: 767px) {
  .header__container {
    padding: 0 var(--space-md);
    height: 60px;
  }
  
  .header__logo-text {
    font-size: var(--text-lg);
  }
  
  .header__logo-image {
    width: 28px;
    height: 28px;
  }
  
  /* Show mobile toggle */
  .header__mobile-toggle {
    display: flex;
  }
  
  /* Hide navigation by default on mobile */
  .header__nav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: var(--z-dropdown);
  }
  
  .header__nav--open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-lg) 0;
  }
  
  .header__nav-item {
    border-bottom: 1px solid var(--gray-light);
  }
  
  .header__nav-item:last-child {
    border-bottom: none;
  }
  
  .header__nav-link {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--text-lg);
    border-radius: 0;
  }
  
  .header__nav-link--active::after {
    display: none;
  }
  
  .header__nav-link--active {
    background-color: rgba(46, 139, 87, 0.05);
    border-left: 4px solid var(--primary-green);
  }
}

/* Small Mobile Styles */

@media (max-width: 479px) {
  .header__container {
    padding: 0 var(--space-sm);
  }
  
  .header__logo-text {
    font-size: var(--text-base);
  }
  
  .header__nav-link {
    padding: var(--space-md) var(--space-lg);
  }
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .header {
    border-bottom-width: 2px;
  }
  
  .header__nav-link:focus {
    outline-width: 3px;
  }
  
  .header__nav-link--active::after {
    height: 3px;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .header__nav-link,
  .header__mobile-toggle,
  .header__mobile-toggle-line,
  .header__nav {
    transition: none;
  }
  
  .header__nav-link:hover {
    transform: none;
  }
}

/* Print styles */

@media print {
  .header {
    position: static;
    box-shadow: none;
    border-bottom: 1px solid var(--black);
  }
  
  .header__mobile-toggle {
    display: none;
  }
  
  .header__nav {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  
  .header__nav-list {
    flex-direction: row;
    gap: var(--space-md);
  }
}

/* Hero Banner Component - Kiwi Voyages */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background */

.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero__background-placeholder {
  width: 100%;
  height: 100%;
  /* Fallback gradient background */
  background: linear-gradient(135deg, var(--primary-green-light) 0%, var(--primary-green) 50%, var(--primary-green-dark) 100%);
  /* Background image with fallback */
  background-image: url('../assets/images/hero-background.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  color: var(--white);
  font-weight: var(--font-medium);
  text-align: center;
  padding: var(--space-md);
}

/* Fallback when image fails to load */

.hero__background-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-green-light) 0%, var(--primary-green) 50%, var(--primary-green-dark) 100%);
  z-index: -1;
}

/* Custom background image classes */

.hero__background-placeholder--custom {
  background-image: var(--hero-bg-image, url('../assets/images/hero-background.jpg'));
}

/* No background image - gradient only */

.hero__background-placeholder--gradient-only {
  background-image: none !important;
}

/* Background image loaded successfully */

.hero__background--loaded {
  /* Optional: Add any styles for when image loads successfully */
}

/* Smooth transition for background changes */

.hero__background-placeholder {
  transition: background-image 0.3s ease-in-out;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(46, 139, 87, 0.8) 0%,
    rgba(46, 139, 87, 0.6) 50%,
    rgba(46, 139, 87, 0.7) 100%
  );
  z-index: 2;
}

/* Content */

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}

@media (max-width: 1200px) {
  .hero__content {
    padding: var(--space-xl) 300px var(--space-xl) var(--space-md);
  }
}

@media (max-width: 1024px) {
  .hero__content {
    padding: var(--space-xl) var(--space-md);
  }
}

/* Text */

.hero__text {
  margin-bottom: var(--space-2xl);
}

.hero__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--white);
  margin-bottom: var(--space-lg);
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero__subtitle {
  font-size: var(--text-xl);
  color: var(--white);
  margin-bottom: 0;
  line-height: 1.5;
  opacity: 0.95;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Search Form */

.hero__search {
  max-width: 900px;
  margin: 0 auto;
}

.search-form {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(10px);
}

/* Search Form Tabs */

.search-form__tabs {
  display: flex;
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--gray-light);
  padding: var(--space-xs);
  gap: var(--space-xs);
}

.search-form__tab {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  border: none;
  background: transparent;
  color: var(--gray-medium);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  min-height: 44px;
}

.search-form__tab:hover {
  background: var(--white);
  color: var(--gray-dark);
}

.search-form__tab--active {
  background: var(--primary-green);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.search-form__tab:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Search Form Fields */

.search-form__fields {
  width: 100%;
}

.search-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.search-form__field {
  margin-bottom: 0;
}

.search-form__input {
  font-size: var(--text-base);
  min-height: 48px;
}

/* Search Form Actions */

.search-form__actions {
  text-align: center;
}

.search-form__general-error {
  background: var(--error);
  color: var(--white);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.search-form__submit {
  position: relative;
  min-width: 200px;
  overflow: hidden;
}

.search-form__submit-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.search-form__submit.loading .search-form__submit-text {
  opacity: 0;
}

.search-form__submit.loading .search-form__submit-loading {
  opacity: 1;
}

/* Discover Offers Button */

.hero__discover-offers {
  margin-top: var(--space-lg);
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  display: inline-block;
}

.hero__discover-offers:hover,
.hero__discover-offers:focus {
  background: var(--white);
  color: var(--primary-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hero__discover-offers:focus {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Responsive Design */

/* Tablet */

@media (max-width: 1024px) {
  .hero {
    min-height: 90vh;
  }
  
  .hero__title {
    font-size: var(--text-3xl);
  }
  
  .hero__subtitle {
    font-size: var(--text-lg);
  }
  
  .search-form {
    padding: var(--space-lg);
  }
  
  .search-form__row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
  }
}

/* Mobile */

@media (max-width: 768px) {
  .hero {
    min-height: 100vh;
    padding-top: 70px; /* Account for fixed header */
  }
  
  .hero__content {
    padding: var(--space-lg) var(--space-md);
  }
  
  .hero__text {
    margin-bottom: var(--space-xl);
  }
  
  .hero__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-md);
  }
  
  .hero__subtitle {
    font-size: var(--text-base);
  }
  
  .search-form {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
  }
  
  .search-form__tabs {
    flex-direction: column;
    gap: var(--space-xs);
  }
  
  .search-form__tab {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
  }
  
  .search-form__row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }
  
  .search-form__submit {
    width: 100%;
    min-width: auto;
  }
}

/* Small Mobile */

@media (max-width: 480px) {
  .hero__content {
    padding: var(--space-md) var(--space-sm);
  }
  
  .hero__title {
    font-size: var(--text-xl);
  }
  
  .hero__subtitle {
    font-size: var(--text-sm);
  }
  
  .search-form {
    padding: var(--space-sm);
  }
  
  .search-form__tabs {
    margin-bottom: var(--space-lg);
  }
  
  .search-form__row {
    margin-bottom: var(--space-md);
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .search-form__tab,
  .search-form__submit-loading,
  .search-form__submit-text {
    transition: none;
  }
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .hero__overlay {
    background: rgba(0, 0, 0, 0.8);
  }
  
  .search-form {
    border: 2px solid var(--gray-dark);
  }
  
  .search-form__tab--active {
    border: 2px solid var(--white);
  }
}

/* Hero Offers Sidebar Styles */

.hero__main-section {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.hero__search {
  flex: 1;
  min-width: 0;
  max-width: 800px;
}

.hero__offers-sidebar {
  flex: 0 0 300px;
  margin-top: 0;
}

.hero-offers-compact {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-offers-compact__header {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-offers-compact__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-offers-compact__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.carousel-btn {
  background: rgba(45, 55, 72, 0.1);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: #4a5568;
  transition: all 0.2s ease;
}

.carousel-btn:hover {
  background: rgba(45, 55, 72, 0.2);
  color: #2d3748;
}

.carousel-indicators {
  display: flex;
  gap: 4px;
}

.carousel-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: rgba(45, 55, 72, 0.3);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.carousel-indicator.active {
  background: var(--primary-green);
}

.hero-offers-compact__carousel {
  overflow: hidden;
  border-radius: 8px;
}

.hero-offers-compact__track {
  display: flex;
  transition: transform 0.3s ease;
  width: 100%;
}

.compact-offer-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  cursor: pointer;
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.compact-offer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-green);
}

.compact-offer__image {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
}

.compact-offer__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.compact-offer-card:hover .compact-offer__img {
  transform: scale(1.05);
}

.compact-offer__discount {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: #e53e3e;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.compact-offer__content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.compact-offer__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.compact-offer__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
  line-height: 1.3;
}

.compact-offer__destination {
  font-size: 0.8rem;
  color: #718096;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.compact-offer__destination::before {
  content: '📍';
  font-size: 0.75rem;
}

.compact-offer__price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.compact-offer__amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-green);
}

.compact-offer__original {
  font-size: 0.8rem;
  color: #718096;
  text-decoration: line-through;
}

.compact-offer__cta {
  width: 100%;
  background: var(--primary-green);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.compact-offer__cta:hover {
  background: var(--primary-green-dark);
}

.compact-offer__cta:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Responsive adjustments */

@media (max-width: 1200px) {
  .hero__main-section {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .hero__search {
    max-width: 100%;
  }
  
  .hero__offers-sidebar {
    flex: none;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero__offers-sidebar {
    max-width: 100%;
  }
  
  .hero-offers-compact {
    padding: 1rem;
    top: auto;
    width: 100%;
    max-width: 600px;
  }
  
  .hero-offers-compact__track {
    flex-direction: row;
  }
  
  .compact-offer-card {
    flex: 0 0 100%;
  }
}

@media (max-width: 768px) {
  .hero__offers-sidebar {
    display: none;
  }
}

/**
 * Offers Section Component Styles
 * Responsive grid layout with hover effects and smooth transitions
 */

/* Offers Section Container */

.offers {
  padding: var(--section-padding-y) 0;
  background: var(--gray-light);
}

.offers__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Offers Header */

.offers__header {
  text-align: center;
  margin-bottom: 3rem;
}

.offers__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--gray-dark);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.offers__subtitle {
  font-size: var(--text-lg);
  color: var(--gray-medium);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Offers Grid */

.offers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Offer Card */

.offer-card {
  background: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.offer-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.offer-card:focus-within {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Offer Card Image */

.offer-card__image {
  position: relative;
  height: 200px;
  background: var(--gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.offer-card__image-placeholder {
  color: var(--gray-medium);
  font-size: var(--text-sm);
  text-align: center;
  padding: 1rem;
  border: 2px dashed var(--gray-medium);
  border-radius: 0.5rem;
  background: var(--white);
  font-style: italic;
  line-height: 1.4;
}

.offer-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.offer-card:hover .offer-card__image img {
  transform: scale(1.05);
}

/* Offer Card Content */

.offer-card__content {
  padding: 1.5rem;
}

.offer-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.offer-card__description {
  font-size: var(--text-base);
  color: var(--gray-medium);
  margin-bottom: 1rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.offer-card__price {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: 1rem;
}

.offer-card__price-label {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  font-weight: 400;
}

/* Offer Card CTA */

.offer-card__cta {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--primary-green);
  color: var(--white);
  border: none;
  border-radius: 0.5rem;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.offer-card__cta:hover {
  background: var(--primary-green-dark);
  transform: translateY(-1px);
}

.offer-card__cta:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Offers Actions */

.offers__actions {
  text-align: center;
}

.offers__view-all {
  padding: 1rem 2rem;
  font-size: var(--text-lg);
  font-weight: 600;
  border: 2px solid var(--primary-green);
  color: var(--primary-green);
  background: transparent;
  border-radius: 0.5rem;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.offers__view-all:hover {
  background: var(--primary-green);
  color: var(--white);
  transform: translateY(-2px);
}

/* Responsive Design */

@media (max-width: 768px) {
  .offers {
    padding: 3rem 0;
  }
  
  .offers__header {
    margin-bottom: 2rem;
  }
  
  .offers__title {
    font-size: var(--text-2xl);
  }
  
  .offers__subtitle {
    font-size: var(--text-base);
  }
  
  .offers__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .offer-card__image {
    height: 180px;
  }
  
  .offer-card__content {
    padding: 1.25rem;
  }
  
  .offers__view-all {
    padding: 0.875rem 1.5rem;
    font-size: var(--text-base);
  }
}

@media (max-width: 480px) {
  .offers__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .offer-card__image {
    height: 160px;
  }
  
  .offer-card__content {
    padding: 1rem;
  }
  
  .offer-card__title {
    font-size: var(--text-lg);
  }
  
  .offer-card__price {
    font-size: var(--text-xl);
  }
}

/* Animation for cards loading */

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

.offer-card {
  animation: fadeInUp 0.6s ease forwards;
}

.offer-card:nth-child(1) { animation-delay: 0.1s; }

.offer-card:nth-child(2) { animation-delay: 0.2s; }

.offer-card:nth-child(3) { animation-delay: 0.3s; }

.offer-card:nth-child(4) { animation-delay: 0.4s; }

.offer-card:nth-child(5) { animation-delay: 0.5s; }

.offer-card:nth-child(6) { animation-delay: 0.6s; }

/* High contrast mode support */

@media (prefers-contrast: high) {
  .offer-card {
    border: 2px solid var(--gray-dark);
  }
  
  .offer-card__image-placeholder {
    border-color: var(--gray-dark);
    color: var(--gray-dark);
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .offer-card,
  .offer-card__cta,
  .offers__view-all,
  .offer-card__image img {
    transition: none;
  }
  
  .offer-card:hover {
    transform: none;
  }
  
  .offer-card:hover .offer-card__image img {
    transform: none;
  }
  
  .offer-card {
    animation: none;
  }
}

/**
 * Popular Destinations Section Styles
 * Responsive grid layout with destination cards, images, and pricing
 */

/* Popular Destinations Section Container */

.popular-destinations {
  padding: var(--section-padding-y) 0;
  background: var(--white);
}

.popular-destinations__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Popular Destinations Header */

.popular-destinations__header {
  text-align: center;
  margin-bottom: 3rem;
}

.popular-destinations__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--gray-dark);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.popular-destinations__subtitle {
  font-size: var(--text-lg);
  color: var(--gray-medium);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Popular Destinations Grid */

.popular-destinations__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Destination Card */

.destination-card {
  background: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.destination-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.destination-card:focus-within {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Destination Card Image */

.destination-card__image {
  position: relative;
  height: 220px;
  background: var(--gray-light);
  overflow: hidden;
}

.destination-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.destination-card:hover .destination-card__image img {
  transform: scale(1.05);
}

.destination-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 50%);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 1rem;
}

.destination-card__popularity {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 0.5rem 0.75rem;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-dark);
}

.destination-card__popularity-icon {
  font-size: 1rem;
}

/* Destination Card Content */

.destination-card__content {
  padding: 1.5rem;
}

.destination-card__header {
  margin-bottom: 1rem;
}

.destination-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.destination-card__country {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  font-weight: 500;
}

.destination-card__description {
  font-size: var(--text-base);
  color: var(--gray-medium);
  margin-bottom: 1rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Destination Highlights */

.destination-card__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.destination-card__highlight {
  background: var(--gray-light);
  color: var(--gray-dark);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Destination Card Footer */

.destination-card__footer {
  margin-bottom: 1.5rem;
}

.destination-card__price {
  margin-bottom: 0.75rem;
}

.destination-card__price-label {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  display: block;
  margin-bottom: 0.25rem;
}

.destination-card__price-amount {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-green);
}

.destination-card__best-time {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.destination-card__best-time-label {
  font-weight: 500;
}

.destination-card__best-time-value {
  color: var(--gray-dark);
  font-weight: 600;
}

/* Destination Card CTA */

.destination-card__cta {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--primary-green);
  color: var(--white);
  border: none;
  border-radius: 0.5rem;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.destination-card__cta:hover {
  background: var(--primary-green-dark);
  transform: translateY(-1px);
}

.destination-card__cta:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Popular Destinations Actions */

.popular-destinations__actions {
  text-align: center;
}

.popular-destinations__view-all {
  padding: 1rem 2rem;
  font-size: var(--text-lg);
  font-weight: 600;
  border: 2px solid var(--primary-green);
  color: var(--primary-green);
  background: transparent;
  border-radius: 0.5rem;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.popular-destinations__view-all:hover {
  background: var(--primary-green);
  color: var(--white);
  transform: translateY(-2px);
}

/* Responsive Design */

@media (max-width: 768px) {
  .popular-destinations {
    padding: 3rem 0;
  }
  
  .popular-destinations__header {
    margin-bottom: 2rem;
  }
  
  .popular-destinations__title {
    font-size: var(--text-2xl);
  }
  
  .popular-destinations__subtitle {
    font-size: var(--text-base);
  }
  
  .popular-destinations__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .destination-card__image {
    height: 200px;
  }
  
  .destination-card__content {
    padding: 1.25rem;
  }
  
  .popular-destinations__view-all {
    padding: 0.875rem 1.5rem;
    font-size: var(--text-base);
  }
}

@media (max-width: 480px) {
  .popular-destinations__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .destination-card__image {
    height: 180px;
  }
  
  .destination-card__content {
    padding: 1rem;
  }
  
  .destination-card__title {
    font-size: var(--text-lg);
  }
  
  .destination-card__price-amount {
    font-size: var(--text-xl);
  }
  
  .destination-card__highlights {
    gap: 0.25rem;
  }
  
  .destination-card__highlight {
    font-size: var(--text-xs);
    padding: 0.2rem 0.5rem;
  }
}

/* Animation for cards loading */

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

.destination-card {
  animation: fadeInUp 0.6s ease forwards;
}

.destination-card:nth-child(1) { animation-delay: 0.1s; }

.destination-card:nth-child(2) { animation-delay: 0.2s; }

.destination-card:nth-child(3) { animation-delay: 0.3s; }

.destination-card:nth-child(4) { animation-delay: 0.4s; }

.destination-card:nth-child(5) { animation-delay: 0.5s; }

.destination-card:nth-child(6) { animation-delay: 0.6s; }

/* High contrast mode support */

@media (prefers-contrast: high) {
  .destination-card {
    border: 2px solid var(--gray-dark);
  }
  
  .destination-card__highlight {
    border: 1px solid var(--gray-dark);
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .destination-card,
  .destination-card__cta,
  .popular-destinations__view-all,
  .destination-card__image img {
    transition: none;
  }
  
  .destination-card:hover {
    transform: none;
  }
  
  .destination-card:hover .destination-card__image img {
    transform: none;
  }
  
  .destination-card {
    animation: none;
  }
}

/**
 * Weather Section Styles
 * Weather cards with current conditions and 3-day forecasts
 */

/* Weather Section Container */

.weather-section {
  padding: var(--section-padding-y) 0;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
}

.weather-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Weather Section Header */

.weather-section__header {
  text-align: center;
  margin-bottom: 3rem;
}

.weather-section__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--gray-dark);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.weather-section__subtitle {
  font-size: var(--text-lg);
  color: var(--gray-medium);
  max-width: 600px;
  margin: 0 auto 1rem;
  line-height: 1.6;
}

.weather-section__last-updated {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  font-style: italic;
}

/* Weather Section Grid */

.weather-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Weather Card */

.weather-card {
  background: var(--white);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.weather-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-green), var(--secondary-blue));
}

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

/* Weather Card Header */

.weather-card__header {
  margin-bottom: 1.5rem;
}

.weather-card__destination {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 0.25rem;
}

.weather-card__country {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  font-weight: 500;
}

/* Weather Card Current */

.weather-card__current {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-light);
}

.weather-card__current-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.weather-card__temperature {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-green);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.weather-card__condition {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.weather-card__condition-icon {
  font-size: 1.5rem;
}

.weather-card__condition-text {
  font-size: var(--text-base);
  color: var(--gray-medium);
  font-weight: 500;
}

.weather-card__details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.weather-card__detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 120px;
}

.weather-card__detail-label {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.weather-card__detail-value {
  font-size: var(--text-sm);
  color: var(--gray-dark);
  font-weight: 600;
}

/* Weather Card Forecast */

.weather-card__forecast {
  margin-bottom: 1.5rem;
}

.weather-card__forecast-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 1rem;
}

.weather-card__forecast-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* Weather Forecast Day */

.weather-forecast-day {
  text-align: center;
  padding: 0.75rem;
  background: var(--gray-light);
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.weather-forecast-day:hover {
  background: #e8f5e8;
}

.weather-forecast-day__date {
  font-size: var(--text-xs);
  color: var(--gray-medium);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.weather-forecast-day__icon {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.weather-forecast-day__temps {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.weather-forecast-day__high {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-dark);
}

.weather-forecast-day__low {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.weather-forecast-day__condition {
  font-size: var(--text-xs);
  color: var(--gray-medium);
  line-height: 1.2;
}

.weather-forecast-day__precipitation {
  font-size: var(--text-xs);
  color: var(--secondary-blue);
  margin-top: 0.25rem;
}

/* Weather Card Actions */

.weather-card__actions {
  text-align: center;
}

.weather-card__search-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--primary-green);
  color: var(--white);
  border: none;
  border-radius: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.weather-card__search-btn:hover {
  background: var(--primary-green-dark);
  transform: translateY(-1px);
}

.weather-card__search-btn:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Weather Section Disclaimer */

.weather-section__disclaimer {
  text-align: center;
  margin-top: 2rem;
}

.weather-section__disclaimer-text {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  background: rgba(255, 255, 255, 0.8);
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  display: inline-block;
  backdrop-filter: blur(10px);
}

/* Responsive Design */

@media (max-width: 768px) {
  .weather-section {
    padding: 3rem 0;
  }
  
  .weather-section__header {
    margin-bottom: 2rem;
  }
  
  .weather-section__title {
    font-size: var(--text-2xl);
  }
  
  .weather-section__subtitle {
    font-size: var(--text-base);
  }
  
  .weather-section__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .weather-card {
    padding: 1.25rem;
  }
  
  .weather-card__temperature {
    font-size: 2.5rem;
  }
  
  .weather-card__current {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .weather-card__details {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .weather-card {
    padding: 1rem;
  }
  
  .weather-card__temperature {
    font-size: 2rem;
  }
  
  .weather-card__forecast-days {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .weather-forecast-day {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    padding: 0.5rem 0.75rem;
  }
  
  .weather-forecast-day__date {
    margin-bottom: 0;
  }
  
  .weather-forecast-day__icon {
    margin-bottom: 0;
  }
  
  .weather-forecast-day__temps {
    margin-bottom: 0;
    justify-content: flex-start;
  }
  
  .weather-forecast-day__condition {
    text-align: right;
  }
}

/* Animation for cards loading */

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.weather-card {
  animation: slideInFromRight 0.6s ease forwards;
}

.weather-card:nth-child(1) { animation-delay: 0.1s; }

.weather-card:nth-child(2) { animation-delay: 0.2s; }

.weather-card:nth-child(3) { animation-delay: 0.3s; }

.weather-card:nth-child(4) { animation-delay: 0.4s; }

.weather-card:nth-child(5) { animation-delay: 0.5s; }

.weather-card:nth-child(6) { animation-delay: 0.6s; }

/* High contrast mode support */

@media (prefers-contrast: high) {
  .weather-card {
    border: 2px solid var(--gray-dark);
  }
  
  .weather-forecast-day {
    border: 1px solid var(--gray-medium);
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .weather-card,
  .weather-card__search-btn,
  .weather-forecast-day {
    transition: none;
  }
  
  .weather-card:hover {
    transform: none;
  }
  
  .weather-card {
    animation: none;
  }
}

/**
 * Travel Tips Section Styles
 * Article cards with categories, reading time, and author information
 */

/* Travel Tips Section Container */

.travel-tips-section {
  padding: var(--section-padding-y) 0;
  background: var(--gray-light);
}

.travel-tips-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Travel Tips Header */

.travel-tips-section__header {
  text-align: center;
  margin-bottom: 3rem;
}

.travel-tips-section__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--gray-dark);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.travel-tips-section__subtitle {
  font-size: var(--text-lg);
  color: var(--gray-medium);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Category Filter */

.travel-tips-section__categories {
  margin-bottom: 3rem;
}

.tip-categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tip-category {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: 2rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-medium);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.tip-category:hover {
  background: var(--primary-green);
  color: var(--white);
  transform: translateY(-2px);
}

.tip-category--active {
  background: var(--primary-green);
  color: var(--white);
  border-color: var(--primary-green);
}

.tip-category__icon {
  font-size: 1rem;
}

.tip-category__label {
  font-weight: 600;
}

/* Travel Tips Grid */

.travel-tips-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Tip Card */

.tip-card {
  background: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.tip-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.tip-card:focus-within {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.tip-card--hidden {
  display: none;
}

/* Tip Card Image */

.tip-card__image {
  position: relative;
  height: 200px;
  background: var(--gray-light);
  overflow: hidden;
}

.tip-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tip-card:hover .tip-card__image img {
  transform: scale(1.05);
}

.tip-card__category {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 0.5rem 0.75rem;
  border-radius: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-dark);
}

.tip-card__category-icon {
  font-size: 0.875rem;
}

/* Tip Card Content */

.tip-card__content {
  padding: 1.5rem;
}

.tip-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: var(--text-sm);
}

.tip-card__author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tip-card__author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.tip-card__author-name {
  color: var(--gray-medium);
  font-weight: 500;
}

.tip-card__reading-time {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--gray-medium);
}

.tip-card__reading-time-icon {
  font-size: 0.875rem;
}

.tip-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 0.75rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tip-card__excerpt {
  font-size: var(--text-base);
  color: var(--gray-medium);
  margin-bottom: 1rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tip Card Tags */

.tip-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tip-card__tag {
  background: var(--gray-light);
  color: var(--gray-dark);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: var(--text-xs);
  font-weight: 500;
}

/* Tip Card Footer */

.tip-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tip-card__publish-date {
  font-size: var(--text-xs);
  color: var(--gray-medium);
}

.tip-card__read-more {
  padding: 0.5rem 1rem;
  background: var(--primary-green);
  color: var(--white);
  border: none;
  border-radius: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tip-card__read-more:hover {
  background: var(--primary-green-dark);
  transform: translateY(-1px);
}

.tip-card__read-more:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Travel Tips Actions */

.travel-tips-section__actions {
  text-align: center;
}

.travel-tips-section__view-all {
  padding: 1rem 2rem;
  font-size: var(--text-lg);
  font-weight: 600;
  border: 2px solid var(--primary-green);
  color: var(--primary-green);
  background: transparent;
  border-radius: 0.5rem;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.travel-tips-section__view-all:hover {
  background: var(--primary-green);
  color: var(--white);
  transform: translateY(-2px);
}

/* Responsive Design */

@media (max-width: 768px) {
  .travel-tips-section {
    padding: 3rem 0;
  }
  
  .travel-tips-section__header {
    margin-bottom: 2rem;
  }
  
  .travel-tips-section__title {
    font-size: var(--text-2xl);
  }
  
  .travel-tips-section__subtitle {
    font-size: var(--text-base);
  }
  
  .travel-tips-section__categories {
    margin-bottom: 2rem;
  }
  
  .tip-categories {
    gap: 0.5rem;
  }
  
  .tip-category {
    padding: 0.5rem 1rem;
    font-size: var(--text-xs);
  }
  
  .travel-tips-section__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .tip-card__image {
    height: 180px;
  }
  
  .tip-card__content {
    padding: 1.25rem;
  }
  
  .travel-tips-section__view-all {
    padding: 0.875rem 1.5rem;
    font-size: var(--text-base);
  }
}

@media (max-width: 480px) {
  .tip-categories {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
  
  .tip-category {
    flex-shrink: 0;
  }
  
  .travel-tips-section__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .tip-card__image {
    height: 160px;
  }
  
  .tip-card__content {
    padding: 1rem;
  }
  
  .tip-card__title {
    font-size: var(--text-lg);
  }
  
  .tip-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .tip-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .tip-card__read-more {
    width: 100%;
    text-align: center;
  }
}

/* Animation for cards loading */

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tip-card {
  animation: fadeInScale 0.6s ease forwards;
}

.tip-card:nth-child(1) { animation-delay: 0.1s; }

.tip-card:nth-child(2) { animation-delay: 0.2s; }

.tip-card:nth-child(3) { animation-delay: 0.3s; }

.tip-card:nth-child(4) { animation-delay: 0.4s; }

/* High contrast mode support */

@media (prefers-contrast: high) {
  .tip-card {
    border: 2px solid var(--gray-dark);
  }
  
  .tip-category {
    border-color: var(--gray-dark);
  }
  
  .tip-card__tag {
    border: 1px solid var(--gray-dark);
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .tip-card,
  .tip-card__read-more,
  .travel-tips-section__view-all,
  .tip-category,
  .tip-card__image img {
    transition: none;
  }
  
  .tip-card:hover {
    transform: none;
  }
  
  .tip-card:hover .tip-card__image img {
    transform: none;
  }
  
  .tip-card {
    animation: none;
  }
}

/**
 * Enhanced Offers Section Styles
 * Detailed offer cards with validity dates, conditions, and ratings
 */

/* Enhanced Offers Section Container */

.enhanced-offers-section {
  padding: var(--section-padding-y) 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.enhanced-offers-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Enhanced Offers Header */

.enhanced-offers-section__header {
  text-align: center;
  margin-bottom: 3rem;
}

.enhanced-offers-section__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--gray-dark);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.enhanced-offers-section__subtitle {
  font-size: var(--text-lg);
  color: var(--gray-medium);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Enhanced Offers Grid */

.enhanced-offers-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Enhanced Offer Card */

.enhanced-offer-card {
  background: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
}

.enhanced-offer-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

.enhanced-offer-card:focus-within {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Enhanced Offer Card Image */

.enhanced-offer-card__image {
  position: relative;
  height: 240px;
  background: var(--gray-light);
  overflow: hidden;
}

.enhanced-offer-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.enhanced-offer-card:hover .enhanced-offer-card__image img {
  transform: scale(1.05);
}

.enhanced-offer-card__discount {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--accent-orange);
  color: var(--white);
  padding: 0.5rem 0.75rem;
  border-radius: 1.5rem;
  font-size: var(--text-sm);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.enhanced-offer-card__type {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 0.5rem 0.75rem;
  border-radius: 1.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-dark);
}

/* Enhanced Offer Card Content */

.enhanced-offer-card__content {
  padding: 2rem;
}

.enhanced-offer-card__header {
  margin-bottom: 1rem;
}

.enhanced-offer-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-dark);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.enhanced-offer-card__destination {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  font-weight: 500;
}

.enhanced-offer-card__description {
  font-size: var(--text-base);
  color: var(--gray-medium);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* Enhanced Offer Card Highlights */

.enhanced-offer-card__highlights {
  margin-bottom: 1.5rem;
}

.enhanced-offer-card__highlights-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 0.75rem;
}

.enhanced-offer-card__highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.enhanced-offer-card__highlight {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.enhanced-offer-card__highlight::before {
  content: '✓';
  color: var(--primary-green);
  font-weight: 700;
  flex-shrink: 0;
}

/* Enhanced Offer Card Pricing */

.enhanced-offer-card__pricing {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-light);
}

.enhanced-offer-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.enhanced-offer-card__original-price {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  text-decoration: line-through;
  margin-bottom: 0.25rem;
}

.enhanced-offer-card__current-price {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-green);
  line-height: 1;
}

.enhanced-offer-card__price-label {
  font-size: var(--text-xs);
  color: var(--gray-medium);
  margin-top: 0.25rem;
}

.enhanced-offer-card__availability {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  text-align: center;
}

.enhanced-offer-card__availability--high {
  background: #d4edda;
  color: #155724;
}

.enhanced-offer-card__availability--medium {
  background: #fff3cd;
  color: #856404;
}

.enhanced-offer-card__availability--low {
  background: #f8d7da;
  color: #721c24;
}

/* Enhanced Offer Card Rating */

.enhanced-offer-card__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.enhanced-offer-card__stars {
  font-size: var(--text-sm);
}

.enhanced-offer-card__rating-text {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

/* Enhanced Offer Card Validity */

.enhanced-offer-card__validity {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--gray-light);
  border-radius: 0.5rem;
}

.enhanced-offer-card__validity-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 0.75rem;
}

.enhanced-offer-card__validity-dates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.enhanced-offer-card__validity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.enhanced-offer-card__validity-label {
  font-size: var(--text-xs);
  color: var(--gray-medium);
}

.enhanced-offer-card__validity-value {
  font-size: var(--text-xs);
  color: var(--gray-dark);
  font-weight: 600;
}

.enhanced-offer-card__countdown {
  font-size: var(--text-sm);
  color: var(--accent-orange);
  font-weight: 600;
  text-align: center;
  padding: 0.5rem;
  background: rgba(255, 165, 0, 0.1);
  border-radius: 0.25rem;
}

/* Enhanced Offer Card Conditions */

.enhanced-offer-card__conditions {
  margin-bottom: 1.5rem;
}

.enhanced-offer-card__conditions-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 0.75rem;
}

.enhanced-offer-card__conditions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.enhanced-offer-card__condition {
  font-size: var(--text-xs);
  color: var(--gray-medium);
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  position: relative;
  line-height: 1.4;
}

.enhanced-offer-card__condition::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--gray-medium);
}

/* Enhanced Offer Card Actions */

.enhanced-offer-card__actions {
  display: flex;
  gap: 0.75rem;
}

.enhanced-offer-card__cta {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--primary-green);
  color: var(--white);
  border: none;
  border-radius: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.enhanced-offer-card__cta:hover {
  background: var(--primary-green-dark);
  transform: translateY(-1px);
}

.enhanced-offer-card__cta:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.enhanced-offer-card__details {
  padding: 0.75rem 1rem;
  background: transparent;
  color: var(--primary-green);
  border: 2px solid var(--primary-green);
  border-radius: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.enhanced-offer-card__details:hover {
  background: var(--primary-green);
  color: var(--white);
}

/* Enhanced Offers Disclaimer */

.enhanced-offers-section__disclaimer {
  text-align: center;
  margin-top: 2rem;
}

.enhanced-offers-section__disclaimer-text {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  background: rgba(255, 255, 255, 0.8);
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  display: inline-block;
  backdrop-filter: blur(10px);
}

/* Responsive Design */

@media (max-width: 768px) {
  .enhanced-offers-section {
    padding: 3rem 0;
  }
  
  .enhanced-offers-section__header {
    margin-bottom: 2rem;
  }
  
  .enhanced-offers-section__title {
    font-size: var(--text-2xl);
  }
  
  .enhanced-offers-section__subtitle {
    font-size: var(--text-base);
  }
  
  .enhanced-offers-section__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .enhanced-offer-card__image {
    height: 200px;
  }
  
  .enhanced-offer-card__content {
    padding: 1.5rem;
  }
  
  .enhanced-offer-card__pricing {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .enhanced-offer-card__availability {
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .enhanced-offers-section__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .enhanced-offer-card__image {
    height: 180px;
  }
  
  .enhanced-offer-card__content {
    padding: 1rem;
  }
  
  .enhanced-offer-card__title {
    font-size: var(--text-lg);
  }
  
  .enhanced-offer-card__current-price {
    font-size: var(--text-xl);
  }
  
  .enhanced-offer-card__actions {
    flex-direction: column;
  }
  
  .enhanced-offer-card__validity-dates {
    gap: 0.25rem;
  }
  
  .enhanced-offer-card__validity-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/* Animation for cards loading */

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

.enhanced-offer-card {
  animation: slideInFromBottom 0.6s ease forwards;
}

.enhanced-offer-card:nth-child(1) { animation-delay: 0.1s; }

.enhanced-offer-card:nth-child(2) { animation-delay: 0.2s; }

.enhanced-offer-card:nth-child(3) { animation-delay: 0.3s; }

/* High contrast mode support */

@media (prefers-contrast: high) {
  .enhanced-offer-card {
    border: 2px solid var(--gray-dark);
  }
  
  .enhanced-offer-card__validity {
    border: 1px solid var(--gray-dark);
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .enhanced-offer-card,
  .enhanced-offer-card__cta,
  .enhanced-offer-card__details,
  .enhanced-offer-card__image img {
    transition: none;
  }
  
  .enhanced-offer-card:hover {
    transform: none;
  }
  
  .enhanced-offer-card:hover .enhanced-offer-card__image img {
    transform: none;
  }
  
  .enhanced-offer-card {
    animation: none;
  }
}

/* Button Components - Kiwi Voyages */

/* Base button styles */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  line-height: 1;
  text-decoration: none;
  transition: all var(--transition-normal);
  cursor: pointer;
  border: 2px solid transparent;
  min-height: 44px; /* Touch target minimum */
  gap: var(--space-sm);
}

.btn:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary button */

.btn-primary {
  background: var(--primary-green);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--primary-green-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Secondary button */

.btn-secondary {
  background: var(--white);
  color: var(--primary-green);
  border-color: var(--primary-green);
}

.btn-secondary:hover {
  background: var(--primary-green);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Outline button */

.btn-outline {
  background: transparent;
  color: var(--gray-dark);
  border-color: var(--gray-medium);
}

.btn-outline:hover {
  background: var(--gray-dark);
  color: var(--white);
  border-color: var(--gray-dark);
}

/* 
Button sizes */

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  min-height: 36px;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--text-lg);
  min-height: 52px;
}

.btn-xl {
  padding: 1.25rem 2.5rem;
  font-size: var(--text-xl);
  min-height: 60px;
}

/* Full width button */

.btn-full {
  width: 100%;
}

/* Icon buttons */

.btn-icon {
  padding: 0.75rem;
  min-width: 44px;
  min-height: 44px;
}

.btn-icon-sm {
  padding: 0.5rem;
  min-width: 36px;
  min-height: 36px;
}

/* Button with icon */

.btn .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.btn-sm .icon {
  width: 1rem;
  height: 1rem;
}

.btn-lg .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Loading state */

.btn-loading {
  position: relative;
  color: transparent;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Button group */

.btn-group {
  display: inline-flex;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.btn-group .btn {
  border-radius: 0;
  border-right-width: 0;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  border-right-width: 2px;
}

/* Form Components - Kiwi Voyages */

/* Form groups */

.form-group {
  margin-bottom: var(--space-lg);
}

.form-group:last-child {
  margin-bottom: 0;
}

/* Labels */

.form-label {
  display: block;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  color: var(--gray-dark);
  margin-bottom: var(--space-sm);
}

.form-label.required::after {
  content: ' *';
  color: var(--error);
}

/* Input fields */

.form-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--gray-dark);
  background-color: var(--white);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  min-height: 44px; /* Touch target minimum */
}

.form-input::placeholder {
  color: var(--gray-medium);
}

.form-input:focus {
  border-color: var(--primary-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.1);
}

.form-input:disabled {
  background-color: var(--gray-light);
  color: var(--gray-medium);
  cursor: not-allowed;
}

/* Input states */

.form-input.error {
  border-color: var(--error);
}

.form-input.error:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.form-input.success {
  border-color: var(--success);
}

.form-input.success:focus {
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

/* Textarea */

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Select */

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  appearance: none;
}

/* Input sizes */

.form-input-sm {
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  min-height: 36px;
}

.form-input-lg {
  padding: 1rem 1.25rem;
  font-size: var(--text-lg);
  min-height: 52px;
}

/* Input groups */

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .form-input {
  border-radius: 0;
  border-right-width: 0;
}

.input-group .form-input:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.input-group .form-input:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  border-right-width: 2px;
}

.input-group .btn {
  border-radius: 0;
}

.input-group .btn:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* Checkbox and radio */

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  border: 2px solid var(--gray-medium);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input:checked {
  background-color: var(--primary-green);
  border-color: var(--primary-green);
}

.form-check-input:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.form-check-label {
  font-size: var(--text-base);
  color: var(--gray-dark);
  cursor: pointer;
  line-height: 1.5;
}

/* Error messages */

.form-error {
  display: block;
  font-size: var(--text-sm);
  color: var(--error);
  margin-top: var(--space-xs);
}

/* Help text */

.form-help {
  display: block;
  font-size: var(--text-sm);
  color: var(--gray-medium);
  margin-top: var(--space-xs);
}

/* Form layouts */

.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.form-inline .form-group {
  margin-bottom: 0;
  flex: 1;
  min-width: 200px;
}

@media (max-width: 767px) {
  .form-inline {
    flex-direction: column;
  }
  
  .form-inline .form-group {
    width: 100%;
    min-width: auto;
  }
}

/* Card Components - Kiwi Voyages */

/* Base card */

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Card sections */

.card-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--gray-light);
}

.card-body {
  padding: var(--space-lg);
}

.card-footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--gray-light);
  background: var(--gray-light);
}

/* Card image */

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-medium);
  font-size: var(--text-sm);
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card title and text */

.card-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--gray-dark);
  margin-bottom: var(--space-sm);
}

.card-subtitle {
  font-size: var(--text-base);
  color: var(--gray-medium);
  margin-bottom: var(--space-md);
}

.card-text {
  font-size: var(--text-base);
  color: var(--gray-dark);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.card-text:last-child {
  margin-bottom: 0;
}

/* Card variants */

.card-bordered {
  border: 1px solid var(--gray-light);
  box-shadow: none;
}

.card-elevated {
  box-shadow: var(--shadow-lg);
}

.card-flat {
  box-shadow: none;
  border: 1px solid var(--gray-light);
}

/* Offer card specific styles */

.offer-card {
  position: relative;
  overflow: hidden;
}

.offer-card .card-image {
  height: 250px;
  position: relative;
}

.offer-card .card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(46, 139, 87, 0.8), rgba(46, 139, 87, 0.4));
  display: flex;
  align-items: flex-end;
  padding: var(--space-lg);
}

.offer-card .card-overlay-content {
  color: var(--white);
}

.offer-card .card-overlay-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-sm);
}

.offer-card .card-overlay-price {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

/**
 * Flights page specific styles
 * Styles for flight search, results, and filtering components
 */

/* Page Header */

.page-header {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
  color: var(--white);
  padding: 2rem 0;
}

.page-header__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  text-align: center;
}

.page-header__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.page-header__subtitle {
  font-size: var(--text-lg);
  opacity: 0.9;
  margin: 0;
}

/* Search Section */

.search-section {
  padding: 3rem 0;
  background: var(--gray-light);
}

.search-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.search-section__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  text-align: center;
  margin: 0 0 2rem 0;
  color: var(--gray-dark);
}

/* Flight Search Form */

.flight-search-form {
  background: var(--white);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.flight-search-form__fields {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.flight-search-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.flight-search-form__field {
  display: flex;
  flex-direction: column;
}

.flight-search-form__input {
  width: 100%;
}

.flight-search-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.flight-search-form__general-error {
  color: var(--error);
  font-size: var(--text-sm);
  text-align: center;
  padding: 0.5rem;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 0.5rem;
  border: 1px solid rgba(220, 53, 69, 0.2);
}

.flight-search-form__submit {
  min-width: 200px;
  position: relative;
}

.flight-search-form__submit-loading {
  display: none;
}

.btn--loading .flight-search-form__submit-text {
  display: none;
}

.btn--loading .flight-search-form__submit-loading {
  display: inline;
}

/* Search Results */

.search-results {
  padding: 2rem 0;
}

.search-results__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.search-results__header {
  margin-bottom: 2rem;
}

.search-results__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--gray-dark);
}

.search-results__summary {
  font-size: var(--text-base);
  color: var(--gray-medium);
}

.search-results__content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
}

/* Search Filters */

.search-filters {
  background: var(--white);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  height: fit-content;
  position: sticky;
  top: 2rem;
}

.search-filters__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: var(--gray-dark);
}

.filter-group {
  margin-bottom: 2rem;
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-group__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--gray-dark);
}

.filter-group__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Price Range Filter */

.price-range {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 0.5rem;
  align-items: center;
}

.price-range__label {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.price-range__input {
  font-size: var(--text-sm);
  padding: 0.5rem;
}

/* Filter Checkboxes */

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.25rem 0;
}

.filter-checkbox__input {
  margin: 0;
  cursor: pointer;
}

.filter-checkbox__label {
  font-size: var(--text-sm);
  color: var(--gray-dark);
  cursor: pointer;
}

.filter-checkbox:hover .filter-checkbox__label {
  color: var(--primary-green);
}

.search-filters__actions {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-light);
}

.search-filters__clear {
  width: 100%;
}

/* Results Grid */

.results-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Results Sort */

.results-sort {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

.results-sort__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-dark);
  white-space: nowrap;
}

.results-sort__select {
  flex: 1;
  max-width: 200px;
}

/* Flight Results */

.flight-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Flight Card */

.flight-card {
  background: var(--white);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--gray-light);
  transition: all 0.2s ease;
}

.flight-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-green);
}

.flight-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.flight-card__airline {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.flight-card__airline-logo {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--gray-light);
}

.flight-card__logo-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.flight-card__logo-placeholder {
  font-size: var(--text-xs);
  color: var(--gray-medium);
  text-align: center;
  padding: 0.25rem;
}

.flight-card__airline-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flight-card__airline-name {
  font-weight: 600;
  color: var(--gray-dark);
}

.flight-card__flight-number {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.flight-card__price {
  text-align: right;
}

.flight-card__price-amount {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-green);
}

.flight-card__price-label {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

/* Flight Route */

.flight-card__route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
}

.flight-card__departure,
.flight-card__arrival {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flight-card__departure {
  text-align: left;
}

.flight-card__arrival {
  text-align: right;
}

.flight-card__time {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--gray-dark);
}

.flight-card__airport {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flight-card__city {
  font-size: var(--text-base);
  color: var(--gray-dark);
}

.flight-card__code {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  font-weight: 500;
}

/* Flight Journey */

.flight-card__journey {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.flight-card__duration {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-dark);
}

.flight-card__route-line {
  width: 100%;
  height: 2px;
  background: var(--gray-light);
  position: relative;
  margin: 0.5rem 0;
}

.flight-card__route-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid var(--primary-green);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.flight-card__route-line::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-right: 8px solid var(--primary-green);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.flight-card__route-dots {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--primary-green);
  font-size: var(--text-xs);
  letter-spacing: 0.5rem;
}

.flight-card__stops {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.flight-card__stops-details {
  font-size: var(--text-xs);
  color: var(--gray-medium);
  margin-top: 0.25rem;
}

/* Flight Details */

.flight-card__details {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}

.flight-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.flight-card__aircraft {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.flight-card__baggage {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flight-card__baggage-item {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.flight-card__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.flight-card__amenity {
  font-size: var(--text-xs);
  padding: 0.25rem 0.5rem;
  background: var(--primary-green);
  color: var(--white);
  border-radius: 1rem;
}

.flight-card__actions {
  display: flex;
  align-items: center;
}

.flight-card__select {
  white-space: nowrap;
}

/* Loading State */

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--gray-light);
  border-top: 4px solid var(--primary-green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: var(--text-lg);
  color: var(--gray-medium);
  margin: 0;
}

/* No Results State */

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  background: var(--white);
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

.no-results__icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.no-results__title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--gray-dark);
}

.no-results__message {
  font-size: var(--text-base);
  color: var(--gray-medium);
  margin: 0 0 2rem 0;
  max-width: 400px;
}

/* Pagination */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 0;
}

.pagination__btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--gray-light);
  background: var(--white);
  color: var(--gray-dark);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--text-sm);
}

.pagination__btn:hover:not(:disabled) {
  background: var(--primary-green);
  color: var(--white);
  border-color: var(--primary-green);
}

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

.pagination__pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagination__page {
  width: 40px;
  height: 40px;
  border: 1px solid var(--gray-light);
  background: var(--white);
  color: var(--gray-dark);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination__page:hover {
  background: var(--primary-green);
  color: var(--white);
  border-color: var(--primary-green);
}

.pagination__page--active {
  background: var(--primary-green);
  color: var(--white);
  border-color: var(--primary-green);
}

.pagination__ellipsis {
  padding: 0.5rem;
  color: var(--gray-medium);
  font-size: var(--text-sm);
}

/* Responsive Design */

@media (max-width: 768px) {
  .search-results__content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .search-filters {
    position: static;
    order: 2;
  }

  .results-grid {
    order: 1;
  }

  .flight-search-form__row {
    grid-template-columns: 1fr;
  }

  .flight-card__route {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }

  .flight-card__departure,
  .flight-card__arrival {
    text-align: center;
  }

  .flight-card__details {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .flight-card__actions {
    justify-content: center;
  }

  .pagination {
    flex-wrap: wrap;
  }

  .page-header__title {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 480px) {
  .flight-search-form {
    padding: 1rem;
  }

  .flight-card {
    padding: 1rem;
  }

  .flight-card__header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .flight-card__airline {
    justify-content: center;
  }

  .flight-card__price {
    text-align: center;
  }
}

/**
 * Hotels page specific styles
 * Styles for hotel search, results, and filtering components
 */

/* Hotels Page Specific Styles */

.hotels-page .page-header {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
}

/* Hotel Search Form */

.hotel-search-form {
  background: var(--white);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.hotel-search-form__fields {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hotel-search-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.hotel-search-form__field {
  display: flex;
  flex-direction: column;
}

.hotel-search-form__input {
  width: 100%;
}

.hotel-search-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.hotel-search-form__general-error {
  color: var(--error);
  font-size: var(--text-sm);
  text-align: center;
  padding: 0.5rem;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 0.5rem;
  border: 1px solid rgba(220, 53, 69, 0.2);
}

.hotel-search-form__submit {
  min-width: 200px;
  position: relative;
}

.hotel-search-form__submit-loading {
  display: none;
}

.btn--loading .hotel-search-form__submit-text {
  display: none;
}

.btn--loading .hotel-search-form__submit-loading {
  display: inline;
}

/* Hotel Results */

.hotel-results {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Hotel Card */

.hotel-card {
  background: var(--white);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--gray-light);
  transition: all 0.2s ease;
}

.hotel-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-green);
}

.hotel-card__header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.hotel-card__image {
  width: 200px;
  height: 150px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--gray-light);
}

.hotel-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: linear-gradient(135deg, var(--gray-light) 0%, #e9ecef 100%);
}

.hotel-card__image-text {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  margin-bottom: 0.5rem;
}

.hotel-card__image-note {
  font-size: var(--text-xs);
  color: var(--gray-medium);
  font-style: italic;
}

.hotel-card__info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hotel-card__main {
  flex: 1;
}

.hotel-card__name {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--gray-dark);
  margin: 0 0 0.5rem 0;
}

.hotel-card__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.hotel-card__stars {
  display: flex;
  gap: 0.125rem;
}

.hotel-card__star {
  font-size: var(--text-sm);
}

.hotel-card__star--full {
  color: #ffc107;
}

.hotel-card__star--half {
  color: #ffc107;
  opacity: 0.6;
}

.hotel-card__star--empty {
  color: var(--gray-light);
}

.hotel-card__rating-text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-dark);
}

.hotel-card__reviews {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.hotel-card__address {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  margin: 0 0 0.25rem 0;
}

.hotel-card__distance {
  font-size: var(--text-sm);
  color: var(--primary-green);
  font-weight: 500;
  margin: 0;
}

.hotel-card__price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.hotel-card__price-amount {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-green);
}

.hotel-card__price-label {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.hotel-card__breakfast {
  font-size: var(--text-xs);
  color: var(--success);
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  background: rgba(40, 167, 69, 0.1);
  border-radius: 0.25rem;
  white-space: nowrap;
}

/* Hotel Card Details */

.hotel-card__details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
}

.hotel-card__description {
  font-size: var(--text-sm);
  color: var(--gray-dark);
  line-height: 1.5;
}

.hotel-card__amenities-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-dark);
  margin: 0 0 0.5rem 0;
}

.hotel-card__amenities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hotel-card__amenity {
  font-size: var(--text-xs);
  padding: 0.25rem 0.5rem;
  background: var(--primary-green);
  color: var(--white);
  border-radius: 1rem;
  white-space: nowrap;
}

.hotel-card__amenities-more {
  font-size: var(--text-xs);
  padding: 0.25rem 0.5rem;
  background: var(--gray-light);
  color: var(--gray-medium);
  border-radius: 1rem;
  white-space: nowrap;
}

.hotel-card__policies {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hotel-card__cancellation {
  font-size: var(--text-sm);
  color: var(--gray-dark);
}

/* Hotel Card Actions */

.hotel-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.hotel-card__select {
  flex: 1;
  max-width: 200px;
}

.hotel-card__map {
  white-space: nowrap;
  min-width: 120px;
}

/* Map Container */

.map-container {
  background: var(--white);
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
}

.map-placeholder {
  padding: 3rem;
  text-align: center;
  border: 2px dashed var(--gray-light);
  border-radius: 0.75rem;
  background: var(--gray-light);
}

.map-placeholder__content {
  max-width: 400px;
  margin: 0 auto;
}

.map-placeholder__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--gray-dark);
  margin: 0 0 1rem 0;
}

.map-placeholder__description {
  font-size: var(--text-base);
  color: var(--gray-medium);
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

.map-placeholder__icon {
  font-size: 3rem;
  opacity: 0.5;
}

/* Responsive Design */

@media (max-width: 768px) {
  .hotel-search-form__row {
    grid-template-columns: 1fr;
  }

  .hotel-card__header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .hotel-card__image {
    width: 100%;
    height: 200px;
    justify-self: center;
  }

  .hotel-card__info {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .hotel-card__price {
    align-items: center;
    text-align: center;
  }

  .hotel-card__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hotel-card__select {
    max-width: none;
  }

  .map-placeholder {
    padding: 2rem 1rem;
  }
}

@media (max-width: 480px) {
  .hotel-search-form {
    padding: 1rem;
  }

  .hotel-card {
    padding: 1rem;
  }

  .hotel-card__amenities-list {
    justify-content: center;
  }

  .hotel-card__details {
    text-align: center;
  }

  .hotel-card__policies {
    justify-content: center;
  }
}

/* Hotel-specific filter styles */

.hotels-page .filter-group__content {
  max-height: 200px;
  overflow-y: auto;
}

.hotels-page .filter-group__content::-webkit-scrollbar {
  width: 4px;
}

.hotels-page .filter-group__content::-webkit-scrollbar-track {
  background: var(--gray-light);
  border-radius: 2px;
}

.hotels-page .filter-group__content::-webkit-scrollbar-thumb {
  background: var(--gray-medium);
  border-radius: 2px;
}

.hotels-page .filter-group__content::-webkit-scrollbar-thumb:hover {
  background: var(--primary-green);
}

/**
 * Trains Page Styles
 * Styles for train search, filters, and results components
 */

/* Train Page Layout */

.train-page {
  min-height: 100vh;
  background: var(--gray-light);
}

.train-page__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.train-page__header {
  text-align: center;
  margin-bottom: 2rem;
}

.train-page__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--gray-dark);
  margin-bottom: 0.5rem;
}

.train-page__subtitle {
  font-size: var(--text-lg);
  color: var(--gray-medium);
}

.train-page__content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  align-items: start;
}

.train-page__filters-toggle {
  display: none;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--white);
  border: 2px solid var(--primary-green);
  border-radius: 0.5rem;
  color: var(--primary-green);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.train-page__filters-toggle:hover {
  background: var(--primary-green);
  color: var(--white);
}

/* Train Search Form */

.train-search-form {
  background: var(--white);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.train-search-form__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 1.5rem;
  text-align: center;
}

.train-search-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.train-search-form__field {
  display: flex;
  flex-direction: column;
}

.train-search-form__field--full {
  grid-column: 1 / -1;
}

.train-search-form__label {
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 0.5rem;
  font-size: var(--text-sm);
}

.train-search-form__input,
.train-search-form__select {
  padding: 0.75rem 1rem;
  border: 2px solid var(--gray-light);
  border-radius: 0.5rem;
  font-size: var(--text-base);
  transition: border-color 0.2s ease;
}

.train-search-form__input:focus,
.train-search-form__select:focus {
  outline: none;
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.1);
}

.train-search-form__input--error,
.train-search-form__select--error {
  border-color: var(--error);
}

.train-search-form__error {
  color: var(--error);
  font-size: var(--text-sm);
  margin-top: 0.25rem;
  display: none;
}

.train-search-form__general-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--error);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  display: none;
}

.train-search-form__submit {
  width: 100%;
  padding: 1rem 2rem;
  background: var(--primary-green);
  color: var(--white);
  border: none;
  border-radius: 0.5rem;
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.train-search-form__submit:hover:not(:disabled) {
  background: var(--primary-green-dark);
  transform: translateY(-2px);
}

.train-search-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.train-search-form__submit-loading {
  display: none;
}

.btn--loading .train-search-form__submit-loading {
  display: inline;
}

/* Train Filters */

.train-filters {
  background: var(--white);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 2rem;
}

.train-filters__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-light);
}

.train-filters__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--gray-dark);
}

.train-filters__count {
  font-size: var(--text-sm);
  color: var(--primary-green);
  font-weight: 500;
  display: none;
}

.train-filters__clear-all {
  background: none;
  border: 1px solid var(--gray-medium);
  color: var(--gray-medium);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.train-filters__clear-all:hover:not(:disabled) {
  border-color: var(--primary-green);
  color: var(--primary-green);
}

.train-filters__clear-all:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.train-filters__section {
  margin-bottom: 1.5rem;
}

.train-filters__section-title {
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 0.75rem;
  font-size: var(--text-sm);
}

.train-filters__price-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.train-filters__price-input {
  padding: 0.5rem;
  border: 1px solid var(--gray-light);
  border-radius: 0.25rem;
  font-size: var(--text-sm);
}

.train-filters__checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.train-filters__checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.train-filters__checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary-green);
}

.train-filters__checkbox-label {
  font-size: var(--text-sm);
  color: var(--gray-dark);
  cursor: pointer;
}

.train-filters__duration-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.train-filters__duration-input {
  padding: 0.5rem;
  border: 1px solid var(--gray-light);
  border-radius: 0.25rem;
  font-size: var(--text-sm);
}

.train-filters__apply {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--primary-green);
  color: var(--white);
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 1rem;
}

.train-filters__apply:hover {
  background: var(--primary-green-dark);
}

/* Train Results */

.train-results {
  background: var(--white);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.train-results__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-light);
}

.train-results__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--gray-dark);
}

.train-results__count {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.train-results__loading {
  text-align: center;
  padding: 3rem;
  color: var(--gray-medium);
  display: none;
}

.train-results__loading::before {
  content: "🚄";
  font-size: 2rem;
  display: block;
  margin-bottom: 1rem;
  animation: bounce 1s infinite;
}

.train-results__no-results {
  text-align: center;
  padding: 3rem;
  color: var(--gray-medium);
  display: none;
}

.train-results__no-results::before {
  content: "😔";
  font-size: 2rem;
  display: block;
  margin-bottom: 1rem;
}

.train-results__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  display: none;
}

/* Train Result Card */

.train-result-card {
  border: 1px solid var(--gray-light);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: all 0.2s ease;
  background: var(--white);
}

.train-result-card:hover {
  border-color: var(--primary-green);
  box-shadow: 0 4px 12px rgba(46, 139, 87, 0.1);
}

.train-result-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.train-result-card__operator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.train-result-card__operator-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 0.25rem;
}

.train-result-card__operator-info {
  display: flex;
  flex-direction: column;
}

.train-result-card__operator-name {
  font-weight: 600;
  color: var(--gray-dark);
  font-size: var(--text-base);
}

.train-result-card__train-number {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.train-result-card__price {
  text-align: right;
}

.train-result-card__price-amount {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary-green);
}

.train-result-card__price-currency {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  display: block;
}

.train-result-card__journey {
  margin-bottom: 1.5rem;
}

.train-result-card__route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
}

.train-result-card__station {
  text-align: center;
}

.train-result-card__station--departure {
  text-align: left;
}

.train-result-card__station--arrival {
  text-align: right;
}

.train-result-card__time {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-dark);
  margin-bottom: 0.25rem;
}

.train-result-card__station-name {
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 0.25rem;
}

.train-result-card__date {
  font-size: var(--text-sm);
  color: var(--gray-medium);
}

.train-result-card__platform {
  font-size: var(--text-xs);
  color: var(--primary-green);
  font-weight: 500;
  margin-top: 0.25rem;
}

.train-result-card__journey-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.train-result-card__duration {
  font-weight: 600;
  color: var(--gray-dark);
  font-size: var(--text-sm);
}

.train-result-card__route-line {
  position: relative;
  width: 100px;
  height: 2px;
  background: var(--primary-green);
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.train-result-card__route-line-track {
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--primary-green);
}

.train-result-card__route-line-train {
  background: var(--white);
  padding: 0 0.25rem;
  font-size: var(--text-sm);
}

.train-result-card__stops {
  font-size: var(--text-xs);
  color: var(--gray-medium);
}

.train-result-card__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--gray-light);
  border-radius: 0.5rem;
}

.train-result-card__class,
.train-result-card__amenities,
.train-result-card__seat-types {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.train-result-card__class-label,
.train-result-card__amenities-label,
.train-result-card__seat-types-label {
  font-weight: 600;
  color: var(--gray-dark);
  font-size: var(--text-sm);
}

.train-result-card__class-value {
  color: var(--gray-medium);
  font-size: var(--text-sm);
}

.train-result-card__amenities-list,
.train-result-card__seat-types-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.train-result-card__amenity,
.train-result-card__seat-type {
  background: var(--white);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: var(--text-xs);
  color: var(--gray-dark);
  border: 1px solid var(--gray-light);
}

.train-result-card__stops-detail {
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--gray-light);
  border-radius: 0.5rem;
}

.train-result-card__stops-title {
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 0.75rem;
  font-size: var(--text-sm);
}

.train-result-card__stops-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.train-result-card__stop {
  font-size: var(--text-sm);
  color: var(--gray-medium);
  padding: 0.25rem 0.5rem;
  background: var(--white);
  border-radius: 0.25rem;
}

.train-result-card__actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  align-items: center;
}

.train-result-card__toggle-stops {
  background: none;
  border: 1px solid var(--gray-medium);
  color: var(--gray-medium);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.train-result-card__toggle-stops:hover {
  border-color: var(--primary-green);
  color: var(--primary-green);
}

.train-result-card__select {
  padding: 0.75rem 1.5rem;
  background: var(--primary-green);
  color: var(--white);
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.train-result-card__select:hover {
  background: var(--primary-green-dark);
  transform: translateY(-1px);
}

/* Animations */

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Responsive Design */

@media (max-width: 768px) {
  .train-page__content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .train-page__filters-toggle {
    display: block;
  }

  .train-filters {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--white);
    border-radius: 0;
    padding: 2rem 1rem;
    overflow-y: auto;
  }

  .train-filters--mobile-open {
    display: block;
  }

  .train-search-form__grid {
    grid-template-columns: 1fr;
  }

  .train-result-card__header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .train-result-card__route {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }

  .train-result-card__station--departure,
  .train-result-card__station--arrival {
    text-align: center;
  }

  .train-result-card__journey-info {
    order: -1;
  }

  .train-result-card__details {
    grid-template-columns: 1fr;
  }

  .train-result-card__actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .train-result-card__toggle-stops,
  .train-result-card__select {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .train-page__container {
    padding: 1rem 0.5rem;
  }

  .train-search-form,
  .train-results {
    padding: 1rem;
  }

  .train-result-card {
    padding: 1rem;
  }

  .train-result-card__route-line {
    width: 60px;
  }
}

/**
 * Footer Component Styles
 * Provides consistent footer styling across all pages
 */

.footer {
  background: var(--gray-dark);
  color: var(--white);
  margin-top: auto;
}

.footer__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
}

.footer__content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.footer__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary-green);
  margin: 0;
}

.footer__subtitle {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--white);
}

.footer__description {
  color: var(--gray-light);
  line-height: 1.6;
  margin: 0;
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.footer__link {
  color: var(--gray-light);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: var(--spacing-xs) 0;
}

.footer__link:hover,
.footer__link:focus {
  color: var(--primary-green-light);
  text-decoration: underline;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--gray-medium);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.footer__copyright {
  color: var(--gray-light);
  margin: 0;
  font-size: var(--text-sm);
}

.footer__social {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--gray-medium);
  border-radius: 50%;
  text-decoration: none;
  transition: all var(--transition-fast);
  font-size: var(--text-lg);
}

.footer__social-link:hover,
.footer__social-link:focus {
  background: var(--primary-green);
  transform: translateY(-2px);
}

/* Skip Link Styles */

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-green);
  color: var(--white);
  padding: 8px;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* Screen reader only text */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive Design */

@media (max-width: 768px) {
  .footer__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }
  
  .footer__social {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer__container {
    padding: var(--spacing-lg) var(--spacing-sm);
  }
  
  .footer__content {
    gap: var(--spacing-sm);
  }
  
  .footer__section {
    gap: var(--spacing-xs);
  }
}

/**
 * Lazy Loading Styles
 * Visual feedback for lazy-loaded content
 */

/* Lazy loading states */

[data-lazy] {
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

/* Loading state */

.lazy-loading {
  opacity: 0.7;
  background: linear-gradient(90deg, var(--gray-light) 25%, transparent 50%, var(--gray-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Loaded state */

.lazy-loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Error state */

.lazy-error {
  opacity: 0.5;
  background-color: var(--gray-light);
  position: relative;
}

.lazy-error::after {
  content: '⚠️ Image non disponible';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-sm);
  color: var(--gray-medium);
  text-align: center;
  white-space: nowrap;
}

/* Shimmer animation for loading state */

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

/* Lazy loaded images */

img[data-lazy] {
  min-height: 200px;
  background-color: var(--gray-light);
}

img.lazy-loading {
  filter: blur(2px);
}

img.lazy-loaded {
  filter: none;
  animation: fadeInUp 0.6s ease-out;
}

/* Background images with lazy loading */

.bg-lazy {
  background-color: var(--gray-light);
  position: relative;
}

.bg-lazy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.3) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.bg-lazy.lazy-loading::before {
  opacity: 1;
}

.bg-lazy.bg-loaded::before {
  opacity: 0;
}

/* Fade in animation */

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

/* Responsive lazy loading placeholders */

.lazy-placeholder {
  background-color: var(--gray-light);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.lazy-placeholder::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.5) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Offer cards lazy loading */

.offer-card[data-lazy] {
  min-height: 300px;
}

.offer-card.lazy-loading .offer-card__image {
  background: var(--gray-light);
  animation: shimmer 1.5s infinite;
}

/* Hero background lazy loading */

.hero__background[data-lazy] {
  background-color: var(--gray-light);
}

.hero__background.lazy-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 25%, rgba(46, 139, 87, 0.1) 50%, transparent 75%);
  background-size: 200% 200%;
  animation: shimmer 2s infinite;
}

/* Service worker update notification */

.sw-update-notification {
  font-family: var(--font-primary);
  line-height: 1.5;
}

.sw-update-notification .sw-update-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sw-update-notification .sw-update-content p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--gray-dark);
}

.sw-update-notification .btn {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--primary-green);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sw-update-notification .btn-primary {
  background-color: var(--primary-green);
  color: var(--white);
}

.sw-update-notification .btn-primary:hover {
  background-color: var(--primary-green-dark);
}

.sw-update-notification .btn-outline {
  background-color: transparent;
  color: var(--primary-green);
}

.sw-update-notification .btn-outline:hover {
  background-color: var(--primary-green);
  color: var(--white);
}

/* Performance optimization indicators (for development) */

.perf-indicator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  z-index: 9999;
  font-family: monospace;
}

.perf-indicator.hidden {
  display: none;
}

/* Media queries for responsive lazy loading */

@media (max-width: 768px) {
  .lazy-placeholder {
    min-height: 150px;
  }
  
  img[data-lazy] {
    min-height: 150px;
  }
  
  .offer-card[data-lazy] {
    min-height: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lazy-loading,
  .lazy-placeholder::after,
  .bg-lazy::before,
  .hero__background.lazy-loading::after {
    animation: none;
  }
  
  img.lazy-loaded {
    animation: none;
  }
}

/* Error Handling Components - Kiwi Voyages */

/* Global Error Container */

.error-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  max-width: 400px;
  z-index: 9999;
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Error Message */

.error-message {
  background: var(--white);
  border: 1px solid var(--error);
  border-left: 4px solid var(--error);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.error-content {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  gap: 0.75rem;
}

.error-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.error-text {
  flex: 1;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--gray-dark);
}

.error-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-medium);
  cursor: pointer;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.error-close:hover {
  background: var(--gray-light);
  color: var(--gray-dark);
}

.error-close:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Error Types */

.error-message.validation {
  border-left-color: var(--warning);
}

.error-message.network {
  border-left-color: var(--info);
}

.error-message.server {
  border-left-color: var(--error);
}

.error-message.not_found {
  border-left-color: var(--gray-medium);
}

/* Form Error States */

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--error);
  background-color: rgba(220, 53, 69, 0.05);
}

.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.form-error {
  display: none;
  font-size: var(--text-sm);
  color: var(--error);
  margin-top: var(--space-xs);
  font-weight: var(--font-medium);
}

.form-error::before {
  content: '⚠️ ';
  margin-right: 0.25rem;
}

/* Success States */

.form-input.success,
.form-select.success,
.form-textarea.success {
  border-color: var(--success);
  background-color: rgba(40, 167, 69, 0.05);
}

.form-input.success:focus,
.form-select.success:focus,
.form-textarea.success:focus {
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.form-success {
  display: block;
  font-size: var(--text-sm);
  color: var(--success);
  margin-top: var(--space-xs);
  font-weight: var(--font-medium);
}

.form-success::before {
  content: '✅ ';
  margin-right: 0.25rem;
}

/* Image Fallback Styles */

.image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-light);
  border: 2px dashed var(--gray-medium);
  border-radius: var(--radius-md);
  min-height: 200px;
  color: var(--gray-medium);
  text-align: center;
  transition: all var(--transition-normal);
}

.image-placeholder:hover {
  background: rgba(108, 117, 125, 0.1);
  border-color: var(--gray-dark);
}

.image-placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
}

.image-placeholder-icon {
  font-size: 2rem;
  opacity: 0.7;
}

.image-placeholder-text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  max-width: 200px;
  line-height: 1.4;
}

/* Image Error States */

img.image-error {
  opacity: 0.5;
  filter: grayscale(100%);
}

img.image-fallback {
  opacity: 0.8;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
}

/* Loading States */

.loading-overlay {
  position: relative;
}

.loading-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--gray-light);
  border-top: 2px solid var(--primary-green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 404 Error Page Enhancements */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--gray-light) 0%, var(--white) 100%);
}

.error-code {
  font-size: 8rem;
  font-weight: var(--font-bold);
  color: var(--primary-green);
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.error-message-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--gray-dark);
  font-weight: var(--font-semibold);
}

.error-description {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  color: var(--gray-medium);
  max-width: 600px;
  line-height: 1.6;
}

.error-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.home-button {
  background: var(--primary-green);
  color: var(--white);
  padding: 1rem 2rem;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: var(--font-medium);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.home-button:hover {
  background: var(--primary-green-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.home-button:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.back-button {
  background: transparent;
  color: var(--gray-medium);
  padding: 1rem 2rem;
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: var(--font-medium);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-normal);
}

.back-button:hover {
  border-color: var(--gray-medium);
  color: var(--gray-dark);
  background: var(--gray-light);
}

/* Responsive Design */

@media (max-width: 768px) {
  .error-container {
    top: 0.5rem;
    right: 0.5rem;
    left: 0.5rem;
    max-width: none;
  }
  
  .error-code {
    font-size: 4rem;
  }
  
  .error-message-title {
    font-size: 1.5rem;
  }
  
  .error-description {
    font-size: 1rem;
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .home-button,
  .back-button {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* Screen Reader Only */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High Contrast Mode Support */

@media (prefers-contrast: high) {
  .error-message {
    border-width: 2px;
  }
  
  .image-placeholder {
    border-width: 3px;
  }
  
  .form-input.error,
  .form-select.error,
  .form-textarea.error {
    border-width: 3px;
  }
}

/* Reduced Motion Support */

@media (prefers-reduced-motion: reduce) {
  .error-container {
    animation: none;
  }
  
  .error-code {
    animation: none;
  }
  
  .loading-spinner {
    animation: none;
  }
  
  .home-button:hover {
    transform: none;
  }
}

/**
 * Mobile Optimization for Search Results
 * Implements requirements: 4.1, 4.2, 4.3, 4.4, 4.5
 * 
 * Features:
 * - Adaptive layout for screens < 768px
 * - Touch-optimized interactions
 * - Adaptive image loading
 * - Mobile pagination with 10 results limit
 */

/* Mobile-first responsive breakpoints */

@media (max-width: 767px) {
  
  /* Search Results Manager - Mobile Layout */
  .search-results-manager {
    padding: 1rem 0.5rem;
  }

  .search-results__header {
    margin-bottom: 1.5rem;
    text-align: left;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 0.5rem;
  }

  .search-results__title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .search-results__summary {
    font-size: 0.875rem;
  }

  /* Mobile Sort Controls */
  .search-results__sort {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
  }

  .search-results__sort-label {
    font-size: 0.875rem;
  }

  .search-results__sort-select {
    min-width: auto;
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem; /* Prevent zoom on iOS */
  }

  /* Mobile Results Grid */
  .search-results__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  /* Mobile Result Cards */
  .result-card {
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    background: white;
    
    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(16, 185, 129, 0.1);
  }

  .result-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .result-card__header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .result-card__title {
    font-size: 1.125rem;
    line-height: 1.4;
    margin: 0;
  }

  .result-card__price {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #f0fdf4;
    border-radius: 0.375rem;
    border: 1px solid #bbf7d0;
  }

  .result-card__price-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: #059669;
  }

  .result-card__price-currency {
    font-size: 0.75rem;
    color: #065f46;
    margin-left: 0.25rem;
  }

  /* Mobile Card Content */
  .result-card__content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .result-card__info {
    gap: 0.75rem;
  }

  .result-card__description {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6b7280;
  }

  .result-card__details {
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
    font-size: 0.8125rem;
  }

  .result-card__detail {
    background: #f3f4f6;
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    color: #374151;
    font-weight: 500;
  }

  .result-card__features {
    gap: 0.375rem;
    margin-top: 0.75rem;
  }

  .result-card__feature {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    background: #e0f2fe;
    color: #0c4a6e;
    border-radius: 0.75rem;
  }

  /* Mobile Actions */
  .result-card__actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
  }

  .result-card__availability {
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }

  .result-card__book-btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 0.5rem;
    min-height: 44px; /* Touch target minimum */
    min-width: 120px;
    
    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .result-card__book-btn:active {
    transform: scale(0.95);
  }

  /* Mobile Loading States */
  .search-results__loading,
  .search-results__empty,
  .search-results__error {
    min-height: 200px;
    padding: 1.5rem 1rem;
  }

  .loading-spinner {
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
  }

  .loading-text {
    font-size: 1rem;
  }

  .empty-state,
  .error-state {
    max-width: 100%;
    padding: 0 1rem;
  }

  .empty-state__icon,
  .error-state__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .empty-state__title,
  .error-state__title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .empty-state__message,
  .error-state__message {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
  }

  /* Mobile Pagination */
  .search-results__pagination {
    margin-top: 1.5rem;
  }

  .pagination {
    flex-direction: column;
    gap: 1rem;
  }

  .pagination__pages {
    order: 1;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pagination__page {
    width: 44px;
    height: 44px;
    font-size: 0.875rem;
    font-weight: 600;
    
    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .pagination__page:active {
    transform: scale(0.9);
  }

  .pagination__btn {
    order: 2;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    min-height: 44px;
    width: 100%;
    
    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .pagination__prev {
    order: 0;
  }

  .pagination__next {
    order: 3;
  }

  /* Mobile Load More Button */
  .load-more-btn {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    min-height: 48px;
    
    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

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

  /* Mobile Filters Integration */
  .search-filters {
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
  }

  .search-filters__header {
    padding: 1rem;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .search-filters__title-section {
    justify-content: space-between;
    align-items: center;
  }

  .search-filters__title {
    font-size: 1rem;
  }

  .search-filters__count {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
  }

  .search-filters__actions {
    justify-content: stretch;
    gap: 0.75rem;
  }

  .search-filters__reset {
    flex: 1;
    padding: 0.75rem;
    font-size: 0.875rem;
    min-height: 44px;
    
    /* Touch optimization */
    touch-action: manipulation;
  }

  .search-filters__toggle {
    flex: 2;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    min-height: 44px;
    
    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .search-filters__content {
    padding: 1rem;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Mobile Filter Sections */
  .filter-section__title {
    font-size: 0.9375rem;
    padding-bottom: 0.5rem;
  }

  /* Mobile Sort Options */
  .sort-options {
    gap: 0.5rem;
  }

  .sort-option {
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: white;
    
    /* Touch optimization */
    touch-action: manipulation;
    min-height: 44px;
  }

  .sort-option:active {
    background: #f3f4f6;
  }

  .sort-option input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
  }

  .sort-option__label {
    font-size: 0.875rem;
    font-weight: 500;
  }

  /* Mobile Price Filter */
  .price-range {
    flex-direction: column;
    gap: 0.75rem;
  }

  .price-input {
    padding: 0.875rem;
    font-size: 1rem; /* Prevent zoom on iOS */
    min-height: 44px;
  }

  .price-slider-container {
    height: 3rem;
    margin-top: 0.5rem;
  }

  .price-slider {
    height: 0.75rem;
  }

  .price-slider::-webkit-slider-thumb {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Mobile Checkbox and Radio Options */
  .duration-option,
  .time-slot,
  .rating-option,
  .provider-option {
    padding: 0.875rem;
    border-radius: 0.5rem;
    min-height: 44px;
    
    /* Touch optimization */
    touch-action: manipulation;
  }

  .duration-option:active,
  .time-slot:active,
  .rating-option:active,
  .provider-option:active {
    background: #f0fdf4;
  }

  .duration-checkbox,
  .time-checkbox,
  .rating-radio,
  .provider-checkbox {
    width: 1.25rem;
    height: 1.25rem;
  }

  .duration-label,
  .time-label,
  .rating-label,
  .provider-label {
    font-size: 0.875rem;
    font-weight: 500;
  }

  .time-icon {
    font-size: 1.25rem;
  }

  /* Mobile Provider List */
  .provider-list {
    max-height: 180px;
    gap: 0.375rem;
  }

  .provider-count {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
}

/* Small mobile devices (max-width: 480px) */

@media (max-width: 480px) {
  
  .search-results-manager {
    padding: 0.75rem 0.25rem;
  }

  .search-results__header {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  .search-results__title {
    font-size: 1.25rem;
  }

  .search-results__sort {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  .result-card {
    padding: 0.75rem;
    margin: 0 0.25rem;
  }

  .result-card__title {
    font-size: 1rem;
  }

  .result-card__price-amount {
    font-size: 1.125rem;
  }

  .result-card__details {
    gap: 0.5rem;
  }

  .result-card__detail {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  .result-card__book-btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    min-width: 100px;
  }

  .pagination__page {
    width: 40px;
    height: 40px;
    font-size: 0.8125rem;
  }

  .search-filters__header {
    padding: 0.75rem;
  }

  .search-filters__content {
    padding: 0.75rem;
    gap: 1.25rem;
  }

  .filter-section__title {
    font-size: 0.875rem;
  }

  .sort-option,
  .duration-option,
  .time-slot,
  .rating-option,
  .provider-option {
    padding: 0.75rem;
    min-height: 40px;
  }
}

/* Landscape orientation optimizations for mobile */

@media (max-height: 500px) and (orientation: landscape) and (max-width: 767px) {
  
  .search-results__header {
    margin-bottom: 1rem;
    padding: 0.75rem;
  }

  .search-results__title {
    font-size: 1.125rem;
  }

  .result-card {
    padding: 0.75rem;
  }

  .result-card__header {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0.75rem;
  }

  .result-card__price {
    text-align: right;
    background: transparent;
    border: none;
    padding: 0;
  }

  .result-card__actions {
    flex-direction: row;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  .search-filters__header {
    padding: 0.75rem;
  }

  .search-filters__content {
    padding: 0.75rem;
    gap: 1rem;
  }

  .pagination {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .pagination__pages {
    order: 0;
  }

  .pagination__prev {
    order: -1;
    width: auto;
  }

  .pagination__next {
    order: 1;
    width: auto;
  }
}

/* High DPI mobile displays */

@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
  
  .result-card {
    border-width: 0.5px;
  }

  .result-card__price {
    border-width: 0.5px;
  }

  .sort-option,
  .duration-option,
  .time-slot,
  .rating-option,
  .provider-option {
    border-width: 0.5px;
  }
}

/* Dark mode support for mobile */

@media (max-width: 767px) and (prefers-color-scheme: dark) {
  
  .result-card {
    background: #1f2937;
    border-color: #374151;
    color: #f9fafb;
  }

  .result-card__title {
    color: #f9fafb;
  }

  .result-card__description {
    color: #d1d5db;
  }

  .result-card__detail {
    background: #374151;
    color: #d1d5db;
  }

  .result-card__price {
    background: #064e3b;
    border-color: #065f46;
  }

  .result-card__price-amount {
    color: #34d399;
  }

  .search-filters {
    background: #1f2937;
    border-color: #374151;
  }

  .search-filters__header {
    background: #111827;
    border-color: #374151;
  }

  .search-filters__title {
    color: #f9fafb;
  }

  .sort-option,
  .duration-option,
  .time-slot,
  .rating-option,
  .provider-option {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
  }

  .sort-option:active,
  .duration-option:active,
  .time-slot:active,
  .rating-option:active,
  .provider-option:active {
    background: #4b5563;
  }
}

/* Reduced motion preferences for mobile */

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  
  .result-card:active,
  .pagination__page:active,
  .load-more-btn:active {
    transform: none;
  }

  .result-card {
    transition: none;
  }

  .sort-option,
  .duration-option,
  .time-slot,
  .rating-option,
  .provider-option {
    transition: none;
  }
}

/* Search Results Section - Kiwi Voyages */

.search-results-section {
  background: #f8f9fa;
  padding: 2rem 0;
  min-height: 400px;
  border-top: 1px solid #e5e7eb;
}

.search-results-section[aria-hidden="true"] {
  display: none !important;
}

.search-results-section[aria-hidden="false"] {
  display: block !important;
  animation: fadeInUp 0.5s ease-out;
}

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

/* Container pour les résultats */

.search-results-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Titre de section */

.search-results-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--gray-dark);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}

/* État de chargement spécifique à la section */

.search-results-section .search-results__loading {
  text-align: center;
  padding: 4rem 2rem;
}

.search-results-section .loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #f3f4f6;
  border-top: 4px solid var(--primary-green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

.search-results-section .loading-text {
  font-size: var(--text-lg);
  color: var(--gray-medium);
}

/* État vide spécifique à la section */

.search-results-section .search-results__empty {
  text-align: center;
  padding: 4rem 2rem;
}

.search-results-section .empty-state__icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.search-results-section .empty-state__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--gray-dark);
  margin-bottom: 1rem;
}

.search-results-section .empty-state__message {
  color: var(--gray-medium);
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */

@media (max-width: 768px) {
  .search-results-section {
    padding: 1rem 0;
  }
  
  .search-results-container {
    padding: 0 0.5rem;
  }
  
  .search-results-section h2 {
    font-size: var(--text-xl);
    margin-bottom: 1.5rem;
  }
  
  .search-results-section .search-results__loading,
  .search-results-section .search-results__empty {
    padding: 2rem 1rem;
  }
}

/* Animation pour le mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  .search-results-section[aria-hidden="false"] {
    animation: none;
  }
  
  @keyframes fadeInUp {
    from, to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Simple Search Results - Kiwi Voyages */

.search-results-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.search-results-header {
  text-align: center;
  margin-bottom: 2rem;
}

.search-results-header h2 {
  color: #1f2937;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.search-results-header p {
  color: #6b7280;
  font-size: 1.1rem;
}

/* Loading state */

.search-loading {
  text-align: center;
  padding: 4rem 2rem;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #f3f4f6;
  border-top: 4px solid #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 2rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.search-loading h2 {
  color: #1f2937;
  margin-bottom: 1rem;
}

.search-loading p {
  color: #6b7280;
}

/* Results grid */

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

/* Result cards */

.result-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #10b981;
}

.result-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.result-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  flex: 1;
  margin-right: 1rem;
}

.result-price {
  text-align: right;
}

.price-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: #10b981;
}

.result-content {
  margin-bottom: 1.5rem;
}

.result-description {
  color: #6b7280;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.result-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.result-detail {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.detail-label {
  color: #6b7280;
  font-weight: 500;
}

.detail-value {
  color: #1f2937;
  font-weight: 600;
}

.result-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feature-tag {
  background: #f3f4f6;
  color: #374151;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.result-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.availability-status {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

.availability-available {
  background: #d1fae5;
  color: #065f46;
}

.availability-limited {
  background: #fef3c7;
  color: #92400e;
}

.availability-unavailable {
  background: #fee2e2;
  color: #991b1b;
}

.book-button {
  background: #10b981;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.book-button:hover:not(:disabled) {
  background: #059669;
}

.book-button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* No results state */

.no-results,
.search-error {
  text-align: center;
  padding: 4rem 2rem;
}

.no-results-icon,
.error-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.no-results h2,
.search-error h2 {
  color: #1f2937;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.no-results p,
.search-error p {
  color: #6b7280;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.retry-button {
  background: #10b981;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.retry-button:hover {
  background: #059669;
}

/* Responsive */

@media (max-width: 768px) {
  .search-results-container {
    padding: 1rem 0.5rem;
  }
  
  .search-results-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .result-card {
    padding: 1rem;
  }
  
  .result-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .result-title {
    margin-right: 0;
  }
  
  .result-details {
    grid-template-columns: 1fr;
  }
  
  .result-footer {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .book-button {
    width: 100%;
    min-height: 44px;
  }
}

/* Animation pour les résultats */

.result-card {
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.5s ease forwards;
}

.result-card:nth-child(1) { animation-delay: 0.1s; }

.result-card:nth-child(2) { animation-delay: 0.2s; }

.result-card:nth-child(3) { animation-delay: 0.3s; }

.result-card:nth-child(4) { animation-delay: 0.4s; }

.result-card:nth-child(5) { animation-delay: 0.5s; }

.result-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  .result-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
  
  .result-card:hover {
    transform: none;
  }
}

/* Accessibility Styles - Kiwi Voyages */

/* Screen reader only content */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Screen reader only content that becomes visible on focus */

.sr-only-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Skip links */

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--gray-dark);
  color: var(--white);
  padding: 8px 16px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: var(--font-semibold);
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 6px;
}

/* Focus indicators */

*:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Enhanced focus for interactive elements */

button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus,
[role="button"]:focus,
[role="link"]:focus,
[role="menuitem"]:focus,
[role="option"]:focus,
[tabindex]:focus {
  outline: 3px solid var(--primary-green);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--white), 0 0 0 4px var(--primary-green);
}

/* Focus within containers */

.search-form:focus-within,
.result-card:focus-within,
.filter-group:focus-within {
  box-shadow: 0 0 0 2px var(--primary-green);
  border-radius: var(--radius-md);
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .high-contrast,
  body.high-contrast {
    --primary-green: #000000;
    --primary-green-dark: #000000;
    --secondary-blue: #000080;
    --gray-dark: #000000;
    --gray-medium: #666666;
    --gray-light: #cccccc;
    --white: #ffffff;
    --error: #cc0000;
    --success: #008000;
    --warning: #ff8800;
  }

  .high-contrast *:focus,
  body.high-contrast *:focus {
    outline: 4px solid #000000;
    outline-offset: 2px;
    background-color: #ffff00;
    color: #000000;
  }

  .high-contrast .btn,
  body.high-contrast .btn {
    border: 2px solid #000000;
  }

  .high-contrast .form-input,
  body.high-contrast .form-input {
    border: 2px solid #000000;
    background-color: #ffffff;
    color: #000000;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .reduce-motion,
  body.reduce-motion {
    --transition-fast: none;
    --transition-normal: none;
    --transition-slow: none;
  }

  .reduce-motion *,
  body.reduce-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reduce-motion .loading-spinner,
  body.reduce-motion .loading-spinner {
    animation: none;
    border: 4px solid var(--gray-light);
    border-top: 4px solid var(--primary-green);
  }
}

/* Keyboard navigation indicators */

.keyboard-navigation .result-card:focus,
.keyboard-navigation .filter-option:focus,
.keyboard-navigation .pagination__page:focus {
  transform: scale(1.02);
  z-index: 10;
}

/* ARIA live regions styling */

#aria-live-polite,
#aria-live-assertive {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Error states for accessibility */

.form-input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.form-input[aria-invalid="true"]:focus {
  outline-color: var(--error);
  box-shadow: 0 0 0 1px var(--white), 0 0 0 4px var(--error);
}

/* Required field indicators */

.form-label[aria-required="true"]::after,
.form-label.required::after {
  content: " *";
  color: var(--error);
  font-weight: var(--font-bold);
}

/* Loading states for screen readers */

.loading-content[aria-busy="true"] {
  position: relative;
}

.loading-content[aria-busy="true"]::after {
  content: "Chargement en cours...";
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Autocomplete accessibility */

.autocomplete-suggestions[role="listbox"] {
  border: 2px solid var(--primary-green);
}

.autocomplete-suggestion[role="option"][aria-selected="true"] {
  background-color: var(--primary-green);
  color: var(--white);
  outline: 2px solid var(--primary-green);
  outline-offset: -2px;
}

/* Pagination accessibility */

.pagination[role="navigation"] .pagination__page[aria-current="page"] {
  background-color: var(--primary-green);
  color: var(--white);
  font-weight: var(--font-bold);
}

/* Filter accessibility */

.filter-group[role="group"] {
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.filter-group[role="group"] .filter-legend {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-sm);
}

/* Search results accessibility */

.search-results__list[role="region"] {
  border: 1px solid transparent;
}

.search-results__list[role="region"]:focus-within {
  border-color: var(--primary-green);
}

/* Mobile touch targets */

@media (max-width: 768px) {
  .btn,
  .form-input,
  .form-select,
  .pagination__btn,
  .result-card__book-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Larger touch targets for better accessibility */
  .autocomplete-suggestion,
  .filter-option,
  .pagination__page {
    min-height: 48px;
    padding: 12px 16px;
  }
}

/* Text scaling support */

@media (min-resolution: 1.5dppx) {
  /* Ensure text remains readable at high DPI */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Support for 200% text scaling */

@media (min-width: 1px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 1px) and (max-width: 768px) {
  html {
    font-size: 18px; /* Larger base font on mobile */
  }
}

/* Windows High Contrast Mode */

@media (-ms-high-contrast: active) {
  .btn {
    border: 2px solid;
  }
  
  .form-input {
    border: 2px solid;
  }
  
  .result-card {
    border: 2px solid;
  }
  
  *:focus {
    outline: 3px solid;
  }
}

/* Forced colors mode (Windows High Contrast) */

@media (forced-colors: active) {
  .btn {
    forced-color-adjust: none;
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  
  .btn:hover,
  .btn:focus {
    background: Highlight;
    color: HighlightText;
    border-color: HighlightText;
  }
  
  .form-input {
    forced-color-adjust: none;
    border: 2px solid ButtonText;
    background: Field;
    color: FieldText;
  }
  
  .form-input:focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* Color blind friendly indicators */

.status-indicator {
  position: relative;
}

.status-indicator.available::before {
  content: "✓";
  color: var(--success);
  font-weight: var(--font-bold);
  margin-right: var(--space-xs);
}

.status-indicator.limited::before {
  content: "!";
  color: var(--warning);
  font-weight: var(--font-bold);
  margin-right: var(--space-xs);
}

.status-indicator.unavailable::before {
  content: "✗";
  color: var(--error);
  font-weight: var(--font-bold);
  margin-right: var(--space-xs);
}

/* Ensure sufficient color contrast */

.text-muted {
  color: var(--gray-dark); /* Ensure at least 4.5:1 contrast ratio */
}

/* Focus management for modals and overlays */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal-content {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.modal-content:focus {
  outline: none;
}

/* Tooltip accessibility */

.tooltip {
  position: relative;
}

.tooltip[aria-describedby] {
  cursor: help;
}

.tooltip-content {
  position: absolute;
  background: var(--gray-dark);
  color: var(--white);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  z-index: 1000;
  max-width: 200px;
  word-wrap: break-word;
}

/* Ensure interactive elements are distinguishable */

button,
input,
select,
textarea,
a,
[role="button"],
[role="link"] {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Print accessibility */

@media print {
  .skip-link,
  .sr-only,
  #aria-live-polite,
  #aria-live-assertive {
    display: none !important;
  }
  
  /* Ensure sufficient contrast in print */
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  /* Show URLs for links */
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

/* Base styles */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--gray-dark);
  background-color: var(--white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main content */

.main {
  flex: 1;
  padding: 0;
}

/* Utility classes */

/* Spacing utilities */

.m-0 { margin: 0; }

.m-xs { margin: var(--space-xs); }

.m-sm { margin: var(--space-sm); }

.m-md { margin: var(--space-md); }

.m-lg { margin: var(--space-lg); }

.m-xl { margin: var(--space-xl); }

.m-2xl { margin: var(--space-2xl); }

.mt-0 { margin-top: 0; }

.mt-xs { margin-top: var(--space-xs); }

.mt-sm { margin-top: var(--space-sm); }

.mt-md { margin-top: var(--space-md); }

.mt-lg { margin-top: var(--space-lg); }

.mt-xl { margin-top: var(--space-xl); }

.mt-2xl { margin-top: var(--space-2xl); }

.mb-0 { margin-bottom: 0; }

.mb-xs { margin-bottom: var(--space-xs); }

.mb-sm { margin-bottom: var(--space-sm); }

.mb-md { margin-bottom: var(--space-md); }

.mb-lg { margin-bottom: var(--space-lg); }

.mb-xl { margin-bottom: var(--space-xl); }

.mb-2xl { margin-bottom: var(--space-2xl); }

.ml-0 { margin-left: 0; }

.ml-xs { margin-left: var(--space-xs); }

.ml-sm { margin-left: var(--space-sm); }

.ml-md { margin-left: var(--space-md); }

.ml-lg { margin-left: var(--space-lg); }

.ml-xl { margin-left: var(--space-xl); }

.mr-0 { margin-right: 0; }

.mr-xs { margin-right: var(--space-xs); }

.mr-sm { margin-right: var(--space-sm); }

.mr-md { margin-right: var(--space-md); }

.mr-lg { margin-right: var(--space-lg); }

.mr-xl { margin-right: var(--space-xl); }

.p-0 { padding: 0; }

.p-xs { padding: var(--space-xs); }

.p-sm { padding: var(--space-sm); }

.p-md { padding: var(--space-md); }

.p-lg { padding: var(--space-lg); }

.p-xl { padding: var(--space-xl); }

.p-2xl { padding: var(--space-2xl); }

.pt-0 { padding-top: 0; }

.pt-xs { padding-top: var(--space-xs); }

.pt-sm { padding-top: var(--space-sm); }

.pt-md { padding-top: var(--space-md); }

.pt-lg { padding-top: var(--space-lg); }

.pt-xl { padding-top: var(--space-xl); }

.pt-2xl { padding-top: var(--space-2xl); }

.pb-0 { padding-bottom: 0; }

.pb-xs { padding-bottom: var(--space-xs); }

.pb-sm { padding-bottom: var(--space-sm); }

.pb-md { padding-bottom: var(--space-md); }

.pb-lg { padding-bottom: var(--space-lg); }

.pb-xl { padding-bottom: var(--space-xl); }

.pb-2xl { padding-bottom: var(--space-2xl); }

.pl-0 { padding-left: 0; }

.pl-xs { padding-left: var(--space-xs); }

.pl-sm { padding-left: var(--space-sm); }

.pl-md { padding-left: var(--space-md); }

.pl-lg { padding-left: var(--space-lg); }

.pl-xl { padding-left: var(--space-xl); }

.pr-0 { padding-right: 0; }

.pr-xs { padding-right: var(--space-xs); }

.pr-sm { padding-right: var(--space-sm); }

.pr-md { padding-right: var(--space-md); }

.pr-lg { padding-right: var(--space-lg); }

.pr-xl { padding-right: var(--space-xl); }

/* Text utilities */

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }

.text-justify { text-align: justify; }

.text-xs { font-size: var(--text-xs); }

.text-sm { font-size: var(--text-sm); }

.text-base { font-size: var(--text-base); }

.text-lg { font-size: var(--text-lg); }

.text-xl { font-size: var(--text-xl); }

.text-2xl { font-size: var(--text-2xl); }

.text-3xl { font-size: var(--text-3xl); }

.text-4xl { font-size: var(--text-4xl); }

.font-light { font-weight: var(--font-light); }

.font-normal { font-weight: var(--font-normal); }

.font-medium { font-weight: var(--font-medium); }

.font-semibold { font-weight: var(--font-semibold); }

.font-bold { font-weight: var(--font-bold); }

/* Color utilities */

.text-primary { color: var(--primary-green); }

.text-secondary { color: var(--secondary-blue); }

.text-accent { color: var(--accent-orange); }

.text-gray { color: var(--gray-medium); }

.text-dark { color: var(--gray-dark); }

.text-white { color: var(--white); }

.text-success { color: var(--success); }

.text-warning { color: var(--warning); }

.text-error { color: var(--error); }

.bg-primary { background-color: var(--primary-green); }

.bg-secondary { background-color: var(--secondary-blue); }

.bg-accent { background-color: var(--accent-orange); }

.bg-white { background-color: var(--white); }

.bg-gray-light { background-color: var(--gray-light); }

.bg-gray { background-color: var(--gray-medium); }

.bg-dark { background-color: var(--gray-dark); }

/* Border utilities */

.border { border: 1px solid var(--gray-light); }

.border-primary { border-color: var(--primary-green); }

.border-gray { border-color: var(--gray-medium); }

.rounded-none { border-radius: 0; }

.rounded-sm { border-radius: var(--radius-sm); }

.rounded { border-radius: var(--radius-md); }

.rounded-lg { border-radius: var(--radius-lg); }

.rounded-xl { border-radius: var(--radius-xl); }

.rounded-full { border-radius: 9999px; }

/* Shadow utilities */

.shadow-none { box-shadow: none; }

.shadow-sm { box-shadow: var(--shadow-sm); }

.shadow { box-shadow: var(--shadow-md); }

.shadow-lg { box-shadow: var(--shadow-lg); }

.shadow-xl { box-shadow: var(--shadow-xl); }

/* Position utilities */

.relative { position: relative; }

.absolute { position: absolute; }

.fixed { position: fixed; }

.sticky { position: sticky; }

/* Width and height utilities */

.w-full { width: 100%; }

.w-auto { width: auto; }

.h-full { height: 100%; }

.h-auto { height: auto; }

.h-screen { height: 100vh; }

/* Overflow utilities */

.overflow-hidden { overflow: hidden; }

.overflow-auto { overflow: auto; }

.overflow-scroll { overflow: scroll; }

/* Cursor utilities */

.cursor-pointer { cursor: pointer; }

.cursor-not-allowed { cursor: not-allowed; }

/* Transition utilities */

.transition { transition: all var(--transition-normal); }

.transition-fast { transition: all var(--transition-fast); }

.transition-slow { transition: all var(--transition-slow); }/* Fake Admin Page - Security Demonstration Styles */

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.compromised {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d1b1b 50%, #1a1a1a 100%);
    color: #e0e0e0;
    min-height: 100vh;
    position: relative;
    overflow-x: auto;
}

/* Animated background effect for compromised state */
body.compromised::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 69, 0, 0.1) 0%, transparent 50%);
    animation: pulse-danger 3s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

@keyframes pulse-danger {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}

/* Security Warning Banner */
.security-warning {
    background: linear-gradient(90deg, #ff4444, #ff6b6b, #ff4444);
    color: white;
    padding: 1rem;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(255, 68, 68, 0.5);
    animation: warning-flash 2s ease-in-out infinite;
}

@keyframes warning-flash {
    0%, 100% { background: linear-gradient(90deg, #ff4444, #ff6b6b, #ff4444); }
    50% { background: linear-gradient(90deg, #ff6b6b, #ff4444, #ff6b6b); }
}

.warning-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.warning-icon {
    font-size: 1.5rem;
    animation: shake 0.5s ease-in-out infinite alternate;
}

@keyframes shake {
    0% { transform: translateX(-2px); }
    100% { transform: translateX(2px); }
}

/* Header Styles */
.admin-header {
    background: linear-gradient(135deg, #2c1810 0%, #1a1a1a 100%);
    border-bottom: 3px solid #ff4444;
    padding: 1rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.compromised-title {
    font-size: 1.8rem;
    color: #ff6b6b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.kiwi-logo {
    font-size: 2rem;
    filter: grayscale(100%) brightness(0.7);
}

.compromised-badge {
    background: #ff4444;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    animation: blink 1s ease-in-out infinite;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.5; }
}

/* Navigation */
.admin-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    flex-wrap: wrap;
}

.nav-link {
    color: #ccc;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 68, 68, 0.2);
    color: #ff6b6b;
    border-color: #ff4444;
    text-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
}

/* Main Content */
.admin-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Breach Alert */
.breach-alert {
    background: linear-gradient(135deg, #4a0000 0%, #2d0000 100%);
    border: 2px solid #ff4444;
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: 0 0 30px rgba(255, 68, 68, 0.3);
    position: relative;
    overflow: hidden;
}

.breach-alert::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 68, 68, 0.1), transparent);
    animation: scan 3s linear infinite;
}

@keyframes scan {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.breach-alert h2 {
    color: #ff6b6b;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(255, 107, 107, 0.7);
    position: relative;
    z-index: 1;
}

.breach-alert p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.breach-details {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.breach-details span {
    background: rgba(255, 68, 68, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    border: 1px solid #ff4444;
}

/* Data Section */
.data-section {
    background: rgba(30, 30, 30, 0.9);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #444;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-header h2 {
    color: #ff6b6b;
    font-size: 1.5rem;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.data-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.stat {
    background: rgba(255, 68, 68, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    border: 1px solid #ff4444;
    font-size: 0.9rem;
}

/* Table Styles */
.table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #444;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(20, 20, 20, 0.9);
    font-size: 0.9rem;
}

.data-table th {
    background: linear-gradient(135deg, #3a0000 0%, #2d0000 100%);
    color: #ff6b6b;
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #ff4444;
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #333;
    vertical-align: top;
}

.data-row:hover {
    background: rgba(255, 68, 68, 0.1);
}

.data-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

/* Sensitive Data Highlighting */
.sensitive-data {
    background: linear-gradient(90deg, #ff4444, #ff6b6b);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
    animation: glow-text 2s ease-in-out infinite alternate;
}

@keyframes glow-text {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.3); }
}

.credit-card {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.user-name strong {
    color: #fff;
    display: block;
}

.user-name small,
.user-credit small {
    color: #aaa;
    display: block;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.user-email a {
    color: #6bb6ff;
    text-decoration: none;
}

.user-email a:hover {
    text-decoration: underline;
}

/* Action Buttons */
.user-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-btn {
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid #ff4444;
    color: #ff6b6b;
    padding: 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.action-btn:hover {
    background: rgba(255, 68, 68, 0.4);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}

/* Educational Section */
.educational-section {
    background: rgba(30, 30, 30, 0.9);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #444;
}

.educational-section h2 {
    color: #6bb6ff;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 10px rgba(107, 182, 255, 0.5);
}

.vulnerability-card {
    background: rgba(40, 40, 40, 0.8);
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid #6bb6ff;
}

.vulnerability-card h3 {
    color: #6bb6ff;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.vulnerability-section {
    margin-bottom: 1.5rem;
}

.vulnerability-section h4 {
    color: #fff;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.vulnerability-section p {
    color: #ccc;
    line-height: 1.6;
}

/* Footer */
.admin-footer {
    background: linear-gradient(135deg, #2c1810 0%, #1a1a1a 100%);
    border-top: 3px solid #ff4444;
    padding: 2rem 0;
    margin-top: 3rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.disclaimer {
    background: rgba(255, 68, 68, 0.1);
    border: 2px solid #ff4444;
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

.disclaimer h3 {
    color: #ff6b6b;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.disclaimer p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.return-btn,
.learn-btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.return-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.return-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.learn-btn {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.learn-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.modal-content {
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
    margin: 5% auto;
    padding: 0;
    border: 2px solid #6bb6ff;
    border-radius: 15px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: modal-appear 0.3s ease-out;
}

@keyframes modal-appear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    background: linear-gradient(135deg, #007bff, #0056b3);
    padding: 1.5rem 2rem;
    border-radius: 13px 13px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    color: white;
    margin: 0;
    font-size: 1.3rem;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.modal-body {
    padding: 2rem;
    color: #e0e0e0;
}

.resources-content h4 {
    color: #6bb6ff;
    margin: 1.5rem 0 1rem 0;
    font-size: 1.1rem;
}

.resources-content h4:first-child {
    margin-top: 0;
}

.resource-list {
    list-style: none;
    margin-bottom: 2rem;
}

.resource-list li {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.resource-list li::before {
    content: '🔗';
    position: absolute;
    left: 0;
    top: 0;
}

.resource-list a {
    color: #6bb6ff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.resource-list a:hover {
    color: #8cc8ff;
    text-decoration: underline;
}

.disclaimer-box {
    background: rgba(255, 193, 7, 0.1);
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.disclaimer-box p {
    color: #ffc107;
    margin: 0;
    font-weight: bold;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .compromised-title {
        font-size: 1.4rem;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .admin-nav ul {
        justify-content: center;
        gap: 1rem;
    }
    
    .admin-main {
        padding: 1rem;
    }
    
    .section-header {
        flex-direction: column;
        text-align: center;
    }
    
    .data-stats {
        justify-content: center;
    }
    
    .breach-details {
        flex-direction: column;
        gap: 1rem;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .return-btn,
    .learn-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .modal-content {
        margin: 10% auto;
        width: 95%;
    }
    
    .modal-body {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .data-table {
        font-size: 0.8rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.5rem 0.25rem;
    }
    
    .user-actions {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .action-btn {
        padding: 0.25rem;
        font-size: 0.9rem;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .sensitive-data {
        background: #ff0000;
        background-clip: initial;
        -webkit-background-clip: initial;
        -webkit-text-fill-color: initial;
        color: #ff0000;
    }
    
    .nav-link:hover,
    .nav-link.active {
        background: #ff0000;
        color: #ffffff;
    }
}

/* Focus styles for keyboard navigation */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #6bb6ff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    body.compromised::before,
    .security-warning,
    .action-buttons,
    .modal {
        display: none !important;
    }
    
    body.compromised {
        background: white !important;
        color: black !important;
    }
    
    .data-table th,
    .data-table td {
        border: 1px solid black !important;
    }
}