/* ============================================================
   Tripgation — modular per-page search widgets
   Premium glassmorphism cards, brand navy / gold / white / light-grey.
   One widget per service page, mounted in the hero. Shared by:
   flights, hotels, tours, visa, insurance, forex, cars, corporate.
   Depends on the brand tokens defined in styles.css (:root).
   ============================================================ */

.sw-mount{
  max-width: 1180px;
  margin: clamp(22px,4vw,44px) auto -70px;
  padding: 0 clamp(16px,4vw,40px);
  position: relative;
  z-index: 6;
  transform: translateY(clamp(30px,6vw,64px));
}

.sw{
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  box-shadow: 0 34px 80px -26px rgba(8,12,38,.6), 0 2px 8px rgba(8,12,38,.12);
  padding: clamp(16px,2.2vw,24px);
  color: var(--ink-900);
}
@media (prefers-color-scheme: dark){
  .sw{ background: rgba(20,21,58,.92); border-color: rgba(255,255,255,.12); }
}

/* header: title + trip-type / tabs */
.sw-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.sw-title{ display:flex; align-items:center; gap:10px; font-family:inherit; font-weight:800; font-size:1.02rem; color:var(--brand-navy); margin:0; letter-spacing:-.01em; }
.sw-title svg{ color:var(--brand-gold); flex-shrink:0; }

/* segmented (trip type / buy-sell / individual-family) */
.sw-seg{ display:inline-flex; background:var(--ink-100); border-radius:12px; padding:4px; gap:2px; flex-wrap:wrap; }
.sw-seg button{ border:0; background:transparent; font:inherit; font-size:13px; font-weight:700; color:var(--ink-500); padding:8px 15px; border-radius:9px; cursor:pointer; transition:all .15s ease; white-space:nowrap; }
.sw-seg button[aria-pressed="true"]{ background:#fff; color:var(--brand-navy); box-shadow:var(--shadow-sm); }
.sw-seg button:hover{ color:var(--brand-navy); }

/* tabs (tours domestic / international) */
.sw-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--ink-100); margin-bottom:16px; }
.sw-tab{ border:0; background:transparent; font:inherit; font-size:.92rem; font-weight:700; color:var(--ink-500); padding:10px 16px; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; transition:color .15s, border-color .15s; }
.sw-tab[aria-selected="true"]{ color:var(--brand-navy); border-bottom-color:var(--brand-gold); }
.sw-tab:hover{ color:var(--brand-navy); }

/* field grid */
.sw-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; align-items:end; }
.sw-grid .sw-2{ grid-column:span 2; }
@media (max-width:640px){ .sw-grid .sw-2{ grid-column:auto; } }
.sw-field{ position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; }
.sw-field > label, .sw-field .sw-lbl{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-500); }
.sw-ctrl{ display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--ink-100); border-radius:12px; padding:11px 12px; transition:border-color .15s ease, box-shadow .15s ease; }
.sw-ctrl:focus-within{ border-color:var(--brand-navy); box-shadow:0 0 0 3px rgba(35,36,107,.14); }
.sw-ctrl.sw-invalid{ border-color:var(--brand-red); box-shadow:0 0 0 3px rgba(255,32,69,.14); }
.sw-ctrl svg{ color:var(--brand-navy); flex-shrink:0; opacity:.72; }
.sw-ctrl input, .sw-ctrl select{ border:0; outline:0; background:transparent; font:inherit; font-size:15px; color:var(--ink-900); width:100%; min-width:0; padding:0; }
.sw-ctrl select{ cursor:pointer; -webkit-appearance:none; appearance:none; }
.sw-ctrl input::placeholder{ color:var(--ink-500); }

/* travellers / guests popover trigger */
.sw-pop-btn{ width:100%; text-align:left; cursor:pointer; }
.sw-pop-btn .sw-pop-val{ font-size:15px; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.sw-pop-btn .sw-caret{ margin-left:auto; opacity:.6; transition:transform .15s; }
.sw-field.is-open .sw-caret{ transform:rotate(180deg); }
.sw-pop{ position:absolute; top:calc(100% + 8px); left:0; z-index:30; background:#fff; border:1px solid var(--ink-100); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px 16px 14px; min-width:min(280px,86vw); }
.sw-pop[hidden]{ display:none; }
.sw-step-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--ink-100); }
.sw-step-row:last-child{ border-bottom:0; }
.sw-step-row .sw-step-l b{ display:block; font-size:14px; font-weight:700; color:var(--ink-900); }
.sw-step-row .sw-step-l small{ font-size:11.5px; color:var(--ink-500); }
.sw-step{ display:inline-flex; align-items:center; gap:14px; }
.sw-step button{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--ink-300); background:#fff; color:var(--brand-navy); font-size:17px; font-weight:700; line-height:1; cursor:pointer; transition:border-color .15s,color .15s; }
.sw-step button:hover:not(:disabled){ border-color:var(--brand-navy); }
.sw-step button:disabled{ opacity:.35; cursor:not-allowed; }
.sw-step .sw-step-n{ min-width:18px; text-align:center; font-weight:700; font-size:15px; }

/* toggles + promo row */
.sw-extra{ display:flex; align-items:center; gap:20px 26px; flex-wrap:wrap; margin-top:16px; }
.sw-switch{ position:relative; display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink-700); cursor:pointer; }
.sw-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.sw-track{ width:38px; height:22px; border-radius:999px; background:var(--ink-300); position:relative; transition:background .18s; flex-shrink:0; }
.sw-track::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .18s; box-shadow:var(--shadow-sm); }
.sw-switch input:checked + .sw-track{ background:var(--brand-navy); }
.sw-switch input:checked + .sw-track::after{ transform:translateX(16px); }
.sw-switch input:focus-visible + .sw-track{ box-shadow:0 0 0 3px rgba(35,36,107,.28); }

/* budget / age sliders */
.sw-range{ display:flex; flex-direction:column; gap:6px; }
.sw-range .sw-range-top{ display:flex; justify-content:space-between; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-500); }
.sw-range .sw-range-top b{ color:var(--brand-navy); font-size:13px; }
.sw-range input[type=range]{ width:100%; accent-color:var(--brand-navy); }

/* submit */
.sw-actions{ margin-top:16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sw-submit{ display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--grad-brand); color:#fff; border:0; border-radius:12px; font:inherit; font-weight:800; font-size:15px; letter-spacing:.01em; padding:15px 30px; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; box-shadow:var(--shadow-glow); }
.sw-submit:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(255,32,69,.34); }
.sw-submit:disabled{ opacity:.7; cursor:progress; transform:none; }
.sw-submit .sw-spin{ width:16px; height:16px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sw-spin .7s linear infinite; display:none; }
.sw-submit.is-loading .sw-spin{ display:inline-block; }
.sw-submit.is-loading .sw-submit-ico{ display:none; }
@keyframes sw-spin{ to{ transform:rotate(360deg); } }
.sw-note{ font-size:12.5px; color:var(--ink-500); }
.sw-actions--wide .sw-submit{ width:100%; }

/* full-width single column widget (forex / corporate) */
.sw--narrow{ max-width:900px; }

/* ------- sticky compact bar on desktop scroll ------- */
.sw-sticky{ position:fixed; top:0; left:0; right:0; z-index:150; background:var(--brand-navy); color:#fff; box-shadow:var(--shadow-md); transform:translateY(-110%); transition:transform .28s ease; }
.sw-sticky.is-on{ transform:none; }
.sw-sticky-in{ max-width:1180px; margin:0 auto; padding:11px clamp(16px,4vw,40px); display:flex; align-items:center; gap:16px; }
.sw-sticky-label{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:.95rem; }
.sw-sticky-label svg{ color:var(--brand-gold); }
.sw-sticky-sub{ color:rgba(255,255,255,.7); font-size:.83rem; margin-left:2px; }
.sw-sticky .sw-sticky-btn{ margin-left:auto; background:var(--brand-gold); color:var(--brand-navy); border:0; border-radius:10px; font:inherit; font-weight:800; font-size:13.5px; padding:10px 20px; cursor:pointer; }
.sw-sticky .sw-sticky-btn:hover{ filter:brightness(1.05); }
@media (max-width:760px){ .sw-sticky{ display:none; } }

/* ------- mobile: collapsible ------- */
.sw-mobile-toggle{ display:none; }
@media (max-width:760px){
  .sw-mount{ transform:translateY(30px); margin-bottom:-40px; }
  .sw-collapsible .sw-body{ display:none; }
  .sw-collapsible.is-expanded .sw-body{ display:block; }
  .sw-collapsible .sw-body .sw-top .sw-title{ display:none; }
  .sw-top{ align-items:flex-start; }
  .sw-mobile-toggle{ display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:0; font:inherit; cursor:pointer; padding:2px 0; }
  .sw-mobile-toggle .sw-caret{ margin-left:auto; transition:transform .18s; }
  .sw-collapsible.is-expanded .sw-mobile-toggle .sw-caret{ transform:rotate(180deg); }
  .sw-grid{ grid-template-columns:1fr 1fr; }
  .sw-grid .sw-2{ grid-column:1 / -1; }
}
@media (max-width:440px){ .sw-grid{ grid-template-columns:1fr; } }

/* ------- below-widget quick links ------- */
.sw-below{ padding:clamp(46px,7vw,88px) clamp(16px,4vw,40px) clamp(40px,6vw,72px); }
.sw-below-in{ max-width:1180px; margin:0 auto; }
.sw-below-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,2vw,22px); }
.sw-card{ display:block; background:var(--paper); border:1px solid var(--ink-100); border-radius:16px; padding:22px 22px 24px; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sw-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--brand-navy); }
.sw-card .sw-card-ico{ width:42px; height:42px; border-radius:12px; background:var(--brand-navy); color:var(--brand-gold); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.sw-card h3{ font-size:1.05rem; font-weight:800; margin:0 0 6px; color:var(--brand-navy); }
.sw-card p{ font-size:.9rem; color:var(--ink-500); margin:0; }
.sw-below-title{ font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:800; color:var(--brand-navy); margin:0 0 6px; }
.sw-below-sub{ color:var(--ink-500); margin:0 0 clamp(22px,3vw,34px); max-width:60ch; }
.sw-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.sw-chip{ display:inline-flex; align-items:center; gap:7px; background:var(--paper); border:1px solid var(--ink-300); border-radius:999px; padding:9px 16px; font-size:.88rem; font-weight:600; color:var(--ink-700); text-decoration:none; transition:all .15s ease; }
.sw-chip:hover{ border-color:var(--brand-navy); color:var(--brand-navy); background:var(--paper-alt); }
.sw-chip svg{ color:var(--brand-gold); }

/* tours: destination quick-pick chips under the widget */
.sw-picks{ margin-top:16px; border-top:1px solid var(--ink-100); padding-top:16px; }
.sw-picks-label{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-500); margin:0 0 10px; }
.sw-picks .sw-chip{ cursor:pointer; }

/* corporate enquiry result message */
.sw-corp-result{ margin:14px 0 0; padding:14px 16px; border-radius:12px; font-size:14.5px; font-weight:600; line-height:1.5; }
.sw-corp-result.is-ok{ background:#E8F5EE; color:#0B4F2C; border:1px solid #0B6B3A; }
.sw-corp-result.is-error{ background:#FCE9F1; color:#8A143A; border:1px solid var(--brand-red); }
