:root {
  --booking-title-highlight-color: #fbbf24;
  --booking-modal-blur: var(--spacing-xs);
  --booking-modal-backdrop: rgba(0, 0, 0, 0.7);
  --booking-close-size: 35px;
  --booking-close-size-mobile: 30px;
  --booking-input-left-padding: 50px;
  --booking-success-bg-alpha: rgba(76, 175, 80, 0.05);
  --booking-error-bg-alpha: rgba(244, 67, 54, 0.05);
}

.modal-backdrop {
  backdrop-filter: blur(var(--booking-modal-blur));
  background-color: var(--booking-modal-backdrop);
}

.booking-modal-content {
  border: none;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
}

.booking-modal-header {
  background: var(--gradient-brand);
  color: var(--white-color);
  padding: var(--spacing-xl);
  text-align: center;
  border: none;
  position: relative;
}

.booking-modal-title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-xs);
}

.booking-title-highlight {
  color: var(--booking-title-highlight-color);
}

.booking-modal-subtitle {
  font-size: var(--font-size-md);
  opacity: 0.9;
  margin-bottom: 0;
  line-height: var(--line-height-relaxed);
}

.btn-close.booking-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: var(--border-radius-circle);
  width: var(--booking-close-size);
  height: var(--booking-close-size);
  color: var(--white-color);
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.btn-close.booking-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.booking-modal-body {
  padding: var(--spacing-xl);
  background: var(--white-color);
}

#bookingModal .form-group {
  margin-bottom: var(--spacing-lg);
  position: relative;
}

#bookingModal .form-control {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md)
    var(--booking-input-left-padding);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  border: var(--border-medium) solid var(--gray-300);
  border-radius: var(--border-radius-lg);
  background: var(--gray-50);
  transition: var(--transition-smooth);
  height: auto;
  min-height: 55px;
  line-height: var(--line-height-normal);
}

#bookingModal .form-control::placeholder {
  color: var(--gray-500);
  font-weight: var(--font-weight-normal);
}

#bookingModal .form-control:focus {
  outline: none;
  border-color: var(--secondary-color);
  background: var(--white-color);
  box-shadow: 0 0 0 3px rgba(var(--secondary-color-rgb), 0.1);
  color: var(--dark-color);
}

#bookingModal .input-icon {
  position: absolute;
  left: var(--spacing-md);
  top: 38px;
  transform: translateY(-50%);
  color: var(--gray-500);
  font-size: var(--font-size-lg);
  z-index: 10;
  pointer-events: none;
}

#bookingModal .btn-primary {
  background: var(--gradient-secondary);
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--white-color);
  width: 100%;
  min-height: 55px;
  transition: var(--transition-smooth);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  line-height: 1;
}

#bookingModal .btn-primary:hover:not(:disabled) {
  background: var(--gradient-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

#bookingModal .btn-primary:active,
#bookingModal .btn-primary:focus {
  transform: translateY(0);
  outline: none;
}

#bookingModal .btn-primary:disabled {
  background: var(--gray-400);
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

#bookingModal .btn-primary .btn-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  line-height: 1;
}

#bookingModal .form-control.is-valid {
  border-color: var(--success-color);
  background-color: var(--booking-success-bg-alpha);
}

#bookingModal .form-control.is-invalid {
  border-color: var(--error-color);
  background-color: var(--booking-error-bg-alpha);
}

#bookingModal .valid-feedback {
  color: var(--success-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-top: var(--spacing-xs);
}

#bookingModal .invalid-feedback {
  color: var(--error-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-top: var(--spacing-xs);
}

#bookingModal .btn-loading {
  position: relative;
  pointer-events: none;
}

#bookingModal .btn-loading .btn-text {
  opacity: 0;
}

#bookingModal .btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  border: var(--border-medium) solid transparent;
  border-top: var(--border-medium) solid var(--white-color);
  border-radius: var(--border-radius-circle);
  animation: modalSpin 1s linear infinite;
}

@keyframes modalSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (max-width: 768px) {
  .booking-modal-header,
  .booking-modal-body {
    padding: var(--spacing-lg);
  }

  .booking-modal-title {
    font-size: var(--font-size-xl);
  }

  .btn-close.booking-close {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: var(--booking-close-size-mobile);
    height: var(--booking-close-size-mobile);
    font-size: var(--font-size-md);
  }
}

@media (prefers-contrast: high) {
  #bookingModal .form-control {
    border-width: var(--border-thick);
  }

  #bookingModal .btn-primary {
    border: var(--border-thick) solid currentColor;
  }

  #bookingModal .valid-feedback,
  #bookingModal .invalid-feedback {
    font-weight: var(--font-weight-bold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-close.booking-close,
  #bookingModal .btn-primary,
  #bookingModal .form-control {
    transition: none;
  }

  .btn-close.booking-close:hover {
    transform: none;
  }

  #bookingModal .btn-primary:hover:not(:disabled) {
    transform: none;
  }
}