/* ==========================================================================
   Hotels & Resorts — Page-Specific Styles
   ========================================================================== */
.hotel-card { border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; }
.hotel-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }
.hotel-card-img { height: 220px; overflow: hidden; position: relative; }
.hotel-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hotel-card:hover .hotel-card-img img { transform: scale(1.06); }
.hotel-badge { position: absolute; top: var(--space-3); left: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-luxury { background: linear-gradient(135deg, var(--color-gold), #B8860B); color: #fff; }
.badge-midrange { background: var(--color-primary); color: #fff; }
.badge-budget { background: var(--color-success); color: #fff; }
.hotel-card-body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.hotel-card-body h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.hotel-stars { color: var(--color-gold); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.hotel-location { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.hotel-amenities { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.hotel-amenity { font-size: 0.7rem; padding: var(--space-1) var(--space-2); background: var(--color-surface-2); border-radius: var(--radius-sm); color: var(--color-text-muted); }
.hotel-price { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.hotel-price-amount { font-size: var(--text-xl); font-weight: 800; color: var(--color-primary); }
.hotel-price-amount small { font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }