/* =========================
   Responsive Booking Widget
   ========================= */
   .booking {
    position: relative !important;  /* override global fixed/floating styles */
    width: 100% !important;
    max-width: 400px !important; /* adjust max width */
    margin: 0 auto 2rem auto !important; /* center with bottom spacing */
    padding: 1rem !important;
    box-sizing: border-box !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--border-radius) !important;
    background-color: var(--color-white) !important;
    overflow: hidden !important;
  }
  
  /* Header inside booking */
  .booking h3 {
    font-size: 1.3rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Form rows inside booking */
  .booking .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Inputs, selects, buttons */
  .booking input,
  .booking select,
  .booking button {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Tablet and mobile adjustments */
  @media (max-width: 1024px) {
    .booking {
      max-width: 90% !important;
      padding: 1rem !important;
    }
  
    .booking .row {
      grid-template-columns: 1fr !important;
      gap: 0.5rem !important;
    }
  }
  
  /* Small mobile screens */
  @media (max-width: 768px) {
    .booking {
      position: static !important;
      max-width: 100% !important;
      margin-bottom: 2rem !important;
      padding: 1rem !important;
    }
  
    .booking h3 {
      font-size: 1.2rem !important;
      margin-bottom: 0.5rem !important;
    }
  }