/* Modern Container */
.c2o-ts {
  max-width: 720px;
  margin: 20px auto;
  padding: 24px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  position: relative;
  width: 100%;
}

/* Remove white card on success screen */
.c2o-ts.c2o-success-full {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.c2o-ts::before { display: none; }

.c2o-ts > * {
  position: relative;
  z-index: 2;
}

/* Modern Typography */
.c2o-ts h3 {
  margin: 0 0 20px 0;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, #cf142b, #00247d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  letter-spacing: -0.5px;
}

/* Modern Form Elements */
.c2o-ts label {
  display: block;
  margin: 20px 0 8px 0;
  font-weight: 600;
  color: #2d3748;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.c2o-ts input, .c2o-ts textarea, .c2o-ts select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* Validation styles */
.c2o-field-error {
  border-color: #e53e3e !important;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12) !important;
}
.c2o-error {
  margin-top: 6px;
  color: #e53e3e;
  font-size: 12px;
}
.c2o-journey-card { background:#f7f7fb; border-radius:16px; padding:16px 70px 16px 16px; border:1px solid #e6e6f0; position:relative; }
.c2o-address-row { position:relative; display:block; margin:10px 0; }
.c2o-address-row input { padding-left:14px; padding-right:70px; border-radius:10px; }

/* Single journey rail on the right spanning both fields */
.c2o-journey-rail { position:absolute; right:20px; top:16px; bottom:16px; width:36px; display:flex; align-items:center; justify-content:center; z-index:1; }
/* Create a rail with a gap at center using two gradients (top and bottom) */
.c2o-journey-rail::before, .c2o-journey-rail::after { content:''; position:absolute; left:50%; width:6px; transform:translateX(-50%); background:linear-gradient(180deg,#cf142b,#00247d); border-radius:3px; box-shadow:0 0 0 2px rgba(0,0,0,.05) inset; }
.c2o-journey-rail::before { top:8px; bottom:50%; margin-bottom:22px; }
.c2o-journey-rail::after  { top:50%; bottom:8px; margin-top:22px; }
.c2o-rail-cap { position:absolute; left:50%; width:18px; height:18px; border:3px solid #cf142b; border-radius:50%; background:#ffffff; transform:translateX(-50%); box-shadow:0 2px 6px rgba(0,0,0,.08); }
.c2o-rail-cap.top { top:0; }
.c2o-rail-cap.bottom { bottom:-6px; }
.c2o-rail-compass { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%; background:#ffffff; border:3px solid transparent; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.18); z-index:2; }
.c2o-rail-compass { border-image: linear-gradient(135deg,#cf142b,#00247d) 1; }
.c2o-rail-compass::before{ content:'+'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-weight:900; font-size:26px; color:#001b5c; }
.c2o-rail-actions{ display:none; }
.c2o-add-stop,.c2o-remove-stop{ width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid transparent; box-shadow:0 6px 16px rgba(0,0,0,.14); cursor:pointer; position:relative; transition:transform .15s ease, box-shadow .15s ease; }
.c2o-remove-stop{ border-image: linear-gradient(135deg,#8892a0,#334155) 1; }
.c2o-remove-stop::before{ content:'−'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-weight:900; font-size:18px; color:#334155; }
.c2o-rail-compass:hover{ box-shadow:0 12px 26px rgba(0,36,125,.30); transform:translate(-50%,-52%); }

/* Ensure the rail-centered add button is absolutely centered and not overridden */
.c2o-rail-compass.c2o-add-stop{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 3px solid transparent !important;
}

/* Swap button between fields */
.c2o-swap{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:transparent; border:none; border-radius:0; box-shadow:none; z-index:2; cursor:pointer; width:auto; height:auto; padding:0; }
.c2o-swap::before{ content:'↕'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-weight:900; font-size:28px; color:#001b5c; }
.c2o-swap:hover{ transform:translate(-50%,-50%); box-shadow:none; }

/* Minus button that appears left of the rail when vias exist */
.c2o-rail-minus{ position:absolute; top:50%; right:64px; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid transparent; box-shadow:0 8px 18px rgba(0,0,0,.16); cursor:pointer; display:none; }
.c2o-rail-minus{ border-image: linear-gradient(135deg,#8892a0,#334155) 1; }
.c2o-rail-minus::before{ content:'−'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-weight:900; font-size:18px; color:#334155; }
.c2o-rail-minus:hover{ box-shadow:0 12px 24px rgba(0,36,125,.24); }


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

/* Grid Layout */
.c2o-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}

/* Modern Vehicle Cards */
.c2o-vehicles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 16px 0;
}

/* Route chips like reference */
.c2o-route-chips{ display:flex; flex-direction:column; gap:8px; margin:6px 0 10px 0; }
.c2o-chip{ background:#0b3a6d; color:#fff; padding:10px 14px; border-radius:8px; box-shadow:0 6px 14px rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.15); }
.c2o-chip strong{ margin-right:6px; color:#fff; }
.c2o-chip-start{ background:#0b3a6d; }
.c2o-chip-end{ background:#0b3a6d; }

/* Mini route map on step 2 */
.c2o-mini-map{ width:100%; height:180px; border-radius:12px; border:2px solid #e2e8f0; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,0.08); margin:10px 0 16px 0; }

.c2o-vehicle {
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.c2o-vehicle-actions { display:grid; grid-template-columns: 1fr 12px 1fr; gap:16px; margin-top:10px; width:100%; align-items:stretch; }
.c2o-plan-block{ min-width:0; background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; box-shadow:0 4px 10px rgba(15,23,42,0.06); }
.c2o-plan-title{ font-weight:800; color:#0f172a; font-size:13px; text-transform:uppercase; letter-spacing:.6px; margin-bottom:2px; }
.c2o-plan-divider{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.c2o-plan-divider::before{
  content:'';
  width:3px;
  height:64px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(148,163,184,0.1),rgba(148,163,184,0.9),rgba(148,163,184,0.1));
  box-shadow:0 0 0 1px rgba(148,163,184,0.25);
}
.c2o-price-chip { flex:0 0 auto; min-width:120px; text-align:center; padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; font-size:12px; }
.c2o-price-oneway { background: #ffd166; color:#3d2c00; border:1px solid #f6c75a; }
.c2o-price-return { background: #cde1ff; color:#00247d; border:1px solid #b6d2ff; }
.c2o-price-chip:hover { transform: translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.15); }

/* Distinguish Standard vs Premium visually */
.c2o-plan-standard .c2o-plan-title {
  color:#0f172a;
}

.c2o-plan-premium {
  background: radial-gradient(circle at top left,#fff7ed 0,#fef3c7 26%,#fee2e2 60%,#e0f2fe 100%);
  border-color:#facc15;
  box-shadow:0 8px 18px rgba(234,179,8,0.25);
}

.c2o-plan-premium .c2o-plan-title {
  color:#b45309;
}

.c2o-plan-premium .c2o-price-chip {
  box-shadow:0 6px 16px rgba(15,23,42,0.15);
}

.c2o-vehicle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #cf142b, #00247d);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.c2o-vehicle:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  border-color: #667eea;
}

.c2o-vehicle:hover::before {
  transform: scaleX(1);
}

.c2o-vehicle.c2o-selected {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(207, 20, 43, 0.06), rgba(0, 36, 125, 0.06));
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(102, 126, 234, 0.2);
}

.c2o-vehicle.c2o-selected::before {
  transform: scaleX(1);
}

.c2o-vehicle-image {
  width: 120px;
  height: 72px;
  background: linear-gradient(135deg, #f7fafc, #edf2f7);
  border-radius: 10px;
  margin: 4px 0 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #a0aec0;
  overflow: hidden;
}

.c2o-vehicle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.c2o-vehicle-name {
  font-size: 18px;
  font-weight: 700;
  color: #2d3748;
  margin: 2px 0 2px 0;
}

.c2o-vehicle-details {
  color: #718096;
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.c2o-vehicle-details .c2o-vd-pass,
.c2o-vehicle-details .c2o-vd-lug {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #1e293b;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15,23,42,0.08);
}

.c2o-vehicle-details .c2o-vd-pass::before {
  content: "👤";
  font-size: 13px;
}

.c2o-vehicle-details .c2o-vd-lug::before {
  content: "🧳";
  font-size: 13px;
}

@media (max-width: 480px){
  /* Keep meta data readable and aligned on very small screens */
  .c2o-vehicle-details{ flex-wrap:wrap; }
  .c2o-vehicle-details .c2o-vd-dot{ display: none; }
}

.c2o-vehicle-price {
  color: #667eea;
  font-weight: 600;
  font-size: 16px;
}

/* Modern Radio Button */
.c2o-return-container {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 16px;
  margin: 16px 0;
  padding: 14px 16px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 16px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
}

.c2o-return-container:hover {
  border-color: rgba(102, 126, 234, 0.2);
  background: rgba(102, 126, 234, 0.08);
}

.c2o-return-radio {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.c2o-return-radio input[type="checkbox"] {
  appearance: none;
  width: 28px;
  height: 28px;
  border: 3px solid #cbd5e0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.c2o-return-radio input[type="checkbox"]:hover {
  border-color: #667eea;
  transform: scale(1.05);
}

.c2o-return-radio input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: #667eea;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.c2o-return-radio input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.c2o-return-label {
  font-weight: 700;
  color: #2d3748;
  font-size: 16px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-grow: 1;
  margin-left: 8px;
}

.c2o-return-days { grid-column: 1 / span 2; }
.c2o-return-days input, .c2o-return-days select { width: 100%; }

/* Stunning Modern Buttons */
.c2o-ts .button {
  padding: 16px 32px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 8px;
  min-width: 140px;
}

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

.c2o-ts .button:hover::before {
  left: 100%;
}

.c2o-ts .button-primary {
  background: linear-gradient(135deg, #cf142b 0%, #00247d 100%);
  color: white;
  box-shadow: 0 8px 20px rgba(0, 36, 125, 0.3);
}

.c2o-ts .button-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}

.c2o-ts .button-secondary {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  color: #4a5568;
  border: 2px solid #e2e8f0;
}

.c2o-ts .button-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  border-color: #cbd5e0;
}

.c2o-ts .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Button Container */
.c2o-button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 20px;
}

/* Summary Styling */
#c2o_summary {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 20px 0;
  border: none;
}

/* Modern Summary Table */
.c2o-summary-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  margin: 0;
}

.c2o-summary-table th {
  background: linear-gradient(135deg, #cf142b, #00247d);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  text-shadow: none;
  filter: none;
  padding: 16px 20px;
  text-align: left;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
}

/* Force any nested elements inside the header to render white as well */
.c2o-summary-table th *,
.c2o-summary-table thead th {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.c2o-summary-table td {
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 15px;
  color: #2d3748;
  vertical-align: top;
}

.c2o-summary-table tr:last-child td {
  border-bottom: none;
}

.c2o-summary-table tr:nth-child(even) {
  background: #f8fafc;
}
/* Ensure the total row is always on brand gradient regardless of row parity */
.c2o-summary-table tr.c2o-summary-total,
.c2o-summary-table tr.c2o-summary-total:nth-child(even),
.c2o-summary-table tr.c2o-summary-total:nth-child(odd) {
  background: linear-gradient(135deg, #cf142b, #00247d) !important;
}

/* Disable hover highlight in summary table to avoid contrast issues */
.c2o-summary-table tr:hover {
  background: inherit !important;
  transition: none;
}

/* Ensure the total row always stays on brand gradient with white text */
.c2o-summary-table .c2o-summary-total:hover {
  background: linear-gradient(135deg, #cf142b, #00247d) !important;
}

.c2o-summary-label {
  font-weight: 600;
  color: #4a5568;
  min-width: 140px;
  width: 35%;
}

.c2o-summary-value {
  color: #2d3748;
  font-weight: 500;
}

.c2o-summary-highlight {
  background: linear-gradient(135deg, #ffd166, #f6c75a);
  color: #3d2c00;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(255, 209, 102, 0.3);
}

/* Compact badges for journey type indicators */
.c2o-badge{ display:inline-block; padding:6px 12px; border-radius:8px; font-weight:700; font-size:13px; margin-right:8px; }
.c2o-badge-oneway{ background:#ffd166; color:#3d2c00; border:1px solid #f6c75a; }
.c2o-badge-return{ background:#cde1ff; color:#00247d; border:1px solid #b6d2ff; }

.c2o-summary-via-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.c2o-summary-via-list li {
  background: #e2e8f0;
  color: #4a5568;
  padding: 6px 12px;
  margin: 4px 0;
  border-radius: 6px;
  font-size: 14px;
  border-left: 3px solid #cf142b;
}

.c2o-summary-total {
  background: linear-gradient(135deg, #cf142b, #00247d) !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 18px;
}

.c2o-summary-total .c2o-summary-label {
  color: white;
  font-weight: 700;
}

.c2o-summary-total .c2o-summary-value {
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
}

/* Success screen: make summary table blend with red card (no white background) */
.c2o-booking-success .c2o-summary-table {
  background: transparent;
  box-shadow: none;
  border-radius: 12px;
}
.c2o-booking-success .c2o-summary-table td {
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: #ffffff;
}
.c2o-booking-success .c2o-summary-label {
  color: rgba(255,255,255,0.9);
}
.c2o-booking-success .c2o-summary-table th,
.c2o-booking-success .c2o-summary-table td {
  text-align: center;
}
.c2o-booking-success .c2o-summary-label {
  width: auto;
  min-width: 0;
}
.c2o-booking-success .c2o-summary-table tr:nth-child(even) {
  background: transparent;
}
.c2o-booking-success .c2o-summary-table tr:hover {
  background: rgba(255,255,255,0.05) !important;
}
.c2o-booking-success .c2o-summary-total,
.c2o-booking-success .c2o-summary-total .c2o-summary-label,
.c2o-booking-success .c2o-summary-total .c2o-summary-value {
  color: #ffffff !important;
}

#c2o_summary p {
  margin: 8px 0;
  font-size: 16px;
  color: #2d3748;
}

#c2o_summary strong {
  color: #667eea;
  font-weight: 600;
}

/* Message Styling */
#c2o_message {
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
  font-weight: 600;
  text-align: center;
}

#c2o_message.success {
  background: linear-gradient(135deg, #cf142b, #00247d);
  color: white;
}

#c2o_message.error {
  background: linear-gradient(135deg, #f56565, #e53e3e);
  color: white;
}

/* Beautiful Booking Success Message */
.c2o-booking-success {
  background: linear-gradient(135deg, #cf142b, #00247d);
  color: white;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 36, 125, 0.3);
  animation: successPulse 0.6s ease-out;
  width: 100%;
}

.c2o-success-full .c2o-booking-success { margin: 0 !important; border-radius: 0 !important; width: 100%; }

.c2o-success-icon { display:none; }

.c2o-booking-success h3 {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 30px 0;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  text-shadow: none;
}

.c2o-booking-details {
  background: none;
  border-radius: 16px;
  padding: 24px;
  margin: 20px 0;
  backdrop-filter: none;
  border: none;
}

.c2o-booking-details p {
  margin: 12px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  word-break: break-all;
  overflow-wrap: break-word;
}

.c2o-booking-details strong {
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
}

/* Ensure labels inside success table are white for consistency */
.c2o-booking-details .c2o-summary-table strong {
  color: #ffffff !important;
}

.c2o-success-message {
  margin-top: 24px;
  padding: 20px;
  background: none;
  border-radius: 12px;
  border: none;
}

.c2o-success-message p {
  margin: 8px 0;
  font-size: 16px;
  line-height: 1.6;
  word-break: break-all;
  overflow-wrap: break-word;
}

.c2o-booking-error {
  background: linear-gradient(135deg, #f56565, #e53e3e);
  color: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
}

/* Animations */
@keyframes successPulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Strong placeholder control on mobile */
  .c2o-datetime.is-empty .c2o-dt-placeholder{ display:flex !important; }
  .c2o-datetime:not(.is-empty) .c2o-dt-placeholder{ display:none !important; }
  .c2o-ts {
    margin: 5px;
    padding: 20px;
    max-width: none;
    width: calc(100% - 10px);
  }
  
  .c2o-grid, .c2o-vehicles {
    grid-template-columns: 1fr;
  }
  /* Tighten spacing for mobile, especially Passengers/Luggage */
  .c2o-grid {
    gap: 12px;
    margin: 12px 0;
  }
  
  .c2o-button-container {
    flex-direction: column;
    gap: 12px;
  }
  
  .c2o-ts .button {
    width: 100%;
    margin: 4px 0;
  }
  
  .c2o-return-container { grid-template-columns: 28px 1fr; }

  /* Compact journey card and controls */
  .c2o-journey-card{ padding:14px 70px 14px 14px; }
  .c2o-journey-rail{ width:32px; right:20px; }
  .c2o-rail-cap{ width:14px; height:14px; }
  .c2o-rail-compass{ width:44px; height:44px; }
  .c2o-rail-compass::before{ font-size:22px; }
  .c2o-rail-minus{ right:56px; width:28px; height:28px; }
  .c2o-swap{ width:48px; height:48px; }

  /* Mini map */
  .c2o-mini-map{ height:150px; }

  /* Vehicle cards */
  .c2o-vehicle{ grid-template-columns: 80px 1fr; }
  .c2o-vehicle-image{ width:80px; height:56px; }
  .c2o-vehicle-name{ font-size:18px; }
  .c2o-vehicle-details{ font-size:13px; }
  .c2o-vehicle-actions{ gap:10px; }
  .c2o-price-chip{ padding:8px 6px; font-size:12px; min-width:100px; }

  /* Summary */
  #c2o_summary{ padding:18px; }
  
  /* Tablet confirmation message fixes */
  .c2o-booking-success {
    padding: 30px;
    margin: 15px;
  }
  
  .c2o-booking-success h3 {
    font-size: 28px;
    margin: 0 0 25px 0;
  }
  
  .c2o-booking-details p {
    display: block;
    text-align: left;
    margin: 10px 0;
    font-size: 15px;
  }
  
  .c2o-booking-details strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
  }
  
  .c2o-success-message p {
    font-size: 15px;
    text-align: left;
  }
  
  /* Mobile table responsive */
  .c2o-summary-table {
    font-size: 14px;
  }
  
  .c2o-summary-table th {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .c2o-summary-table td {
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .c2o-summary-label {
    min-width: 100px;
    width: 40%;
  }
}

@media (max-width: 480px) {
  .c2o-ts{ margin:4px; padding:16px; max-width: none; width: calc(100% - 8px); }
  .c2o-ts h3{ font-size:20px; }
  .c2o-ts label{ margin:14px 0 6px 0; font-size:12px; }
  .c2o-ts input, .c2o-ts textarea, .c2o-ts select{ padding:10px 12px; font-size:14px; }
  .c2o-journey-card{ padding:12px 65px 12px 12px; }
  /* On very small screens, keep rail visible but smaller */
  .c2o-journey-rail{ width:28px; right:18px; }
  .c2o-rail-cap{ width:12px; height:12px; }
  .c2o-rail-compass{ width:36px; height:36px; }
  .c2o-rail-compass::before{ font-size:18px; }
  .c2o-rail-actions{ display:none; }
  .c2o-swap{ width:44px; height:44px; }
  .c2o-mini-map{ height:130px; }
  .c2o-vehicle{ grid-template-columns: 72px 1fr; padding:12px; }
  .c2o-vehicle-image{ width:72px; height:52px; }
  .c2o-vehicle-name{ font-size:16px; }
  .c2o-vehicle-details{ font-size:12px; }
  .c2o-vehicle-actions{ gap:8px; }
  .c2o-price-chip{ padding:6px 4px; font-size:11px; min-width:90px; }
  .c2o-button-container{ gap:10px; }
  /* Extra compact spacing on very small screens */
  .c2o-grid { gap: 8px; margin: 8px 0; }
  
  /* Mobile confirmation message fixes */
  .c2o-booking-success {
    padding: 20px;
    margin: 10px;
  }
  
  .c2o-booking-success h3 {
    font-size: 24px;
    margin: 0 0 20px 0;
  }
  
  .c2o-booking-details {
    padding: 16px;
    margin: 15px 0;
  }
  
  .c2o-booking-details p {
    display: block;
    text-align: left;
    margin: 8px 0;
    font-size: 14px;
  }
  
  .c2o-booking-details strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
  }
  
  .c2o-success-message {
    padding: 16px;
    margin-top: 20px;
  }
  
  .c2o-success-message p {
    font-size: 14px;
    text-align: left;
  }
  
  /* Small mobile table responsive */
  .c2o-summary-table {
    font-size: 12px;
  }
  
  .c2o-summary-table th {
    padding: 10px 12px;
    font-size: 12px;
  }
  
  .c2o-summary-table td {
    padding: 8px 12px;
    font-size: 11px;
  }
  
  .c2o-summary-label {
    min-width: 80px;
    width: 45%;
  }
  
  .c2o-summary-highlight {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* Ensure rail is always visible on all screen sizes */
@media (max-width: 360px) {
  .c2o-ts{ margin:2px; padding:12px; width: calc(100% - 4px); }
  .c2o-journey-card{ padding:10px 60px 10px 10px; }
  .c2o-journey-rail{ width:26px; right:16px; }
  .c2o-rail-cap{ width:10px; height:10px; }
  .c2o-rail-compass{ width:32px; height:32px; }
  .c2o-rail-compass::before{ font-size:16px; }
  .c2o-address-row input{ padding-right:60px; }
}

/* Animation for step transitions */
.c2o-ts-step {
  animation: fadeInUp 0.6s ease-out;
}

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

/* Ensure Google Places dropdown appears above UI */
.pac-container { z-index: 2147483647 !important; }

/* Remove native calendar indicator; we render our own left-side placeholder icon */
#c2o_datetime::-webkit-calendar-picker-indicator,
#c2o_return_datetime::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#c2o_datetime::-moz-calendar-picker-indicator,
#c2o_return_datetime::-moz-calendar-picker-indicator {
  display: none !important;
  appearance: none !important;
  opacity: 0 !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#c2o_datetime { padding-right: 14px; }

/* Datetime wrapper base */
.c2o-datetime { position: relative; }
.c2o-datetime.c2o-just-picked{ pointer-events: none; }
/* When just picked, force neutral (grey) visual even if browser still focuses input */
.c2o-datetime.c2o-just-picked input[type="datetime-local"]:focus{
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Hide native datetime placeholders to prevent double placeholders */
.c2o-datetime input[type="datetime-local"] {
  position: relative;
  z-index: 2;
  background: transparent !important;
  background-color: transparent !important;
}

.c2o-datetime.is-empty input[type="datetime-local"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Prevent any white overlay on focus/click - critical for mobile */
.c2o-datetime input[type="datetime-local"]:focus,
.c2o-datetime input[type="datetime-local"]:active,
.c2o-datetime input[type="datetime-local"]:hover {
  background: transparent !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hide native placeholders when custom placeholder is active */
.c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit,
.c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-text,
.c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-month-field,
.c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-day-field,
.c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-year-field,
.c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
.c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
.c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-ampm-field {
  color: transparent;
  background: transparent;
}

.c2o-dt-placeholder{ 
  display: none !important; 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  z-index: 3;
  color: #6b7280;
  font-size: 14px;
  font-family: inherit;
  pointer-events: all;
}
.c2o-datetime.is-empty .c2o-dt-placeholder{ display:flex !important; }
.c2o-datetime.is-mobile.is-empty .c2o-dt-placeholder{ display:flex !important; }
.c2o-dt-placeholder .c2o-dt-icon{ 
  margin-right: 8px; 
}
.c2o-dt-icon{ width:20px; height:20px; display:inline-block; background-size:20px 20px; background-repeat:no-repeat; background-image:url('data:image/svg+xml,%3Csvg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect x="3" y="5" width="18" height="16" rx="2" stroke="%236b7280" stroke-width="2"/%3E%3Cpath d="M8 2V6" stroke="%236b7280" stroke-width="2"/%3E%3Cpath d="M16 2V6" stroke="%236b7280" stroke-width="2"/%3E%3Cpath d="M3 10H21" stroke="%236b7280" stroke-width="2"/%3E%3C/svg%3E'); }
.c2o-dt-opener{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:6px; border:0; background:transparent; display:none; align-items:center; justify-content:center; cursor:pointer; }
.c2o-dt-opener .c2o-dt-icon{ width:18px; height:18px; background-size:18px 18px; }

/* Mobile-friendly datetime wrapper */
@media (max-width: 768px) {
  .c2o-datetime input[type="datetime-local"]{ 
    padding-left: 16px; 
    padding-right: 14px !important; 
    background: transparent !important;
    background-color: transparent !important;
  }
  
  /* Critical: Remove all white backgrounds on mobile interaction */
  .c2o-datetime input[type="datetime-local"]:focus,
  .c2o-datetime input[type="datetime-local"]:active,
  .c2o-datetime input[type="datetime-local"]:hover,
  .c2o-datetime input[type="datetime-local"]:clicked {
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
  }
  
  .c2o-datetime:not(.is-empty) .c2o-dt-placeholder{ display: none !important; }
  .c2o-datetime.is-empty .c2o-dt-placeholder{ display:flex !important; }
  .c2o-datetime.is-mobile.is-empty .c2o-dt-placeholder{ display:flex !important; }
  .c2o-dt-opener{ display:none !important; }
  .c2o-datetime{ display:block; width:100%; position:relative; }
  
  /* Force show placeholder on mobile when empty */
  .c2o-datetime.is-empty .c2o-dt-placeholder {
    display: flex !important;
    z-index: 10;
    background: transparent !important;
    background-color: transparent !important;
  }
  
  /* Hide native calendar icon on mobile to prevent double icons (all variants) */
  .c2o-datetime input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  #c2o_datetime::-webkit-calendar-picker-indicator,
  #c2o_return_datetime::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    opacity: 0 !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .c2o-datetime input[type="datetime-local"]::-moz-calendar-picker-indicator,
  #c2o_datetime::-moz-calendar-picker-indicator,
  #c2o_return_datetime::-moz-calendar-picker-indicator {
    display: none !important;
    appearance: none !important;
    opacity: 0 !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Hide native mm/dd/yyyy when empty so our placeholder shows */
  .c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit,
  .c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-text,
  .c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-year-field,
  .c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-month-field,
  .c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-day-field,
  .c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
  .c2o-datetime.is-empty input[type="datetime-local"]::-webkit-datetime-edit-minute-field { 
    color: transparent; 
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Make Step 3 summary flush full width on mobile */
  #c2o_summary{ padding: 0 !important; margin: 16px 0; width: 100%; }
  .c2o-summary-table{ width: 100%; margin: 0; }
  .c2o-ts-step-3 .c2o-summary-table{ width: 100%; }
  /* Ensure return datetime block spans full width */
  .c2o-return-datetime-wrap{ width: 100%; display: block; }
  .c2o-return-datetime-wrap .c2o-datetime{ width: 100%; display: block; }
}

/* Hide native calendar indicator globally inside our datetime wrapper to avoid duplicate icons */
.c2o-datetime input[type="datetime-local"]::-webkit-calendar-picker-indicator{ display:none !important; }
.c2o-datetime input[type="datetime-local"]::-moz-calendar-picker-indicator{ display:none !important; }

/* CRITICAL: Absolutely prevent white backgrounds on datetime fields */
#c2o_datetime,
#c2o_return_datetime,
.c2o-datetime input[type="datetime-local"],
.c2o-datetime,
.c2o-dt-placeholder {
  background: transparent !important;
  background-color: transparent !important;
}

#c2o_datetime:focus,
#c2o_datetime:active, 
#c2o_datetime:hover,
#c2o_return_datetime:focus,
#c2o_return_datetime:active,
#c2o_return_datetime:hover,
.c2o-datetime input[type="datetime-local"]:focus,
.c2o-datetime input[type="datetime-local"]:active,
.c2o-datetime input[type="datetime-local"]:hover {
  background: transparent !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Loaders */
.c2o-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.c2o-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid rgba(0,0,0,0.08);
  border-top-color: #00247d;
  border-right-color: #cf142b;
  border-radius: 50%;
  animation: c2o-spin 0.8s linear infinite;
}

@keyframes c2o-spin {
  to { transform: rotate(360deg); }
}

.c2o-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%);
  background-size: 400% 100%;
  animation: c2o-shimmer 1.4s ease infinite;
  border-radius: 8px;
}

@keyframes c2o-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.c2o-vehicle-skeleton { height: 120px; margin: 8px 0; }
.c2o-summary-skeleton { height: 120px; margin: 8px 0; }
  
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgMTBIMjFWMjBIM1YxMFoiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE2IDJWMTAiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTggMlYxMCIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEgNkgzQzIuNDQ3NzIgNiAyIDYuNDQ3NzIgMiA3VjIwQzIgMjAuNTUyMyAyLjQ0NzcyIDIxIDMgMjFIMjFDMjEuNTUyMyAyMSAyMiAyMC41NTIzIDIyIDIwVjdDMjIgNi40NDc3MiAyMS41NTIzIDYgMjEgNloiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+') no-repeat center;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 8px;
    opacity: 0.7;
  }
  
  input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }
  
  input[type="datetime-local"]::-moz-calendar-picker-indicator {
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgMTBIMjFWMjBIM1YxMFoiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE2IDJWMTAiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTggMlYxMCIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEgNkgzQzIuNDQ3NzIgNiAyIDYuNDQ3NzIgMiA3VjIwQzIgMjAuNTUyMyAyLjQ0NzcyIDIxIDMgMjFIMjFDMjEuNTUyMyAyMSAyMiAyMC41NTIzIDIyIDIwVjdDMjIgNi40NDc3MiAyMS41NTIzIDYgMjEgNloiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+') no-repeat center;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 8px;
    opacity: 0.7;
  }
  
  input[type="datetime-local"]::-moz-calendar-picker-indicator:hover {
    opacity: 1;
  }
  
  /* Ensure datetime input shows properly on mobile */
  input[type="datetime-local"]:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
  }
  
  /* Add placeholder-like styling for empty datetime inputs */
  input[type="datetime-local"]:invalid {
    color: #999;
  }
  
  input[type="datetime-local"]:valid {
    color: #333;
  }
  
  /* Specific styling for return datetime field */
  #c2o_return_datetime {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ffffff;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }
  
  #c2o_return_datetime::-webkit-calendar-picker-indicator {
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgMTBIMjFWMjBIM1YxMFoiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE2IDJWMTAiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTggMlYxMCIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEgNkgzQzIuNDQ3NzIgNiAyIDYuNDQ3NzIgMiA3VjIwQzIgMjAuNTUyMyAyLjQ0NzcyIDIxIDMgMjFIMjFDMjEuNTUyMyAyMSAyMiAyMC41NTIzIDIyIDIwVjdDMjIgNi40NDc3MiAyMS41NTIzIDYgMjEgNloiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+') no-repeat center;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 8px;
    opacity: 0.7;
  }
  
/* Loaders */
.c2o-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.c2o-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid rgba(0,0,0,0.08);
  border-top-color: #00247d;
  border-right-color: #cf142b;
  border-radius: 50%;
  animation: c2o-spin 0.8s linear infinite;
}

@keyframes c2o-spin {
  to { transform: rotate(360deg); }
}

.c2o-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%);
  background-size: 400% 100%;
  animation: c2o-shimmer 1.4s ease infinite;
  border-radius: 8px;
}

@keyframes c2o-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.c2o-vehicle-skeleton { height: 120px; margin: 8px 0; }
.c2o-summary-skeleton { height: 120px; margin: 8px 0; }