.reservation-header { position: fixed; top:0; left:0; right:0; z-index:1000; background: rgba(255,255,255, 0.55); border-bottom: 1px solid rgba(255,255,255,.4); backdrop-filter: saturate(140%) blur(10px); }
.reservation-hero { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.reservation-hero img { width: 100%; height: 100%; object-fit: cover; position: absolute; left:0; top:0; }
.reservation-hero-overlay { position:absolute; inset:0; background: rgba(0,0,0,0.25); pointer-events: none; }
.reservation-hero img { pointer-events: none; }
/* Crossfade */
.reservation-fade-base { opacity: 1; transition: opacity 900ms ease-in-out; }
.reservation-fade-top { opacity: 0; transition: opacity 900ms ease-in-out; }
.reservation-fade-top.fade-in { opacity: 1; }
.reservation-content { position: relative; z-index: 200; min-height: 100vh; display:flex; flex-direction: column; align-items:center; justify-content:center; padding-top: 120px; }
.reservation-card { background: rgba(255,255,255,0.82); border-radius: 18px; padding: 32px; max-width: 1200px; width: 95%; box-shadow: 0 30px 80px rgba(0,0,0,.18); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.45); }
.reservation-form-card { background: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 20px 60px rgba(0,0,0,.12); margin: 80px auto 16px; }
.search-bar { display:grid; grid-template-columns: 1.2fr 1.2fr .9fr .6fr; gap: 12px; align-items:center; margin-bottom: 18px; }
.search-bar .pill { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:10px 14px; height:48px; display:flex; align-items:center; }
.search-bar .pill input { border:0; outline:none; width:100%; }
.btn-orange { background:#ef4444; color:#fff; border:0; border-radius:12px; padding:12px 22px; font-weight:700; box-shadow:0 10px 20px rgba(239,68,68,.25); }
.btn-orange:hover { filter:brightness(1.05); }
.reservation-list { width:95%; max-width:1200px; margin:18px auto 40px; }
.reservation-rooms .room { position:relative; background: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,.35); border-radius: 16px; padding: 18px 180px 18px 18px; margin-bottom: 18px; display:flex; gap:18px; align-items:flex-start; transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 12px 30px rgba(0,0,0,.08); backdrop-filter: blur(8px); }
.reservation-rooms .room img { width: 140px; height: 100px; object-fit: cover; border-radius: 8px; }
.reservation-rooms .room:hover { box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: translateY(-2px); transition: all .2s ease; }
.room .title { font-size:22px; font-weight:700; color:#111827; margin:0 0 6px; }
.room .promo { color:#dc2626; font-weight:800; font-size:20px; margin-bottom:6px; }
.room .meta { color:#374151; font-size:14px; }
.room .actions { display:flex; gap:18px; align-items:center; margin-top:8px; }
.room .actions a { color:#111827; text-decoration:none; font-weight:600; }
.room .price-box { position:absolute; right:18px; top: 22px; background:#ffffff; color:#111827; padding:10px 16px; border-radius:12px; font-weight:800; letter-spacing:.2px; box-shadow:0 6px 18px rgba(0,0,0,.12); border:1px solid #e5e7eb; min-width: 140px; text-align:center; }
.room .price-box .cur { display:inline-block; background:#111827; color:#fff; padding:2px 8px; border-radius:8px; margin-right:8px; font-weight:700; }
.reservation-nav a { margin-right: 16px; cursor:pointer; color:#111827; text-decoration:none; font-weight:600; padding: 6px 10px; border-radius: 10px; transition: background .2s ease, color .2s ease; }
.reservation-nav a + a { margin-left: 8px; }
.reservation-nav a:hover { background: rgba(17,24,39,.06); }
.reservation-lang .btn.active { background:#333; color:#fff; border-color:#333; }
.reservation-logo { height: 56px; }
.reservation-lang-dropdown { top: 8px; right: 0; }
.reservation-lang-dropdown .btn { border-radius: 999px; }
.reservation-lang-dropdown .dropdown-menu { border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.reservation-lang-dropdown .dropdown-item.active { background: #f0f0f0; font-weight: 600; }

/* Form styling */
.reservation-card .form-control { border-radius: 12px; border-color: #e5e7eb; padding: 12px 14px; background: #fff; }
.reservation-card .form-control:focus { border-color: #b5c3ff; box-shadow: 0 0 0 .2rem rgba(88,118,255,.15); }
.reservation-card .btn-primary { background: linear-gradient(135deg,#ef4444,#dc2626); border: 0; border-radius: 12px; box-shadow: 0 10px 24px rgba(239,68,68,.3); padding: 12px 16px; }
.reservation-card .btn-primary:hover { filter: brightness(1.05); }
.reservation-card .btn-success { background: linear-gradient(135deg,#111827,#1f2937); border: 0; border-radius: 12px; box-shadow: 0 10px 22px rgba(17,24,39,.28); padding: 10px 14px; }

/* Price badge */
.price-badge { background: #111827; color: #fff; padding: 6px 10px; border-radius: 999px; font-weight: 700; letter-spacing: .2px; display: inline-flex; align-items: center; gap: 6px; }
.price-badge .currency { opacity: .85; font-weight: 600; }
.price-badge .per { opacity: .7; font-weight: 500; margin-left: 4px; }

/* Floating form labels refinement */
.form-floating > label { color: #6b7280; }
.form-floating > .form-control { padding: 1rem .75rem; }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { opacity: .85; transform: scale(.85) translateY(-.5rem) translateX(.15rem); }
@media(max-width:768px){ .reservation-content{ padding-top: 90px;} }

/* Responsive tweaks */
@media (max-width: 992px) {
  .search-bar { grid-template-columns: 1fr; gap: 10px; }
  .btn-orange { width: 100%; }
  .reservation-form-card { margin: 90px 12px 16px; width: calc(100% - 24px); }
}

@media (max-width: 768px) {
  .reservation-rooms .room { flex-direction: column; padding: 14px; gap: 12px; padding-right: 14px; }
  .reservation-rooms .room img { width: 100%; height: 180px; }
  .room .price-box { position: static; align-self: flex-end; margin-top: 8px; }
}