/* SafarSahal live search widget — Flights / Hotels / Cars / Tours
   Self-contained, ss- prefixed. Cool + responsive (mobile + desktop). */

.ss{
  --navy:#1A2E3B; --blue:#47B9FF; --blue2:#2BA3F0; --blued:#1A9DE0;
  --cream:#F8F4EE; --muted:#6B8496; --border:#E2EDF5; --ink:#3A5566;
  --field:#F4F7FA; --red:#EF4444; --green:#22c55e;
  max-width:1040px; margin:0 auto; font-family:'Poppins',sans-serif;
}

/* ---- shell ---- */
.ss-card{
  background:#fff; border-radius:24px; border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(26,46,59,0.12);
  padding:10px; position:relative;
}

/* ---- tabs ---- */
.ss-tabs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  background:#EBF0F3; border-radius:16px; padding:8px; margin-bottom:14px;
}
.ss-tab{
  position:relative; border:0; cursor:pointer; background:transparent;
  font-family:inherit; font-size:0.86rem; font-weight:700; color:var(--muted);
  padding:12px 6px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; gap:7px; transition:all .22s ease; white-space:nowrap;
}
.ss-tab svg{ width:17px; height:17px; }
.ss-tab.active{ background:var(--blue); color:#fff; box-shadow:0 6px 16px rgba(71,185,255,.35); }
.ss-tab:not(.active):hover{ color:var(--navy); background:rgba(71,185,255,.08); }
.ss-badge{
  position:absolute; top:-7px; right:4px; background:var(--red); color:#fff;
  font-size:0.6rem; font-weight:800; padding:1px 5px; border-radius:20px; letter-spacing:.3px;
}

/* ---- panels ---- */
.ss-panel{ display:none; padding:6px 8px 8px; position:relative; }
.ss-panel.active{ display:block; animation:ssFade .3s ease; }
@keyframes ssFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* trip-type toggle */
.ss-triptype{ display:inline-flex; background:#EBF0F3; border-radius:50px; padding:4px; margin-bottom:14px; }
.ss-triptype button{
  border:0; background:transparent; font-family:inherit; cursor:pointer;
  font-size:0.8rem; font-weight:700; color:var(--muted); padding:8px 18px; border-radius:50px; transition:all .2s;
}
.ss-triptype button.active{ background:#fff; color:var(--navy); box-shadow:0 2px 8px rgba(26,46,59,.1); }

/* rows + fields */
.ss-row{ display:flex; gap:10px; margin-bottom:12px; }
.ss-row>*{ flex:1; min-width:0; }
.ss-field{ position:relative; }
.ss-field label{
  display:block; font-size:0.68rem; font-weight:700; color:var(--ink);
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px;
}
.ss-input, .ss-select{
  width:100%; font-family:inherit; font-size:0.92rem; color:var(--navy); font-weight:600;
  background:var(--field); border:1.5px solid transparent; border-radius:13px;
  padding:14px 14px 14px 42px; outline:none; transition:border-color .2s, background .2s;
  -webkit-appearance:none; appearance:none;
}
.ss-input::placeholder{ color:#9fb2bf; font-weight:500; }
.ss-input:focus, .ss-select:focus{ border-color:var(--blue); background:#fff; }
.ss-field .ss-ic{ position:absolute; left:14px; top:38px; width:18px; height:18px; color:var(--blue); pointer-events:none; }
.ss-field.nolabel .ss-ic{ top:15px; }
.ss-select{ cursor:pointer; padding-left:42px; }
.ss-caret{ position:absolute; right:14px; top:38px; width:14px; height:14px; color:var(--muted); pointer-events:none; }
.ss-field.nolabel .ss-caret{ top:16px; }

/* swap button (flights) */
.ss-fromto{ display:flex; align-items:flex-end; gap:0; }
.ss-fromto .ss-field{ flex:1; }
.ss-swap{
  flex:0 0 auto; width:38px; height:38px; margin:0 -6px 8px; z-index:3;
  border-radius:50%; border:2px solid #fff; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 4px 12px rgba(71,185,255,.4); transition:transform .25s;
}
.ss-swap:hover{ transform:rotate(180deg); }
.ss-swap svg{ width:17px; height:17px; }

/* autocomplete dropdown */
.ss-ac{
  position:absolute; z-index:60; left:-60px; right:-60px; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:0 16px 40px rgba(26,46,59,.16); max-height:280px; overflow-y:auto; display:none;
}
.ss-ac.show{ display:block; }
.ss-ac-item{ display:flex; align-items:center; gap:11px; padding:12px 14px; cursor:pointer; border-bottom:1px solid #f2f6f9; }
.ss-ac-item:last-child{ border-bottom:0; }
.ss-ac-item:hover, .ss-ac-item.hl{ background:rgba(71,185,255,.09); }
.ss-ac-ic{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; background:rgba(71,185,255,.12);
  display:flex; align-items:center; justify-content:center; color:var(--blue); }
.ss-ac-ic svg{ width:15px; height:15px; }
.ss-ac-b{ flex:1 1 auto; min-width:0; }   /* lets the text shrink so pills on the right stay visible */
.ss-ac-main{ font-size:0.86rem; font-weight:600; color:var(--navy); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-ac-sub{ font-size:0.68rem; color:var(--muted); margin-top:3px; }
.ss-ac-code{ flex-shrink:0; margin-left:auto; }  /* right-side pill never shrinks/disappears */
.ss-ac-tag{ display:inline-block; margin-left:8px; font-size:0.56rem; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; color:var(--blue); background:rgba(71,185,255,.12);
  padding:2px 8px; border-radius:20px; vertical-align:middle; white-space:nowrap; }
.ss-ac-code{ margin-left:auto; font-size:0.72rem; font-weight:800; color:var(--blue);
  background:rgba(71,185,255,.1); padding:3px 8px; border-radius:7px; letter-spacing:.5px; }
/* US state pill (highlighted, distinct from the blue IATA/All-airports tags) */
.ss-ac-code.ss-state{ color:#15803d; background:rgba(34,197,94,.14); }

/* search button */
.ss-btn{
  width:100%; border:0; cursor:pointer; font-family:inherit; font-size:1rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blued)); border-radius:14px; padding:16px;
  display:flex; align-items:center; justify-content:center; gap:9px; margin-top:4px;
  box-shadow:0 10px 26px rgba(71,185,255,.4); transition:transform .18s, box-shadow .18s;
}
.ss-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(71,185,255,.5); }
.ss-btn:active{ transform:translateY(0); }
.ss-btn svg{ width:19px; height:19px; }
.ss-hint{ font-size:0.72rem; color:var(--muted); text-align:center; margin-top:10px; }
.ss-hint b{ color:var(--blue); }

/* cars: two big option cards */
.ss-caropts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
.ss-caropt{
  border:1.5px solid var(--border); border-radius:16px; padding:20px 16px; text-align:center; cursor:pointer;
  transition:border-color .2s, transform .2s, box-shadow .2s; background:rgba(71,185,255,0.12); text-decoration:none; display:block;
}
.ss-caropt:hover{ border-color:var(--blue); transform:translateY(-3px); box-shadow:0 12px 28px rgba(26,46,59,.1); }
.ss-caropt .ss-caric{ width:46px; height:46px; margin:0 auto 12px; border-radius:14px; background:rgba(71,185,255,.1);
  display:flex; align-items:center; justify-content:center; color:var(--blue); }
.ss-caropt .ss-caric svg{ width:24px; height:24px; }
.ss-caropt h4{ font-size:0.92rem; font-weight:800; color:var(--navy); margin:0 0 5px; }
.ss-caropt p{ font-size:0.75rem; color:var(--muted); line-height:1.5; margin:0; }

/* tours: trending destinations + features strip */
.ss-tours-extra{ margin-top:16px; }
.ss-tt-head{ display:flex; align-items:center; gap:7px; font-size:0.72rem; font-weight:800;
  color:var(--navy); text-transform:uppercase; letter-spacing:.6px; margin-bottom:11px; }
.ss-tt-head svg{ width:15px; height:15px; color:#FF7A00; flex:0 0 auto; }
.ss-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ss-chip{ border:1.5px solid var(--border); background:rgba(71,185,255,0.07); cursor:pointer;
  font-family:inherit; font-size:0.8rem; font-weight:700; color:var(--navy);
  padding:9px 15px; border-radius:50px; transition:transform .18s, background .18s, border-color .18s, box-shadow .18s; }
.ss-chip:hover{ border-color:var(--blue); background:linear-gradient(135deg,var(--blue),var(--blued));
  color:#fff; transform:translateY(-2px); box-shadow:0 8px 18px rgba(71,185,255,.4); }
.ss-feats{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px 18px;
  margin-top:16px; padding-top:15px; border-top:1px solid var(--border); }
.ss-feats span{ display:flex; align-items:center; gap:6px; font-size:0.73rem; font-weight:600; color:var(--ink); }
.ss-feats svg{ width:14px; height:14px; color:var(--green); flex:0 0 auto; }

/* ---- custom date picker ---- */
.ss-cal-back{ position:fixed; inset:0; background:rgba(26,46,59,.35); z-index:9998; display:none; }
.ss-cal-back.show{ display:block; }
.ss-cal{
  position:absolute; z-index:9999; background:#fff; border-radius:20px; padding:18px;
  box-shadow:0 24px 70px rgba(26,46,59,.28); width:340px; display:none;
}
.ss-cal.show{ display:block; }
.ss-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ss-cal-title{ font-size:0.95rem; font-weight:800; color:var(--navy); }
.ss-cal-nav{ width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--navy); transition:background .2s; }
.ss-cal-nav:hover{ background:var(--field); }
.ss-cal-nav:disabled{ opacity:.3; cursor:not-allowed; }
.ss-cal-nav svg{ width:16px; height:16px; }
.ss-cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); margin:8px 0 4px; }
.ss-cal-dow span{ text-align:center; font-size:0.66rem; font-weight:700; color:var(--muted); text-transform:uppercase; }
.ss-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.ss-day{
  aspect-ratio:1; border:0; background:transparent; font-family:inherit; font-size:0.84rem; font-weight:600;
  color:var(--navy); cursor:pointer; border-radius:10px; position:relative; transition:background .12s;
}
.ss-day:hover:not(:disabled){ background:rgba(71,185,255,.14); }
.ss-day.empty{ visibility:hidden; }
.ss-day:disabled{ color:#cfdae2; cursor:not-allowed; }
.ss-day.inrange{ background:rgba(71,185,255,.14); border-radius:0; }
.ss-day.selected{ background:var(--blue); color:#fff; box-shadow:0 4px 12px rgba(71,185,255,.4); }
.ss-day.range-start{ border-radius:10px 0 0 10px; }
.ss-day.range-end{ border-radius:0 10px 10px 0; }
.ss-day.selected.range-start, .ss-day.selected.range-end{ border-radius:10px; }
.ss-cal-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:10px; }
.ss-cal-hint{ font-size:0.74rem; color:var(--muted); }
.ss-cal-done{ border:0; background:var(--blue); color:#fff; font-family:inherit; font-weight:700; font-size:0.82rem;
  padding:10px 22px; border-radius:11px; cursor:pointer; }
.ss-cal-done:disabled{ opacity:.4; cursor:not-allowed; }
.ss-cal-clear{ border:0; background:transparent; color:var(--muted); font-family:inherit; font-weight:600;
  font-size:0.78rem; cursor:pointer; }

/* date field shows value */
.ss-datebtn{ text-align:left; }
.ss-datebtn .ss-input{ cursor:pointer; }

.ss-download{ text-align:center; margin-top:16px; font-size:0.82rem; color:var(--muted); }
.ss-download a{ color:var(--blue); font-weight:700; text-decoration:none; }

/* ---------- responsive ---------- */
@media (max-width:640px){
  .ss-card{ border-radius:20px; padding:8px; }
  .ss-tab{ font-size:0.74rem; padding:11px 3px; gap:5px; flex-direction:column; }
  .ss-tab svg{ width:18px; height:18px; }
  .ss-badge{ top:-5px; right:2px; font-size:0.55rem; }
  .ss-row{ flex-direction:column; gap:12px; }
  .ss-row.ss-keep{ flex-direction:row; gap:8px; }
  .ss-caropts{ grid-template-columns:1fr; }
  /* on mobile, dropdown starts at left edge of field and stretches to fill most of screen */
  .ss-ac{ max-height:52vh; left:0; right:auto; width:calc(100vw - 48px); transform:none; }
  .ss-ac-item{ padding:9px 11px; gap:9px; }
  .ss-ac-ic{ width:26px; height:26px; border-radius:8px; }
  .ss-ac-ic svg{ width:13px; height:13px; }
  .ss-ac-main{ font-size:0.8rem; line-height:1.2; }
  .ss-ac-sub{ font-size:0.63rem; margin-top:2px; }
  .ss-ac-code{ font-size:0.64rem; padding:2px 6px; }
  .ss-ac-tag{ margin-left:6px; font-size:0.5rem; padding:2px 6px; }
  /* date picker becomes bottom sheet on mobile */
  .ss-cal{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; border-radius:22px 22px 0 0; padding:20px 16px calc(20px + env(safe-area-inset-bottom));
    animation:ssSheet .3s ease;
  }
  @keyframes ssSheet{ from{transform:translateY(100%);} to{transform:none;} }
}