/* THE SEARCH BARS — Stays, Trips, Experiences (Chiran, 22–23 October 2026)
   Values from the Design System sheet "Inner pages — short banner, same header, search": a white
   pill, centred, half on the photo (bottom −34px), only as wide as its fields (field min 120px,
   Where 200px, 52px tall), violet Search button. Panels = the country-code picker's look
   (phone-field.css): white, 12px corner, hairline #E4E4EC, search box with a violet ring, rows
   with a violet tint, chosen row violet. Phone: one white "Where to?" pill → a full-screen sheet.
   Everything is scoped to .ssq; the theme's gold buttons are reset. */

.ss-hero--search { margin-bottom: 96px; }   /* about 64px from the bar to the results title (Chiran, 23 Oct 2026: it was touching) */
.ss-chrome .ssq { font-family: var(--font-label); color: var(--navy, #090920); text-align: left; }
.ss-chrome .ssq *, .ss-chrome .ssq *::before, .ss-chrome .ssq *::after { box-sizing: border-box; }
.ss-chrome .ssq button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; text-transform: none; letter-spacing: normal;
  box-shadow: none; border-radius: 0; cursor: pointer; line-height: inherit; min-height: 0; height: auto; width: auto; }
.ss-chrome .ssq button:hover, .ss-chrome .ssq button:focus { background: none; color: inherit; }
.ss-chrome .ssq svg { display: block; flex: 0 0 auto; }
.ss-chrome .ssq [hidden] { display: none !important; }

/* ── the computer bar ── */
.ss-chrome .ssq { position: absolute; z-index: 30; left: 50%; bottom: -34px; transform: translateX(-50%); }
.ss-chrome .ssq__pill, .ss-chrome .ssq__hd, .ss-chrome .ssq__ft { display: none; }
.ss-chrome .ssq__bar { display: inline-flex; align-items: center; background: #fff; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 18px 50px rgba(9,9,32,.18), 0 2px 6px rgba(9,9,32,.06); padding: 6px 6px 6px 8px; }
.ss-chrome .ssq__f { position: relative; flex: 0 0 auto; }
.ss-chrome .ssq__f + .ssq__f::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--border, #E8E8EE); }
.ss-chrome .ssq__f.is-on::before, .ss-chrome .ssq__f.is-on + .ssq__f::before { display: none; }
.ss-chrome .ssq button.ssq__btn { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 16px; min-height: 52px; min-width: 120px; border-radius: 999px; text-align: left; }
.ss-chrome .ssq__f--where button.ssq__btn { min-width: 200px; }
.ss-chrome .ssq button.ssq__btn:hover { background: #F8F4FF; }
.ss-chrome .ssq .ssq__f.is-on button.ssq__btn { background: #F5EEFF; }
.ss-chrome .ssq__i { color: var(--primary, #7700FF); display: grid; }
.ss-chrome .ssq__i svg { width: 18px !important; height: 18px !important; }
.ss-chrome .ssq__t { display: flex; flex-direction: column; min-width: 0; }
.ss-chrome .ssq__l { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary, #8E8EA0); line-height: 1.3; }
.ss-chrome .ssq__v { font-size: 13.5px; color: var(--navy, #090920); margin-top: 1px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.ss-chrome .ssq__v.is-empty { color: var(--text-secondary, #5A5A6E); }
.ss-chrome .ssq__act { display: flex; align-items: center; padding-left: 6px; }
.ss-chrome .ssq button.ssq__go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 999px;
  background: var(--primary, #7700FF); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .15s; }
.ss-chrome .ssq button.ssq__go:hover, .ss-chrome .ssq button.ssq__go:focus-visible { background: var(--primary-dark, #5C00CC); color: #fff; }
.ss-chrome .ssq button.ssq__go svg { width: 18px !important; height: 18px !important; stroke: currentColor; }

/* ── the panels ── */
.ss-chrome .ssq__panel { position: absolute; z-index: 35; top: calc(100% + 12px); left: 0; width: 340px; background: #fff; border: 1px solid #E4E4EC;
  border-radius: 12px; box-shadow: 0 12px 32px rgba(9,9,32,.16); overflow: hidden; white-space: normal; color: var(--navy, #090920); }
.ss-chrome .ssq__panel.is-right { left: auto; right: 0; }
.ss-chrome .ssq__f--checkin .ssq__panel, .ss-chrome .ssq__f--checkout .ssq__panel, .ss-chrome .ssq__f--date .ssq__panel { width: 600px; }
.ss-chrome .ssq__f--language .ssq__panel { width: 260px; }
.ss-chrome .ssq__f--guests .ssq__panel, .ss-chrome .ssq__f--length .ssq__panel { width: 320px; }
.ss-chrome .ssq__s { padding: 10px; border-bottom: 1px solid #EFEFF4; }
.ss-chrome .ssq__in { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; background: #fff; border: 1px solid #7700FF;
  box-shadow: 0 0 0 3px rgba(119,0,255,.10); border-radius: 8px; }
.ss-chrome .ssq__in svg { width: 16px !important; height: 16px !important; color: var(--text-tertiary, #8E8EA0); }
.ss-chrome .ssq__in input { flex: 1 1 auto; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: none !important; padding: 0 !important;
  margin: 0; height: 38px; font: 400 14px/1 var(--font-label); color: var(--navy, #090920); }
.ss-chrome .ssq__h { padding: 10px 14px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary, #8E8EA0); }
.ss-chrome .ssq__list { list-style: none; margin: 0; padding: 6px; max-height: 330px; overflow-y: auto; }
.ss-chrome .ssq__list li { margin: 0; padding: 0; }
.ss-chrome .ssq button.ssq__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px;
  font-size: 14px; color: var(--navy, #090920); text-align: left; }
.ss-chrome .ssq button.ssq__opt:hover, .ss-chrome .ssq button.ssq__opt.is-hl { background: #F5EEFF; }
.ss-chrome .ssq button.ssq__opt.is-sel { color: #5C00CC; font-weight: 600; }
.ss-chrome .ssq button.ssq__opt.is-sel small { color: #7700FF; }
.ss-chrome .ssq button.ssq__opt[disabled] { color: #A3A3B2; cursor: default; background: none; }
.ss-chrome .ssq button.ssq__opt[disabled] small { color: #C4C4CF; }
.ss-chrome .ssq__opt small { font-size: 12px; color: var(--text-tertiary, #8E8EA0); font-weight: 400; white-space: nowrap; }
.ss-chrome .ssq__opt .ssq__ttl { display: flex; flex-direction: column; min-width: 0; }
.ss-chrome .ssq__opt .ssq__ttl b { font-weight: 500; }
.ss-chrome .ssq__opt.is-sel .ssq__ttl b { font-weight: 600; }
.ss-chrome .ssq__opt .ssq__ttl small { margin-top: 1px; white-space: normal; }
.ss-chrome .ssq__opt mark { background: none; color: var(--primary, #7700FF); font-weight: 700; padding: 0; }
.ss-chrome .ssq__none { padding: 14px; font-size: 13px; color: var(--text-secondary, #5A5A6E); }

/* dates */
.ss-chrome .ssq__cal { padding: 14px 16px 12px; }
.ss-chrome .ssq__months { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; }
.ss-chrome .ssq__m b { display: block; text-align: center; font-family: var(--font-heading); font-size: 14px; font-weight: 600; margin-bottom: 8px; line-height: 30px; }
.ss-chrome .ssq button.ssq__nav { position: absolute; top: 0; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: var(--navy, #090920); }
.ss-chrome .ssq button.ssq__nav:hover { background: #F5EEFF; }
.ss-chrome .ssq button.ssq__nav[disabled] { color: #C4C4CF; background: none; cursor: default; }
.ss-chrome .ssq__nav--prev { left: 0; } .ss-chrome .ssq__nav--next { right: 0; }
.ss-chrome .ssq__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; text-align: center; font-size: 12px; }
.ss-chrome .ssq__g .dw { color: var(--text-tertiary, #8E8EA0); font-size: 10.5px; padding-bottom: 4px; }
.ss-chrome .ssq button.ssq__d { height: 32px; display: grid; place-items: center; color: var(--navy, #090920); font-size: 12.5px; border-radius: 999px; width: 100%; }
.ss-chrome .ssq button.ssq__d:hover { background: #F5EEFF; }
.ss-chrome .ssq button.ssq__d[disabled] { color: #C4C4CF; background: none; cursor: default; }
.ss-chrome .ssq button.ssq__d.is-in { background: #F5EEFF; border-radius: 0; }
.ss-chrome .ssq button.ssq__d.is-a, .ss-chrome .ssq button.ssq__d.is-b { background: var(--primary, #7700FF); color: #fff; font-weight: 600; border-radius: 999px; }
.ss-chrome .ssq__sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #EFEFF4;
  font-size: 13px; color: var(--text-secondary, #5A5A6E); }
.ss-chrome .ssq__sum b { color: var(--navy, #090920); font-weight: 600; }
.ss-chrome .ssq__sum-a { display: flex; align-items: center; gap: 14px; }
.ss-chrome .ssq button.ssq__clear { font-size: 13px; color: var(--text-secondary, #5A5A6E); text-decoration: underline; text-underline-offset: 2px; }
.ss-chrome .ssq button.ssq__done { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; background: var(--primary, #7700FF);
  color: #fff; font-size: 13px; font-weight: 600; }
.ss-chrome .ssq button.ssq__done:hover { background: var(--primary-dark, #5C00CC); color: #fff; }

/* steppers */
.ss-chrome .ssq__stp { padding: 6px 16px 14px; }
.ss-chrome .ssq__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #EFEFF4; }
.ss-chrome .ssq__row b { display: block; font-size: 14px; font-weight: 600; } .ss-chrome .ssq__row small { display: block; font-size: 12px; color: var(--text-tertiary, #8E8EA0); margin-top: 2px; }
.ss-chrome .ssq__c { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-chrome .ssq__c output { min-width: 30px; text-align: center; }
.ss-chrome .ssq button.ssq__pm { width: 32px; height: 32px; border-radius: 999px; border: 1px solid #D9D9E3; display: grid; place-items: center; color: var(--navy, #090920); }
.ss-chrome .ssq button.ssq__pm:hover { border-color: var(--primary, #7700FF); color: var(--primary, #7700FF); }
.ss-chrome .ssq button.ssq__pm[disabled] { color: #C4C4CF; border-color: #EFEFF4; cursor: default; }
.ss-chrome .ssq button.ssq__pm svg { width: 14px !important; height: 14px !important; }
.ss-chrome .ssq__stp .ssq__sum { border-top: 0; margin-top: 0; }

/* ── phones and small tablets (the Trips bar is 856px wide): one pill, then a full-screen sheet ── */
@media (max-width: 899px) {
  .ss-hero--search { margin-bottom: 0; }
  .ss-chrome .ssq { left: 24px; right: 24px; bottom: -30px; transform: none; max-width: 560px; margin: 0 auto; }
  .ss-chrome .ssq button.ssq__pill { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; color: var(--navy, #090920); border-radius: 999px;
    padding: 14px 20px; box-shadow: 0 14px 40px rgba(9,9,32,.2); text-align: left; }
  .ss-chrome .ssq__pill-i { color: var(--primary, #7700FF); display: grid; } .ss-chrome .ssq__pill-i svg { width: 20px !important; height: 20px !important; }
  .ss-chrome .ssq__pill-t { display: flex; flex-direction: column; min-width: 0; }
  .ss-chrome .ssq__pill-t b { display: block; font-size: 15px; line-height: 1.3; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ss-chrome .ssq__pill-t span { display: block; font-size: 12px; line-height: 1.35; color: var(--text-secondary, #5A5A6E); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ss-chrome .ssq__sheet { display: none; }
  /* open: above the header (z 40) and the cookie notice (z 99999); .ssq itself is the layer */
  .ss-chrome .ssq.is-open { z-index: 100001; }
  .ss-chrome .ssq.is-open .ssq__sheet { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 100000; background: #fff; }
  .ss-chrome .ssq.is-open .ssq__hd { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 16px; border-bottom: 1px solid var(--border, #E8E8EE); flex: 0 0 auto; }
  .ss-chrome .ssq__hd b { font-family: var(--font-heading); font-size: 20px; font-weight: 600; }
  .ss-chrome .ssq button.ssq__x { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border, #E8E8EE); display: grid; place-items: center; }
  .ss-chrome .ssq__x svg { width: 18px !important; height: 18px !important; }
  .ss-chrome .ssq__bar { display: block; flex: 1 1 auto; overflow-y: auto; background: none; box-shadow: none; border-radius: 0; padding: 8px 24px 24px; white-space: normal; }
  .ss-chrome .ssq__f { margin-top: 12px; border: 1px solid var(--border, #E8E8EE); border-radius: 16px; }
  .ss-chrome .ssq__f.is-on { border-color: #C9A5FF; }
  .ss-chrome .ssq__f + .ssq__f::before { display: none; }
  .ss-chrome .ssq button.ssq__btn { width: 100%; border-radius: 16px; min-width: 0; padding: 10px 16px; }
  .ss-chrome .ssq__f--where button.ssq__btn { min-width: 0; }
  .ss-chrome .ssq .ssq__f.is-on button.ssq__btn { background: none; }
  .ss-chrome .ssq__v { font-size: 15px; max-width: none; }
  .ss-chrome .ssq__panel, .ss-chrome .ssq__f--checkin .ssq__panel, .ss-chrome .ssq__f--checkout .ssq__panel, .ss-chrome .ssq__f--date .ssq__panel,
  .ss-chrome .ssq__f--language .ssq__panel, .ss-chrome .ssq__f--guests .ssq__panel, .ss-chrome .ssq__f--length .ssq__panel {
    position: static; width: auto; border: 0; border-top: 1px solid #EFEFF4; border-radius: 0 0 16px 16px; box-shadow: none; }
  .ss-chrome .ssq__months { grid-template-columns: 1fr; }
  .ss-chrome .ssq__months .ssq__m + .ssq__m { display: none; }    /* one month at a time on a phone */
  .ss-chrome .ssq__list { max-height: 300px; }
  .ss-chrome .ssq__act { display: none; }
  .ss-chrome .ssq.is-open .ssq__ft { display: block; padding: 16px 24px 24px; border-top: 1px solid var(--border, #E8E8EE); flex: 0 0 auto; }
  .ss-chrome .ssq button.ssq__go--wide { width: 100%; }
  html.ssq-lock, html.ssq-lock body { overflow: hidden !important; }
}
/* The theme's own search form stays in the page for its scripts, out of sight. */
body.ss-hero-page--search #st-content-wrapper > .banner { display: none !important; }
/* Small tablets: the theme leaves less room above the results than on a phone. */
@media (min-width: 768px) and (max-width: 899px) { .ss-hero--search { margin-bottom: 36px; } }

/* SEARCH, THEN CLEAR SEARCH (Chiran, 23 Oct 2026): once the results show the search in the bar,
   the button turns dark navy "Clear search"; changing anything makes it violet "Search" again. */
.ss-chrome .ssq.is-applied button.ssq__go { background: var(--navy, #090920); color: #fff; }
.ss-chrome .ssq.is-applied button.ssq__go:hover, .ss-chrome .ssq.is-applied button.ssq__go:focus-visible { background: rgba(9,9,32,.84); color: #fff; }
/* the results area while it reloads */
.ssq-busy .modern-search-result { opacity: .45; transition: opacity .15s; }
.ss-chrome .ssq .ssq__stp .ssq__row:last-child { border-bottom: 0; padding-bottom: 4px; }   /* the guests drop-down has no summary line now (24 Oct 2026) */
.ss-chrome .ssq .ssq__u6 { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-tertiary); }   /* children under 6: one quiet line (24 Oct 2026) */

/* Phone: "Clear search" under the search pill once a search is showing (25 Oct 2026). Computer: never shown. */
.ss-chrome .ssq button.ssq__clr { display: none; }
@media (max-width: 899px) {
  .ss-chrome .ssq button.ssq__clr:not([hidden]) { display: flex; width: max-content; align-items: center; gap: 6px; margin: 10px auto 0; padding: 8px 16px;
    border-radius: 999px; background: var(--navy, #090920); color: #fff; font-family: var(--font-label); font-size: 13px; font-weight: 700; border: 0; }
  .ss-chrome .ssq button.ssq__clr svg { width: 14px !important; height: 14px !important; stroke: currentColor; }
  .ss-chrome .ssq.is-open button.ssq__clr { display: none; }
}

/* Any word in the Where box (25 Oct 2026): the example words under the box, and the "Search …" row. */
.ss-chrome .ssq p.ssq__try { margin: 8px 2px 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary, #5A5A6E); }
.ss-chrome .ssq button.ssq__try-w { display: inline-flex; margin: 2px 2px 0 0; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border, #E8E8EE);
  background: #fff; color: var(--primary, #7700FF); font-size: 12px; font-weight: 600; line-height: 20px; }
.ss-chrome .ssq button.ssq__try-w:hover { border-color: var(--primary, #7700FF); }
.ss-chrome .ssq .ssq__opt--kw b { color: var(--primary, #7700FF); }