/* ===========================
   1. Root & Base Styles
=========================== */
:root {
    --brand-neon: #a3ff33;
    --brand-avocado: #4ade80;
    --brand-gradient: linear-gradient(135deg, var(--brand-neon) 0%, var(--brand-avocado) 100%);
    --header-bg: #15803d;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --bg-soft: #f7fee7; /* Soft lime background tint */
    --accent-mint: #f0fdf4; /* Very light green for passenger cards */
  
  
  /* Modern Gradient for Primary Elements */
  --brand-gradient: linear-gradient(135deg, var(--brand-neon) 0%, var(--brand-avocado) 100%);
  
  /* Contrast & Layout */
  --header-bg: #15803d;       /* Keeping this Deep Forest for logo legibility */
  --border: #e2e8f0;          /* Slightly softer slate border */
  --accent: #f7fee7;          /* Ultra-soft lime tint for section backgrounds */
  
  /* Base Colors */
  --white: #ffffff;
  --text-dark: #0f172a;       /* Deeper slate for high-contrast text */
  --text-muted: #64748b;
  
  /* Shadow for Neon Glow */
  --neon-glow: 0 4px 15px rgba(163, 255, 51, 0.4);
}

body {
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  /* Apply the soft lime tint behind everything */
  background-color: var(--bg-soft); 
  margin: 0;
  color: var(--text-dark);
}

.hidden { display: none; }

/* ===========================
   2. Header & Navigation
=========================== */
.site-header {
  background: var(--header-bg);
  color: var(--white);
  /* Increased padding to accommodate larger logo */
  padding: 16px 32px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Enhanced Logo Styling */
.site-header .logo {
  /* Make the logo bigger and more prominent */
  height: 55px; 
  width: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s ease;
}

.site-header .logo:hover {
  transform: scale(1.05);
}

/* Branding Text */
.site-header .brand-text {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
}

.site-header .nav {
  display: flex;
  gap: 24px;
}

.site-header .nav a {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
  opacity: 0.9;
}

.site-header .nav a:hover { 
  color: #bef264; /* Lime-green hover effect */
  opacity: 1;
}

.menu-toggle {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .site-header {
    padding: 12px 20px;
  }
  
  .site-header .logo {
    height: 40px; /* Slightly smaller on mobile */
  }

  .site-header .nav {
    display: none;
    flex-direction: column;
    background: var(--header-bg);
    position: absolute;
    top: 100%; /* Sits perfectly below header */
    right: 0;
    width: 200px;
    padding: 16px;
    border-radius: 0 0 0 12px;
    animation: slideIn 0.3s ease forwards;
    box-shadow: -4px 4px 10px rgba(0,0,0,0.1);
  }
  
  .site-header .nav.active { display: flex; }
  .menu-toggle { display: block; }
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
/* ===========================
   3. Hero & Searchbar (Compact & Modern)
=========================== */
.hero {
  background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
              url("images/coastal-highway.webp") center/cover no-repeat;
  padding: 80px 20px;
  color: var(--white);
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.hero-overlay {
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.08); 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-overlay h1 {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.hero-overlay p {
  font-size: 1rem;
  opacity: 0.85;
  margin-bottom: 24px;
}

.searchbar__row {
  display: grid;
  /* Adjusting columns so selects/inputs are equal and buttons are tight */
  grid-template-columns: 1fr 1fr 1fr auto auto;
  gap: 12px;
  align-items: end;
  background: var(--white);
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.field { text-align: left; }

.field label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  display: block;
  margin-bottom: 4px;
}

/* Updated to include both input and the new select dropdowns */
.field input,
.field select {
  width: 100%;
  height: 42px; /* Fixed height for consistency */
  padding: 0 12px;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  color: #1e293b;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

/* Specific styling for the dropdown arrow */
.field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 30px;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: #22c55e;
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}


/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .searchbar__row {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  
  .trip-card {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .trip-actions {
    width: 100%;
    justify-content: center;
    gap: 15px;
  }
}

/* ===========================
   Hero Search Button (Neon Avocado)
=========================== */
#searchBtn {
  /* Gradient: Neon Lime (#a3ff33) to deep Avocado (#4ade80) */
  background: linear-gradient(135deg, #a3ff33 0%, #4ade80 100%);
  color: #ffffff;
  
  /* Layout & Typography */
  height: 44px; /* Slightly increased for better modern proportion */
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px; /* Slightly larger for the main CTA */
  border: none;
  cursor: pointer;
  
  /* Modern Effects */
  box-shadow: 0 4px 12px rgba(163, 255, 51, 0.3);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  /* Centering Logic */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#searchBtn:hover {
  /* 1. Lift: Slightly more pronounced than -1px for better feedback */
  transform: translateY(-3px);
  
  /* 2. Neon Glow: Increased spread and opacity to match the screenshot vibe */
  box-shadow: 0 8px 25px rgba(163, 255, 51, 0.5);
  
  /* 3. Vibrancy: Brightens the neon lime without changing the gradient code */
  filter: brightness(1.1);
}

#searchBtn:active {
  /* 4. Click Feedback: Button "pushes" down when pressed */
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(163, 255, 51, 0.4);
  transition: all 0.1s ease;
}

#resetBtn {
  height: 40px;
  padding: 0 16px;
  background: #edf2f7;
  color: #718096;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}


/* ===========================
   4. Popular Destination
=========================== */

/* Desktop layout improvements */
.popular-destinations {
  max-width: 1200px;
  margin: 60px auto;
  padding: 20px 40px;
  text-align: center;
  margin-top: 10px;
}

.popular-destinations h2 {
  font-size: 28px;
  font-weight: 800;
  color: #15803d;
  margin-bottom: 30px;
  border-bottom: 3px solid #a3ff33;
  display: inline-block;
  padding-bottom: 8px;
}

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  justify-items: center;
}

.destination-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 260px;
  padding: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.destination-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  border-color: #4ade80;
}

.destination-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 14px;
}

.destination-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
  color: #0f172a;
}

.destination-card .btn {
  width: 100%;
  font-size: 15px;
  padding: 10px 0;
  background-color: #15803d;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.destination-card .btn:hover {
  background-color: #16a34a;
}
@media (max-width: 600px) {
  .popular-destinations {
    margin-top: 10px;   /* reduce gap above */
    padding: 10px;      /* lighter padding */
  }

  .popular-destinations h2 {
    font-size: 20px;    /* smaller heading */
    margin-bottom: 15px;
  }

  .destinations-grid {
    flex-direction: column;  /* stack cards vertically */
    gap: 15px;               /* tighter spacing */
    align-items: center;
  }

  .destination-card {
    width: 100%;             /* full width on mobile */
    max-width: 340px;        /* prevent stretching too wide */
    padding: 12px;
  }

  .destination-card img {
    height: 140px;           /* slightly taller for mobile */
  }

  .destination-card h3 {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .destination-card .btn {
    font-size: 14px;
    padding: 8px 0;
  }
}


/* ===========================
   5. Mobile Adjustments (Slimmed Down)
=========================== */
@media (max-width: 768px) {
  /* 1. Header & Logo Scale */
  .site-header {
    padding: 8px 16px;
    height: 54px; /* Reduced header height */
  }

  .site-header .logo {
    height: 30px; 
  }

  .site-header .brand-text {
    font-size: 15px; 
  }

  /* 2. Hero Typography - Scaled for better fit */
  .hero {
    background-position: center top;   /* Show more sky/road */
    padding: 30px 12px;                /* Reduce padding */
    text-align: center;                /* Center text for mobile */
  }


  .hero-overlay {
    padding: 16px 12px; /* Tighter container */
    border-radius: 12px;
  }

  .hero-overlay h1 {
    font-size: 1.4rem; 
    margin-bottom: 4px;
  }

  .hero-overlay p {
    font-size: 0.85rem;
    margin-bottom: 12px;
  }

  /* 3. Slimmed Down Search Bar */
  .searchbar__row {
    grid-template-columns: 1fr; 
    gap: 8px; /* Tighter gap between rows */
    padding: 12px; /* Reduced internal padding */
    border-radius: 10px;
  }

  .field label {
    font-size: 0.65rem; /* Smaller labels */
    margin-bottom: 2px;
  }

  .field input {
    height: 38px; /* Slimmer inputs */
    padding: 0 10px;
    font-size: 14px; /* Sufficient for mobile without being bulky */
  }
  
.flatpickr-alt-input, .flatpickr-altInput { display: block; }
  

  /* 4. Button Alignment - Compacted */
  #searchBtn, #resetBtn {
    width: 100%; 
    height: 40px; /* Reduced button height */
    margin-top: 2px;
    font-size: 14px;
  }

  #resetBtn {
    order: 2; 
    border: 1px solid #e2e8f0;
    padding: 0;
  }
}

/* Alternate row colors for both dropdowns */
#fromInput option:nth-child(odd),
#toInput option:nth-child(odd) {
  background-color: #ffffff; /* white */
}

#fromInput option:nth-child(even),
#toInput option:nth-child(even) {
  background-color: #eaeaea; /* light gray */
}

/* Optional hover highlight */
#fromInput option:hover,
#toInput option:hover {
  background-color: #e0f7fa; /* soft teal highlight */
}

/* ===========================
   4. Trips & Cards (Reverted & Centered)
=========================== */
.trip-list {
  /* Step 1: Force max-width to match the search bar container */
  max-width: 900px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 15px; /* Adds small padding on mobile */
  
  /* Critical Step 1: Ensure it matches the search bar */
  width: 100%;
}

.trip-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  padding: 20px 24px; /* Increased top/bottom padding for centered feel */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%; /* Spans the full width of .trip-list */
}

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

/* Layout for the entire Trip Card to align items in a row */
.trip-card {
  display: flex;
  align-items: center; /* Vertically centers the logo with the text */
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 1. New Rectangular Logo Styling */
/* 1. Elongated Rectangular Logo Styling */
.trip-logo {
  flex-shrink: 0;
  margin-right: 30px; /* Increased spacing to account for the wider logo */
}

.trip-logo img {
  width: 140px;      /* Increased width for a longer look */
  height: 55px;      /* Slightly shorter height to emphasize the length */
  border-radius: 4px; /* Keeps the rectangular corners clean */
  object-fit: contain; /* Ensures the DMMC logo doesn't stretch weirdly */
  background: #ffffff; 
  padding: 4px;
  border: 1px solid #e2e8f0;
  display: block;
}

/* Ensure the info section still grows to fill the middle */
.trip-info {
  flex-grow: 1;
  min-width: 0; /* Prevents text overflow issues with the wider logo */
}

/* 3. Status and Button (Right Side) */
.trip-status {
  display: flex;
  align-items: center;
  gap: 32px; /* Spacing between "seats left" and the button */
  white-space: nowrap;
}

.seats-left {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}


.trip-actions {
  display: flex;
  flex-direction: row; /* Horizontal layout for desktop */
  align-items: center;
  justify-content: flex-end;
  gap: 32px; /* ✅ This creates the 32px space you need */
  min-width: 220px; /* Ensures consistent width on all cards */
}

/* --- The Centering Logic for Origin/Dest --- */
.trip-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center; /* Crucial: Centers all text elements horizontally */
  text-align: center;
  gap: 6px; /* Reduced gap for a tighter feel */
}

/* Primary Brand Title (e.g., "DMMC Travel and Tours") */
.trip-title {
  font-weight: 700;
  font-size: 16px;
  color: #1e293b;
}

/* Route Highlighting (Buhi → Manila) */
.trip-route {
  /* 1. Dramatic Size & Weight */
  font-size: 38px;            /* Large, readable centerpiece */
  font-weight: 900;           /* Extra bold / Black weight */
  
  /* 2. Brand Colors & Spacing */
  color: #1e293b;             /* Deep slate for high contrast */
  margin: 15px 0;             /* Increased breathing room */
  
  /* 3. Modern Typography Fixes */
  line-height: 1;             /* Prevents excessive height with large text */
  letter-spacing: -1.2px;     /* Tighter tracking for a premium, bold feel */
  
  /* 4. Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;                  /* Space around the arrow */
  width: 100%;
  word-wrap: break-word;
}

/* Specific styling for the Arrow */
.trip-route span, 
.trip-route .arrow {
  color: #4ade80;             /* Using your Neon Avocado for the arrow */
  font-size: 34px;            /* Slightly smaller than the text for visual balance */
  font-weight: 900;
}

/* The "Show Seats" Button */
.trip-card .btn-primary {
  /* Gradient: Neon Lime (#a3ff33) to deep Avocado (#4ade80) */
  background: linear-gradient(135deg, #a3ff33 0%, #4ade80 100%);
  color: #ffffff;
  
  /* Layout & Typography */
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  
  /* Modern Effects */
  box-shadow: 0 4px 12px rgba(163, 255, 51, 0.3);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trip-card .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(163, 255, 51, 0.5);
  filter: brightness(1.05);
}

.trip-card .btn-primary:active {
  transform: translateY(0);
}

/* Fade-in Animation for Cards */
.trip-card {
  animation: fadeInUp 0.8s ease-out forwards;
}

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

/* ===========================
   4. Mobile Adjustments (Responsive Long Routes)
=========================== */
@media (max-width: 600px) {

  body {
    background-color: var(--bg-soft) !important; /* Keep the avocado tint */
    padding: 10px;
  }

  .trip-list {
    padding: 0 10px; /* Gives a bit more breathing room than 8px */
    margin: 15px auto;
  }

  .trip-card {
    flex-direction: column;
    padding: 20px 16px; /* Slightly more padding for a premium feel */
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    align-items: center; /* Keeps everything centered as per your screenshot */
  }

  .trip-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Step 3: Improved Long Route Handling */
  .trip-route {
    font-size: 22px; /* Restored size for better visibility */
    font-weight: 800;
    line-height: 1.4;
    width: 100%;
    margin: 8px 0;
    
    /* These three properties handle the long names */
    display: flex;
    flex-wrap: wrap; /* Allows "Origin -> Destination" to wrap to 2 lines if needed */
    justify-content: center;
    gap: 4px;
    
    /* Ensures long names don't break the container layout */
    word-break: break-word; 
    overflow-wrap: break-word;
  }

  /* Specific styling for the arrow to prevent it from hanging at the end of a line */
  .trip-route span {
    display: inline-block;
  }

  .trip-meta {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
  }

  /* Step 4: Urgency and Action */
  .trip-status {
    margin: 8px 0;
    font-size: 14px;
    order: 2; /* Keeps the seats left above the button */
  }

  .trip-card .btn-primary {
    width: 100%;
    padding: 14px; /* Larger tap target for mobile */
    font-size: 16px;
    order: 3;
    border-radius: 12px;
  }
}
/* ===========================
   5. Seatmap Container (The Wrapper)
=========================== */
.seatmap-container {
  flex-basis: 100%;
  width: 100%;
  max-width: 800px;
  margin: 12px auto 0;
  border-top: 1px solid #eee;
  padding-top: 12px;
  text-align: center;
}

.seatmap {
  position: relative; /* Crucial for absolute seats */
  width: 100%;
  margin: 12px auto;
  padding: 20px;
  background: var(--white);
  border-radius: 12px;
  min-height: 200px;
  box-sizing: border-box;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
}

/* Seatmap Legend */
.legend {
  margin-top: 15px;
  font-size: 12px;
  color: #555;
}

.legend span { margin-right: 12px; display: inline-flex; align-items: center; }
.legend .box {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

/* Legend Colors */
.legend .available { background-color: #4CAF50; }
.legend .selected  { background-color: #FFD700; }
.legend .booked    { background-color: #f44336; }

/* ===========================
   3.1 3D Seat Elements 
=========================== */

/* ===========================
   3D Seatmap Color Fixes
=========================== */

/* Node Wrapper - Ensures perfect alignment on desktop */
.seat-node {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    z-index: 10;
}

/* Slim 3D Armrests for Chairs */
.seat-node.available::before, .seat-node.available::after,
.seat-node.selected::before, .seat-node.selected::after,
.seat-node.booked::before, .seat-node.booked::after,
.seat-node.reserved::before, .seat-node.reserved::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 60%;
    background: #1e293b;
    border-radius: 10px;
    top: 20%;
    z-index: 1;
}
.seat-node::before { left: -1px; }
.seat-node::after { right: -1px; }

/* The Seat Cushion */
.seat-content {
    width: 90%;
    height: 90%;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    color: white;
    font-size: 10px;
    font-weight: 700;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), 0 3px 6px rgba(0,0,0,0.1);
}

/* ✅ Available = Green Gradient */
.available .seat-content {
    background: linear-gradient(145deg, #4CAF50, #388E3C) !important;
}

/* ✅ Selected = Yellow/Amber Gradient */
.selected .seat-content {
    background: linear-gradient(145deg, #FFD700, #DAA520) !important;
    color: #422006 !important;
}

/* ✅ Booked = Red Gradient */
.booked .seat-content {
    background: linear-gradient(145deg, #f44336, #d32f2f) !important;
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/* ✅ Reserved = Violet/Purple Gradient */
.reserved .seat-content {
    background: linear-gradient(145deg, #9c27b0, #7b1fa2) !important;
    box-shadow: none;
}

/* Toilet (CR) Block */
.cr-node::before, .cr-node::after { display: none; }
.cr-node .seat-content {
    background: linear-gradient(145deg, #f8fafc, #e2e8f0) !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1;
    font-size: 16px;
}

/* Selection Pop effect */
.selected {
    transform: scale(1.1);
    z-index: 20;
}

/* ===========================
   6. Buttons & Misc (Neon Avocado Edition)
=========================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  user-select: none;
  gap: 8px;
}

.btn-primary, 
.proceedBooking {
  /* Gradient: Neon Lime (#a3ff33) to a deep Avocado (#4ade80) */
  background: linear-gradient(135deg, #a3ff33 0%, #4ade80 100%); 
  color: #ffffff;
  border: none;
  
  /* The glow effect: use the neon start color with high transparency */
  box-shadow: 0 4px 15px rgba(163, 255, 51, 0.4); 
  
  /* Shadowed text helps white font stand out against bright neon */
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-primary:hover,
.proceedBooking:hover:not(:disabled) {
  transform: translateY(-2px);
  /* Intense glow on hover */
  box-shadow: 0 8px 25px rgba(163, 255, 51, 0.6);
  filter: brightness(1.1);
}

/* ===========================
   Pagination (Neon Avocado Edition)
=========================== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px; /* Tighter gap for a modern look */
  margin: 32px 0;
}

.pagination button, 
.pagination .page-num {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: var(--white);
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 1. The Active Page (Full Neon Avocado Gradient) */
.pagination .page-num.active {
  background: linear-gradient(135deg, #a3ff33 0%, #4ade80 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(163, 255, 51, 0.3);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 2. Hover State for non-active buttons */
.pagination button:hover:not(:disabled),
.pagination .page-num:hover:not(.active) {
  border-color: #a3ff33;
  color: #4ade80; /* Text shifts to the avocado color */
  background: #f7fee7; /* Subtle lime tint background */
  transform: translateY(-2px);
}

/* 3. Disabled State (Arrows) */
.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f1f5f9;
}

.site-footer {
  background: var(--header-bg);
  color: var(--white);
  text-align: center;
  padding: 20px;
  font-size: 13px;
  margin-top: 40px;
}

.footer-content {
  margin-bottom: 15px;
}

.footer-content p {
  margin: 0 0 15px 0;
  font-size: 14px;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 25px; /* equal spacing between links */
  flex-wrap: wrap;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.social-icons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px; /* equal spacing between icons */
}

.social-icons a {
  color: #fff;
  font-size: 18px;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #a3ff33; /* highlight green */
}


/* ✅ Responsive adjustments */
@media (max-width: 768px) {
  .searchbar__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #searchBtn, #resetBtn {
    width: 100%;
  }
}

/* Fade-in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-overlay {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(0,0,0,0.5);
  padding: 32px 24px;
  border-radius: 12px;
  text-align: center;

  /* ✅ Animation */
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
}
.hero-overlay h1,
.hero-overlay p,
.searchbar__row {
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
}

/* Staggered timing for smoother effect */
.hero-overlay h1 {
  animation-delay: 0.2s;
}
.hero-overlay p {
  animation-delay: 0.4s;
}
.searchbar__row {
  animation-delay: 0.6s;
}

/* Glow effect on search button */
#searchBtn {
  transition: all 0.3s ease;
  box-shadow: none;
}

#searchBtn:hover {
  background: #3fa34d; /* slightly lighter green */
  box-shadow: 0 0 12px rgba(63, 163, 77, 0.6); /* glowing green effect */
  transform: translateY(-2px); /* subtle lift */
}

/* Glow effect on reset button */
#resetBtn {
  transition: all 0.3s ease;
  box-shadow: none;
}

#resetBtn:hover {
  background: #e0e0e0; /* lighter gray */
  box-shadow: 0 0 12px rgba(160, 160, 160, 0.6); /* soft gray glow */
  transform: translateY(-2px); /* subtle lift */
}

/* Press-down effect for buttons */
#searchBtn:active,
#resetBtn:active {
  transform: translateY(2px); /* slight press down */
  box-shadow: 0 0 6px rgba(0,0,0,0.3) inset; /* inner shadow for depth */
}

/* Ripple effect base */
.btn {
  position: relative;
  overflow: hidden; /* ensures ripple stays inside button */
}

/* Ripple element */
.btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255,255,255,0.6); /* light ripple color */
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

/* Trigger ripple on click */
.btn:active::after {
  transform: scale(20); /* expand outward */
  opacity: 1;
  transition: transform 0.6s ease-out, opacity 0.8s ease-out;
}

/* Base ripple setup */
.btn {
  position: relative;
  overflow: hidden; /* keeps ripple inside button */
}

/* Search button ripple */
#searchBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: rgba(46, 125, 50, 0.6); /* green ripple */
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

#searchBtn:active::after {
  transform: scale(20);
  opacity: 1;
  transition: transform 0.6s ease-out, opacity 0.8s ease-out;
}

/* Reset button ripple */
#resetBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: rgba(160, 160, 160, 0.6); /* gray ripple */
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

#resetBtn:active::after {
  transform: scale(20);
  opacity: 1;
  transition: transform 0.6s ease-out, opacity 0.8s ease-out;
}

.btn {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
  background-color: rgba(255,255,255,0.6);
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Search bar row inside hero */
.searchbar__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto auto;
  gap: 28px; /* wider spacing between fields and buttons */
  align-items: end;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

/* Field styling */
.field {
  text-align: left;
}
.field label {
  font-size: 0.9rem;
  color: #ddd;
  display: block;
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  height: 44px;
  box-sizing: border-box;
}

/* Buttons spacing */
#searchBtn, #resetBtn {
  padding: 12px 20px;
  font-size: 14px;
  height: 44px;
  box-sizing: border-box;
}

/* Responsive layout */
@media (max-width: 768px) {
  .searchbar__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #searchBtn, #resetBtn {
    width: 100%;
  }
}
/* ========================= */
/* Responsive Adjustments */
/* ========================= */
@media (max-width:768px) {
  .searchbar__row {
    grid-template-columns:1fr;
  }
  #searchBtn, #resetBtn {
    width:100%;
  }
  .trip-card {
    flex-direction:column;
    padding:12px;
  }
  .trip-actions {
    flex-direction: column;   /* ✅ stack vertically on small screens */
    align-items: flex-start;
    gap: 8px;
    margin-left: 0;
    margin-top: 12px;
}

@media (max-width:480px) {
  .trip-card {
    padding:10px;
  }
  .trip-title {
    font-size:16px;
  }
  .trip-route {
    font-size:13px;
  }
  .trip-fare {
    font-size:14px;
  }
  .legend {
    font-size:12px;
    gap:8px;
  }
  .trip-extra label {
    font-size:12px;
  }
  .trip-extra select {
    font-size:12px;
    padding:3px 5px;
  }
  .proceedBooking {
    font-size:13px;
    padding:6px 12px;
  }
  .seatmap {
    /* On very small screens, reduce seatmap width and spacing */
    max-width:100%;
    margin:8px auto;
    padding:2px;
  }
  .seat,
  .cr-block,
  .driver,
  .aisle {
    font-size:9px;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .seatmap-container {
    max-width: 100%;
    overflow-x: auto; /* allow horizontal scroll if needed */
    padding: 8px;
  }

  .seatmap {
    transform: scale(0.9); /* shrink slightly */
    transform-origin: top center;
  }

  .seat,
  .cr-block,
  .driver,
  .aisle {
    font-size: 9px; /* smaller text */
  }

  .trip-extra {
    font-size: 13px;
  }
}


/* Base */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}

/* Search panel */
.search-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.search-panel input,
.search-panel button {
  flex: 1;
  min-width: 120px;
  padding: 10px;
  font-size: 14px;
}

/* Trip cards */
.trip-card {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 15px;
  padding: 10px;
}

/* Seatmap */
.seatmap-container {
  overflow-x: auto;
  padding: 8px;
}

.seatmap {
  display: inline-block;
  transform-origin: top center;
}

/* Buttons */
.btn {
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-green {
  background-color: #4CAF50;
  color: white;
}

.btn-gray {
  background-color: #ccc;
  color: black;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
  .search-panel {
    flex-direction: column;
  }

  .trip-card {
    font-size: 14px;
  }

  .seatmap {
    transform: scale(0.9);
  }

  .proceedBooking {
    width: 100%;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .search-panel input,
  .search-panel button {
    width: 100%;
  }

  .seatmap {
    transform: scale(0.75);
  }

  .legend {
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .trip-extra {
    font-size: 13px;
  }
}

/* Promo header */
.searchbar-header {
  text-align: center;
  margin-bottom: 16px;
}
.searchbar-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-dark);
}
.searchbar-header p {
  font-size: 14px;
  color: var(--text-light);
}

/* Helper tip */
.searchbar-tip {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-light);
  text-align: center;
  font-style: italic;
}

/* Feature highlights */
.searchbar-features {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}
.searchbar-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dark);
}
.searchbar-feature i {
  color: var(--brand);
  font-size: 16px;
}

/* Results summary */
.results-summary {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-dark);
}

/* Slide-down animation */
.seatmap-dropdown {
  display: none;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 0 0 8px 8px; /* rounded bottom corners */
  margin: -8px 0 16px 0;      /* tuck under card neatly */
  overflow: hidden;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Legend styling */
.legend {
  display: flex;
  gap: 12px;
  margin: 12px 0;
  font-size: 14px;
}

.legend .box {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-radius: 3px;
}

/* Match seat states */
.legend .available { background: #4CAF50; }
.legend .selected { background: #FFD700; }
.legend .booked   { background: #f44336; }
.legend .premium  { background: #2196F3; }
.legend .reserved { background: #9c27b0; }

.seatmap .legend {
  margin-top: 12px;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  padding: 4px;
  border-top: 1px solid #eee;
}

/* Hover effect for all interactive seats */
.seat.available:hover,
.seat.selected:hover,
.seat.premium:hover,
.seat.reserved:hover {
  transform: scale(1.05);              /* subtle zoom */
  box-shadow: 0 0 6px rgba(0,0,0,0.3); /* glow effect */
}

/* Optional: booked seats stay static */
.seat.booked {
  cursor: not-allowed;
  opacity: 0.8;
}
.seat.booked:hover {
  transform: none;
  box-shadow: none;
}

/* Desktop / larger screens */
.seatmap-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Seat grid */
.seat-grid {
  position: relative;
  flex: 2;
  min-height: 100px;
}

/* Side panel */
.seatmap-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

/* Limit width of dropdowns */
.seatmap-side select {
  max-width: 180px;   /* ✅ prevents stretching */
  padding: 6px;
  font-size: 14px;
}

/* Proceed button inside side panel */
.seatmap-side .proceedBooking {
  width: auto;              /* shrink to fit content */
  max-width: 160px;         /* ✅ limit length */
  align-self: flex-start;   /* align to left instead of stretching */
  padding: 8px 16px;
  font-size: 14px;
}


/* 3D Seat Node Base */
.seat-node {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Slim 3D Armrests */
.seat-node::before, .seat-node::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 60%;
  background: #1e293b; /* Slate Dark */
  border-radius: 10px;
  top: 20%;
  z-index: 1;
}
.seat-node::before { left: -1px; }
.seat-node::after { right: -1px; }

/* The Seat/Icon Inner Body */
.seat-content {
  width: 85%;
  height: 90%;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  /* Soft 3D Shadow */
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);
}

/* State Colors - Modern Gradients */
.available .seat-content {
  background: linear-gradient(145deg, #2ecc71, #27ae60); /* Modern Green */
}

.selected .seat-content {
  background: linear-gradient(145deg, #f1c40f, #f39c12); /* Modern Amber */
  color: #422006;
}

.booked .seat-content {
  background: linear-gradient(145deg, #94a3b8, #64748b); /* Slate Grey */
  opacity: 0.6;
  box-shadow: none;
}

/* Minimalist Toilet (CR) Block */
.cr-node::before, .cr-node::after { display: none; } /* No armrests on CR */
.cr-node .seat-content {
  background: linear-gradient(145deg, #f8fafc, #e2e8f0);
  color: #475569;
  border: 1px solid #cbd5e1;
  font-size: 16px;
  box-shadow: none;
}

/* Icon Spacing */
.seat-content i {
  margin-bottom: -1px;
  font-size: 13px;
}

/* Interaction */
.seat-node:active { transform: scale(0.95); }
.selected { transform: scale(1.1) translateY(-2px); z-index: 10; }


/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: #f9f9f9;
  color: #333;
  line-height: 1.6;
}

/* Header */
header {
  background: #004080;
  color: #fff;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  font-size: 1.5rem;
}

nav a {
  color: #fff;
  margin-left: 1rem;
  text-decoration: none;
  font-weight: 500;
}

nav a.active {
  border-bottom: 2px solid #ffcc00;
}

/* Main Content */
main {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

main h2 {
  margin-bottom: 1rem;
  color: #004080;
}

main p, main li {
  margin-bottom: 0.75rem;
}

/* Contact Form */
form {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

form label {
  font-weight: 600;
}

form input, form textarea, form select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

form button {
  background: #004080;
  color: #fff;
  border: none;
  padding: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

form button:hover {
  background: #003366;
}

/* Terms List */
ol {
  padding-left: 1.5rem;
}

ol li {
  margin-bottom: 0.75rem;
}

/* Footer */
footer {
  text-align: center;
  padding: 1rem;
  background: #eee;
  margin-top: 2rem;
  font-size: 0.9rem;
}



/* ======================================================
   MOBILE FINAL REPAIR: VERTICAL STACK (MAP ON TOP)
   ====================================================== */
@media (max-width: 768px) {
  /* 1. The Parent Container */
  .seatmap-row {
    display: flex !important;
    flex-direction: column !important; /* Stacks vertically */
    height: auto !important;
    min-height: 500px !important; /* Ensures space for the map */
    gap: 20px !important;
    padding: 15px !important;
  }

  /* 2. MOVE SEATMAP TO TOP */
  .seatmap {
    order: -1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 auto !important;
    overflow-x: auto !important; 
    
    /* ADD THIS LINE for a smooth sliding effect */
    scroll-behavior: smooth !important; 
}

  /* 3. THE GRID: Visible and Center-Aligned */
  .seat-grid {
    display: grid !important;
    /* Using 32px to ensure it fits the card width */
    grid-template-columns: repeat(4, 45px) !important; /* Made slightly wider to force a scroll */ 
    gap: 8px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 10px !important;
    width: max-content !important; /* This is vital to keep the grid wide */
  }

  .seat {
    width: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
    line-height: 32px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

  }

  /* 4. SELECTORS SECTION: Now at the Bottom */
  .seatmap-side {
    order: 1 !important; /* Follows the seatmap */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: transparent !important;
  }

  .pickupSelect, .dropoffSelect {
    width: 90% !important; /* Slightly narrower for better look */
    height: 40px !important;
    margin-bottom: 10px !important;
  }

  /* 5. Legend: 2 columns to save space */
  .legend {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 15px !important;
    width: 90% !important;
  }

/* ===========================
   3D Seatmap Color Fixes
=========================== */

/* Node Wrapper - Ensures perfect alignment on desktop */
.seat-node {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    z-index: 10;
}

/* Slim 3D Armrests for Chairs */
.seat-node.available::before, .seat-node.available::after,
.seat-node.selected::before, .seat-node.selected::after,
.seat-node.booked::before, .seat-node.booked::after,
.seat-node.reserved::before, .seat-node.reserved::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 60%;
    background: #1e293b;
    border-radius: 10px;
    top: 20%;
    z-index: 1;
}
.seat-node::before { left: -1px; }
.seat-node::after { right: -1px; }

/* The Seat Cushion */
.seat-content {
    width: 90%;
    height: 90%;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    color: white;
    font-size: 10px;
    font-weight: 700;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), 0 3px 6px rgba(0,0,0,0.1);
}

/* ✅ Available = Green Gradient */
.available .seat-content {
    background: linear-gradient(145deg, #4CAF50, #388E3C) !important;
}

/* ✅ Selected = Yellow/Amber Gradient */
.selected .seat-content {
    background: linear-gradient(145deg, #FFD700, #DAA520) !important;
    color: #422006 !important;
}

/* ✅ Booked = Red Gradient */
.booked .seat-content {
    background: linear-gradient(145deg, #f44336, #d32f2f) !important;
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/* ✅ Reserved = Violet/Purple Gradient */
.reserved .seat-content {
    background: linear-gradient(145deg, #9c27b0, #7b1fa2) !important;
    box-shadow: none;
}

/* Toilet (CR) Block */
.cr-node::before, .cr-node::after { display: none; }
.cr-node .seat-content {
    background: linear-gradient(145deg, #f8fafc, #e2e8f0) !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1;
    font-size: 16px;
}

/* Selection Pop effect */
.selected {
    transform: scale(1.1);
    z-index: 20;
}