/* Theme-friendly variables – override these in your theme to match brand */
.base-es-search{--base-es-color-primary:#ffe153;--base-es-color-bg:#fff;--base-es-color-text:#1f2328;--base-es-color-muted:#6a7380;--base-es-color-border:#1f232826;--base-es-color-hover:#f6f8fa;--base-es-radius:10px;--base-es-shadow:0 12px 30px rgba(0,0,0,.12);--base-es-width:320px;display:inline-flex;vertical-align:middle;flex:0 0 auto}

.base-es-search__wrap{position:relative;width:var(--base-es-width);max-width:100%}
.base-es-search__input{width:100%;padding:6px 40px 6px 12px;border:2px solid var(--base-es-color-primary);border-radius:var(--base-es-radius);background:var(--base-es-color-bg);color:var(--base-es-color-text);outline:0;transition:border-color .15s ease}
.base-es-search__input::placeholder{color:var(--base-es-color-muted)}
.base-es-search__input:focus{border-color:var(--base-es-color-text)}
.base-es-search__icon{position:absolute;right:12px;top:40%;transform:translateY(-50%);width:16px;height:16px;color:var(--base-es-color-muted);opacity:.9;pointer-events:none;z-index:1}
.base-es-search__spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;border:2px solid var(--base-es-color-border);border-top-color:var(--base-es-color-primary);animation:base-es-spin 900ms linear infinite;display:none}
.base-es-search__wrap.is-loading .base-es-search__spinner{display:block}
.base-es-search__wrap.is-loading .base-es-search__icon{display:none}
@keyframes base-es-spin{to{transform:translateY(-50%) rotate(360deg)}}

.base-es-search__list{margin-top:10px;background:var(--base-es-color-bg);border-radius:var(--base-es-radius);box-shadow:var(--base-es-shadow);padding:0;border:1px solid var(--base-es-color-border);width:100%;max-height:70vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.base-es-search__head{position:sticky;top:0;padding:10px 12px;background:var(--base-es-color-bg);border-bottom:1px solid var(--base-es-color-border);border-top-left-radius:var(--base-es-radius);border-top-right-radius:var(--base-es-radius);font-weight:600;color:var(--base-es-color-text);z-index:1}
.base-es-search__foot{padding:10px 12px;background:var(--base-es-color-bg);border-top:1px solid var(--base-es-color-border);border-bottom-left-radius:var(--base-es-radius);border-bottom-right-radius:var(--base-es-radius);font-size:.9rem;color:var(--base-es-color-muted);text-align:center}
.base-es-search__panel{position:absolute;z-index:9999;display:none;min-width:var(--base-es-width);max-width:min(92vw,680px)}
.base-es-search__panel.is-open{display:block}
.base-es-search__item{display:flex;gap:12px;padding:10px 12px;color:var(--base-es-color-text);text-decoration:none;align-items:flex-start}
.base-es-search__item:hover{background:var(--base-es-color-hover)}
.base-es-search__item.is-active{outline:2px solid var(--base-es-color-primary);background:var(--base-es-color-hover)}
.base-es-search__thumbwrap{position:relative;width:56px;height:56px;flex:0 0 56px;border-radius:6px;overflow:hidden;background:#f2f3f4}
.base-es-search__thumbwrap.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid var(--base-es-color-border);border-top-color:var(--base-es-color-primary)}
.base-es-search__thumbwrap.is-placeholder::before{content:"";position:absolute;inset:0;opacity:.7;background-repeat:no-repeat;background-position:center;background-size:20px 20px;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' stroke='%236a7380' stroke-width='2'/%3E%3Cpath d='M7 15l3-3 3 3 3-3 3 3' stroke='%236a7380' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='9' r='1.5' fill='%236a7380'/%3E%3C/svg%3E")} 
.base-es-search__thumb{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .2s ease}
.base-es-search__content{flex:1;min-width:0}
.base-es-search__title{font-weight:700;margin:0 0 4px 0;line-height:1.25}
.base-es-search__excerpt{color:var(--base-es-color-muted);font-size:.95rem;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.base-es-search__badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.base-es-badge{display:inline-flex;align-items:center;font-size:.78rem;line-height:1;border:1px solid var(--base-es-color-border);color:var(--base-es-color-muted);border-radius:999px;padding:4px 8px;background:var(--base-es-color-bg)}
.base-es-badge--type{background:rgba(255,225,83,.15);border-color:rgba(255,225,83,.45);color:#6b5a00}
.base-es-badge--date{opacity:.9}
.base-es-search__empty{padding:10px 8px;color:var(--base-es-color-muted)}
.base-es-search__highlight{background:rgba(255,225,83,.45);padding:0 .08em;border-radius:.2em}

/* Skeleton rows (optional) */
.base-es--skeleton .base-es-search__skeleton{display:flex;gap:12px;padding:10px 12px;align-items:center}
.base-es--skeleton .base-es-search__sk-thumb{width:56px;height:56px;border-radius:6px;background:linear-gradient(90deg,#f2f3f4 25%,#e9ecef 37%,#f2f3f4 63%);background-size:400% 100%;animation:base-es-shimmer 1.4s ease infinite}
.base-es--skeleton .base-es-search__sk-lines{flex:1;display:grid;gap:8px}
.base-es--skeleton .base-es-search__sk-line{height:12px;border-radius:6px;background:linear-gradient(90deg,#f2f3f4 25%,#e9ecef 37%,#f2f3f4 63%);background-size:400% 100%;animation:base-es-shimmer 1.4s ease infinite}
.base-es--skeleton .base-es-search__sk-line.lg{height:16px}
@keyframes base-es-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* Density */
.base-es--compact .base-es-search__input{padding:8px 34px 8px 36px;border-width:1px}
.base-es--compact .base-es-search__item{padding:8px 6px}
.base-es--compact .base-es-search__thumbwrap{width:44px;height:44px;flex:0 0 44px}

/* Grid layout */
.base-es--grid .base-es-search__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px}
.base-es--grid .base-es-search__item{display:block}
.base-es--grid .base-es-search__thumb{width:100%;height:140px}
.base-es--grid .base-es-search__content{margin-top:6px}

/* Size modifiers (optional) */
.base-es-search.base-es--sm{--base-es-width:240px}
.base-es-search.base-es--md{--base-es-width:320px}
.base-es-search.base-es--lg{--base-es-width:400px}
.base-es-search.base-es--xl{--base-es-width:520px}

/* Fill modifier: let search expand horizontally within header flex row */
.base-es-search.base-es--fill{--base-es-width:100%;flex:1 1 auto}
.base-es-search.base-es--fill .base-es-search__wrap{width:100%}