/* VOYAGER_THEME_CONTENT_CSS_V1 - offer strip + trust band + generic
   .voy-section heading pattern reused by every homepage content section. */
.voy-section{padding:56px 0}
.voy-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.voy-section-eyebrow{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--voy-color-primary-dark)}
.voy-section-head h2{font-size:clamp(20px,2.4vw,26px);margin-top:6px}
.voy-section-head p{font-size:14px;color:var(--voy-color-muted);max-width:360px;margin:0}

.voy-offer-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.voy-offer-card{
  border-radius:var(--voy-radius-lg);overflow:hidden;background:var(--voy-color-surface);
  border:1px solid var(--voy-color-border);box-shadow:var(--voy-shadow-sm);
}
.voy-offer-card:hover{box-shadow:var(--voy-shadow-md);border-color:var(--voy-color-border-strong)}
.voy-offer-media{
  height:120px;background:linear-gradient(135deg,var(--voy-color-primary-tint),var(--voy-color-surface-alt));
  background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:10px;
}
.voy-offer-badge{
  background:rgba(255,255,255,.92);color:var(--voy-color-ink);font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:var(--voy-radius-pill);
}
.voy-offer-body{padding:14px}
.voy-offer-route{font-size:15px;font-weight:700;margin-bottom:2px}
.voy-offer-meta{font-size:12px;color:var(--voy-color-muted);margin-bottom:8px}
.voy-offer-price{display:flex;align-items:baseline;gap:5px;font-size:12px;color:var(--voy-color-muted)}
.voy-offer-price strong{font-size:17px;color:var(--voy-color-primary-dark);font-weight:800}
.voy-offer-empty{
  grid-column:1/-1;padding:36px;text-align:center;border:1px dashed var(--voy-color-border-strong);
  border-radius:var(--voy-radius-lg);color:var(--voy-color-muted);font-size:14px;
}

.voy-trust-band{background:var(--voy-color-surface-alt)}
.voy-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.voy-trust-card{background:var(--voy-color-surface);border:1px solid var(--voy-color-border);
  border-radius:var(--voy-radius-lg);padding:22px}
.voy-trust-card .voy-icon{width:26px;height:26px;color:var(--voy-color-primary);margin-bottom:12px}
.voy-trust-card h3{font-size:16px;font-family:var(--voy-font-body);font-weight:700;margin-bottom:6px}
.voy-trust-card p{font-size:13px;color:var(--voy-color-muted);margin:0;line-height:1.55}

@media (max-width:900px){
  .voy-offer-rail{grid-template-columns:repeat(2,1fr)}
  .voy-trust-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .voy-section{padding:36px 0}
  .voy-offer-rail{grid-template-columns:1fr 1fr;gap:12px}
  .voy-offer-media{height:92px}
}

/* HOTEL_V2_NIGHT_MISSION_RESULTS_PAGE_V1 (2026-09-21): the real hotel
   search-results grid - a distinct, dedicated class set (voy-hotel-*)
   so this rebuild never touches the shared .voy-offer-* rail used by
   the homepage "featured hotels" strip or by flight offer cards. */
.voy-hotel-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:18px;padding:12px 16px;background:var(--voy-color-surface);
  border:1px solid var(--voy-color-border);border-radius:var(--voy-radius-lg);
}
.voy-hotel-toolbar-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.voy-hotel-chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--voy-radius-pill);
  border:1px solid var(--voy-color-border-strong);background:var(--voy-color-surface);
  font-size:12.5px;font-weight:600;color:var(--voy-color-ink);cursor:pointer;user-select:none;
}
.voy-hotel-chip input{margin:0}
.voy-hotel-chip.is-active{background:var(--voy-color-primary-tint);border-color:var(--voy-color-primary)}
.voy-hotel-toolbar-sort{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--voy-color-muted)}
.voy-hotel-toolbar-sort select{
  border-radius:var(--voy-radius-md);border:1px solid var(--voy-color-border-strong);
  padding:7px 10px;font-size:13px;font-weight:600;color:var(--voy-color-ink);background:var(--voy-color-surface);
}
.voy-hotel-count{font-size:12.5px;color:var(--voy-color-muted)}

.voy-hotel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.voy-hotel-card{
  display:flex;flex-direction:column;border-radius:var(--voy-radius-lg);overflow:hidden;
  background:var(--voy-color-surface);border:1px solid var(--voy-color-border);box-shadow:var(--voy-shadow-sm);
  transition:box-shadow .15s,border-color .15s;
}
.voy-hotel-card:hover{box-shadow:var(--voy-shadow-md);border-color:var(--voy-color-border-strong)}
.voy-hotel-card-media{
  height:170px;background:linear-gradient(135deg,var(--voy-color-primary-tint),var(--voy-color-surface-alt));
  background-size:cover;background-position:center;position:relative;
}
.voy-hotel-card-stars{
  position:absolute;top:10px;left:10px;background:rgba(255,255,255,.94);color:#d9a441;font-size:12px;
  font-weight:700;padding:4px 9px;border-radius:var(--voy-radius-pill);letter-spacing:1px;
}
.voy-hotel-card-source{
  position:absolute;top:10px;right:10px;background:var(--voy-color-primary-dark);color:#fff;font-size:10.5px;
  font-weight:700;padding:4px 9px;border-radius:var(--voy-radius-pill);text-transform:uppercase;letter-spacing:.04em;
}
.voy-hotel-card-body{padding:15px;display:flex;flex-direction:column;gap:4px;flex:1}
.voy-hotel-card-name{font-size:16px;font-weight:700;margin:0}
.voy-hotel-card-location{font-size:12.5px;color:var(--voy-color-muted);margin:0 0 6px}
.voy-hotel-card-meta{font-size:12.5px;color:var(--voy-color-ink);margin:0 0 2px}
.voy-hotel-card-tags{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.voy-hotel-card-tag{
  font-size:11px;font-weight:600;color:var(--voy-color-muted);background:var(--voy-color-surface-alt);
  padding:3px 8px;border-radius:var(--voy-radius-pill);
}
.voy-hotel-card-footer{
  margin-top:auto;padding-top:10px;border-top:1px solid var(--voy-color-border);
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
}
.voy-hotel-card-price small{display:block;font-size:11px;color:var(--voy-color-muted)}
.voy-hotel-card-price strong{font-size:19px;color:var(--voy-color-primary-dark);font-weight:800}
.voy-hotel-card-price .voy-hotel-price-tax-note{font-size:10.5px;color:var(--voy-color-muted)}
.voy-hotel-card-cta{
  display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:var(--voy-radius-pill);
  background:var(--voy-color-primary);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;
}
.voy-hotel-empty{
  grid-column:1/-1;padding:40px 20px;text-align:center;border:1px dashed var(--voy-color-border-strong);
  border-radius:var(--voy-radius-lg);color:var(--voy-color-muted);font-size:14px;
}
.voy-hotel-card[hidden]{display:none}

@media (max-width:900px){
  .voy-hotel-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
@media (max-width:560px){
  .voy-hotel-grid{grid-template-columns:1fr}
  .voy-hotel-toolbar{flex-direction:column;align-items:stretch}
  .voy-hotel-toolbar-sort{justify-content:space-between}
  .voy-hotel-card-media{height:150px}
}

/* HOTEL_RESULTS_COMPACT_SEARCH_BAR_V1 (admin P0 correction, 2026-09-23):
   the dedicated hotel results page's "modify search" bar - one flex
   row of the same .voy-field boxes the flight results page's own
   compact .voy-results-controls "add passenger" trigger already uses
   (app.css), never the homepage's big card-wrapped .voy-search-panel
   (search.css). position:relative so #voy-hotel-guests-pop's
   position:absolute anchors to this row, not the page root - the same
   fix already applied once for the flight results page's own passenger
   popover (see RESULTS_CONTROLS_GROUP_FIX_V1 in search_results.html). */
.voy-hotel-results-bar{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
  position:relative;margin-bottom:22px;
}
.voy-hotel-results-bar-field{flex:1 1 150px;min-width:130px}
.voy-hotel-results-bar-field#hotel-guests-trigger{flex:0 1 190px}
.voy-hotel-results-bar-submit{
  flex:0 0 auto;height:42px;border-radius:var(--voy-radius-md);padding:0 20px;font-size:14px;
}
.voy-hotel-results-bar-errors{
  flex:1 1 100%;color:var(--voy-color-error);font-size:12px;order:99;
}
@media (max-width:760px){
  .voy-hotel-results-bar{flex-direction:column;align-items:stretch}
  .voy-hotel-results-bar-field,.voy-hotel-results-bar-field#hotel-guests-trigger{flex:1 1 auto;min-width:0}
  .voy-hotel-results-bar-submit{width:100%}
}