/* ==========================================================================
   ROOT VARIABLES & GLOBAL UTILITIES
   ========================================================================== */
:root {
  --dc-bg-body: #ffffff;
  --dc-bg-light: #f8fafc;
  --dc-bg-subtle: #f1f5f9;
  --dc-bg-card: #ffffff;
  --dc-border: #e2e8f0;
  --dc-border-hover: #cbd5e1;
  --dc-border-focus: #f59e0b;
  --dc-text-head: #0f172a;
  --dc-text-body: #334155;
  --dc-text-muted: #64748b;
  --dc-amber: #f59e0b;
  --dc-amber-hover: #d97706;
  --dc-amber-light: #fef3c7;
  --dc-amber-subtle: #fffbeb;
  --dc-amber-dark: #92400e;
  --dc-green: #10b981;
  --dc-green-light: #ecfdf5;
  --dc-green-dark: #065f46;
  --dc-blue: #3b82f6;
  --dc-blue-light: #eff6ff;
  --dc-purple: #8b5cf6;
  --dc-purple-light: #f5f3ff;
  --dc-font-main: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dc-radius-sm: 8px;
  --dc-radius-md: 12px;
  --dc-radius-lg: 16px;
  --dc-radius-xl: 22px;
  --dc-shadow-subtle: 0 2px 6px rgba(15, 23, 42, 0.04);
  --dc-shadow-card: 0 10px 30px -6px rgba(15, 23, 42, 0.06), 0 4px 10px -2px rgba(15, 23, 42, 0.02);
  --dc-shadow-elevated: 0 20px 45px -10px rgba(15, 23, 42, 0.08), 0 8px 18px -4px rgba(15, 23, 42, 0.03);
  --dc-shadow-btn: 0 4px 14px rgba(245, 158, 11, 0.35);
}

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

html, body {
  font-family: var(--dc-font-main);
  background-color: var(--dc-bg-body);
  color: var(--dc-text-body);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative;
}

.dc-container {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Typography & Utility Classes */
.text-amber { color: var(--dc-amber) !important; }
.text-green { color: var(--dc-green) !important; }
.text-blue { color: var(--dc-blue) !important; }
.text-purple { color: var(--dc-purple) !important; }
.text-muted { color: var(--dc-text-muted) !important; }

.dc-highlight-amber {
  color: var(--dc-amber);
  font-weight: 700;
}

.dc-section {
  padding: 80px 0;
}

.dc-section-head {
  text-align: center;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.dc-section-eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dc-text-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 6px 14px;
  background-color: var(--dc-bg-subtle);
  border-radius: var(--dc-radius-xl);
}

.dc-section-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--dc-text-head);
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.2;
}

.dc-section-desc {
  font-size: 1.125rem;
  color: var(--dc-text-muted);
  margin-bottom: 24px;
}

.dc-section-trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--dc-text-body);
  font-weight: 600;
}

.dc-trust-sep {
  color: var(--dc-border);
}


/* ==========================================================================
   SECTION 1: HERO & BOOKING WIDGET (COMPACT, REFINED, BOOKING-FIRST)
   ========================================================================== */
.dc-hero-section {
  position: relative;
  padding: 40px 0 60px;
  background: radial-gradient(circle at 50% -20%, rgba(254, 243, 199, 0.55) 0%, rgba(248, 250, 252, 0.85) 48%, #ffffff 100%);
  border-bottom: 1px solid var(--dc-border);
  overflow: hidden;
}

.dc-hero-ambient-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  max-width: 100vw;
  height: 400px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.dc-hero-section .dc-container {
  position: relative;
  z-index: 1;
}

.dc-hero-header-banner {
  text-align: center;
  margin-bottom: 24px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.dc-hero-eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background-color: var(--dc-bg-card);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dc-amber-dark);
  box-shadow: var(--dc-shadow-subtle);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.dc-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--dc-amber);
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(245, 158, 11, 0.4);
  animation: dcPulse 2s infinite;
}

.dc-pulse-dot-white {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
  animation: dcPulseWhite 2s infinite;
}

@keyframes dcPulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

@keyframes dcPulseWhite {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.dc-hero-title {
  font-size: clamp(1.85rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--dc-text-head);
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: -0.5px;
}

.dc-hero-subtitle {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--dc-text-muted);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Booking Widget — The Centerpiece */
.dc-hero-booking-centerpiece {
  width: 100%;
}

.dc-booking-widget-wrapper {
  background: var(--dc-bg-card);
  border-radius: var(--dc-radius-xl);
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.12), 0 8px 24px -4px rgba(15, 23, 42, 0.04);
  max-width: 1040px;
  margin: 0 auto;
  border: 1px solid rgba(226, 232, 240, 0.85);
  overflow: visible;
  position: relative;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.dc-booking-widget-wrapper:hover {
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.15), 0 10px 30px -4px rgba(15, 23, 42, 0.06);
  border-color: rgba(203, 213, 225, 0.9);
}

/* Centered Segmented Journey Type Tabs */
.dc-widget-tabs-bar {
  background: #f8fafc;
  padding: 14px 20px 0;
  border-bottom: 1px solid var(--dc-border);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--dc-radius-xl) var(--dc-radius-xl) 0 0;
}

.dc-tabs-group {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
}

.dc-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  color: var(--dc-text-muted);
  transition: all 0.25s ease;
  border-radius: var(--dc-radius-md) var(--dc-radius-md) 0 0;
  text-align: left;
  min-height: 48px;
}

.dc-tab-pill:hover {
  color: var(--dc-text-head);
  background: rgba(255, 255, 255, 0.7);
}

.dc-tab-pill.active {
  color: var(--dc-amber-dark);
  border-bottom-color: var(--dc-amber);
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04);
}

.dc-tab-pill.active .dc-tab-icon {
  color: var(--dc-amber);
}

.dc-tab-icon {
  font-size: 1.25rem;
  color: var(--dc-text-muted);
  transition: color 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-tab-label {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.dc-tab-label strong {
  font-size: 1rem;
  font-weight: 700;
  color: inherit;
}

.dc-tab-label small {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dc-text-muted);
}

.dc-tab-pill.active .dc-tab-label small {
  color: var(--dc-amber-dark);
  font-weight: 600;
}

/* Booking Widget Form Body */
.dc-widget-body {
  padding: 26px 28px;
}

.dc-fields-grid {
  display: grid;
  grid-template-columns: 1.35fr auto 1.35fr 0.9fr 0.85fr;
  gap: 12px;
  align-items: center;
  position: relative;
}

.dc-input-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1.5px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  min-height: 60px;
}

.dc-input-card:hover {
  border-color: var(--dc-border-hover);
  background: #fafafa;
}

.dc-input-card:focus-within {
  border-color: var(--dc-amber);
  background: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(245, 158, 11, 0.14);
}

.dc-input-icon {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  flex-shrink: 0;
}

.dc-icon-pickup { color: #10b981; }
.dc-icon-drop { color: #ef4444; }
.dc-icon-calendar { color: var(--dc-amber); }
.dc-icon-clock { color: #3b82f6; }
.dc-icon-return { color: #8b5cf6; }
.dc-icon-pkg { color: #d97706; }

.dc-input-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dc-field-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--dc-text-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
}

.dc-search-input {
  border: none;
  background: transparent;
  font-family: var(--dc-font-main);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dc-text-head);
  padding: 0;
  outline: none;
  width: 100%;
  line-height: 1.3;
}

.dc-search-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
  font-size: 0.88rem;
}

.dc-date-picker,
.dc-time-select,
.dc-pkg-select {
  cursor: pointer;
  color: var(--dc-text-head);
}

.dc-time-select,
.dc-pkg-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 16px 16px;
  padding-right: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dc-card-pkg {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1.5px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  min-height: 60px;
  box-sizing: border-box;
}

.dc-card-pkg:hover {
  border-color: var(--dc-border-hover);
  background: #fafafa;
}

.dc-card-pkg:focus-within {
  border-color: var(--dc-amber);
  background: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(245, 158, 11, 0.14);
}

.dc-card-pkg .dc-input-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.dc-card-pkg .dc-field-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--dc-text-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.dc-pkg-select option,
.dc-time-select option {
  background-color: #ffffff;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 12px;
}

.dc-clear-input-btn {
  background: transparent;
  border: none;
  color: var(--dc-text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-clear-input-btn:hover {
  color: #ef4444;
}

.dc-input-card:focus-within .dc-clear-input-btn,
.dc-search-input:not(:placeholder-shown) + .dc-clear-input-btn {
  opacity: 1;
}

/* Location Swap Button */
.dc-swap-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dc-swap-locations-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid var(--dc-border);
  color: var(--dc-text-head);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  transition: all 0.25s ease;
  box-shadow: var(--dc-shadow-subtle);
}

.dc-swap-locations-btn:hover {
  background: var(--dc-amber-subtle);
  border-color: var(--dc-amber);
  color: var(--dc-amber-dark);
  transform: rotate(180deg) scale(1.08);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

/* Google Autocomplete Dropdown */
.dc-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--dc-bg-card);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
  z-index: 100;
  display: none;
  max-height: 260px;
  overflow-y: auto;
}

.dc-suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid #f1f5f9;
}

.dc-suggestion-item:last-child {
  border-bottom: none;
}

.dc-suggestion-item:hover {
  background: var(--dc-amber-subtle);
}

.dc-sug-icon {
  color: var(--dc-amber);
  font-size: 0.95rem;
}

.dc-sug-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.dc-sug-text strong {
  font-size: 0.9rem;
  color: var(--dc-text-head);
}

.dc-sug-text small {
  font-size: 0.78rem;
  color: var(--dc-text-muted);
}

/* Primary Hero CTA: CHECK FARES BUTTON (EXACTLY CENTER ALIGNED) */
.dc-widget-action-row {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

.dc-btn-check-fare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--dc-radius-md);
  padding: 16px 42px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 8px 24px -2px rgba(245, 158, 11, 0.42), 0 3px 8px rgba(15, 23, 42, 0.06);
  transition: all 0.25s ease;
  min-height: 54px;
  min-width: 320px;
  text-transform: uppercase;
  font-family: var(--dc-font-main);
  position: relative;
  overflow: hidden;
}

.dc-btn-check-fare:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -2px rgba(245, 158, 11, 0.55), 0 6px 12px rgba(15, 23, 42, 0.08);
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}

.dc-btn-check-fare:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.dc-btn-check-fare .dc-btn-arrow {
  transition: transform 0.25s ease;
}

.dc-btn-check-fare:hover .dc-btn-arrow {
  transform: translateX(4px);
}

.dc-engine-alert {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  border-radius: var(--dc-radius-sm);
  color: #991b1b;
  font-weight: 600;
  align-items: center;
  gap: 10px;
}

.dc-input-highlight {
  animation: dcHighlightFlash 1s ease;
}

@keyframes dcHighlightFlash {
  0%, 100% { border-color: var(--dc-border); }
  50% { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
}




/* ==========================================================================
   STEP 1: FARE RESULTS & SELECT CAB (STARTUP TRAVEL-TECH UI)
   ========================================================================== */
.dc-search-results-section {
  padding: 40px 0 60px;
  background: #f8fafc;
  border-bottom: 1px solid var(--dc-border);
  position: relative;
}

/* 1. Compact Journey Summary Bar */
.dc-res-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  padding: 14px 22px;
  border-radius: var(--dc-radius-lg);
  border: 1.5px solid var(--dc-border);
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
  max-width: 1180px;
  margin: 0 auto 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.dc-res-summary-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dc-res-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--dc-amber-dark);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.dc-pulse-dot-green {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
  animation: dcPulseGreen 2s infinite;
}

@keyframes dcPulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.dc-res-route-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dc-text-head);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.3px;
}

.dc-res-summary-center {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.dc-metric-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dc-text-body);
  background: var(--dc-bg-subtle);
  padding: 6px 14px;
  border-radius: var(--dc-radius-xl);
  border: 1px solid #e2e8f0;
}

.dc-metric-dot {
  color: #cbd5e1;
  margin: 0 2px;
}

.dc-res-summary-right {
  display: flex;
  align-items: center;
}

.dc-btn-modify-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--dc-text-head);
  border: 1.5px solid var(--dc-border);
  padding: 8px 16px;
  border-radius: var(--dc-radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--dc-font-main);
  min-height: 40px;
}

.dc-btn-modify-search:hover {
  border-color: var(--dc-amber);
  color: var(--dc-amber-dark);
  background: var(--dc-amber-subtle);
}

/* 2. Section Heading & Trust Strip */
.dc-res-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.dc-res-heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--dc-text-head);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}

.dc-res-subtext {
  font-size: 0.88rem;
  color: var(--dc-text-muted);
  margin: 0;
  line-height: 1.4;
}

.dc-res-trust-badges {
  display: flex;
  gap: 10px;
  align-items: center;
}

.dc-trust-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--dc-radius-xl);
  background: #ffffff;
  border: 1px solid var(--dc-border);
  color: var(--dc-text-body);
  box-shadow: var(--dc-shadow-subtle);
}

/* 3. Vehicle Cards Container (Centered Dynamic Layout: 3 / 2 / 1 cards) */
.dc-vehicle-cards-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* Individual Card (Controlled Width 320–380px, Premium Travel-Tech Card) */
.dc-veh-result-card {
  flex: 0 1 355px;
  width: 100%;
  max-width: 375px;
  min-width: 290px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1.5px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dc-veh-result-card:hover {
  border-color: rgba(203, 213, 225, 0.95);
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.1);
  transform: translateY(-3px);
}

.dc-veh-result-card.is-popular-card {
  border-color: rgba(245, 158, 11, 0.85);
  box-shadow: 0 6px 22px -2px rgba(245, 158, 11, 0.18);
}

.dc-card-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 4px 12px;
  border-radius: 0 0 var(--dc-radius-md) 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dc-veh-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 20px 20px;
  box-sizing: border-box;
}

/* Media (Top) */
.dc-veh-media {
  width: 100%;
  margin-bottom: 14px;
  position: relative;
}

.dc-veh-img-wrap {
  width: 100%;
  height: 160px;
  border-radius: var(--dc-radius-md);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 62%, #ffffff 0%, #f8fafc 70%, #f1f5f9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f1f5f9;
  position: relative;
  padding: 10px 14px 8px;
}

.dc-veh-thumb {
  max-width: 94%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain !important;
  object-position: center;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.12));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dc-veh-result-card:hover .dc-veh-thumb {
  transform: scale(1.05) translateY(-2px);
  filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.16));
}

/* Subtle Agency Watermark Badge in Corner */
.dc-veh-brand-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
  pointer-events: none;
}

.dc-veh-brand-logo {
  height: 14px;
  width: auto;
  max-width: 65px;
  object-fit: contain;
  display: block;
}

.dc-veh-category-tag {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--dc-radius-sm);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.dc-veh-category-tag.tag-amber {
  background: #ffffff;
  color: var(--dc-amber-dark);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.dc-veh-category-tag.tag-neutral {
  background: #ffffff;
  color: var(--dc-text-muted);
  border: 1px solid #e2e8f0;
}

/* Vehicle Details (Middle) */
.dc-veh-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.dc-veh-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dc-veh-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--dc-text-head);
  margin: 0;
  letter-spacing: -0.3px;
}

.dc-veh-models {
  font-size: 0.82rem;
  color: var(--dc-text-muted);
  font-weight: 500;
}

.dc-veh-specs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dc-vspec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--dc-text-body);
  background: var(--dc-bg-subtle);
  padding: 4px 8px;
  border-radius: var(--dc-radius-sm);
  border: 1px solid #f1f5f9;
}


/* Card Bottom Column (Pricing & Primary CTA) */
.dc-veh-cta-column {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1.5px dashed #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dc-fare-pricing-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.dc-fare-meta-left {
  display: flex;
  flex-direction: column;
}

.dc-fare-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dc-text-muted);
}

.dc-fare-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--dc-text-head);
  line-height: 1.1;
}

.dc-currency {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dc-amber-dark);
}

.dc-amount {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.dc-advance-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #065f46;
  background: #ecfdf5;
  padding: 3px 8px;
  border-radius: var(--dc-radius-xl);
  border: 1px solid #d1fae5;
  white-space: nowrap;
}

.dc-btn-book-now {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  border-radius: var(--dc-radius-md);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  transition: all 0.25s ease;
  min-height: 48px;
  text-transform: uppercase;
  font-family: var(--dc-font-main);
}

.dc-btn-book-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.5);
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}

.dc-btn-book-now:active {
  transform: translateY(0);
}

.dc-instant-dispatch-note {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--dc-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}


/* ==========================================================================
   STEP 2 OF 2: INSTANT CONFIRMATION MODAL & BOTTOM-SHEET DRAWER
   ========================================================================== */
body.dc-modal-locked {
  overflow: hidden !important;
}

body.dc-modal-locked .dc-mobile-dock,
body.dc-modal-locked .dc-floating-actions,
body.dc-modal-locked .floating-btn,
body.dc-modal-locked [class*="dc-dock-"],
body.dc-modal-locked [class*="dc-float-"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.dc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  box-sizing: border-box;
}

.dc-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.dc-booking-modal-dialog {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-sizing: border-box;
}

.dc-modal-backdrop.is-open .dc-booking-modal-dialog {
  transform: translateY(0) scale(1);
}

.dc-modal-drag-handle-wrap {
  display: none;
}

.dc-modal-drag-handle {
  width: 44px;
  height: 5px;
  background: #cbd5e1;
  border-radius: 4px;
  margin: 10px auto 0;
  display: block;
}

.dc-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 10;
  flex-shrink: 0;
  box-sizing: border-box;
}

.dc-modal-header-text {
  flex: 1;
  min-width: 0;
  padding-right: 12px;
}

.dc-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--dc-amber-dark, #b45309);
  background: var(--dc-amber-subtle, #fef3c7);
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: 5px;
  letter-spacing: 0.4px;
}

.dc-modal-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--dc-text-head, #0f172a);
  margin: 0 0 2px;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

.dc-modal-subtext {
  font-size: 0.8rem;
  color: var(--dc-text-muted, #64748b);
  margin: 0;
  line-height: 1.35;
}

.dc-modal-close-btn {
  background: #f1f5f9;
  border: none;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.dc-modal-close-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

.dc-modal-body {
  padding: 16px 22px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0 !important; /* Prevents flex overflow bug on mobile */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

/* Modal Selected Cab Summary */
.dc-modal-cab-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  flex-shrink: 0;
  min-width: 0;
  box-sizing: border-box;
}

.dc-modal-cab-media {
  width: 66px;
  height: 44px;
  min-width: 66px;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, #fff 0%, #f1f5f9 100%);
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  box-sizing: border-box;
}

.dc-modal-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dc-modal-cab-info {
  flex: 1;
  min-width: 0;
}

.dc-modal-cab-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
  min-width: 0;
}

.dc-modal-cab-name {
  font-size: 0.96rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-modal-cab-models {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 500;
  display: block;
}

.dc-modal-fare-badge {
  text-align: right;
  line-height: 1.1;
  flex-shrink: 0;
}

.dc-modal-fare-badge small {
  display: block;
  font-size: 0.62rem;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
}

.dc-modal-fare-badge strong {
  font-size: 1.15rem;
  font-weight: 900;
  color: #d97706;
}

.dc-modal-journey-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #334155;
  flex-wrap: wrap;
  min-width: 0;
}

.dc-jmeta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  word-break: break-word;
}

/* Modal Form Fields */
.dc-modal-fields-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dc-mfield-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.dc-mfield-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.2px;
}

.dc-optional-tag {
  font-size: 0.68rem;
  font-weight: 500;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.dc-mfield-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.dc-mfield-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #94a3b8;
  pointer-events: none;
  z-index: 2;
}

.dc-mfield-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  z-index: 2;
  pointer-events: none;
  line-height: 1;
}

.dc-mfield-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px; /* iOS Safari zoom prevention */
  color: #0f172a;
  outline: none;
  transition: all 0.2s ease;
  min-height: 48px;
  background: #ffffff;
}

.dc-input-with-icon {
  padding-left: 38px !important;
}

.dc-input-phone {
  padding-left: 50px !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.dc-mfield-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.dc-mfield-helper {
  font-size: 0.72rem;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

/* Modal Actions */
.dc-modal-actions-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.dc-btn-modal-confirm {
  width: 100%;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
  transition: all 0.25s ease;
  text-transform: uppercase;
  font-family: inherit;
  box-sizing: border-box;
}

.dc-btn-modal-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.5);
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}

.dc-btn-modal-confirm:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.dc-modal-trust-msg {
  font-size: 0.74rem;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 6px 12px;
  text-align: center;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
}

.dc-btn-modal-change-route {
  width: 100%;
  min-height: 42px;
  background: transparent;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  color: #475569;
  font-size: 0.84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px 16px;
  box-sizing: border-box;
}

.dc-btn-modal-change-route:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.dc-modal-fare-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 8px;
  padding: 7px 12px;
  line-height: 1.35;
  box-sizing: border-box;
}



/* ==========================================================================
   SECTION 2: 4 SEPARATE PREMIUM TRUST CARDS (DISTINCT & COMPACT)
   ========================================================================== */
.dc-compact-trust-section {
  padding: 48px 0 42px;
  background: #ffffff;
  border-bottom: 1px solid var(--dc-border);
}

.dc-ctrust-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 28px;
}

.dc-ctrust-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--dc-amber-dark);
  background: var(--dc-amber-subtle);
  padding: 4px 12px;
  border-radius: var(--dc-radius-xl);
  text-transform: uppercase;
  margin-bottom: 8px;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.dc-ctrust-title {
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 900;
  color: var(--dc-text-head);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  line-height: 1.25;
}

.dc-ctrust-desc {
  font-size: 0.88rem;
  color: var(--dc-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* 4 Separate Cards Grid */
.dc-ctrust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto 24px;
}

/* Individual Distinct Separate Card */
.dc-ctrust-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 18px 20px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.dc-ctrust-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.08);
}

.dc-ctrust-card-amber:hover { border-color: #f59e0b; }
.dc-ctrust-card-emerald:hover { border-color: #10b981; }
.dc-ctrust-card-blue:hover { border-color: #3b82f6; }
.dc-ctrust-card-purple:hover { border-color: #8b5cf6; }

/* Top Row: Icon on left, Badge on right */
.dc-ctrust-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

/* Icon Box */
.dc-ctrust-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.dc-ctrust-card:hover .dc-ctrust-icon-wrap {
  transform: scale(1.08);
}

/* Theme Tints for Icons */
.dc-ctrust-card-amber .dc-ctrust-icon-wrap { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.dc-ctrust-card-emerald .dc-ctrust-icon-wrap { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.dc-ctrust-card-blue .dc-ctrust-icon-wrap { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.dc-ctrust-card-purple .dc-ctrust-icon-wrap { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }

/* Micro Badge in Card Top */
.dc-ctrust-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--dc-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.dc-ctrust-card-amber .dc-ctrust-badge { background: #fffbeb; color: #92400e; border: 1px solid #fef3c7; }
.dc-ctrust-card-emerald .dc-ctrust-badge { background: #ecfdf5; color: #065f46; border: 1px solid #d1fae5; }
.dc-ctrust-card-blue .dc-ctrust-badge { background: #eff6ff; color: #1e40af; border: 1px solid #dbeafe; }
.dc-ctrust-card-purple .dc-ctrust-badge { background: #f5f3ff; color: #5b21b6; border: 1px solid #ede9fe; }

/* Card Body */
.dc-ctrust-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.dc-ctrust-cat {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 2px;
}

.dc-ctrust-card-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--dc-text-head);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.dc-ctrust-card-desc {
  font-size: 0.8rem;
  color: var(--dc-text-muted);
  line-height: 1.45;
  margin: 2px 0 0;
}

/* Compact Trust Strip Footer */
.dc-ctrust-strip-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.dc-ctrust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dc-text-body);
}

.dc-ctrust-pill-dot {
  color: #cbd5e1;
  font-size: 0.8rem;
}


/* ==========================================================================
   SECTION 3: OUR CORE SERVICES (Concise Premium 3-Pillar Architecture)
   ========================================================================== */
.dc-services-section {
  background: var(--dc-bg-light);
  padding: 56px 0;
}

.dc-clean-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: stretch;
}

/* Base Card Style */
.dc-clean-svc-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 24px 22px 20px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
  border: 1.5px solid #e2e8f0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-direction: column;
}

.dc-clean-svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.09);
}

/* Subtle border tints on hover */
.dc-svc-card-amber:hover { border-color: #f59e0b; }
.dc-svc-card-blue:hover { border-color: #3b82f6; }
.dc-svc-card-emerald:hover { border-color: #10b981; }

/* Featured Card 1 Subtle Emphasis */
.dc-svc-card-featured {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 4px 20px -2px rgba(245, 158, 11, 0.09), 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* Header Area: Number + Icon on Left, Category + Featured on Right */
.dc-clean-svc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.dc-svc-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dc-svc-num {
  font-size: 0.78rem;
  font-weight: 800;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}

.dc-clean-svc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: transform 0.25s ease;
}

.dc-clean-svc-card:hover .dc-clean-svc-icon {
  transform: scale(1.08);
}

.dc-svc-card-amber .dc-clean-svc-icon { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.dc-svc-card-blue .dc-clean-svc-icon { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.dc-svc-card-emerald .dc-clean-svc-icon { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }

.dc-svc-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dc-clean-svc-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dc-svc-card-amber .dc-clean-svc-badge { background: #fffbeb; color: #92400e; border: 1px solid #fef3c7; }
.dc-svc-card-blue .dc-clean-svc-badge { background: #eff6ff; color: #1e40af; border: 1px solid #dbeafe; }
.dc-svc-card-emerald .dc-clean-svc-badge { background: #ecfdf5; color: #065f46; border: 1px solid #d1fae5; }

.dc-svc-featured-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  white-space: nowrap;
}

/* Card Titles & Single-Line Short Description */
.dc-clean-svc-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--dc-text-head);
  letter-spacing: -0.2px;
  line-height: 1.28;
}

.dc-clean-svc-desc {
  font-size: 0.85rem;
  color: var(--dc-text-muted);
  line-height: 1.48;
  margin: 0 0 14px;
  min-height: 38px;
}

/* 2 Compact Key Highlight Chips */
.dc-svc-benefits-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.dc-svc-benefit-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #1e293b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 4px 9px;
  border-radius: 7px;
  white-space: nowrap;
}

.dc-svc-card-amber .dc-svc-benefit-chip i { color: #d97706; }
.dc-svc-card-blue .dc-svc-benefit-chip i { color: #2563eb; }
.dc-svc-card-emerald .dc-svc-benefit-chip i { color: #059669; }

/* Popular Routes Section (2 Chips) */
.dc-svc-routes-wrap {
  margin-bottom: 18px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}

.dc-svc-routes-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  margin-bottom: 6px;
}

.dc-svc-route-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dc-route-chip {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #334155;
  white-space: nowrap;
}

.dc-route-chip:hover {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #b45309;
  transform: translateY(-1px);
}

/* Footer: Primary CTA + Secondary Link */
.dc-clean-svc-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
}

.dc-btn-clean-svc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.86rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 42px;
  text-decoration: none;
}

.dc-btn-clean-amber { background: #f59e0b; color: #ffffff; }
.dc-btn-clean-amber:hover { background: #d97706; transform: translateY(-1px); }

.dc-btn-clean-blue { background: #2563eb; color: #ffffff; }
.dc-btn-clean-blue:hover { background: #1d4ed8; transform: translateY(-1px); }

.dc-btn-clean-emerald { background: #059669; color: #ffffff; }
.dc-btn-clean-emerald:hover { background: #047857; transform: translateY(-1px); }

.dc-clean-svc-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 4px 2px;
  white-space: nowrap;
}

.dc-clean-svc-link:hover {
  color: var(--dc-text-head);
}

.dc-clean-svc-link i {
  font-size: 0.72rem;
  transition: transform 0.2s ease;
}

.dc-clean-svc-link:hover i {
  transform: translateX(3px);
}


/* ==========================================================================
   SECTION 4: OUR VERIFIED FLEET (Premium Visual Showcase)
   ========================================================================== */
.dc-fleet-section {
  background: #ffffff;
  padding: 56px 0 48px;
}

.dc-fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto 32px;
  align-items: stretch;
}

/* Individual Fleet Card */
.dc-fleet-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1.5px solid #e2e8f0;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
  position: relative;
  display: flex;
  flex-direction: column;
}

.dc-fleet-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.09);
  border-color: #cbd5e1;
}

/* Featured Sedan subtle emphasis */
.dc-fleet-card.is-featured {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 4px 20px -2px rgba(245, 158, 11, 0.09), 0 2px 8px rgba(15, 23, 42, 0.04);
}

.dc-fleet-card.is-featured:hover {
  border-color: #f59e0b;
}

/* ─────────────────────────────────────────────────────────────
   LARGE LANDSCAPE VEHICLE IMAGE SHOWCASE (CRITICAL)
   Complete Car Body Visible — Never Cropped (object-fit: contain)
   ───────────────────────────────────────────────────────────── */
.dc-fleet-img-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  background: radial-gradient(ellipse at 50% 62%, #ffffff 0%, #f8fafc 68%, #eef2f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 16px 20px;
  overflow: hidden;
  border-bottom: 1px solid #f1f5f9;
}

.dc-fleet-img {
  max-width: 94%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain !important;
  object-position: center;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.12));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dc-fleet-card:hover .dc-fleet-img {
  transform: scale(1.05) translateY(-3px);
  filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.18));
}

/* Tier Badge (Top-Left) */
.dc-fleet-tier-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #334155;
  border: 1px solid #e2e8f0;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dc-fleet-tier-badge.dc-badge-popular {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

/* Models Overlay at Bottom of Image Wrap */
.dc-fleet-models-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.dc-fleet-models-overlay span {
  color: #f8fafc;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dc-fleet-models-overlay span i {
  color: var(--dc-amber);
  font-size: 0.72rem;
}

/* ─────────────────────────────────────────────────────────────
   CARD BODY & VEHICLE INFO HIERARCHY
   ───────────────────────────────────────────────────────────── */
.dc-fleet-body {
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dc-fleet-head {
  margin-bottom: 12px;
}

.dc-fleet-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.dc-fleet-cat-label {
  display: none;
}

.dc-fleet-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  color: var(--dc-text-head);
  letter-spacing: -0.2px;
}

.dc-fleet-tagline {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  display: block;
  margin-top: 2px;
}

/* Specification Chips (Seats / Bags / AC) */
.dc-fleet-specs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.dc-fspec-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1e293b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 5px 9px;
  border-radius: 8px;
  white-space: nowrap;
}

.dc-fspec-item i {
  font-size: 0.75rem;
}

/* Short Benefit */
.dc-fleet-benefit {
  font-size: 0.82rem;
  color: var(--dc-text-muted);
  line-height: 1.45;
  margin: 0 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.dc-fleet-benefit i {
  margin-top: 3px;
  flex-shrink: 0;
}

/* Action Button */
.dc-fleet-cta-wrap {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.dc-btn-fleet-action {
  width: 100%;
  padding: 11px 16px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.88rem;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dc-btn-fleet-action:hover {
  background: var(--dc-amber);
  color: #ffffff;
  border-color: var(--dc-amber);
  transform: translateY(-1px);
}

.dc-btn-fleet-action.dc-btn-fleet-featured {
  background: #f59e0b;
  color: #ffffff;
  border-color: #f59e0b;
}

.dc-btn-fleet-action.dc-btn-fleet-featured:hover {
  background: #d97706;
  border-color: #d97706;
}

/* ─────────────────────────────────────────────────────────────
   FINAL SECTION 4 BOTTOM CTA
   "Not sure which car suits your journey?"
   ───────────────────────────────────────────────────────────── */
.dc-fleet-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.dc-fleet-bottom-inner {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.dc-fleet-bottom-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dc-btn-fleet-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  background: #0f172a;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dc-btn-fleet-explore:hover {
  background: #d97706;
  transform: translateY(-1px);
}


/* ==========================================================================
   SECTION 5: POPULAR CORRIDORS (Trending Bihar Routes)
   ========================================================================== */
.dc-corridors-section {
  background: var(--dc-bg-light, #f8fafc);
  padding: 64px 0 56px;
}

.dc-corridors-head {
  margin-bottom: 32px;
  text-align: center;
}

.dc-corridors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.dc-corridor-item-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.dc-corridor-item-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(245, 158, 11, 0.2);
}

/* Category Badge Row */
.dc-corridor-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.dc-corridor-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1.2;
}

/* Category Badge Color Accents */
.dc-cbadge-popular {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.dc-cbadge-airport {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.dc-cbadge-pilgrim {
  background: rgba(168, 85, 247, 0.12);
  color: #7e22ce;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.dc-cbadge-express {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.dc-cbadge-daily {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.dc-cbadge-local {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
  border: 1px solid rgba(99, 102, 241, 0.25);
}

.dc-cbadge-longhaul {
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.22);
}

.dc-cbadge-highway {
  background: rgba(30, 41, 59, 0.08);
  color: #1e293b;
  border: 1px solid rgba(30, 41, 59, 0.18);
}

/* Route Visual */
.dc-corridor-route {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  min-width: 0;
}

.dc-corridor-city {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-corridor-connector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.10);
  color: #d97706;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.dc-corridor-item-card:hover .dc-corridor-connector {
  background: #f59e0b;
  color: #ffffff;
  transform: translateX(3px);
}

.dc-corridor-arrow-icon {
  font-size: 0.8rem;
}

/* Footer: Meta (Distance/Time) + Book Cab CTA */
.dc-corridor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.dc-corridor-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.dc-cmeta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dc-cmeta-dot {
  color: #cbd5e1;
  font-size: 0.8rem;
}

.dc-btn-corridor-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f59e0b;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.25);
  flex-shrink: 0;
}

.dc-btn-corridor-book:hover,
.dc-corridor-item-card:hover .dc-btn-corridor-book {
  background: #d97706;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}

.dc-btn-corridor-book i {
  font-size: 0.72rem;
  transition: transform 0.2s ease;
}

.dc-corridor-item-card:hover .dc-btn-corridor-book i {
  transform: translateX(3px);
}

/* Backward compatibility fallbacks for one-way-taxi.blade.php */
.dc-corridor-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.dc-corridor-cities {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dc-text-head, #0f172a);
}

.dc-corridor-arrow {
  color: var(--dc-amber, #f59e0b);
  font-size: 0.85rem;
}

.dc-corridor-badge-live {
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.dc-corridor-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dc-corridor-stats {
  display: flex;
  gap: 12px;
}

.dc-stat-pill {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dc-corridor-book-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dc-amber, #f59e0b);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Tablet Responsive Breakpoint */
@media (max-width: 1024px) and (min-width: 641px) {
  .dc-corridors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}


/* ==========================================================================
   SECTION 6: FAQ (Numbered Luxury Accordion)
   ========================================================================== */
.dc-faq-section {
  background: #ffffff;
  padding: 64px 0 60px;
}

.dc-faq-head {
  margin-bottom: 32px;
  text-align: center;
}

.dc-faq-accordion-wrap {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dc-faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.dc-faq-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06);
}

.dc-faq-item.is-open {
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 6px 20px -4px rgba(245, 158, 11, 0.12), 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.dc-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 12px;
  transition: background 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.dc-faq-item.is-open .dc-faq-question {
  background: rgba(248, 250, 252, 0.85);
}

.dc-faq-q-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.dc-faq-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.dc-faq-item.is-open .dc-faq-num {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.dc-faq-q-text {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  margin: 0;
  transition: color 0.2s ease;
}

.dc-faq-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 0.72rem;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dc-faq-item.is-open .dc-faq-icon-circle {
  transform: rotate(180deg);
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #d97706;
}

.dc-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  opacity: 0;
}

.dc-faq-item.is-open .dc-faq-answer {
  max-height: 600px;
  opacity: 1;
}

.dc-faq-answer-inner {
  padding: 14px 20px 18px;
  border-top: 1px dashed #f1f5f9;
}

.dc-faq-answer p {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.62;
  padding: 0;
}

.dc-faq-answer p strong {
  color: #0f172a;
  font-weight: 700;
}


/* ==========================================================================
   SECTION 7: FINAL CTA (COMPACT, PREMIUM & CENTERED)
   ========================================================================== */
.dc-final-cta-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  position: relative;
  overflow: hidden;
}

.dc-final-cta-inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.dc-final-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--dc-radius-xl);
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
  letter-spacing: 0.6px;
}

.dc-final-cta-heading {
  font-size: clamp(1.85rem, 3.8vw, 2.75rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.dc-final-cta-desc {
  font-size: 1.05rem;
  color: #94a3b8;
  max-width: 620px;
  margin: 0 auto 24px;
  line-height: 1.5;
}

.dc-final-cta-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-bottom: 28px;
}

.dc-cta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #e2e8f0;
}

.dc-cta-chip i {
  color: var(--dc-amber);
  font-size: 1rem;
}

.dc-final-cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.dc-btn-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: var(--dc-radius-md);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
  transition: all 0.25s ease;
  min-height: 50px;
}

.dc-btn-cta-primary:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.55);
  color: #ffffff;
}

.dc-btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  padding: 14px 28px;
  border-radius: var(--dc-radius-md);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.25s ease;
  min-height: 50px;
}

.dc-btn-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: translateY(-2px);
}


/* ==========================================================================
   RESPONSIVE DESIGN (MOBILE-FIRST COMPREHENSIVE BREAKPOINTS)
   Screen targets: 320px, 360px, 375px, 390px, 414px, 576px, 768px, 992px, 1080px, 1366px
   ========================================================================== */

/* Large Desktops (>= 1366px) */
@media (min-width: 1366px) {
  .dc-container { max-width: 1280px; }
  .dc-booking-widget-wrapper { max-width: 1080px; }
}

/* Small Laptops & Large Tablets (<= 1080px) */
@media (max-width: 1080px) {
  .dc-fields-grid {
    grid-template-columns: 1.2fr auto 1.2fr 1fr 1fr;
    gap: 10px;
  }
  
  .dc-trust-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dc-clean-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .dc-clean-services-grid > .dc-clean-svc-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }
  
  .dc-fleet-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .dc-fleet-grid > .dc-fleet-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }
}

/* Medium Tablets (<= 992px) */
@media (max-width: 992px) {
  .dc-hero-section {
    padding: 36px 0 48px;
  }

  .dc-hero-title {
    font-size: clamp(1.85rem, 4vw, 2.5rem);
  }

  .dc-fields-grid {
    grid-template-columns: 1fr auto 1fr;
  }

  #dcDateCard,
  #dcTimeCard,
  #engineReturnDateWrapper,
  #engineReturnTimeWrapper {
    grid-column: span 1;
  }

  #engineLocalPkgWrapper {
    grid-column: 1 / -1;
  }

  .dc-results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* 4 Separate Trust Cards Tablet (2x2 Grid) */
  .dc-ctrust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* Mobile & Tablets Portrait (<= 768px) */
@media (max-width: 768px) {
  body {
    /* Prevent mobile dock or floating action pills from covering bottom content */
    padding-bottom: 74px !important;
  }

  .dc-section {
    padding: 48px 0;
  }

  .dc-hero-section {
    padding: 24px 0 36px;
  }

  .dc-hero-header-banner {
    margin-bottom: 16px;
  }

  .dc-hero-eyebrow-tag {
    font-size: 0.72rem;
    padding: 5px 12px;
    margin-bottom: 8px;
  }

  .dc-hero-title {
    font-size: clamp(1.55rem, 5.5vw, 2.15rem);
    margin-bottom: 6px;
  }

  .dc-hero-subtitle {
    font-size: 0.92rem;
    padding: 0 4px;
    line-height: 1.45;
  }

  /* Booking Widget Container on Mobile */
  .dc-booking-widget-wrapper {
    border-radius: var(--dc-radius-lg);
    box-shadow: 0 12px 36px -6px rgba(15, 23, 42, 0.12);
  }

  /* Journey Type Tabs Bar - Perfectly Centered, Responsive 3-Col Segmented */
  .dc-widget-tabs-bar {
    padding: 8px 8px 0;
    border-radius: var(--dc-radius-lg) var(--dc-radius-lg) 0 0;
  }

  .dc-tabs-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 4px;
  }

  .dc-tab-pill {
    width: 100%;
    padding: 8px 2px;
    gap: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: var(--dc-radius-sm) var(--dc-radius-sm) 0 0;
    min-height: 48px;
  }

  .dc-tab-icon {
    font-size: 1.05rem;
  }

  .dc-tab-label {
    align-items: center;
    text-align: center;
  }

  .dc-tab-label strong {
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .dc-tab-label small {
    font-size: 0.65rem;
    white-space: nowrap;
    opacity: 0.9;
  }

  /* Booking Form Body */
  .dc-widget-body {
    padding: 16px 12px 20px;
  }

  /* Mobile Fields Grid: Pickup full-width, centered Swap, Drop full-width, Date & Time 50/50 side-by-side */
  .dc-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  #dcPickupCard {
    grid-column: 1 / -1;
  }

  #dcSwapWrap {
    grid-column: 1 / -1;
    margin: -4px auto;
    z-index: 2;
  }

  #dcSwapWrap .dc-swap-locations-btn {
    transform: rotate(90deg);
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  #dcSwapWrap .dc-swap-locations-btn:hover {
    transform: rotate(270deg);
  }

  #dcDropCard {
    grid-column: 1 / -1;
  }

  #dcDateCard {
    grid-column: 1;
  }

  #dcTimeCard {
    grid-column: 2;
  }

  #engineReturnDateWrapper {
    grid-column: 1;
  }

  #engineReturnTimeWrapper {
    grid-column: 2;
  }

  #engineLocalPkgWrapper {
    grid-column: 1 / -1;
  }

  .dc-input-card {
    min-height: 56px;
    padding: 8px 12px;
    gap: 10px;
  }

  .dc-input-icon {
    font-size: 1.1rem;
    width: 22px;
  }

  .dc-field-label {
    font-size: 0.64rem;
  }

  .dc-search-input {
    font-size: 0.9rem;
  }

  /* Primary CTA: CHECK FARES Button on Mobile */
  .dc-widget-action-row {
    margin-top: 18px;
    width: 100%;
  }

  .dc-btn-check-fare {
    width: 100%;
    min-width: 0;
    padding: 15px 20px;
    font-size: 1rem;
    min-height: 52px;
    justify-content: center;
    border-radius: var(--dc-radius-md);
  }

  /* Section 2: Why Travel With Us Mobile */
  .dc-compact-trust-section {
    padding: 36px 0 32px;
  }

  .dc-ctrust-head {
    margin-bottom: 20px;
  }

  .dc-ctrust-title {
    font-size: 1.35rem;
  }

  .dc-ctrust-desc {
    font-size: 0.82rem;
  }

  .dc-ctrust-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
  }

  .dc-ctrust-card {
    padding: 18px 16px;
    border-radius: 14px;
  }

  .dc-ctrust-card-title {
    font-size: 0.98rem;
  }

  .dc-ctrust-card-desc {
    font-size: 0.8rem;
  }

  .dc-ctrust-strip-footer {
    gap: 8px 12px;
  }

  .dc-ctrust-pill {
    font-size: 0.76rem;
  }

  .dc-ctrust-pill-dot {
    display: none;
  }

  /* Other Section Grids */
  .dc-trust-strip-grid, 
  .dc-clean-services-grid, 
  .dc-fleet-grid,
  .dc-corridors-grid {
    grid-template-columns: 1fr;
  }

  .dc-clean-services-grid > .dc-clean-svc-card:nth-child(3) {
    grid-column: auto;
    max-width: 100%;
  }

  .dc-clean-svc-card {
    padding: 20px 16px 18px;
    border-radius: 16px;
  }

  .dc-clean-svc-title {
    font-size: 1.15rem;
  }

  .dc-clean-svc-desc {
    font-size: 0.82rem;
    min-height: auto;
    margin-bottom: 12px;
  }

  .dc-svc-benefits-row {
    margin-bottom: 12px;
  }

  .dc-svc-routes-wrap {
    margin-bottom: 14px;
    padding-top: 10px;
  }

  .dc-clean-svc-footer {
    gap: 8px;
    padding-top: 14px;
  }

  /* Section 4: Fleet Mobile */
  .dc-fleet-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 24px;
  }

  .dc-fleet-grid > .dc-fleet-card:nth-child(3) {
    grid-column: auto;
    max-width: 100%;
  }

  .dc-fleet-card {
    border-radius: 16px;
  }

  .dc-fleet-img-wrap {
    height: 195px;
    padding: 16px 14px 18px;
  }

  .dc-fleet-body {
    padding: 18px 16px 16px;
  }

  .dc-fleet-title {
    font-size: 1.15rem;
  }

  .dc-fleet-bottom-inner {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 16px;
    text-align: center;
  }

  .dc-btn-fleet-explore {
    width: 100%;
    justify-content: center;
  }

  /* Section 5: Popular Corridors Mobile */
  .dc-corridors-section {
    padding: 42px 0 36px;
  }

  .dc-corridors-head {
    margin-bottom: 20px;
  }

  .dc-corridors-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .dc-corridor-item-card {
    padding: 13px 14px 12px;
    border-radius: 12px;
  }

  .dc-corridor-badge-wrap {
    margin-bottom: 6px;
  }

  .dc-corridor-badge {
    font-size: 0.65rem;
    padding: 2.5px 7px;
    letter-spacing: 0.03em;
  }

  .dc-corridor-route {
    margin-bottom: 8px;
    gap: 8px;
  }

  .dc-corridor-city {
    font-size: 1.02rem;
  }

  .dc-corridor-connector {
    width: 22px;
    height: 22px;
  }

  .dc-corridor-arrow-icon {
    font-size: 0.72rem;
  }

  .dc-corridor-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 8px;
    margin-top: 2px;
  }

  .dc-corridor-meta {
    font-size: 0.78rem;
    justify-content: flex-start;
  }

  .dc-btn-corridor-book {
    width: 100%;
    min-height: 38px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 8px;
    text-transform: uppercase;
  }

  /* Section 6: FAQ Mobile */
  .dc-faq-section {
    padding: 42px 0 38px;
  }

  .dc-faq-head {
    margin-bottom: 20px;
  }

  .dc-faq-accordion-wrap {
    gap: 10px;
  }

  .dc-faq-item {
    border-radius: 12px;
  }

  .dc-faq-question {
    padding: 13px 14px;
    gap: 10px;
    min-height: 46px;
  }

  .dc-faq-q-left {
    gap: 10px;
  }

  .dc-faq-num {
    width: 26px;
    height: 26px;
    font-size: 0.68rem;
    border-radius: 6px;
  }

  .dc-faq-q-text {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .dc-faq-icon-circle {
    width: 26px;
    height: 26px;
    font-size: 0.68rem;
  }

  .dc-faq-answer-inner {
    padding: 12px 14px 14px;
  }

  .dc-faq-answer p {
    font-size: 0.83rem;
    line-height: 1.55;
    padding: 0 !important;
  }

  /* Final CTA Mobile */
  .dc-final-cta-section {
    padding: 44px 0;
  }

  .dc-final-cta-heading {
    font-size: 1.65rem;
  }

  .dc-final-cta-desc {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  .dc-final-cta-chips {
    gap: 12px;
    margin-bottom: 24px;
  }

  .dc-final-cta-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .dc-btn-cta-primary, 
  .dc-btn-cta-secondary {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  /* Search Results & Fare Quotes (Step 1 Mobile) */
  .dc-search-results-section {
    padding: 24px 0 44px;
  }

  .dc-res-summary-card {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    gap: 12px;
  }

  .dc-res-summary-left {
    width: 100%;
  }

  .dc-res-route-title {
    font-size: 1.15rem;
    flex-wrap: wrap;
    gap: 8px;
  }

  .dc-res-summary-center {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .dc-metric-item {
    font-size: 0.8rem;
    padding: 6px 12px;
    justify-content: flex-start;
  }

  .dc-res-summary-right {
    width: 100%;
  }

  .dc-btn-modify-search {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .dc-res-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }

  .dc-res-heading {
    font-size: 1.15rem;
  }

  .dc-res-subtext {
    font-size: 0.8rem;
  }

  .dc-res-trust-badges {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .dc-trust-tag {
    font-size: 0.74rem;
    padding: 4px 10px;
  }

  /* Vehicle Cards Responsive (Tablet & Mobile) */
  .dc-vehicle-cards-list {
    gap: 18px;
    width: 100%;
  }

  .dc-veh-result-card {
    flex: 1 1 100%;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    border-radius: var(--dc-radius-md);
  }

  .dc-veh-card-inner {
    padding: 16px 14px 18px;
  }

  .dc-card-ribbon {
    font-size: 0.62rem;
    padding: 3px 10px;
  }

  .dc-veh-media {
    margin-bottom: 12px;
    position: relative;
  }

  .dc-veh-img-wrap {
    height: 155px;
    padding: 10px 12px 8px;
  }

  .dc-veh-thumb {
    max-width: 94%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain !important;
    object-position: center;
    display: block;
    margin: 0 auto;
  }

  .dc-veh-details {
    width: 100%;
    gap: 8px;
  }

  .dc-veh-header {
    gap: 2px;
  }

  .dc-veh-title {
    font-size: 1.15rem;
  }

  .dc-veh-models {
    font-size: 0.8rem;
  }

  .dc-veh-specs-row {
    gap: 5px;
  }

  .dc-vspec {
    font-size: 0.74rem;
    padding: 3px 7px;
  }

  .dc-veh-cta-column {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1.5px dashed #e2e8f0;
    gap: 10px;
  }

  .dc-fare-pricing-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .dc-amount {
    font-size: 1.55rem;
  }

  .dc-advance-badge {
    font-size: 0.7rem;
    padding: 3px 7px;
  }

  .dc-btn-book-now {
    width: 100%;
    min-height: 48px;
    font-size: 0.92rem;
    padding: 12px 18px;
  }

  .dc-instant-dispatch-note {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Step 2: Instant Confirmation Bottom-Sheet Modal for Mobile */
  .dc-modal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    z-index: 999999 !important;
    overflow: hidden !important;
  }

  .dc-booking-modal-dialog {
    border-radius: 24px 24px 0 0 !important;
    height: 92vh !important;
    height: 92dvh !important;
    max-height: 92dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-bottom: none !important;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.4) !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .dc-modal-backdrop.is-open .dc-booking-modal-dialog {
    transform: translateY(0) !important;
  }

  .dc-modal-drag-handle-wrap {
    display: flex !important;
    justify-content: center !important;
    padding: 8px 0 4px !important;
    cursor: pointer !important;
    touch-action: pan-y;
    flex-shrink: 0 !important;
    background: #ffffff !important;
  }

  .dc-modal-drag-handle {
    width: 42px !important;
    height: 5px !important;
    background: #cbd5e1 !important;
    border-radius: 4px !important;
    display: block !important;
  }

  .dc-modal-header {
    position: sticky !important;
    top: 0 !important;
    background: #ffffff !important;
    z-index: 10 !important;
    padding: 10px 16px 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
  }

  .dc-modal-title {
    font-size: 1.1rem !important;
  }

  .dc-modal-subtext {
    font-size: 0.75rem !important;
  }

  .dc-modal-body {
    padding: 12px 16px 36px !important;
    gap: 12px !important;
    overflow-y: scroll !important;
    flex: 1 1 0px !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .dc-modal-cab-summary {
    padding: 8px 10px !important;
    gap: 10px !important;
  }

  .dc-modal-cab-media {
    width: 58px !important;
    height: 40px !important;
    min-width: 58px !important;
    background: radial-gradient(ellipse at 50% 60%, #fff 0%, #f8fafc 70%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 2px 4px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .dc-modal-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .dc-modal-cab-name {
    font-size: 0.92rem !important;
  }

  .dc-modal-cab-models {
    font-size: 0.68rem !important;
  }

  .dc-modal-fare-badge strong {
    font-size: 1.1rem !important;
  }

  /* Prevent iOS Safari input auto-zoom by keeping font-size >= 16px */
  .dc-mfield-input {
    font-size: 16px !important;
    min-height: 48px !important;
  }


  /* Hide background docks & floating buttons when modal is open */
  body.dc-modal-locked {
    overflow: hidden !important;
    touch-action: none !important;
  }

  body.dc-modal-locked .dc-booking-modal-dialog {
    touch-action: auto !important;
  }

  body.dc-modal-locked .dc-modal-body {
    touch-action: pan-y !important;
  }

  body.dc-modal-locked .dc-mobile-dock,
  body.dc-modal-locked .dc-floating-actions,
  body.dc-modal-locked [class*="dc-dock-"],
  body.dc-modal-locked [class*="dc-float-"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  /* Touch Target Safety for interactive items */
  .dc-tab-pill, 
  .dc-btn-check-fare, 
  .dc-btn-select-veh, 
  .dc-btn-submit-enquiry, 
  .dc-btn-clean-svc, 
  .dc-btn-fleet-select, 
  .dc-btn-fleet-action, 
  .dc-btn-fleet-explore, 
  .dc-faq-question, 
  .dc-btn-cta-primary, 
  .dc-btn-cta-secondary, 
  .dc-route-chip, 
  .dc-btn-confirm-booking, 
  .dc-btn-cancel-edit, 
  .dc-btn-modify-search {
    min-height: 48px;
  }

  .dc-clear-input-btn {
    min-height: 22px !important;
    height: 22px !important;
    width: 22px !important;
  }
}

/* Small Phones (<= 480px, including 320px, 375px, 390px, 414px) */
@media (max-width: 480px) {
  .dc-container {
    padding: 0 12px;
  }

  .dc-section-title {
    font-size: 1.7rem;
  }

  .dc-hero-title {
    font-size: clamp(1.45rem, 6.5vw, 1.85rem);
  }

  .dc-hero-eyebrow-tag {
    font-size: 0.68rem;
    padding: 4px 10px;
  }

  .dc-widget-tabs-bar {
    padding: 6px 4px 0;
  }

  .dc-tab-pill {
    padding: 6px 2px;
    gap: 2px;
  }

  .dc-tab-icon {
    font-size: 0.95rem;
  }

  .dc-tab-label strong {
    font-size: 0.74rem;
  }

  .dc-tab-label small {
    font-size: 0.6rem;
  }

  .dc-widget-body {
    padding: 14px 10px 18px;
  }

  .dc-input-card {
    min-height: 52px;
    padding: 6px 10px;
    gap: 8px;
  }

  .dc-field-label {
    font-size: 0.62rem;
  }

  .dc-search-input {
    font-size: 0.85rem;
  }

  .dc-btn-check-fare {
    font-size: 0.95rem;
    padding: 14px 16px;
    min-height: 50px;
  }

  .dc-cta-chip {
    font-size: 0.84rem;
  }
}

/* Ultra-Small Phones (<= 360px down to 320px) */
@media (max-width: 360px) {
  .dc-container {
    padding: 0 8px;
  }

  .dc-tab-label strong {
    font-size: 0.7rem;
  }

  .dc-tab-label small {
    font-size: 0.58rem;
  }

  .dc-btn-check-fare {
    font-size: 0.88rem;
    letter-spacing: 0;
  }

  .dc-veh-card-inner {
    padding: 14px 10px 16px;
  }

  .dc-veh-img-wrap {
    height: 135px;
    padding: 8px 10px 6px;
  }

  .dc-veh-brand-badge {
    top: 6px;
    right: 6px;
    padding: 2px 6px;
  }

  .dc-veh-brand-logo {
    height: 12px;
    max-width: 50px;
  }

  .dc-vspec {
    font-size: 0.7rem;
    padding: 2px 6px;
  }

  .dc-ctrust-card {
    padding: 14px 12px;
  }

  .dc-ctrust-card-title {
    font-size: 0.92rem;
  }

  .dc-ctrust-pill {
    font-size: 0.72rem;
  }

  .dc-clean-svc-card {
    padding: 16px 12px 14px;
  }

  .dc-clean-svc-title {
    font-size: 1.05rem;
  }

  .dc-btn-clean-svc {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .dc-fleet-img-wrap {
    height: 175px;
    padding: 12px 10px 14px;
  }

  .dc-fleet-body {
    padding: 14px 12px;
  }

  .dc-fleet-title {
    font-size: 1.05rem;
  }

  .dc-fspec-item {
    font-size: 0.7rem;
    padding: 4px 7px;
  }

  .dc-btn-fleet-action {
    padding: 9px 12px;
    font-size: 0.82rem;
  }

  /* Section 5: Ultra-compact for 320px - 414px phones */
  .dc-corridor-item-card {
    padding: 12px 12px 11px;
    border-radius: 11px;
  }

  .dc-corridor-city {
    font-size: 0.98rem;
  }

  .dc-corridor-connector {
    width: 20px;
    height: 20px;
  }

  .dc-corridor-arrow-icon {
    font-size: 0.68rem;
  }

  .dc-corridor-meta {
    font-size: 0.75rem;
    gap: 6px;
  }

  .dc-btn-corridor-book {
    min-height: 36px;
    font-size: 0.78rem;
  }

  /* Section 6: FAQ Ultra-compact for 320px - 414px */
  .dc-faq-item {
    border-radius: 11px;
  }

  .dc-faq-question {
    padding: 11px 12px;
    gap: 8px;
    min-height: 44px;
  }

  .dc-faq-q-left {
    gap: 8px;
  }

  .dc-faq-num {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
    border-radius: 5px;
  }

  .dc-faq-q-text {
    font-size: 0.85rem;
    line-height: 1.32;
  }

  .dc-faq-icon-circle {
    width: 24px;
    height: 24px;
    font-size: 0.62rem;
  }

  .dc-faq-answer-inner {
    padding: 10px 12px 12px;
  }

  .dc-faq-answer p {
    font-size: 0.8rem;
    line-height: 1.5;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END OF HOMEPAGE STYLES — INNER PAGE STYLES BELOW
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   INNER PAGES SHARED: LUXURY BENEFITS BENTO GRID & PIPELINE
   ═══════════════════════════════════════════════════════════════ */
.ip-luxury-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ip-benefit-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.ip-benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
  transition: background 0.28s ease;
}

.ip-benefit-card:hover {
  transform: translateY(-5px);
  border-color: #cbd5e1;
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.1);
}

.ip-bcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ip-bcard-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: transform 0.25s ease;
}

.ip-benefit-card:hover .ip-bcard-icon {
  transform: scale(1.1);
}

.ip-bcard-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 50px;
}

.ip-bcard-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--dc-text-head);
  margin: 0 0 6px 0;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.ip-bcard-desc {
  font-size: 0.85rem;
  color: var(--dc-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* 6 Theme Variants */
.ip-bcard-blue:hover::before { background: #3b82f6; }
.ip-bcard-blue .ip-bcard-icon {
  background: #eff6ff;
  color: #2563eb;
  border: 1.5px solid #bfdbfe;
}
.ip-bcard-blue .ip-bcard-badge {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.ip-bcard-emerald:hover::before { background: #10b981; }
.ip-bcard-emerald .ip-bcard-icon {
  background: #ecfdf5;
  color: #059669;
  border: 1.5px solid #a7f3d0;
}
.ip-bcard-emerald .ip-bcard-badge {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.ip-bcard-amber:hover::before { background: #f59e0b; }
.ip-bcard-amber .ip-bcard-icon {
  background: #fffbeb;
  color: #d97706;
  border: 1.5px solid #fde68a;
}
.ip-bcard-amber .ip-bcard-badge {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.ip-bcard-purple:hover::before { background: #8b5cf6; }
.ip-bcard-purple .ip-bcard-icon {
  background: #fdf4ff;
  color: #9333ea;
  border: 1.5px solid #f5d0fe;
}
.ip-bcard-purple .ip-bcard-badge {
  background: #fdf4ff;
  color: #7e22ce;
  border: 1px solid #f5d0fe;
}

.ip-bcard-rose:hover::before { background: #f43f5e; }
.ip-bcard-rose .ip-bcard-icon {
  background: #fff1f2;
  color: #e11d48;
  border: 1.5px solid #fecdd3;
}
.ip-bcard-rose .ip-bcard-badge {
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}

.ip-bcard-teal:hover::before { background: #14b8a6; }
.ip-bcard-teal .ip-bcard-icon {
  background: #f0fdfa;
  color: #0d9488;
  border: 1.5px solid #99f6e4;
}
.ip-bcard-teal .ip-bcard-badge {
  background: #f0fdfa;
  color: #0f766e;
  border: 1px solid #99f6e4;
}

/* Pipeline Grid */
.ip-fare-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.ip-pipeline-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.ip-pipeline-card:hover {
  transform: translateY(-4px);
  border-color: #cbd5e1;
  box-shadow: 0 14px 30px -6px rgba(15, 23, 42, 0.08);
}

.ip-pipeline-card.is-final {
  border-color: #a7f3d0;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.ip-pipeline-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ip-pipeline-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.ip-pipeline-icon.icon-pickup {
  background: #fffbeb;
  color: #d97706;
  border: 1.5px solid #fde68a;
}

.ip-pipeline-icon.icon-drop {
  background: #eff6ff;
  color: #2563eb;
  border: 1.5px solid #bfdbfe;
}

.ip-pipeline-icon.icon-invoice {
  background: #ecfdf5;
  color: #059669;
  border: 1.5px solid #a7f3d0;
}

.ip-step-tag {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 50px;
  background: #f1f5f9;
  color: #475569;
}

.ip-step-tag.tag-final {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.ip-pipeline-card-body {
  flex: 1;
}

.ip-pipeline-title {
  font-size: 1.12rem;
  font-weight: 900;
  color: var(--dc-text-head);
  margin: 0 0 6px 0;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.ip-pipeline-desc {
  font-size: 0.84rem;
  color: var(--dc-text-muted);
  line-height: 1.5;
  margin: 0;
}

.ip-pipeline-status {
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

.ip-status-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ip-status-badge.badge-amber {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.ip-status-badge.badge-blue {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.ip-status-badge.badge-green {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

@media (max-width: 991px) {
  .ip-luxury-benefits-grid,
  .ip-fare-pipeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 576px) {
  .ip-luxury-benefits-grid,
  .ip-fare-pipeline-grid {
    grid-template-columns: 1fr;
  }
}

/* Local Package Cards */
.ip-packages-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.ip-pkg-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 36px 28px 28px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ip-pkg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.12);
  border-color: #cbd5e1;
}

.ip-pkg-card.featured {
  border: 2px solid #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 35%);
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.15);
}

.ip-pkg-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 50px;
}

.ip-pkg-badge.badge-featured {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  color: #0f172a;
}

.ip-pkg-title {
  font-family: var(--dc-font-heading);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--dc-text-head);
  margin: 0 0 6px 0;
}

.ip-pkg-metrics {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #e2e8f0;
}

.ip-pkg-duration {
  font-family: var(--dc-font-heading);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--dc-text-head);
  line-height: 1;
}

.ip-pkg-km-tag {
  font-size: 1rem;
  font-weight: 800;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 4px 10px;
  border-radius: 8px;
}

.ip-pkg-km-tag.is-dark {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.ip-pkg-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ip-pkg-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--dc-text-body);
}

.ip-btn-select-pkg {
  width: 100%;
  padding: 13px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  color: var(--dc-text-head);
  font-family: var(--dc-font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.ip-btn-select-pkg:hover,
.ip-btn-select-pkg.is-featured,
.ip-pkg-card.featured .ip-btn-select-pkg {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: #f59e0b;
  color: #0f172a !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}

@media (max-width: 991px) {
  .ip-packages-3col {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DRIVER PARTNER PAGE MODERN CARDS & FORM
   ═══════════════════════════════════════════════════════════════ */
.dc-metrics-strip-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 860px;
  margin: 28px auto 0;
}

.dc-stat-box {
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  padding: 16px 12px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  transition: transform 0.25s ease;
}

.dc-stat-box:hover {
  transform: translateY(-3px);
  border-color: #f59e0b;
}

.dc-stat-box strong {
  display: block;
  font-family: var(--dc-font-heading);
  font-size: 1.45rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.dc-stat-box span {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
  margin-top: 4px;
}

.ip-docs-checklist-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  margin-bottom: 20px;
}

.ip-docs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.96rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e2e8f0;
}

.ip-docs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ip-doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
}

.ip-instant-call-banner {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
  border: 1.5px solid #fde68a;
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.08);
}

.ip-instant-call-banner strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 2px;
}

.ip-instant-call-banner p {
  font-size: 0.84rem;
  color: #78350f;
  margin: 0;
}

.ip-driver-form-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.ip-driver-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e2e8f0;
}

.ip-driver-form-header h3 {
  font-size: 1.35rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.015em;
}

.ip-driver-form-header p {
  font-size: 0.84rem;
  color: #64748b;
  margin: 0;
}

@media (max-width: 991px) {
  .dc-metrics-strip-4col {
    grid-template-columns: repeat(2, 1fr);
  }
  .ip-partner-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dc-hero-booking-centerpiece {
    max-width: 100%;
    padding: 0 4px;
  }
  .dc-fields-grid {
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .dc-widget-tabs-bar {
    padding: 8px 6px;
    background: #f8fafc;
  }

  .dc-tabs-group {
    width: 100%;
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-sizing: border-box;
  }

  .dc-tab-pill {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 3px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.2s ease;
  }

  .dc-tab-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 0.74rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 3px auto;
    flex-shrink: 0;
  }

  .dc-tab-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    min-width: 0;
  }

  .dc-tab-label strong {
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.15;
    letter-spacing: -0.1px;
    display: block;
  }

  .dc-tab-label small {
    display: block !important;
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
    line-height: 1.1;
    margin-top: 1px;
    opacity: 0.8;
  }

  .dc-widget-quick-routes {
    padding: 8px 12px;
    font-size: 0.72rem;
  }

  .dc-widget-body {
    padding: 14px 12px 18px;
  }

  .dc-fields-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .dc-input-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-height: 52px;
    box-sizing: border-box;
  }

  #dcPickupCard,
  #dcDropCard,
  #engineLocalPkgWrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .dc-swap-btn-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: -4px 0;
    z-index: 4;
  }

  .dc-swap-locations-btn {
    transform: rotate(90deg);
    width: 34px;
    height: 34px;
  }

  .dc-swap-locations-btn:hover {
    transform: rotate(90deg) scale(1.08);
  }

  #dcDateCard,
  #dcTimeCard {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  #engineReturnDateWrapper,
  #engineReturnTimeWrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .dc-widget-action-row {
    margin-top: 14px;
  }

  .dc-btn-check-fare {
    width: 100% !important;
    min-width: 100% !important;
    padding: 13px 16px;
    font-size: 0.92rem;
    justify-content: center;
  }

  /* Search Results Mobile */
  .dc-res-summary-card {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .dc-res-route-title {
    font-size: 1.15rem;
    flex-wrap: wrap;
  }

  .dc-res-metrics-group {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }

  .dc-metric-pill {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  .dc-btn-modify-search {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  .dc-res-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dc-res-heading {
    font-size: 1.1rem;
  }

  .dc-vehicle-results-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dc-veh-card {
    padding: 16px;
  }

  .dc-passenger-booking-box {
    padding: 18px 16px;
  }

  .dc-passenger-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 576px) {
  .ip-docs-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT US MODERN CHANNELS & CARDS
   ═══════════════════════════════════════════════════════════════ */
.ip-contact-card-modern {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 18px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.ip-contact-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: transparent;
  transition: background 0.25s ease;
}

.ip-contact-card-modern:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.ip-ccard-amber:hover::before { background: #f59e0b; }
.ip-ccard-amber .ip-contact-icon-wrap {
  background: #fffbeb;
  color: #d97706;
  border: 1.5px solid #fde68a;
}

.ip-ccard-emerald:hover::before { background: #10b981; }
.ip-ccard-emerald .ip-contact-icon-wrap {
  background: #ecfdf5;
  color: #059669;
  border: 1.5px solid #a7f3d0;
}

.ip-ccard-blue:hover::before { background: #3b82f6; }
.ip-ccard-blue .ip-contact-icon-wrap {
  background: #eff6ff;
  color: #2563eb;
  border: 1.5px solid #bfdbfe;
}

.ip-ccard-purple:hover::before { background: #8b5cf6; }
.ip-ccard-purple .ip-contact-icon-wrap {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1.5px solid #ddd6fe;
}

.ip-contact-icon-wrap {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: transform 0.25s ease;
}

.ip-contact-card-modern:hover .ip-contact-icon-wrap {
  transform: scale(1.08);
}

.ip-contact-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ip-contact-card-text small {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.ip-contact-main-link {
  font-family: var(--dc-font-heading);
  font-size: 1.12rem;
  font-weight: 900;
  color: #0f172a !important;
  text-decoration: none !important;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.ip-contact-main-link:hover {
  color: #d97706 !important;
}

.ip-contact-address-text {
  font-family: var(--dc-font-heading);
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
}

.ip-contact-card-text span {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   GOOGLE MAPS PLACES AUTOCOMPLETE WIDGET (Ultra Luxury Styling)
   ═══════════════════════════════════════════════════════════════ */
/* 1. Hide "Powered by Google" bar & logo completely */
.pac-logo::after,
.hdpi.pac-logo::after {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background-image: none !important;
  visibility: hidden !important;
}

/* 2. Main Dropdown Card */
.pac-container {
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  font-family: var(--dc-font-sans, 'Plus Jakarta Sans', 'Inter', sans-serif) !important;
  margin-top: 10px !important;
  margin-left: -52px !important; /* Shifts box to align directly with the outer search card left edge */
  z-index: 9999999 !important;
  overflow: hidden !important;
  padding: 8px !important;
  min-width: 320px !important;
  max-width: 520px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .pac-container {
    margin-left: 0 !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
  }
}

/* 3. Each Location Suggestion Item */
.pac-item {
  padding: 10px 14px !important;
  font-size: 0.88rem !important;
  color: #64748b !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  border-top: none !important;
  border-radius: 12px !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  line-height: 1.4 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pac-item:last-child {
  margin-bottom: 0 !important;
}

.pac-item:hover,
.pac-item-selected {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  transform: translateX(3px) !important;
}

/* 4. Luxury Custom Location Pin Icon */
.pac-icon,
.pac-icon-marker {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background-color: #fef3c7 !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  position: relative !important;
  transition: transform 0.2s ease !important;
}

.pac-item:hover .pac-icon {
  background-color: #fde68a !important;
  transform: scale(1.08) !important;
}

.pac-icon::before {
  content: '' !important;
  width: 14px !important;
  height: 14px !important;
  background-color: #d97706 !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* 5. Main Place Title (Bold & Crisp) */
.pac-item-query {
  font-family: var(--dc-font-heading) !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  display: inline-block !important;
  margin-right: 4px !important;
}

/* 6. Matched User Search Keyword (Highlighted in Amber) */
.pac-matched {
  font-weight: 900 !important;
  color: #b45309 !important;
  background-color: rgba(245, 158, 11, 0.12) !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   LOCAL TAXI MODE: BALANCED & EQUAL INPUT SIZING (DESKTOP / TABLET / MOBILE)
   Ensures RENTAL PACKAGE card and select match Pickup, Date, and Time perfectly.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Desktop (>= 992px): 4-Column Balanced Grid (Pickup [1.35fr] = Pkg [1.35fr], Date [0.9fr], Time [0.85fr]) */
@media (min-width: 992px) {
  .dc-fields-grid.mode-local {
    display: grid !important;
    grid-template-columns: 1.35fr 1.35fr 0.9fr 0.85fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .dc-fields-grid.mode-local #dcPickupCard {
    order: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 60px !important;
    height: 60px !important;
    box-sizing: border-box !important;
  }

  .dc-fields-grid.mode-local #engineLocalPkgWrapper {
    order: 2 !important;
    grid-column: 2 !important;
    width: 100% !important;
    min-height: 60px !important;
    height: 60px !important;
    box-sizing: border-box !important;
    display: flex !important;
  }

  .dc-fields-grid.mode-local #dcDateCard {
    order: 3 !important;
    grid-column: 3 !important;
    width: 100% !important;
    min-height: 60px !important;
    height: 60px !important;
    box-sizing: border-box !important;
  }

  .dc-fields-grid.mode-local #dcTimeCard {
    order: 4 !important;
    grid-column: 4 !important;
    width: 100% !important;
    min-height: 60px !important;
    height: 60px !important;
    box-sizing: border-box !important;
  }

  .dc-fields-grid.mode-local #dcSwapWrap,
  .dc-fields-grid.mode-local #dcDropCard,
  .dc-fields-grid.mode-local #engineReturnDateWrapper,
  .dc-fields-grid.mode-local #engineReturnTimeWrapper {
    display: none !important;
  }
}

/* 2. Tablet (769px to 991px): Balanced 2x2 Grid (Pickup & Pkg top row 50/50, Date & Time bottom row 50/50) */
@media (min-width: 769px) and (max-width: 991px) {
  .dc-fields-grid.mode-local {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .dc-fields-grid.mode-local #dcPickupCard {
    order: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    box-sizing: border-box !important;
  }

  .dc-fields-grid.mode-local #engineLocalPkgWrapper {
    order: 2 !important;
    grid-column: 2 !important;
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    box-sizing: border-box !important;
    display: flex !important;
  }

  .dc-fields-grid.mode-local #dcDateCard {
    order: 3 !important;
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    box-sizing: border-box !important;
  }

  .dc-fields-grid.mode-local #dcTimeCard {
    order: 4 !important;
    grid-column: 2 !important;
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    box-sizing: border-box !important;
  }

  .dc-fields-grid.mode-local #dcSwapWrap,
  .dc-fields-grid.mode-local #dcDropCard,
  .dc-fields-grid.mode-local #engineReturnDateWrapper,
  .dc-fields-grid.mode-local #engineReturnTimeWrapper {
    display: none !important;
  }
}

/* 3. Mobile (<= 768px): Clean Consistent Uniform Height Inputs */
@media (max-width: 768px) {
  .dc-fields-grid.mode-local {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .dc-fields-grid.mode-local #dcPickupCard,
  .dc-fields-grid.mode-local #engineLocalPkgWrapper,
  .dc-fields-grid.mode-local #dcDateCard,
  .dc-fields-grid.mode-local #dcTimeCard {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
  }

  .dc-fields-grid.mode-local #dcPickupCard { order: 1 !important; }
  .dc-fields-grid.mode-local #engineLocalPkgWrapper { order: 2 !important; display: flex !important; }
  .dc-fields-grid.mode-local #dcDateCard { order: 3 !important; }
  .dc-fields-grid.mode-local #dcTimeCard { order: 4 !important; }

  .dc-fields-grid.mode-local #dcSwapWrap,
  .dc-fields-grid.mode-local #dcDropCard,
  .dc-fields-grid.mode-local #engineReturnDateWrapper,
  .dc-fields-grid.mode-local #engineReturnTimeWrapper {
    display: none !important;
  }
}