:root {
  --bg-color: #f8f9fa;
  --text-color: #212529;
  --card-bg: #ffffff;
  --border-color: #dee2e6;
  --navbar-bg: #343a40;
  --navbar-text: #ffffff;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e9ecef;
  --card-bg: #2d3748;
  --border-color: #4a5568;
  --navbar-bg: #1a202c;
  --navbar-text: #e9ecef;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar {
  background-color: var(--navbar-bg) !important;
}

.navbar-brand,
.navbar-nav .nav-link {
  color: var(--navbar-text) !important;
}

.form-control,
.form-select {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--card-bg) !important;
  border-color: #0d6efd !important;
  color: var(--text-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Placeholder text styling */
.form-control::placeholder {
  color: var(--text-color) !important;
  opacity: 0.6;
}

[data-theme="dark"] .form-control::placeholder {
  color: #adb5bd !important;
  opacity: 0.8;
}

/* Datalist option styling */
[data-theme="dark"] datalist option {
  background-color: var(--card-bg);
  color: var(--text-color);
}

.card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

.alert-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

[data-theme="dark"] .alert-danger {
  background-color: #2c1618;
  border-color: #842029;
  color: #ea868f;
}

.dark-mode-toggle {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--navbar-text);
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-brand {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  text-decoration: none !important;
}

.navbar-brand:hover {
  color: var(--navbar-text) !important;
  text-decoration: none !important;
}

h1 {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text-color);
  margin-bottom: 3rem;
}

.search-subtitle {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--text-color);
  margin-bottom: 2rem;
}

/* Ensure consistent centering for all main content */
.container {
  max-width: 1200px;
}

/* Center the navbar brand properly */
.navbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Dark mode fixes for results page */
.text-muted {
  color: var(--text-color) !important;
  opacity: 0.7;
}

[data-theme="dark"] .text-muted {
  color: #adb5bd !important;
}

.text-primary {
  color: #0d6efd !important;
}

[data-theme="dark"] .text-primary {
  color: #6ea8fe !important;
}

.text-success {
  color: #198754 !important;
}

[data-theme="dark"] .text-success {
  color: #75b798 !important;
}

/* Badge styling for dark mode */
.badge {
  color: #fff !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

[data-theme="dark"] .bg-secondary {
  background-color: #495057 !important;
}

.bg-info {
  background-color: #0dcaf0 !important;
}

[data-theme="dark"] .bg-info {
  background-color: #087990 !important;
}

/* Flight segment styling */
.flight-segment {
  background-color: var(--card-bg);
  border-color: var(--border-color) !important;
}

/* Alert styling for dark mode */
.alert-warning {
  background-color: #fff3cd;
  border-color: #ffecb5;
  color: #664d03;
}

[data-theme="dark"] .alert-warning {
  background-color: #332701;
  border-color: #664d03;
  color: #ffda6a;
}

/* Alert info styling for dark mode */
.alert-info {
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}

[data-theme="dark"] .alert-info {
  background-color: #0a2e33;
  border-color: #0c5460;
  color: #9eeaf9;
}

/* Form labels */
.form-label {
  color: var(--text-color) !important;
}

/* Card headers */
.card-header {
  background-color: var(--card-bg);
  border-bottom-color: var(--border-color);
  color: var(--text-color);
}

/* Ensure all headings use theme colors */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color) !important;
}

/* Desktop-specific styling */
@media (min-width: 769px) {

  /* Smaller search button on desktop */
  .btn-lg {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem !important;
  }
}

/* ===== MOBILE-ONLY IMPROVEMENTS ===== */
/* Desktop layout remains completely unchanged */

@media (max-width: 768px) {

  /* Mobile navbar fixes */
  .navbar-brand {
    font-size: 1.4rem !important;
  }

  .navbar-nav {
    flex-direction: row !important;
    gap: 0.5rem;
  }

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

  /* Reduce main content top margin on mobile */
  main.container {
    margin-top: 2.5rem !important;
  }

  /* Prevent iOS zoom when focusing inputs */
  .form-control,
  .form-select {
    font-size: 16px !important;
    min-height: 44px;
    /* Better touch targets */
  }

  /* Mobile date input improvements */
  input[type="date"] {
    font-size: 16px !important;
    min-height: 44px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.375rem;
    padding: 0.75rem;
    color: var(--text-color) !important;
  }

  /* iOS Safari date input styling */
  input[type="date"]::-webkit-datetime-edit {
    color: var(--text-color);
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: var(--text-color);
    border-radius: 3px;
    cursor: pointer;
  }

  /* Better button touch targets */
  .btn {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
  }

  /* Stack form fields vertically on mobile */
  .col-md-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem;
  }

  /* Keep passengers and stops side by side on mobile */
  .col-md-1 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 1rem;
  }

  /* Better spacing for search button */
  .btn-lg {
    font-size: 1.1rem;
    padding: 0.875rem 2rem;
  }

  /* Reduce heading spacing on mobile */
  h1 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  .search-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Add space above disclaimer on mobile */
  .coverage-info {
    margin-top: 1rem !important;
  }
  
  /* Add space between search button and AI form on mobile */
  .card.mt-4 {
    margin-top: 2.5rem !important;
  }

  /* Compact alerts on mobile */
  .alert {
    font-size: 0.875rem;
    padding: 0.75rem;
  }

  /* Better card spacing on mobile */
  .card {
    margin-bottom: 1rem;
  }

  /* Mobile coverage accordion styling */
  .coverage-info .accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: #d1ecf1;
  }

  .coverage-info .accordion-button {
    background-color: #d1ecf1;
    color: #0c5460;
    border: none;
  }

  .coverage-info .accordion-button:not(.collapsed) {
    background-color: #d1ecf1;
    color: #0c5460;
    box-shadow: none;
  }

  .coverage-info .accordion-body {
    background-color: #d1ecf1;
    color: #0c5460;
  }

  /* Dark mode accordion styling */
  [data-theme="dark"] .coverage-info .accordion-item {
    background-color: #0a2e33;
    border-color: #0c5460;
  }

  [data-theme="dark"] .coverage-info .accordion-button {
    background-color: #0a2e33;
    color: #9eeaf9;
  }

  [data-theme="dark"] .coverage-info .accordion-button:not(.collapsed) {
    background-color: #0a2e33;
    color: #9eeaf9;
  }

  [data-theme="dark"] .coverage-info .accordion-body {
    background-color: #0a2e33;
    color: #9eeaf9;
  }

  /* Optimize flight results for mobile */
  .flight-segment {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  .card-header h5 {
    font-size: 1.1rem;
  }

  .badge {
    font-size: 0.75rem;
    margin: 0.125rem;
  }
}

@media (max-width: 576px) {

  /* Extra small screens - even more compact */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Compact navbar for very small screens */
  .navbar-brand {
    font-size: 1.2rem !important;
  }

  /* Keep brand text visible but smaller on mobile */
  .navbar-brand span {
    font-size: 1.1rem !important;
  }

  /* Stack navbar items vertically on collapse - aligned to right */
  .navbar-collapse .navbar-nav {
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .navbar-nav .nav-item {
    width: auto;
  }

  /* Make menu items same size as hamburger button */
  .navbar-nav select,
  .navbar-nav .dark-mode-toggle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.375rem !important;
  }

  /* Currency selector specific styling */
  .navbar-nav select {
    text-align: center;
    appearance: none;
    background-image: none;
    padding: 0.5rem !important;
  }
  
  /* Show number input spinners on mobile */
  input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
    opacity: 1 !important;
    height: 44px !important;
    width: 20px !important;
  }
  
  /* Firefox number input styling */
  input[type="number"] {
    -moz-appearance: number-input !important;
  }

  /* Smaller headings on very small screens */
  h1 {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem;
  }

  .search-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1.5rem;
  }
}

/* Chat Interface Styles */
.chat-messages {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  padding: 1rem;
  background-color: var(--bg-color);
}

.chat-message {
  margin-bottom: 1rem;
}

.message-bubble {
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  max-width: 85%;
  word-wrap: break-word;
}

.user-message {
  background-color: #0d6efd;
  color: white;
  margin-left: auto;
  text-align: right;
}

.assistant-message {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  margin-right: auto;
}

[data-theme="dark"] .user-message {
  background-color: #0d6efd;
}

[data-theme="dark"] .assistant-message {
  background-color: #2d3748;
  border-color: #4a5568;
}

.chat-messages:empty::before {
  content: "👋 Hi! I'm your travel planning assistant. Ask me anything about destinations, wide-body flights, or travel tips!";
  color: var(--text-color);
  opacity: 0.6;
  font-style: italic;
  display: block;
  text-align: center;
  padding: 2rem;
}

/* Chat suggestion buttons */
.chat-suggestion {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  margin: 0.125rem !important;
}

/* Mobile chat optimizations */
@media (max-width: 768px) {
  .chat-messages {
    max-height: 300px;
  }
  
  .message-bubble {
    max-width: 90%;
    font-size: 0.9rem;
  }
  
  .chat-suggestion {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.4rem !important;
  }
}