/* Booking success message + balloon animation + submit glow */

.status {
  display: none;
  margin-top: 18px;
  border-radius: 18px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(14px);
}

.status.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
  padding: 16px 18px;
}

.status.success {
  color: #f6f1e8;
  background:
    radial-gradient(circle at 20% 0%, rgba(216, 177, 95, 0.22), transparent 36%),
    linear-gradient(135deg, rgba(216, 177, 95, 0.18), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(216, 177, 95, 0.55);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    0 0 30px rgba(216, 177, 95, 0.14);
}

.status.error {
  color: #ffe6e6;
  background:
    linear-gradient(135deg, rgba(255, 80, 80, 0.14), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 100, 100, 0.45);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(255, 80, 80, 0.10);
}

.status.ride-thanks {
  text-align: center;
  letter-spacing: 0.5px;
}

.status.ride-thanks strong {
  display: block;
  color: #f4d77c;
  font-size: 22px;
  line-height: 1.1;
}

.status.ride-thanks span {
  display: block;
  color: #f6f1e8;
  font-size: 15px;
  margin-top: 4px;
}

/* Submit Enquiry button glass glow */
#bookingForm .btn.primary.full {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(216, 177, 95, 0.55);
  box-shadow:
    0 18px 42px rgba(216, 177, 95, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    opacity 0.28s ease;
}

#bookingForm .btn.primary.full::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-22deg);
  transition: left 0.75s ease;
  z-index: -1;
}

#bookingForm .btn.primary.full::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.30), transparent 55%);
  opacity: 0;
  transition: opacity 0.28s ease;
  z-index: -2;
}

#bookingForm .btn.primary.full:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255, 235, 170, 0.9);
  box-shadow:
    0 24px 60px rgba(216, 177, 95, 0.28),
    0 0 34px rgba(216, 177, 95, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

#bookingForm .btn.primary.full:hover::before {
  left: 130%;
}

#bookingForm .btn.primary.full:hover::after {
  opacity: 1;
}

#bookingForm .btn.primary.full:active {
  transform: translateY(-1px) scale(0.99);
}

#bookingForm .btn.primary.full:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
}

/* Full-screen balloon success overlay */
.rideSuccessOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(circle at center, rgba(216, 177, 95, 0.10), rgba(5, 8, 18, 0.60));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.rideSuccessOverlay.active {
  opacity: 1;
  visibility: visible;
}

.successStage {
  position: relative;
  width: min(560px, 92vw);
  height: 360px;
  display: grid;
  place-items: center;
}

.successCard {
  position: relative;
  z-index: 4;
  width: min(430px, 88vw);
  padding: 34px 30px;
  border-radius: 30px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 0%, rgba(216, 177, 95, 0.23), transparent 34%),
    rgba(17, 24, 49, 0.94);
  border: 1px solid rgba(216, 177, 95, 0.42);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.45),
    0 0 52px rgba(216, 177, 95, 0.17);
  transform: translateY(24px) scale(0.92);
  opacity: 0;
}

.rideSuccessOverlay.active .successCard {
  animation: successPop 0.75s cubic-bezier(0.18, 1.25, 0.35, 1) 0.85s forwards;
}

.successCard small {
  color: #d8b15f;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.successCard h2 {
  color: #f4d77c;
  font-size: clamp(42px, 8vw, 74px);
  line-height: 0.95;
  margin: 12px 0 8px;
  text-shadow: 0 0 30px rgba(216, 177, 95, 0.24);
}

.successCard p {
  color: #f6f1e8;
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0;
}

.balloon {
  position: absolute;
  bottom: 52px;
  width: 44px;
  height: 56px;
  border-radius: 52% 52% 48% 48%;
  opacity: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,0.85), transparent 14%),
    linear-gradient(145deg, #f4d77c, #b9892e);
  box-shadow: 0 14px 28px rgba(0,0,0,0.24);
  transform: translateY(80px) scale(0.8);
}

.balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -42px;
  width: 1px;
  height: 44px;
  background: rgba(246, 241, 232, 0.45);
  transform: translateX(-50%);
}

.balloon.b1 { left: 6%; }
.balloon.b2 { left: 18%; background: radial-gradient(circle at 32% 25%, rgba(255,255,255,0.85), transparent 14%), linear-gradient(145deg, #ffffff, #d8b15f); }
.balloon.b3 { left: 31%; }
.balloon.b4 { left: 44%; background: radial-gradient(circle at 32% 25%, rgba(255,255,255,0.85), transparent 14%), linear-gradient(145deg, #d8b15f, #7f5b18); }
.balloon.b5 { left: 58%; }
.balloon.b6 { left: 72%; background: radial-gradient(circle at 32% 25%, rgba(255,255,255,0.85), transparent 14%), linear-gradient(145deg, #ffffff, #c79b42); }
.balloon.b7 { left: 86%; }

.rideSuccessOverlay.active .balloon {
  animation: balloonPop 1.28s ease-out forwards;
}

.rideSuccessOverlay.active .b1 { animation-delay: 0.05s; }
.rideSuccessOverlay.active .b2 { animation-delay: 0.16s; }
.rideSuccessOverlay.active .b3 { animation-delay: 0.10s; }
.rideSuccessOverlay.active .b4 { animation-delay: 0.23s; }
.rideSuccessOverlay.active .b5 { animation-delay: 0.14s; }
.rideSuccessOverlay.active .b6 { animation-delay: 0.26s; }
.rideSuccessOverlay.active .b7 { animation-delay: 0.08s; }

.burstRing {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(216, 177, 95, 0.75);
  opacity: 0;
  z-index: 3;
}

.rideSuccessOverlay.active .burstRing {
  animation: burstRing 0.82s ease-out 0.78s forwards;
}

.spark {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f4d77c;
  opacity: 0;
  z-index: 3;
  box-shadow: 0 0 18px rgba(216, 177, 95, 0.55);
}

.spark.s1 { top: 28%; left: 24%; --x: -90px; --y: -80px; }
.spark.s2 { top: 24%; right: 24%; --x: 90px; --y: -80px; }
.spark.s3 { bottom: 26%; left: 30%; --x: -85px; --y: 80px; }
.spark.s4 { bottom: 28%; right: 30%; --x: 85px; --y: 80px; }
.spark.s5 { top: 45%; left: 12%; --x: -110px; --y: 0; }
.spark.s6 { top: 45%; right: 12%; --x: 110px; --y: 0; }

.rideSuccessOverlay.active .spark {
  animation: sparklePop 1.05s ease-out 0.72s forwards;
}

@keyframes balloonPop {
  0% { opacity: 0; transform: translateY(90px) scale(0.75) rotate(-4deg); }
  42% { opacity: 1; transform: translateY(-20px) scale(1) rotate(4deg); }
  72% { opacity: 1; transform: translateY(-92px) scale(1.08) rotate(-3deg); }
  100% { opacity: 0; transform: translateY(-128px) scale(1.85) rotate(8deg); filter: blur(2px); }
}

@keyframes burstRing {
  0% { opacity: 0.85; transform: scale(0.25); }
  100% { opacity: 0; transform: scale(3.6); }
}

@keyframes sparklePop {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x, 0), var(--y, -80px)) scale(1.4); }
}

@keyframes successPop {
  0% { opacity: 0; transform: translateY(24px) scale(0.92); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}




/* Custom dd/mm/yyyy date input with calendar button */

.datePickerWrap {
  position: relative;
  width: 100%;
}

.datePickerWrap #tripDateInput {
  width: 100%;
  padding-right: 58px;
}

#tripDateNative {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  opacity: 0;
  z-index: 4;
  cursor: pointer;
}

.calendarBtn {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(216, 177, 95, 0.22), rgba(255, 255, 255, 0.07));
  color: #f4d77c;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.20),
    0 0 20px rgba(216, 177, 95, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.calendarBtn:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(216, 177, 95, 0.26);
}