/* ===== Hero ===== */
.hero-wrap{
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw; max-width:99.5vw;
  min-height:54vh; display:grid; place-items:center; color:#fff; overflow:hidden;
  z-index:0;
}
@media (max-width: 960px){ .hero-wrap{ min-height:34vh } }
@media (max-width: 640px){ .hero-wrap{ min-height:32vh } }

.hero-bg{
  --current: url("../img/hero/hero-1.jpg");
  --next: var(--current);
  position:absolute; inset:0; z-index:0;
  background-image: var(--current);
  background-size: cover; background-position:center; background-repeat:no-repeat;
  transition: background-image .0s;
  will-change: background-image, filter;
}
.hero-bg.next{
  animation: heroFade .65s ease both;
  background-image: var(--next);
}
@keyframes heroFade{
  0%{ filter: opacity(.2) brightness(.9) }
  100%{ filter: opacity(1) brightness(1) }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg.next{ animation:none }
}

.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
}

.hero-inner{
  position:relative; z-index:2; width:100%; max-width:1200px; margin:0 auto; padding:0 16px;
  text-align:center;
}
@supports(padding:max(0px)){
  .hero-inner{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
}

.hero-title{ font-size:56px; line-height:1.05; font-weight:900; margin:0 0 10px }
.hero-sub{ font-size:18px; opacity:.95; margin:0 0 28px }
@media (max-width: 960px){
  .hero-title{ font-size:42px }
  .hero-sub{ font-size:16px }
}
@media (max-width: 640px){
  .hero-title{ font-size:28px; margin-bottom:8px }
  .hero-sub{ font-size:14px; margin-bottom:18px }
}

/* ===== Unified Viator-style Search Pill (all breakpoints) ===== */
.hero-search{ display:flex; justify-content:center }

.hs-group{
  position:relative;
  display:flex; align-items:center;
  width:min(500px, 52vw);
  background:#fff; color:#111;
  border-radius:999px;
  padding:14px 18px 14px 54px;   /* space for left icon */
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  gap:0;
}

/* Left search icon inside the pill */
.hs-group::before{
  content:"";
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:24px; height:24px;
  background:no-repeat center / 24px 24px
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='11' cy='11' r='7'/>\
<line x1='21' y1='21' x2='16.65' y2='16.65'/>\
</svg>");
  opacity:.9;
}

/* Hide label & the separate button (Enter submits form) */
.hs-label{ display:none }
.hs-btn{ display:none }

/* Input styling */
.hs-where{ display:flex; align-items:center; flex:1; min-width:0 }
.hs-where input{
  width:100%; flex:1; min-width:0;
  border:0; outline:0; background:transparent;
  font:inherit; font-size:18px; line-height:1.25; font-weight:500;
}
.hs-where input::placeholder{
  color:#1f2937; opacity:.6;
}

/* Focus ring */
.hs-group:focus-within{
  box-shadow:0 10px 28px rgba(0,0,0,.20);
  border-color:rgba(0,0,0,.10);
}

/* Very small phones: keep comfy */
@media (max-width: 380px){
  .hs-group{ padding:12px 14px 12px 50px }
  .hs-group::before{ width:22px; height:22px; background-size:22px 22px; left:16px }
  .hs-where input{ font-size:16px }
}




/* ===== Default (mobile-first) keeps your current behavior ===== */
/* On mobile you already hide .hs-btn and show the left icon via ::before — leave as-is */

/* ===== Tablet & Desktop: show right button, hide left icon ===== */
@media (min-width: 641px){
  /* hide the left inline icon inside the pill */
  .hs-group::before{ display:none }

  /* restore tighter padding since no left icon is taking space */
  .hs-group{
    padding:14px 14px 14px 18px;   /* L/R padding without icon gap */
    gap:12px;
  }

  /* show the round search button on the far right */
  .hs-btn{
    display:grid; place-items:center;
    flex:0 0 52px; width:52px; height:52px;
    border:0; border-radius:999px; cursor:pointer;
    background:#0a8f79;           /* green like your screenshot */
    color:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 -6px 12px rgba(0,0,0,.08);
  }
  .hs-btn:hover{ filter:brightness(1.05) }
  .hs-btn:active{ transform:translateY(1px) }
  .hs-btn:focus-visible{
    outline:0;
    box-shadow:0 0 0 3px rgba(10,143,121,.25), 0 6px 16px rgba(0,0,0,.18);
  }

  /* make sure the icon inside the button sizes nicely */
  .hs-btn svg{ width:22px; height:22px; display:block }
}


/* ===== Smaller, thinner search bar for mobile ===== */
@media (max-width: 640px){
  /* slimmer pill */
  .hs-group{
    width:min(300px, 88vw);
    padding:16px 18px 16px 52px;     /* was ~14/18/54 */
    border-radius:26px;            /* thinner look */
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    border:1px solid rgba(0,0,0,.07);
    gap:0;
  }

  /* smaller left icon inside pill */
  .hs-group::before{
    left:14px;
    width:20px; height:20px;
    background-size:20px 20px;
    opacity:.85;
  }

  /* input a touch smaller */
  .hs-where input{
    font-size:15px;                /* was 17/18 */
    line-height:1.2;
    padding:0;                      /* keep compact */
  }
  .hs-where input::placeholder{
    opacity:.55;
  }

  /* keep right button hidden on mobile, per your rules */
  .hs-btn{ display:none !important; }
}