/*
 * hotel.css — Hotel listing & detail styling.
 * Uses design tokens from variables.css. No hardcoded hex values.
 */

/* ── Star rating badge ─────────────────────────────────────────────────── */
.star-rating {
  color: var(--color-gold);
  font-size: var(--font-size-sm);
  display: inline-flex;
  gap: 0.2rem;
}

.hotel-card-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background-color: var(--color-primary-10);
  color: var(--color-primary);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
}

/* ── Room Type Cards ────────────────────────────────────────────────────── */
.room-type-card {
  background-color: var(--color-bg-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.room-type-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.room-type-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.room-type-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.room-type-price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-primary);
}

.room-type-price sub {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.room-specs {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.room-spec-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.room-spec-item i {
  color: var(--color-primary);
}

/* ── Amenities list grid ────────────────────────────────────────────────── */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-md);
}

.amenity-chip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.amenity-chip i {
  color: var(--color-primary);
  font-size: var(--font-size-base);
}

/* ── Admin Room Repeater ───────────────────────────────────────────────── */
.room-type-row {
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.room-type-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}