/* ===== KAURA BOOKING POPUP STYLES ===== */

/* Brand gold */
:root {
  --gold: #c9a84c;
  --gold-dark: #b8943e;
  --gold-light: #e8c96a;
  --gold-glow: rgba(201,168,76,0.2);
}

/* Overlay entrance */
#booking-popup {
  animation: popupFadeIn 0.25s ease both;
}
@keyframes popupFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal card entrance */
#booking-popup > div {
  animation: popupSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes popupSlideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Step transition */
.booking-step {
  animation: stepFadeIn 0.3s ease both;
}
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Service / vehicle buttons */
.service-btn, .vehicle-btn {
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, background 0.25s, transform 0.2s, box-shadow 0.2s;
}
.service-btn:hover, .vehicle-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px -8px rgba(201,168,76,0.3);
}
.service-btn.selected, .vehicle-btn.selected, .pkg-btn.selected {
  border-color: var(--gold) !important;
  background: rgba(201,168,76,0.08);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.18);
}

/* Package buttons */
.pkg-btn {
  transition: border-color 0.25s, background 0.25s, transform 0.2s, box-shadow 0.2s;
}
.pkg-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px -8px rgba(201,168,76,0.25);
}

/* Ripple on click */
.service-btn::after, .vehicle-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(201,168,76,0.12) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}
.service-btn:active::after, .vehicle-btn:active::after {
  opacity: 1;
}

/* Progress bar — gold */
#booking-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 6px rgba(201,168,76,0.45);
}

/* Step label */
#booking-step-label {
  transition: opacity 0.2s;
}

/* Input focus glow — gold */
#booking-popup input:focus,
#booking-popup select:focus,
#booking-popup textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}

/* Submit button shimmer */
#booking-submit-btn {
  position: relative;
  overflow: hidden;
}
#booking-submit-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: btnShimmer 2.5s ease-in-out infinite;
}
@keyframes btnShimmer {
  0%   { left: -60%; }
  100% { left: 120%; }
}

/* Success screen */
#success-message .success-icon {
  animation: successPop 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes successPop {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}
#success-message h3 {
  animation: stepFadeIn 0.4s 0.3s ease both;
}
#success-message p {
  animation: stepFadeIn 0.4s 0.45s ease both;
}
#success-message button {
  animation: stepFadeIn 0.4s 0.6s ease both;
}