/* AI Itinerary Modern Theme CSS - main.min.css */
/* Modern, smooth, and responsive design for all components */

/* CSS Custom Properties (Variables) */
:root {
  /* Color Palette */
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --primary-color: #667eea;
  --primary-dark: #5a67d8;
  --secondary-color: #764ba2;
  --accent-color: #17a2b8;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --info-color: #17a2b8;
  
  /* Neutral Colors */
  --white: #ffffff;
  --light-gray: #f8f9fa;
  --medium-gray: #e9ecef;
  --dark-gray: #6c757d;
  --text-primary: #2c3e50;
  --text-secondary: #6c757d;
  --text-muted: #95a5a6;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Typography */
  --font-family-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-secondary: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Body and container styles */
body {
  font-family: var(--font-family-primary);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  font-weight: var(--font-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container styles */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

/* Modern header styles */
.header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-xxl) var(--spacing-xl);
  background: var(--primary-gradient);
  color: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal);
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  pointer-events: none;
}

.header:hover {
  transform: translateY(-2px);
}

/* Header typography */
.header h1 {
  font-family: var(--font-family-secondary);
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  letter-spacing: -0.025em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header p {
  opacity: 0.9;
  font-size: clamp(1rem, 3vw, 1.1rem);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
}

/* Auth header variant */
.auth-header {
  background: var(--primary-gradient);
  max-width: 450px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Modern glassmorphism effects */
.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

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

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

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* Modern loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* Enhanced buttons with modern effects */
.btn-modern {
  position: relative;
  background: var(--primary-gradient);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-xl);
  color: var(--white);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  text-transform: none;
  letter-spacing: 0.025em;
}

.btn-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left var(--transition-slow);
}

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

.btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

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

/* Modern card styles */
.card-modern {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  border: 1px solid rgba(0, 0, 0, 0.05);
  animation: fadeInUp 0.6s ease-out;
}

.card-modern:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Enhanced form styles */
.form-modern {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--spacing-xl);
  animation: fadeInUp 0.6s ease-out;
}

.form-group-modern {
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.form-control-modern {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--medium-gray);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-normal);
  background: var(--white);
  outline: none;
}

.form-control-modern:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

.form-control-modern::placeholder {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}

/* Modern label styles */
.label-modern {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-size: 0.9rem;
  letter-spacing: 0.025em;
}

/* Enhanced notification styles */
.notification-modern {
  position: fixed;
  top: var(--spacing-xl);
  right: var(--spacing-xl);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-xl);
  border-left: 4px solid var(--primary-color);
  z-index: 1000;
  max-width: 400px;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  animation: slideInRight 0.4s ease-out forwards;
}

.notification-modern.success {
  border-left-color: var(--success-color);
}

.notification-modern.error {
  border-left-color: var(--danger-color);
}

.notification-modern.warning {
  border-left-color: var(--warning-color);
}

/* Modern grid layouts */
.grid-modern {
  display: grid;
  gap: var(--spacing-xl);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-modern-2 {
  display: grid;
  gap: var(--spacing-xl);
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* Enhanced typography */
.text-gradient {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold);
}

/* Modern progress indicators */
.progress-modern {
  height: 8px;
  background: var(--medium-gray);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-bar-modern {
  height: 100%;
  background: var(--primary-gradient);
  border-radius: 4px;
  transition: width var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.progress-bar-modern::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 50px 50px;
  animation: shimmer 1s linear infinite;
}

/* Enhanced accessibility */
.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;
}

/* Focus indicators */
.focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Modern dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --white: #1a1a1a;
    --light-gray: #2d2d2d;
    --medium-gray: #3d3d3d;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
  }
  
  body {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  }
  
  .card-modern, .form-modern {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Modern responsive utilities */
@media (max-width: 768px) {
  .container {
    padding: var(--spacing-sm);
  }
  
  .header {
    padding: var(--spacing-xl) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }
  
  .grid-modern {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .grid-modern-2 {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .notification-modern {
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    left: var(--spacing-lg);
    max-width: none;
  }
}

.auth-header h1{font-size:2rem;margin-bottom:0.5rem}

/* Admin header variant */
.admin-header{background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%)}

.admin-header h1{font-size:2.5rem}

.admin-badge{position:absolute;top:10px;right:20px;background:rgba(255,255,255,0.2);padding:0.5rem 1rem;border-radius:20px;font-size:0.9rem}

/* Navigation styles */
.navigation{background:white;padding:1rem;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 2px 4px rgba(0,0,0,0.1)}

.nav-links{display:flex;gap:1rem;align-items:center}

.nav-link{text-decoration:none;color:#667eea;font-weight:500;transition:color 0.3s ease}

.nav-link:hover{color:#5a67d8}

.search-box{padding:0.5rem;border:1px solid #ddd;border-radius:4px;margin-left:auto;width:200px}

/* Modern card styles */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-xl);
  border: 1px solid var(--medium-gray);
  border-left: 4px solid var(--primary-color);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--primary-color);
  transition: width var(--transition-normal);
}

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

.card:hover::before {
  width: 8px;
}

.card.danger {
  border-left-color: var(--danger-color);
}

.card.danger::before {
  background: var(--danger-color);
}

.card.warning {
  border-left-color: var(--warning-color);
}

.card.warning::before {
  background: var(--warning-color);
}

.card.success {
  border-left-color: var(--success-color);
}

.card.success::before {
  background: var(--success-color);
}

.form-card{background:white;border-radius:8px;padding:2rem;box-shadow:0 2px 10px rgba(0,0,0,0.1);margin-bottom:2rem}

/* Form styles */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}

.form-group{display:flex;flex-direction:column;margin-bottom:1.5rem}

.form-group.full-width{grid-column:1/-1}

.form-group label{font-weight:600;margin-bottom:0.5rem;color:#555;display:block}

.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1px solid #ddd;border-radius:4px;font-size:14px;transition:border-color 0.3s ease}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.1)}

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

.date-inputs{display:flex;gap:0.5rem}

.date-inputs input{flex:1}

.checkbox-group{display:flex;align-items:center;gap:0.5rem;margin-top:0.5rem}

.checkbox-group input[type="checkbox"]{width:auto;margin:0}

/* Modern button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--primary-color);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  transition: all var(--transition-normal);
  margin: var(--spacing-xs);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s;
}

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

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

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

.btn.danger {
  background: var(--danger-color);
}

.btn.danger:hover {
  background: #c0392b;
}

.btn.success {
  background: var(--success-color);
}

.btn.success:hover {
  background: #229954;
}

.btn.warning {
  background: var(--warning-color);
  color: var(--text-primary);
}

.btn.warning:hover {
  background: #e67e22;
  color: var(--white);
}

/* Modern submit button */
.submit-btn {
  background: var(--primary-gradient);
  color: var(--white);
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  width: 100%;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s;
}

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

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

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

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

/* Responsive design and accessibility improvements */
@media (max-width: 768px) {
  .container {
    padding: var(--spacing-sm);
  }
  
  .header {
    padding: var(--spacing-xl) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }
  
  .header h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  
  .card {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }
  
  .btn {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .header {
    padding: var(--spacing-lg) var(--spacing-sm);
  }
  
  .card {
    padding: var(--spacing-md);
  }
}

/* Focus styles for accessibility */
*:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Reduced motion for accessibility */
@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;
  }
  
  .header:hover,
  .card:hover,
  .btn:hover {
    transform: none;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #e2e8f0;
    --text-secondary: #a0aec0;
    --text-muted: #718096;
    --white: #1a202c;
    --light-gray: #2d3748;
    --medium-gray: #4a5568;
  }
  
  body {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  }
}

/* Print styles */
@media print {
  .header,
  .btn,
  .navigation {
    display: none;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #000;
    page-break-inside: avoid;
  }
}

.new-trip-btn,.print-btn,.download-btn,.interactive-btn{color:white;text-decoration:none;padding:8px 16px;border-radius:4px;font-weight:600;display:inline-block;margin-right:1rem;margin-bottom:1rem;border:none;cursor:pointer;font-size:14px}

.new-trip-btn{background:#28a745}

.new-trip-btn:hover{background:#218838}

.print-btn{background:#6c757d}

.print-btn:hover{background:#5a6268}

.download-btn{background:#007bff}

.download-btn:hover{background:#0056b3}

/* Table styles */
.data-table{width:100%;border-collapse:collapse;margin-top:1rem}

.data-table th,.data-table td{padding:0.75rem;text-align:left;border-bottom:1px solid #ecf0f1}

.data-table th{background:#f8f9fa;font-weight:600}

.data-table tr:hover{background:#f8f9fa}

/* Trip planning specific styles */
.trip-header{background:white;border-radius:8px;padding:2rem;margin-bottom:2rem;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,0.1)}

.trip-header h2{color:#667eea;font-size:2rem;margin-bottom:0.5rem}

.day-card{background:white;border-radius:8px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 2px 10px rgba(0,0,0,0.1);scroll-margin-top:2rem}

.day-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:1rem;margin:-1.5rem -1.5rem 1.5rem -1.5rem;border-radius:8px 8px 0 0}

.day-header h3{font-size:1.4rem;margin-bottom:0.25rem}

.weather-info{background:rgba(255,255,255,0.1);padding:0.5rem;border-radius:4px;margin-top:0.5rem;font-size:0.9rem}

.activity-card{background:#f8f9fa;border-radius:6px;padding:1rem;margin-bottom:1rem;border-left:4px solid #667eea}

.activity-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem}

.activity-time{background:#667eea;color:white;padding:4px 8px;border-radius:4px;font-size:0.8rem;font-weight:600}

.activity-name{font-size:1.2rem;font-weight:700;color:#333;margin:0.5rem 0;scroll-margin-top:80px}.activity-name:target{background:linear-gradient(90deg,rgba(102,126,234,0.2),rgba(118,75,162,0.2));padding:0.5rem;border-radius:6px;animation:highlightPulse 2s ease-in-out}@keyframes highlightPulse{0%,100%{background:linear-gradient(90deg,rgba(102,126,234,0.2),rgba(118,75,162,0.2))}50%{background:linear-gradient(90deg,rgba(102,126,234,0.4),rgba(118,75,162,0.4))}}

.activity-description{color:#666;margin-bottom:1rem}

.activity-image{width:100%;max-width:300px;height:200px;object-fit:cover;border-radius:6px;margin:1rem 0}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin:1rem 0}

.info-item{background:white;padding:0.75rem;border-radius:4px;border-left:3px solid #764ba2}

.info-item strong{color:#667eea;display:block;margin-bottom:0.25rem;font-size:0.9rem}

.info-item.full-width{grid-column:1/-1}

/* Cost tracking styles */
.cost-receipt{background:white;border-radius:8px;padding:1.5rem;box-shadow:0 4px 15px rgba(0,0,0,0.1);border:2px dashed #e0e0e0;position:sticky;top:2rem;max-height:calc(100vh - 4rem);overflow-y:auto}

.receipt-header{text-align:center;border-bottom:2px solid #333;padding-bottom:1rem;margin-bottom:1rem}

.receipt-title{font-size:1.4rem;font-weight:bold;margin-bottom:0.5rem;color:#333}

.receipt-subtitle{font-size:0.9rem;color:#666;font-style:italic}

.daily-cost-item{display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px dotted #ccc;font-size:0.9rem}

.daily-cost-item:last-child{border-bottom:none}

.daily-cost-item .date{font-weight:600;color:#667eea}

.daily-cost-item .amount{font-weight:600;color:#333}

.cost-category{margin:1rem 0}

.category-header{font-weight:bold;color:#555;font-size:0.8rem;text-transform:uppercase;margin-bottom:0.5rem;letter-spacing:0.5px}

.category-total{display:flex;justify-content:space-between;padding:0.3rem 0;font-size:0.9rem}

.category-total.major{font-weight:bold;font-size:1rem;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin:0.5rem 0;padding:0.5rem 0}

.grand-total{margin-top:1rem;padding-top:1rem;border-top:3px double #333;text-align:center}

.grand-total-amount{font-size:1.8rem;font-weight:bold;color:#28a745;margin:0.5rem 0}

.trip-stats{margin-top:1rem;padding-top:1rem;border-top:1px dotted #ccc;font-size:0.8rem;color:#666;text-align:center}

.activity-cost-badge{display:inline-block;background:#e8f5e8;color:#28a745;padding:2px 6px;border-radius:12px;font-size:0.75rem;font-weight:600;margin-left:0.5rem}

.day-cost-summary{background:#f8f9fa;border-radius:6px;padding:0.75rem;margin:1rem 0;border-left:4px solid #28a745}

.day-cost-summary h4{color:#28a745;font-size:0.9rem;margin-bottom:0.5rem}

.cost-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;font-size:0.8rem}

.cost-item{display:flex;justify-content:space-between}

.cost-item-label{color:#666}

.cost-item-value{font-weight:600;color:#333}

/* Table of Contents styles */
.toc-container{background:white;border-radius:8px;padding:1.5rem;box-shadow:0 2px 10px rgba(0,0,0,0.1);margin-bottom:2rem;position:sticky;top:1rem;z-index:100;border-left:4px solid #667eea}

.toc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid #f0f0f0}

.toc-title{font-size:1.2rem;font-weight:bold;color:#667eea;display:flex;align-items:center;gap:0.5rem}

.toc-toggle{background:none;border:none;color:#667eea;font-size:1.2rem;cursor:pointer;padding:0.25rem;border-radius:4px;transition:background 0.2s}

.toc-toggle:hover{background:#f0f8ff}

.toc-content{display:block;transition:all 0.3s ease}

.toc-content.collapsed{display:none}

.toc-section{margin-bottom:1rem}

.toc-section-title{font-weight:600;color:#555;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.5rem}

.toc-list{list-style:none}

.toc-item{margin-bottom:0.25rem}

.toc-link{color:#667eea;text-decoration:none;padding:0.25rem 0.5rem;border-radius:4px;display:block;transition:all 0.2s;font-size:0.9rem}

.toc-link:hover{background:#f0f8ff;transform:translateX(4px)}

.toc-link.active{background:#667eea;color:white}

.toc-day-link{font-weight:600}

.toc-progress{height:3px;background:#e0e0e0;border-radius:2px;margin-top:1rem;overflow:hidden}

.toc-progress-bar{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);width:0%;transition:width 0.3s ease;border-radius:2px}

/* Layout styles */
.results-layout{display:grid;grid-template-columns:300px 1fr 350px;gap:2rem;align-items:start}

.trip-content{min-width:0}

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

.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}

.card-title{font-size:1.3rem;font-weight:600;margin-bottom:0.5rem}

.stat-number{font-size:2rem;font-weight:bold;color:#2c3e50}

.stat-label{color:#7f8c8d;font-size:0.9rem}

/* Status indicators */
.status-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:0.5rem}

.status-online{background:#27ae60}

.status-offline{background:#e74c3c}

.status-warning{background:#f39c12}

/* Modal styles */
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5)}

.modal-content{background:white;margin:5% auto;padding:2rem;border-radius:8px;width:90%;max-width:600px;max-height:80vh;overflow-y:auto}

.close{color:#aaa;float:right;font-size:28px;font-weight:bold;cursor:pointer}

.close:hover{color:#000}

/* Alert styles */
.alert{padding:1rem;border-radius:4px;margin:1rem 0}

.alert.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}

.alert.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}

.alert.warning{background:#fff3cd;color:#856404;border:1px solid #ffeaa7}

.error{background:#fee;color:#c33;padding:1rem;border-radius:4px;margin-bottom:1rem;border-left:4px solid #c33;box-shadow:0 2px 4px rgba(0,0,0,0.05)}

.success{background:#f0fff4;color:#22543d;padding:1rem;border-radius:4px;margin-bottom:1rem;border-left:4px solid #38a169;box-shadow:0 2px 4px rgba(0,0,0,0.05)}

/* Loading and spinner styles */
.loading{display:none;text-align:center;padding:2rem;background:white;border-radius:8px;margin-bottom:2rem}

.loading.show{display:block}

.spinner{width:30px;height:30px;border:3px solid #f3f3f3;border-top:3px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}

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

/* Password strength indicator */
.password-strength{height:4px;background:#eee;border-radius:2px;margin-top:0.5rem;overflow:hidden}

.password-strength-bar{height:100%;width:0%;transition:all 0.3s ease;border-radius:2px}

.strength-weak{background:#e53e3e}

.strength-medium{background:#ed8936}

.strength-strong{background:#38a169}

/* Form validation styles */
.form-group input:invalid:not(:focus):not(:placeholder-shown){border-color:#e53e3e}

.form-group input:valid:not(:focus):not(:placeholder-shown){border-color:#38a169}

/* Toggle form styles */
.toggle-form{text-align:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #eee}

.toggle-form a{color:#667eea;text-decoration:none;font-weight:500;transition:color 0.3s ease}

.toggle-form a:hover{color:#5a67d8;text-decoration:underline}

.hidden{display:none}

/* Form switching animation */
.form-container{animation:slideIn 0.3s ease-out;transition:all 0.3s ease}

.form-container.loading{opacity:0.7;pointer-events:none}

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

/* Cultural notes and special sections */
.must-visit{color:#dc3545;font-weight:bold;margin-bottom:0.5rem}

.cultural-note{background:#fff3cd;padding:1rem;border-radius:4px;margin-top:1rem;border-left:4px solid #ffc107}

.cultural-note strong{color:#856404}

.nearby-section{background:#f0f8ff;padding:1rem;border-radius:4px;margin-top:1rem;border-left:4px solid #4169e1}

.nearby-section strong{color:#4169e1;display:block;margin-bottom:0.5rem}

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

.nearby-item{background:white;padding:4px 8px;border-radius:12px;font-size:0.8rem;border:1px solid #4169e1;color:#4169e1}

.citations{background:#f8f9fa;padding:0.75rem;border-radius:4px;margin-top:1rem;font-size:0.8rem;border-left:3px solid #6c757d}

.citations strong{color:#6c757d;display:block;margin-bottom:0.5rem}

.citations a{color:#667eea;text-decoration:none;display:block;margin-bottom:0.25rem}

.citations a:hover{text-decoration:underline}

/* Log entry styles */
.log-entry{background:#f8f9fa;border-left:3px solid #3498db;padding:1rem;margin:0.5rem 0;border-radius:4px;font-family:monospace;font-size:0.9rem}

.log-entry.error{border-left-color:#e74c3c}

.log-entry.warning{border-left-color:#f39c12}

/* Smooth scrolling */
html{scroll-behavior:smooth}

/* Responsive design */
@media (max-width:1024px){
.results-layout{grid-template-columns:1fr 300px;gap:1rem}
.toc-container{position:static;order:-1}
}

@media (max-width:768px){
.container{padding:0.5rem}
.header h1{font-size:1.5rem}
.form-card,.day-card{padding:1rem}
.form-grid{grid-template-columns:1fr}
.info-grid{grid-template-columns:1fr}
.results-layout{grid-template-columns:1fr;gap:1rem}
.cost-receipt,.toc-container{position:static;max-height:none;order:-1}
.cost-breakdown{grid-template-columns:1fr}
.dashboard-grid{grid-template-columns:1fr}
.nav-links{flex-direction:column;gap:0.5rem}
.search-box{margin-left:0;width:100%}
}

/* Print styles */
@media print{
*{background:white!important;color:black!important;box-shadow:none!important;border-radius:0!important}
body{font-family:'Times New Roman',serif!important;font-size:10px!important;line-height:1.2!important;margin:0!important;padding:0!important;background:white!important}
.container{max-width:none!important;margin:0!important;padding:5mm!important}
.cost-receipt{page-break-before:always;position:static;box-shadow:none;border:2px solid black;margin-bottom:5mm}
.action-buttons,.form-card,.loading,.submit-btn,.toc-container,.navigation,.modal{display:none!important}
.activity-image{display:none!important}
.results-layout{grid-template-columns:1fr!important}
.trip-header{text-align:center!important;border:2px solid black!important;padding:3mm!important;margin-bottom:3mm!important;background:white!important;page-break-inside:avoid!important}
.day-card{border:1px solid black!important;margin-bottom:3mm!important;padding:0!important;page-break-inside:avoid!important;break-inside:avoid!important}
.day-header{background:black!important;color:white!important;padding:2mm!important;margin:0!important;font-weight:bold!important;font-size:11px!important;text-transform:uppercase!important}
}

/* Accessibility improvements */
.btn:focus,.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:2px solid #667eea;outline-offset:2px}

.toc-link:focus{outline:2px solid #667eea;outline-offset:2px}

/* Utility classes */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.mb-1{margin-bottom:0.5rem}
.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem}
.mt-1{margin-top:0.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.p-1{padding:0.5rem}
.p-2{padding:1rem}
.p-3{padding:1.5rem}
.font-weight-bold{font-weight:bold}
.font-weight-normal{font-weight:normal}
.text-primary{color:#667eea}
.text-secondary{color:#6c757d}
.text-success{color:#28a745}
.text-danger{color:#dc3545}
.text-warning{color:#ffc107}
.text-info{color:#17a2b8}
.bg-primary{background-color:#667eea}
.bg-secondary{background-color:#6c757d}
.bg-success{background-color:#28a745}
.bg-danger{background-color:#dc3545}
.bg-warning{background-color:#ffc107}
.bg-info{background-color:#17a2b8}
.bg-light{background-color:#f8f9fa}
.bg-dark{background-color:#343a40}
.border{border:1px solid #dee2e6}
.border-0{border:0}
.border-top{border-top:1px solid #dee2e6}
.border-bottom{border-bottom:1px solid #dee2e6}
.border-left{border-left:1px solid #dee2e6}
.border-right{border-right:1px solid #dee2e6}
.rounded{border-radius:0.25rem}
.rounded-0{border-radius:0}
.rounded-circle{border-radius:50%}
.d-none{display:none}
.d-block{display:block}
.d-inline{display:inline}
.d-inline-block{display:inline-block}
.d-flex{display:flex}
.d-grid{display:grid}
.justify-content-start{justify-content:flex-start}
.justify-content-end{justify-content:flex-end}
.justify-content-center{justify-content:center}
.justify-content-between{justify-content:space-between}
.justify-content-around{justify-content:space-around}
.align-items-start{align-items:flex-start}
.align-items-end{align-items:flex-end}
.align-items-center{align-items:center}
.align-items-baseline{align-items:baseline}
.align-items-stretch{align-items:stretch}
.flex-row{flex-direction:row}
.flex-column{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-wrap:nowrap}
.position-static{position:static}
.position-relative{position:relative}
.position-absolute{position:absolute}
.position-fixed{position:fixed}
.position-sticky{position:sticky}
.w-25{width:25%}
.w-50{width:50%}
.w-75{width:75%}
.w-100{width:100%}
.h-25{height:25%}
.h-50{height:50%}
.h-75{height:75%}
.h-100{height:100%}
.shadow-sm{box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.075)}
.shadow{box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15)}
.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,0.175)}
.shadow-none{box-shadow:none}