/* search-ui.css — Da Nang Hotel Guide shared search trigger + overlay
   Canonical implementation, extracted from index.html.
   Included site-wide so every page's search behaves identically to the homepage.
   Uses var(...,fallback) so it degrades safely on pages with a smaller token set. */

.nav-search-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid rgba(255,255,255,.15);cursor:pointer;
  background:transparent;border-radius:var(--r-sm,4px);
  color:rgba(255,255,255,.6);transition:background .15s,color .15s;
}
.nav-search-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-search-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}

/* ─── SEARCH OVERLAY ────────────────────────────────────── */
.search-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.97);
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(4rem,10vh,7rem) var(--gutter,1.5rem) 2rem;
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
}
.search-overlay.open{opacity:1;visibility:visible}
.search-close{
  position:absolute;top:1.5rem;right:var(--gutter,1.5rem);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  cursor:pointer;color:rgba(255,255,255,.6);
  width:40px;height:40px;border-radius:var(--r-sm,4px);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;transition:background .15s,color .15s;
}
.search-close:hover{background:rgba(255,255,255,.15);color:#fff}
.search-overlay-label{font-size:.65rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:1rem;}
.search-input-wrap{position:relative;width:100%;max-width:700px;margin-bottom:1.5rem;}
.search-input{
  width:100%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);
  border-bottom:2px solid var(--coral,#C8604A);
  border-radius:0;
  padding:18px 60px 18px 0;
  font-family:var(--font-serif,'Instrument Serif',Georgia,serif);font-size:clamp(1.5rem,3vw,2.2rem);
  color:#fff;outline:none;transition:border-color .2s;
}
.search-input::placeholder{color:rgba(255,255,255,.2)}
.search-input:focus{border-bottom-color:#fff}
.search-submit-icon{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:rgba(255,255,255,.4);}
.search-submit-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.search-results-inline{width:100%;max-width:700px;display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow-y:auto;}
.sri{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06);padding:16px 0;cursor:pointer;transition:background .12s;text-decoration:none;color:inherit;}
.sri:hover{background:rgba(255,255,255,.07)}
.sri-cat{font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral,#C8604A);white-space:nowrap;margin-top:3px;min-width:80px;}
.sri-body{flex:1;min-width:0}
.sri-title{font-family:var(--font-serif,'Instrument Serif',Georgia,serif);font-size:1rem;color:#fff;margin-bottom:4px}
.sri-excerpt{font-size:.78rem;color:rgba(255,255,255,.4);line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.search-no-results{color:rgba(255,255,255,.35);font-size:.9rem;padding:1rem 0}
.search-hint{margin-top:1.5rem;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;}
.sh-pill{padding:7px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm,4px);font-size:.72rem;font-weight:700;color:rgba(255,255,255,.45);cursor:pointer;transition:background .12s,color .12s;letter-spacing:.04em;text-transform:uppercase;}
.sh-pill:hover{background:rgba(255,255,255,.1);color:#fff}

@media(max-width:1100px){
  .nav-search-btn{display:flex}
}