/* Custom CSS for Go Detail - Modern Light Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');

:root {
  --brand-cyan: #0891b2;
  --brand-aqua: #0bb7dc;
  --brand-navy: #0f172a;
  --brand-surface: #f8fafc;
  --brand-card: #ffffff;
  --brand-cardBorder: #e2e8f0;
}

/* Smooth Scrolling & Font rendering */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #ffffff;
  color: #1e293b;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* Ambient Glow and Gradient animations */
.glow-cyan {
  box-shadow: 0 0 25px rgba(11, 183, 220, 0.2);
}

.glow-card {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08), 0 0 20px -5px rgba(11, 183, 220, 0.1);
}

/* Glassmorphism Classes for Light Theme */
.glass-panel {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* Vehicle Selector Tab transitions */
.vehicle-tab-btn {
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vehicle-tab-btn:hover {
  transform: translateY(-2px);
  border-color: #0bb7dc !important;
}

.vehicle-tab-btn.active {
  border-color: #0bb7dc !important;
  background-color: #f0fdfa !important;
  box-shadow: 0 4px 16px rgba(11, 183, 220, 0.15);
}

.vehicle-tab-btn.active .vehicle-icon {
  color: #0891b2 !important;
}

.vehicle-tab-btn.active .active-badge {
  display: block !important;
}

/* Step Wizard Progress Bar and Steps */
.wizard-step {
  display: none;
  animation: fadeInStep 0.3s ease-out forwards;
}

.wizard-step.active {
  display: block;
}

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

.step-indicator-item.active .step-num {
  background: linear-gradient(135deg, #0891b2, #0284c7);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.2);
}

.step-indicator-item.completed .step-num {
  background-color: #10b981;
  color: #ffffff;
}

.step-indicator-item.active .step-title {
  color: #0f172a;
  font-weight: 700;
}

/* Card Selection States */
.selectable-card {
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.selectable-card:hover {
  transform: translateY(-2px);
  border-color: #0bb7dc;
}

.selectable-card.selected {
  border-color: #0891b2 !important;
  background-color: #f0fdfa !important;
  box-shadow: 0 4px 14px rgba(8, 145, 178, 0.12);
}

/* Time Slot Pills */
.slot-pill {
  cursor: pointer;
  transition: all 0.2s ease;
}

.slot-pill:hover {
  border-color: #0bb7dc;
}

.slot-pill.selected {
  background: #0891b2;
  color: #ffffff;
  border-color: #0891b2;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.25);
}

.slot-pill.selected span {
  color: #ffffff !important;
}

/* Day Selector Buttons */
.day-btn {
  cursor: pointer;
  transition: all 0.2s ease;
}

.day-btn:hover {
  border-color: #0bb7dc;
}

.day-btn.selected {
  background: #0891b2;
  color: #ffffff;
  border-color: #0891b2;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.25);
}

.day-btn.selected * {
  color: #ffffff !important;
}

/* Before / After Slider Component */
#before-after-container {
  touch-action: pan-y;
}

#slider-handle {
  transform: translateX(-50%);
  user-select: none;
}

#slider-handle:hover > div:nth-child(2) {
  transform: scale(1.15);
  box-shadow: 0 0 25px #0bb7dc;
}

#slider-handle > div:nth-child(2) {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* FAQ Accordion Transitions */
.faq-item.is-open {
  border-color: rgba(11, 183, 220, 0.5) !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
  color: #0891b2;
}

.faq-answer {
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal Open Animation */
#booking-modal.show {
  opacity: 1;
  pointer-events: auto;
}

#booking-modal.show #booking-modal-box {
  transform: scale(1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0bb7dc;
}

/* Leaflet Map Interactive Picker */
#booking-map {
  width: 100%;
  height: 200px;
  border-radius: 0.75rem;
  z-index: 10;
}

.leaflet-container {
  font-family: inherit !important;
  font-size: 0.75rem;
}

.leaflet-popup-content-wrapper {
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}