.booking-layout { display: grid; gap: 2rem; align-items: start; }
.booking-copy { display: grid; gap: 1rem; }
.booking-form, .booking-preview { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.booking-form { display: grid; gap: 1rem; }
.booking-preview { display: grid; gap: 1rem; }
.booking-preview img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); background: hsl(var(--muted)); }
.form-grid-two { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.price-panel { border-radius: var(--radius); background: hsl(var(--muted)); padding: 1rem; color: hsl(var(--muted-foreground)); }
.price-panel strong { color: hsl(var(--foreground)); font-size: 1.25rem; }
.modal-backdrop { position: fixed; inset: 0; background: hsl(var(--foreground) / 0.46); display: grid; place-items: center; padding: 1rem; z-index: 40; }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(100%, 30rem); background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); padding: 1.5rem; box-shadow: var(--shadow-lg); display: grid; gap: 1rem; }
.modal-actions { display: grid; gap: 0.75rem; }
@media (min-width: 640px) {
  .form-grid-two { grid-template-columns: 1fr 1fr; }
  .modal-actions { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .booking-layout { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; }
}