/* =========================================================
   Home search panel (hs-) + results signature band (sigband)
   Uses base.css tokens. Editorial, premium, GetYourGuide-calm.
   ========================================================= */

/* lift the search card up into the hero for a "search-first" feel */
#homeSearchSection { margin-top: clamp(-3.5rem, -4vw, -2rem); position: relative; z-index: 5; }

.hs {
  background: var(--white); border: 1px solid var(--ink-16); border-radius: var(--r-md);
  padding: clamp(1.1rem, 2.4vw, 1.8rem); box-shadow: var(--shadow-md);
}
.hs__head { margin-bottom: 1rem; }
.hs__eyebrow { color: var(--ink-65); font-size: .72rem; letter-spacing: .02em; margin: 0 0 .35rem; }
.hs__title { font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -.03em; line-height: 1.05; margin: 0; max-width: 22ch; }

.hs__bar { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr auto; gap: .7rem; align-items: end; }
@media (max-width: 900px) { .hs__bar { grid-template-columns: 1fr 1fr; } .hs__go { grid-column: 1 / -1; } }
@media (max-width: 560px) { .hs__bar { grid-template-columns: 1fr; } }

.hs__field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.hs__l { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-65); }
.hs__sel, .hs__destbtn {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--ink-16); border-radius: var(--r-sm);
  font: inherit; font-size: .95rem; background: var(--white); color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.hs__sel { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230b1f33' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2rem; }
.hs__sel:focus, .hs__destbtn:focus-visible { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11,31,51,.10); }
.hs__destbtn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; }
.hs__destbtn i { color: var(--ink-65); font-style: normal; }

.hs__seggroup { display: inline-flex; border: 1px solid var(--ink-16); border-radius: var(--r-sm); overflow: hidden; }
.hs__seg { flex: 1; appearance: none; border: 0; border-left: 1px solid var(--ink-10); background: var(--white); color: var(--ink-65);
  padding: .7rem .5rem; font: inherit; font-size: .82rem; cursor: pointer; white-space: nowrap; transition: background var(--dur-1), color var(--dur-1); }
.hs__seg:first-child { border-left: 0; }
.hs__seg.is-on { background: var(--ink); color: var(--paper); }

.hs__go { padding: .8rem 1.6rem; white-space: nowrap; }

.hs__quick { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--ink-10); }
.hs__quicklabel { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-40); }
.hs__sig { display: inline-flex; align-items: center; gap: .3rem; background: var(--coral); color: #fff; border-radius: var(--r-pill);
  padding: .45rem .85rem; font-size: .82rem; font-weight: 600; text-decoration: none; margin-right: .3rem; }
.hs__sig:hover { background: var(--coral-deep); }
.hs__chip { border: 1px solid var(--ink-16); border-radius: var(--r-pill); padding: .4rem .8rem; font-size: .82rem; color: var(--ink); text-decoration: none; }
.hs__chip:hover { border-color: var(--ink); }

/* destination multi-select popover */
.hs__destmenu { position: absolute; z-index: 1200; background: var(--white); border: 1px solid var(--ink-16); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(11,31,51,.18); padding: .5rem; min-width: 260px; max-height: 340px; overflow: auto; }
.hs__optgroup { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); padding: .5rem .5rem .25rem; }
.hs__opt { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: 8px; cursor: pointer; font-size: .92rem; }
.hs__opt:hover { background: var(--ink-06); }
.hs__opt i { font-style: normal; font-size: .72em; color: var(--ink-40); }
.hs__menufoot { position: sticky; bottom: 0; background: var(--white); padding: .5rem; display: flex; justify-content: flex-end; border-top: 1px solid var(--ink-10); }

/* signature routes band on the results page */
.sigband { margin: 0 0 1.6rem; padding: 1.1rem; border: 1px solid rgba(255,53,94,.22); background: rgba(255,53,94,.045); border-radius: var(--r-md); }
.sigband__head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .9rem; }
.sigband__h { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.sigband__h::before { content: "★ "; color: var(--coral); }
.sigband__sub { color: var(--ink-65); font-size: .85rem; }
.sigband .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---- multi-modal smart search (mode tabs + per-mode fields) ---- */
.hs__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--ink-10); padding-bottom: .9rem; }
.hs__tab { appearance: none; border: 1px solid var(--ink-16); background: var(--paper); color: var(--ink); font: inherit; font-size: .86rem; font-weight: 600;
  padding: .5rem .95rem; border-radius: var(--r-pill); cursor: pointer; transition: all var(--dur-1); }
.hs__tab:hover { border-color: var(--ink); }
.hs__tab.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hs__tab--accent { border-style: dashed; border-color: var(--coral); color: var(--coral-deep); }
.hs__tab--accent.is-on { background: var(--coral); color: #fff; border-color: var(--coral); border-style: solid; }

.hs__panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: .75rem; align-items: end; }
@media (max-width: 560px) { .hs__panel { grid-template-columns: 1fr 1fr; } }
.hs__field--wide { grid-column: 1 / -1; }
.hs__flightrow { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.hs__inp, .hs__num { width: 100%; padding: .7rem .8rem; border: 1px solid var(--ink-16); border-radius: var(--r-sm); font: inherit; font-size: .95rem; background: var(--white); color: var(--ink); }
.hs__inp:focus, .hs__num:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11,31,51,.10); }

.hs__multi { display: flex; flex-wrap: wrap; gap: .4rem; }
.hs__pill { appearance: none; border: 1px solid var(--ink-16); background: var(--white); color: var(--ink); font: inherit; font-size: .82rem;
  padding: .42rem .8rem; border-radius: var(--r-pill); cursor: pointer; transition: all var(--dur-1); }
.hs__pill:hover { border-color: var(--ink); }
.hs__pill.is-on { background: var(--mint); border-color: var(--mint); color: var(--ink); }

.hs__go { align-self: end; padding: .8rem 1.5rem; white-space: nowrap; }
.hs__hint { margin: .2rem 0 0; }

/* ---- v2 icon tab bar (single search, clear request) — navy (lacivert) active ---- */
.hs--v2 .hs__head { margin-bottom: 1.1rem; }
.hs__headrow { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.hs__kicker { color: var(--ink-40); font-size: .7rem; letter-spacing: .12em; margin: 0; }
.hs__noinvent { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--ink-65);
  background: rgba(46,164,138,.10); border: 1px solid rgba(46,164,138,.30); border-radius: var(--r-pill); padding: .28rem .7rem; white-space: nowrap; }
.hs__noinvent svg { width: 14px; height: 14px; color: var(--mint); }
.hs__subtitle { color: var(--ink-65); font-size: .92rem; margin: .5rem 0 0; max-width: 62ch; }

.hs__tabs--icons { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .45rem; border-bottom: 0; padding-bottom: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 1.1rem; }
.hs__tabs--icons::-webkit-scrollbar { display: none; }
.hs__tabs--icons .hs__tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-align: center;
  min-width: 92px; padding: .8rem .5rem; border-radius: var(--r-md); border: 1px solid var(--ink-16); background: var(--white); color: var(--ink-65);
  font-size: .8rem; font-weight: 600; line-height: 1.15; transition: all var(--dur-1); }
.hs__tabs--icons .hs__tabico { display: inline-flex; }
.hs__tabs--icons .hs__tabico svg { width: 22px; height: 22px; stroke-width: 1.5; }
.hs__tabs--icons .hs__tab:hover { border-color: var(--ink); color: var(--ink); background: rgba(11,31,51,.03); }
.hs__tabs--icons .hs__tab.is-on { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 10px 22px rgba(11,31,51,.18); }
.hs__tabs--icons .hs__tab.is-on .hs__tabico svg { color: #fff; }
@media (max-width: 720px) {
  .hs__tabs--icons { grid-auto-columns: minmax(84px, 1fr); }
  .hs__tabs--icons .hs__tab { min-width: 84px; font-size: .74rem; padding: .7rem .4rem; }
  .hs__tabs--icons .hs__tabico svg { width: 20px; height: 20px; }
}

/* step row: 1 Basics · 2 Preferences · 3 Request card */
.hs__steps { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--ink-10); }
.hs__step { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--ink-65); }
.hs__step i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-size: .68rem; font-weight: 700; }
.hs__stepsep { color: var(--ink-40); }

/* beauty theme chip accent (hair & make-up) */
.hs__pill--beauty.is-on { background: var(--coral); border-color: var(--coral); color: #fff; }