/* Booking Page Styles - SnelleOplossingHotel */
.booking-hero {
  background: linear-gradient(120deg, rgba(15,50,80,.06), rgba(201,169,97,.06));
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
}
.hero-copy h1 { margin-bottom: var(--space-3); }
.hero-highlights { color: var(--color-text-light); display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.hero-highlights i { color: var(--color-secondary); margin-right: .5rem; }
.hero-highlights li { display: flex; align-items: center; gap: .5rem; }
.hero-media { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); }

.room-card { cursor: pointer; }
.room-card .price { font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); }

.price-summary { display: grid; gap: .5rem; }
.price-summary .total { font-size: var(--font-size-xl); color: var(--color-primary-dark); }

.amenities-list { display: grid; gap: .4rem; color: var(--color-text-light); }
.amenities-list i { color: var(--color-secondary); margin-right: .5rem; }
.amenities-list li { display: flex; align-items: center; }

/* Confirmation section */
#confirmation .card { border-left: 4px solid var(--color-success); }

/* Minor helpers */
.text-right { float: right; }

/* Accessibility tweaks */
.room-card:focus-within, .room-card:focus { outline: 2px solid var(--color-secondary); outline-offset: 2px; }