/* Basic, easily-overridable styles */
.wpts-form { display:flex; gap:.75rem; align-items:center; margin: .5rem 0 1rem; }
.wpts-input { display:flex; align-items:center; position:relative; width:100%; }
.wpts-input input[type="search"] {
  width:100%; padding:.75rem 3.25rem .75rem 1rem; border-radius:999px; border:1px solid #e5e7eb; outline:none; box-shadow: 0 1px 3px rgba(0,0,0,.06) inset;
}
.wpts-btn {
  position:absolute; right:.25rem; top:50%; transform:translateY(-50%);
  display:flex; gap:.25rem; align-items:center; padding:.5rem .75rem; border-radius:999px; border:0; background:#f3f4f6; cursor:pointer;
}
.wpts-btn:focus { outline:2px solid #2563eb; outline-offset:2px; }
.wpts-list { list-style:none; margin: .5rem 0 0; padding:0; }
.wpts-item { padding:.5rem 0; border-bottom:1px solid #f1f5f9; }
.wpts-item a { font-weight:600; text-decoration:none; }
.wpts-excerpt { margin:.25rem 0 0; color:#475569; }
.wpts-empty { color:#6b7280; }

/* UI variations */
.wpts-icon { width:1rem; height:1rem; display:inline-block; fill:currentColor; }
.wpts-btn--icon .wpts-btn-text { display:none; }
.wpts-btn--text .wpts-icon { display:none; }
.wpts-form[data-ui="icon"] .wpts-input input[type="search"] { padding-right: 2.5rem; }
.wpts-form[data-ui="button"] .wpts-input input[type="search"] { padding-right: 6.5rem; }
.wpts-form[data-ui="both"] .wpts-input input[type="search"] { padding-right: 7.5rem; }

/* Results behaviour */
.wpts-results { display:block; }
.wpts-form[data-mode="overlay"] .wpts-results { 
  position:absolute; left:0; right:0; top:calc(100% + .375rem); z-index:50;
  display:none; background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.08); padding:.5rem;
  max-height:18rem; overflow:auto;
}
.wpts-form[data-mode="overlay"] .wpts-results.is-open { display:block; }
.wpts-form[data-mode="overlay"] .wpts-list { margin:0; }
.wpts-form[data-mode="overlay"] .wpts-item { padding:.5rem .25rem; border-bottom:1px solid #f1f5f9; }
.wpts-form[data-mode="overlay"] .wpts-item:last-child { border-bottom:0; }
