/* holiday-search — ONLY what holiday search needs on top of the offers embed's
   own styles (vendor/offers-widget.css + vendor/offers-detail.css, generated).
   No colours or fonts are defined here: every one comes from the offers
   tokens (--nv/--gold/--ln… on .tmso, --hd-* on :root), themed per agent by
   the offers' own applyBranding (vendor/offers-branding.js). */

[hidden] { display: none !important; }

/* Iframe-first: the offers page fills a viewport (min-height:100vh). Inside an
   auto-sized iframe 100vh IS the iframe's height, which would stop it ever
   shrinking back after a tall detail page. */
.hd-app { min-height: 0; }

/* The search view sits on the agent's page like the offers widget does — no
   grey page background behind it (the detail view keeps the offers' grey). */
body.hs-on-search, body.hs-on-search .hd-app { background: transparent; }

/* ── Search bar: the offers .bar segments, holding <select>s ─────────────── */
.tmso .hs-sel { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; width: 100%;
  font-size: 16px; color: inherit; font-weight: inherit; cursor: pointer; outline: none; text-overflow: ellipsis; }
.tmso .seg .val { position: relative; }
.tmso .seg .val::after { content: '▾'; font-size: 11px; color: var(--lab); flex: 0 0 auto; pointer-events: none; }
.tmso .seg[data-x="Sort"] { flex: 1.1; }
.tmso.hs-search { padding: 4px; }
/* The offers widget swaps its bar for a separate mobile UI at ≤900px; ours is
   one bar of selects, so it wraps into rounded rows instead of disappearing. */
@media (max-width: 900px) {
  .tmso .shell { padding: 16px; border-radius: 24px; }
  .tmso .bar, .tmso .below, .tmso .pagfoot { display: flex; }
  .tmso .bar { flex-wrap: wrap; border-radius: 22px; }
  .tmso .bar .seg { flex: 1 1 45%; border-bottom: 1px solid var(--lns); }
  .tmso .bar .seg.kwseg { flex: 1 1 100%; }
  .tmso .bar .rule { display: none; }
  .tmso .below { margin-top: 14px; }
}

/* ── Card: the offers .card, plus what a holiday card carries extra ──────── */
.tmso .card { cursor: pointer; }
.tmso .im { background-color: var(--chip); }
.tmso .bg + .bg { top: 38px; }
.tmso .de { justify-content: center; text-align: center; }
.tmso .de, .tmso .mt { text-align: center; }
.tmso .pr.hs-por { font-size: 1rem; }
.tmso .hs-basis { font-size: .72rem; color: var(--mut); margin-top: 8px; line-height: 1.45; }
.tmso .hs-disc { font-size: .66rem; color: var(--lab); margin-top: 6px; }

/* ── Detail ───────────────────────────────────────────────────────────────── */
.hd-hero { cursor: zoom-in; }
.hd-gallery-grid .hd-gallery-btn { cursor: pointer; }
.hd-highlight-item { text-transform: capitalize; }
/* The offers stats are short ("7", "Flights"); ours include "Bed & Breakfast",
   which the offers' word-break:break-word split mid-word on a phone. Break at
   spaces, and give each stat half the bar on small screens. */
.hd-stat-value { word-break: normal; overflow-wrap: normal; }
@media (max-width: 767px) { .hd-stat-item { flex: 1 1 45%; border-right: 0; } }
.hd-vpc-val.hs-por { font-size: 1.6rem; letter-spacing: 0; }
.hd-vpc-unit { white-space: normal; text-align: left; }
.hs-price-details { margin-top: 6px; }
.hs-price-details .hd-tc-text { margin-top: 10px; }
.hs-price-details .hd-read-more-btn { display: inline-block; margin-top: 4px; }
.hs-disclaimer { font-size: .78rem; color: var(--hd-mut); text-align: center; margin: 8px 0 0; }
.hs-principal .hd-stc-text a { color: inherit; }