/* Hotels – Booking.com search (assets/js/hotels.js) */
.ht .sec-head { margin-bottom: 30px; }
.ht-search { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; padding: 18px; border-radius: var(--r-lg, 28px); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.ht-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ht-f label { font: 600 12px var(--title); letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6b7590); }
.ht-f select, .ht-f input { height: 50px; width: 100%; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--smoke, #f3f6fa); font: 500 15px var(--title); color: var(--navy); }
.ht-f select:focus, .ht-f input:focus { outline: 2px solid var(--green); outline-offset: 1px; background: #fff; }
.ht-rated { grid-column: 1 / -2; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--navy); order: 9; }
.ht-rated input { width: 18px; height: 18px; accent-color: var(--green); }
.ht-go { height: 50px; min-height: 50px; white-space: nowrap; }
.ht-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.ht-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px 62px; border-radius: var(--r, 20px); background: #fff; border: 1px solid var(--line); color: var(--navy); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.ht-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.ht-pin { position: absolute; left: 16px; top: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--smoke, #f3f6fa); color: var(--green-d, #22b3a8); }
.ht-pin .ic { width: 17px; height: 17px; }
.ht-card b { font: 600 16px/1.25 var(--title); }
.ht-sub { font-size: 14px; color: var(--muted, #6b7590); }
.ht-cta { margin-top: 6px; font: 600 13px var(--title); color: var(--green-d, var(--teal-700)); }
.ht-note { margin-top: 18px; font-size: 13px; color: var(--muted, #6b7590); }
.ht-jump { display: inline-block; margin-top: 12px; font: 600 14px var(--title); color: var(--green-d, var(--teal-700)); text-decoration: none; }
.ht-jump:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .ht-search { grid-template-columns: 1fr 1fr; }
  .ht-where { grid-column: 1 / -1; }
  .ht-rated { grid-column: 1 / -1; order: 0; }
  .ht-go { grid-column: 1 / -1; width: 100%; }
  .ht-areas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ht-search { padding: 14px; }
  .ht-areas { grid-template-columns: 1fr; }
}
/* home page: flights link under the hotel search (step 3 of the journey) */
.ht-trip { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: var(--r, 20px); background: var(--smoke, #f3f6fa); }
.ht-trip > span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--green-d, var(--teal-700)); }
.ht-trip > span .ic { width: 18px; height: 18px; }
.ht-trip p { flex: 1; min-width: 0; margin: 0; font-size: 15px; color: var(--navy); }
.ht-trip .btn { flex: none; }
@media (max-width: 640px) { .ht-trip { flex-wrap: wrap; } .ht-trip p { flex-basis: calc(100% - 54px); } .ht-trip .btn { width: 100%; } }
/* trip page (flights.html): the hotel block sits between the flight search and the travel info */
#fl-app ~ #hotels, .fl + .ht { padding-top: 24px; }
/* home page "How it works": links under steps 1 and 3 */
.step .step-go { display: inline-block; margin-top: 10px; font: 600 14px var(--title); color: var(--green-d, var(--teal-700)); text-decoration: none; }
.step .step-go:hover { text-decoration: underline; }