/* ==========================================================================
   WP Live Search — live-search.css
   ========================================================================== */

:root {
  --wplvs-accent:          #40BDED;
  --wplvs-accent-dark:     #28a8d8;
  --wplvs-accent-light:    #e0f6fd;
  --wplvs-bg:              #ffffff;
  --wplvs-border:          #40BDED;
  --wplvs-shadow:          0 12px 40px rgba(64,189,237,.15), 0 2px 8px rgba(0,0,0,.06);
  --wplvs-text:            #0f172a;
  --wplvs-muted:           #94a3b8;
  --wplvs-hover:           #f0fdfe;
  --wplvs-radius:          999px;
  --wplvs-dropdown-radius: 18px;
  --wplvs-input-h:         52px;
  --wplvs-btn-w:           64px;      /* ความกว้างปุ่มขวา */
  --wplvs-font:            -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Dark theme */
[data-theme="dark"] {
  --wplvs-bg:           #0f172a;
  --wplvs-border:       #06b6d4;
  --wplvs-text:         #f1f5f9;
  --wplvs-muted:        #64748b;
  --wplvs-hover:        #0c2a30;
  --wplvs-shadow:       0 12px 40px rgba(6,182,212,.2), 0 2px 8px rgba(0,0,0,.3);
  --wplvs-accent-light: #0c2a30;
}

/* Auto theme */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --wplvs-bg:     #1e293b;
    --wplvs-border: #334155;
    --wplvs-text:   #f1f5f9;
    --wplvs-muted:  #94a3b8;
    --wplvs-hover:  #273549;
    --wplvs-shadow: 0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
    --wplvs-accent-light: #1e3a5f;
  }
}

/* ── Wrapper ────────────────────────────────────────────────────── */
.wplvs-wrap {
  position: relative;
  width: 100%;
  font-family: var(--wplvs-font);
  box-sizing: border-box;
  /* Hard-reset line-height so themes don't inflate the input */
  line-height: normal;
}
.wplvs-wrap *,
.wplvs-wrap *::before,
.wplvs-wrap *::after {
  box-sizing: border-box;
  line-height: normal;
}

/* ── Input row ──────────────────────────────────────────────────── */
.wplvs-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  /* Neutralise any theme padding/margin on flex children */
  gap: 0;
}

.wplvs-icon-search {
  /* ปุ่มสีฟ้าติดขอบขวา — รูปทรงครึ่งวงกลมขวา */
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--wplvs-btn-w);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wplvs-accent);
  border-radius: 0 999px 999px 0;
  color: #fff;
  pointer-events: all;
  cursor: pointer;
  transition: background .2s;
  z-index: 1;
  flex-shrink: 0;
  border: none;
  outline: none;
  /* reset button styles */
  padding: 0;
  font-size: 0;
}
.wplvs-icon-search svg {
  display: block;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  flex-shrink: 0;
}
.wplvs-input-wrap:focus-within .wplvs-icon-search,
.wplvs-icon-search:hover {
  background: var(--wplvs-accent-dark);
}

.wplvs-input {
  all: unset;
  display: block;
  width: 100%;
  height: var(--wplvs-input-h);
  padding: 0 calc(var(--wplvs-btn-w) + 8px) 0 24px;
  font-size: 15px;
  font-family: var(--wplvs-font);
  color: var(--wplvs-text);
  background: var(--wplvs-bg);
  border: 2px solid var(--wplvs-border);
  border-radius: var(--wplvs-radius);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
  cursor: text;
}
.wplvs-input:focus {
  border-color: var(--wplvs-accent-dark);
  box-shadow: 0 0 0 4px rgba(64,189,237,.2);
}
.wplvs-input::placeholder { color: var(--wplvs-muted); }
.wplvs-input::-webkit-search-cancel-button,
.wplvs-input::-webkit-search-decoration { display: none; }

.wplvs-clear {
  position: absolute;
  right: calc(var(--wplvs-btn-w) + 8px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #e2e8f0;
  color: var(--wplvs-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  z-index: 2;
  line-height: 1;
  font-size: 0;
}
.wplvs-clear svg {
  display: block;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}
.wplvs-clear:hover {
  background: var(--wplvs-accent);
  color: #fff;
}
/* Override any theme button focus ring */
.wplvs-clear:focus { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.25); }

/* ── Dropdown ───────────────────────────────────────────────────── */
.wplvs-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--wplvs-bg);
  border: 1.5px solid var(--wplvs-border);
  border-radius: var(--wplvs-dropdown-radius);
  box-shadow: var(--wplvs-shadow);
  overflow: hidden;
  z-index: 99999;
  animation: wplvs-fade-in .15s ease;
}
.wplvs-dropdown[hidden] { display: none; }

@keyframes wplvs-fade-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)  scale(1);    }
}

/* ── Section labels ─────────────────────────────────────────────── */
.wplvs-section-label {
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wplvs-muted);
  border-top: 1px solid var(--wplvs-border);
}
.wplvs-section-label:first-child { border-top: none; }

/* ── Individual result ──────────────────────────────────────────── */
.wplvs-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  color: var(--wplvs-text);
  text-decoration: none;
  transition: background .12s;
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  background: transparent;
  font-family: var(--wplvs-font);
}
.wplvs-item:hover,
.wplvs-item[aria-selected="true"] {
  background: var(--wplvs-hover);
}
.wplvs-item:hover .wplvs-item-title,
.wplvs-item[aria-selected="true"] .wplvs-item-title {
  color: var(--wplvs-accent);
}

/* Thumbnail */
.wplvs-thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--wplvs-border);
}
.wplvs-thumb-placeholder {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--wplvs-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Text area */
.wplvs-item-body {
  flex: 1;
  min-width: 0;
}
.wplvs-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--wplvs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
  margin-bottom: 2px;
}
.wplvs-item-title mark {
  background: var(--wplvs-accent-light);
  color: var(--wplvs-accent);
  border-radius: 3px;
  padding: 0 2px;
}
.wplvs-item-excerpt {
  font-size: 12px;
  color: var(--wplvs-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.wplvs-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.wplvs-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .03em;
}
.wplvs-badge--cat {
  background: #ecfdf5;
  color: #059669;
}
.wplvs-badge--tag {
  background: #fef9c3;
  color: #a16207;
}
.wplvs-date {
  font-size: 11px;
  color: var(--wplvs-muted);
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
[data-theme="dark"] .wplvs-badge--cat { background: #064e3b; color: #34d399; }
[data-theme="dark"] .wplvs-badge--tag { background: #451a03; color: #fbbf24; }

/* Category / Tag items */
.wplvs-item--taxonomy .wplvs-thumb-placeholder {
  font-size: 16px;
}
.wplvs-count {
  font-size: 11px;
  color: var(--wplvs-muted);
  white-space: nowrap;
}

/* ── Status messages ────────────────────────────────────────────── */
.wplvs-status {
  padding: 18px 16px;
  text-align: center;
  color: var(--wplvs-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Spinner */
.wplvs-spinner {
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--wplvs-border);
  border-top-color: var(--wplvs-accent);
  border-radius: 50%;
  animation: wplvs-spin .6s linear infinite;
  flex-shrink: 0;
}
@keyframes wplvs-spin { to { transform: rotate(360deg); } }

/* ── View all link ──────────────────────────────────────────────── */
.wplvs-view-all {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wplvs-accent);
  text-decoration: none;
  text-align: center;
  border-top: 1px solid var(--wplvs-border);
  transition: background .12s;
}
.wplvs-view-all:hover { background: var(--wplvs-hover); }
.wplvs-view-all[hidden] { display: none; }