<style>    
body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background: #f4f4f4;
  margin: auto;
}

.form-wrapper select,
.form-wrapper select option {
  background-color: #fff !important;
  color: #000 !important;
}

select,
option {
  font-size: 16px;
  line-height: 1.5em;
  padding: 10px;
  height: auto;
}

input:invalid, select:invalid {
  border: 2px solid #d32f2f;
  background-color: #fff0f0;
}


select {
  background-color: #fff;
  color: #000;
  cursor: pointer;
}
option {
  background-color: #fff;
  color: #000;
}
input,
select,
textarea {
  width: 100%;
  font-size: 17px;
  line-height: 1.5em;
  padding: 12px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Uniform, taller controls */
.form-wrapper input[type="text"],
.form-wrapper input[type="tel"],
.form-wrapper input[type="email"],
.form-wrapper input[type="date"],
.form-wrapper input[type="time"],
.form-wrapper textarea,
.form-wrapper select {
  font-size: 18px;
  padding: 14px 12px;
  min-height: 48px;   /* match the visual height of big selects */
}

select option {
  font-size: 17px;
  color: #000;
  background-color: #fff;
}




input[type="radio"] + label {
  padding: 6px 10px;
  margin-right: 10px;
  border-radius: 4px;
}

.form-wrapper {
  max-width: 700px;
  margin: auto;
  background-color: #eeeeee; /* light gray background */
  padding: 25px;
  border-radius: 16px; /* more rounded corners */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

@media (max-width: 480px) {
  .form-wrapper {
    padding: 15px;
    border-radius: 8px;
  }
}
label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
  font-size: 16px;
}
/* === Super-CTA: Add Stop button === */
/* Super CTA Add Stop button */
#addStopBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 80px;                 /* taller button */
  padding: 0 24px;
  border: 0;
  border-radius: 20px;
  font-size: 26px;              /* larger text */
  font-weight: 900;             /* extra bold */
  letter-spacing: 0.8px;
  color: #ffffff;
  cursor: pointer;
  background: linear-gradient(90deg, #ff6ec4, #1e88e5, #00bcd4);
  background-size: 300% 300%;
  animation: addStopGradient 6s ease infinite;
  box-shadow:
    0 12px 30px rgba(30,136,229,.45),
    0 3px 8px rgba(0,0,0,.15);
  text-shadow: 0 2px 2px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  overflow: hidden; /* for shine + ripple */
}

/* Neon glow ring behind the button */
#addStopBtn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
    #ff6ec4, #ffd36e, #42a5f5, #7c4dff, #ff6ec4);
  filter: blur(18px);
  opacity: .55;
  z-index: -1;
  animation: ringSpin 10s linear infinite;
}

/* Diagonal shine sweep on hover */
#addStopBtn::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -30%;
  width: 60%;
  height: 300%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                     rgba(255,255,255,.35) 50%,
                                     rgba(255,255,255,0) 100%);
  transition: left .6s ease;
  pointer-events: none;
}
#addStopBtn:hover::after { left: 120%; }

/* Hover/active micro-interactions */
#addStopBtn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 16px 38px rgba(30,136,229,.55),
    0 6px 14px rgba(0,0,0,.18);
  filter: saturate(1.1);
}
#addStopBtn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.25),
    0 8px 20px rgba(30,136,229,.35);
}

/* Make the leading ➕ pop even more (works with your existing text) */
#addStopBtn { --icon-scale: 1; }
#addStopBtn:hover { --icon-scale: 1.2; }
#addStopBtn:active { --icon-scale: 0.95; }
#addStopBtn:has(span.btn-plus) span.btn-plus { transform: scale(var(--icon-scale)); }
#addStopBtn span.btn-plus {
  display: inline-block;
  font-size: 32px;             /* Make icon bigger than text */
  font-weight: 900;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
  transition: transform .18s ease;
  line-height: 1;              /* Perfect centering */
}

/* Keyframes */
@keyframes addStopGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}




button {
  margin-top: 14px;
  padding: 10px 14px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  width: 100%;
}

button:hover {
  background-color: #45a049;
}

fieldset {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 15px;
  border-radius: 8px;
}

.stop-wrapper {
  position: relative;
}

.removeStopBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto;
  padding: 4px 10px;
  font-size: 12px;
  background-color: #e53935;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


#addStopBtn,
#copyPickupToFinal {
  background-color: #2196F3;
  color: white;
  padding: 9px;
  font-size: 14px;
  width: 100%;
}

@media (max-width: 480px) {
  body {
    padding: 12px;
  }
  button {
    font-size: 14px;
    padding: 10px;
  }
  /* Mobile: make placeholder text smaller so it fits */
  input::placeholder,
  textarea::placeholder {
    font-size: 14px;         /* down from ~17–18px */
    line-height: 1.3;
  }
  /* Slightly tighten inputs on mobile */
  .form-wrapper input[type="text"],
  .form-wrapper input[type="tel"],
  .form-wrapper input[type="email"],
  .form-wrapper input[type="date"],
  .form-wrapper input[type="time"],
  .form-wrapper textarea,
  .form-wrapper select {
    font-size: 16px;         /* was 18px */
    padding: 12px 10px;      /* a bit narrower */
    min-height: 44px;        /* still tap-friendly */
  }
}
#additionalStopsContainer fieldset {
  margin-bottom: 20px;
}

legend {
  font-weight: bold;
  padding: 0 8px;
  font-size: 1.1em;
  margin-left: 10px;
  line-height: 1.4em;
}


.finalDropChoice {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 10px;
}

legend {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  padding: 0 8px;
  line-height: 1.6em;
}


.finalDropChoice label {
  display: inline-flex;
  align-items: center;
  font-size: 17px; /* <- updated from 1em */
  font-weight: bold;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.5em;
}
textarea[name="Notes:"] {
  min-height: 120px;
  resize: vertical; /* allows user resizing if desired */
  font-size: 17px;
  line-height: 1.5em;
}

.spinner {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-block;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}



/* === Premium Pickup Section with Enhanced Visual Impact === */
.pickup-card {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
  border: 2px solid #1e88e5;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(30, 136, 229, 0.2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pickup-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(30, 136, 229, 0.25);
}

/* === Premium Final Drop-off Section === */
.dropoff-card {
  background: linear-gradient(135deg, #fff0f5 0%, #ffe0e0 100%); /* soft pink/red */
  border: 2px solid #d32f2f;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(211, 47, 47, 0.25);
  transition: transform .25s ease, box-shadow .25s ease;
  margin-top: 25px;
  margin-bottom: 30px;
}

.dropoff-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(211, 47, 47, 0.35);
}

/* === Premium Enter Stops Section === */
.stops-card {
  background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%); /* vibrant orange */
  border: 2px solid #ff9800;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(255, 152, 0, 0.25);
  transition: transform .25s ease, box-shadow .25s ease;
  margin-top: 25px;
  margin-bottom: 30px;
}

.stops-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(255, 152, 0, 0.35);
}

/* Section header badge for stops */
.stops-title {
  display: flex;                 /* center text inside */
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px auto;      /* center the pill, add spacing below */
  min-width: 220px;              /* ✅ consistent pill width */
  max-width: 80%;                /* responsive cap on very small screens */
  text-align: center;
  gap: 8px;
  font-weight: 800;
  font-size: 18px;
  color: #e65100;
  background: linear-gradient(135deg, #ffffff 0%, #fff3e0 100%);
  border: 2px solid #ff9800;
  border-radius: 25px;
  padding: 12px 20px;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

/* Section header badge for drop-off */
.dropoff-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 12px;
  padding: 6px 14px;
  background: #d32f2f;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

/* === Premium Rental Extras Section === */
.extras-card {
  background: linear-gradient(135deg, #e9f3ff 0%, #d8ecff 100%);
  border: 2px solid #1976d2;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(25, 118, 210, 0.22);
  transition: transform .25s ease, box-shadow .25s ease;
  margin-top: 22px;
}
.extras-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(25,118,210,.3);
}
.extras-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 12px;
  padding: 6px 14px;
  background: #1976d2;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

/* Soft cards for each extra row */
.extras-item {
  background: #e3f2fd;
  border: 1px solid #bbdefb;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
}

/* === Premium Notes Section === */
.notes-card {
  background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
  border: 2px solid #ff9800;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(255,152,0,.22);
  transition: transform .25s ease, box-shadow .25s ease;
  margin-top: 25px;
}
.notes-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(255,152,0,.32);
}
.notes-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 12px;
  padding: 6px 14px;
  background: #ff9800;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

/* === Premium Contact Info Section === */
.contact-card{
  background: linear-gradient(135deg,#e9f3ff 0%,#d8ecff 100%);
  border: 2px solid #1565c0;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(21,101,192,.22);
  transition: transform .25s ease, box-shadow .25s ease;
  margin-top: 20px;
}
.contact-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(21,101,192,.30);
}
.contact-title{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:800;font-size:20px;margin-bottom:12px;
  padding:6px 14px;background:#1565c0;color:#fff;
  border-radius:999px;box-shadow:0 3px 10px rgba(0,0,0,.12);
}

/* === Premium Event Details Section === */
.event-card{
  background: linear-gradient(135deg,#ffe6ef 0%,#ffd6e4 100%);
  border: 2px solid #c2185b;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(194,24,91,.22);
  transition: transform .25s ease, box-shadow .25s ease;
  margin-top: 20px;
}
.event-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(194,24,91,.32);
}
.event-title{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:800;font-size:20px;margin-bottom:12px;
  padding:6px 14px;background:#c2185b;color:#fff;
  border-radius:999px;box-shadow:0 3px 10px rgba(0,0,0,.12);
}

/* === Premium Stop Section === */
.stop-card {
  background: linear-gradient(135deg, #fffbe6 0%, #fff3cd 100%);
  border: 2px solid #ff9800;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(255, 152, 0, 0.25);
  transition: transform .25s ease, box-shadow .25s ease;
  margin-top: 20px;
}

.stop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(255, 152, 0, 0.35);
}

/* Title pill for stops */
.stop-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 12px;
  padding: 6px 14px;
  background: #ff9800;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

/* Section header badge */
.section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 12px;
  padding: 6px 14px;
  background: #1e88e5;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

/* Helper banner with subtle animation */
.helper {
  font-size: 14px;
  font-weight: 600;
  color: #0d47a1;
  background: #e3f2fd;
  border: 2px dashed #1e88e5;
  padding: 10px 16px;
  border-radius: 12px;
  animation: subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.01); }
}

/* Animated Pointing Hand */
.pointing-hand {
  font-size: 22px;
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* State Selector Chips with Color Feedback */
.segmented {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.segmented input[type="radio"] { display: none; }
.segmented label {
  user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.segmented label:hover { 
  transform: translateY(-1px); 
  box-shadow: 0 2px 8px rgba(0,0,0,.08); 
  border-color: #bdbdbd;
}
.segmented input[type="radio"]:checked + label {
  background: #1e88e5;
  color: #fff;
  border-color: #1e88e5;
  box-shadow: 0 0 0 3px rgba(30,136,229,.25);
}

.input-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px;
}
@media (min-width: 560px) {
  .input-grid { grid-template-columns: 1fr 1fr; }
  .pickup-input-grid { grid-template-columns: 1fr; } /* Keep pickup fields full width */
}

/* Make every field inside the Pickup grid span the full width */
.pickup-input-grid .field { grid-column: 1 / -1; }
.field {
  display: grid; gap: 6px;
}
.field label { font-weight: 700; margin: 0; }

/* City Quick Options - Material Design Chips */
.input-chipbar {
  display:flex; gap:8px; flex-wrap:wrap; margin: 4px 0 0;
}
.input-chipbar button,
#pickupCityQuickOptions button,
#finalDropoffCityQuickOptions button,
[id$="CityQuickOptions"] button {
  background: #f1f3f4 !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease !important;
  color: #424242 !important;
}
.input-chipbar button:hover,
#pickupCityQuickOptions button:hover,
#finalDropoffCityQuickOptions button:hover,
[id$="CityQuickOptions"] button:hover {
  background: #e3f2fd !important;
  transform: scale(1.05) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
}

/* Animated Inline Alerts */
.inline-alert {
  display:inline-flex; align-items:center; gap:8px;
  background:#d32f2f; color:#fff; border-radius:8px; padding:4px 8px;
  font-size:12px; font-weight:700;
  animation: fadeSlideIn .4s ease;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Quick-city chips: ensure labels are visible and not full-width */
#pickupCityQuickOptions button,
#finalDropoffCityQuickOptions button,
[id$="CityQuickOptions"] button {
  width: auto !important;
  display: inline-flex;
  white-space: nowrap;
  padding: 6px 10px;
  margin: 4px 6px 0 0 !important;  /* cancel global button top-margin */
  background: #fff !important;     /* override green global bg */
  color: #000 !important;          /* override white global text */
  border: 1px solid #cfd8dc;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
[id$="CityQuickOptions"] button:hover {
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}

/* Animated pointing hand (points left) */
.pointing-hand {
  display: inline-block;
  font-size: 22px;
  margin-left: 6px;
  animation: pointMove 1s infinite ease-in-out;
  cursor: default;
}

@keyframes pointMove {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); } /* wiggle right so the hand looks like it pushes left */
}

/* One-way banner: allow wrapping in the "Event Time / Total Hours" row */
.oneway-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;  /* ✅ let items go to next line on mobile */
  gap: 8px;
}

/* Make the notice consume a full row when wrapping */
#oneWayNotice {
  flex: 1 1 100%;
  margin-top: 10px; /* spacing when it drops below */
}

/* Small-screen readability */
@media (max-width: 480px) {
  #oneWayNotice { font-size: 15px; line-height: 1.4; }
}

/* Center and standardize pill legends */
.contact-card legend,
.event-card legend,
.pickup-card legend,
.dropoff-card legend,
.extras-card legend,
.notes-card legend,
.stop-card legend {
  display: flex;                 /* center text inside */
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px auto;      /* center the pill, add spacing below */
  min-width: 220px;              /* ✅ consistent pill width */
  max-width: 80%;                /* responsive cap on very small screens */
  text-align: center;
}

/* Hide SMS consent disclaimer */
label:has(input#smsConsent) {
  display: none !important;
}

/* subtle site badge (bottom-right) */
.site-badge {
  position: fixed;
  right: 10px;
  bottom: 10px;           /* change to top:10px if you want it on top */
  z-index: 9999;
  padding: 4px 8px;
  border-radius: 999px;
  font: 700 11px/1 system-ui, Arial, sans-serif;
  color: #fff;
  background: rgba(0,0,0,.55);
  letter-spacing: .5px;
  opacity: .35;           /* faint so customers won't notice */
  pointer-events: none;   /* unclickable */
}


</style>
