/* ============================================================
   KJESearch.css — DinkyTown.net Search UI styles
   Used by: index.php (search), kjereindex.php (admin)
   ============================================================ */

:root {
  --kje-green:      #1b5e3b;
  --kje-green-mid:  #237a4d;
  --kje-lime:       #bdd631;
  --kje-lime-soft:  rgba(189,214,49,0.15);
  --kje-gold:       #f0b429;
  --kje-gold-hover: #f5c443;
  --kje-gold-glow:  rgba(240,180,41,0.15);
  --kje-gold-deep:  #d9a01e;
  --kje-cream:      #f9f6ee;
  --kje-white:      #ffffff;
  --kje-g100:       #edeae2;
  --kje-g200:       #d5d0c5;
  --kje-g400:       #8a8477;
  --kje-g600:       #5a5548;
  --kje-dark:       #1a2e1f;
  --kje-font-d:     'Fraunces', Georgia, serif;
  --kje-font-b:     'DM Sans', system-ui, sans-serif;
  --kje-shadow-md:  0 4px 20px rgba(27,94,59,.12);
  --kje-shadow-lg:  0 12px 48px rgba(27,94,59,.18);
  --kje-r:          10px;
  --kje-rsm:        6px;
}

/* ── Shared base ── */
.kje-search { font-family: var(--kje-font-b); padding: 28px 0 60px; }
.kje-search *, .kje-search *::before, .kje-search *::after { box-sizing: border-box; }

/* ── Search bar ── */
.kje-search .sw  { max-width:1200px; margin:0 auto 28px; padding:0 24px; }
.kje-search .sfr { display:flex; border-radius:var(--kje-r); overflow:hidden; box-shadow:var(--kje-shadow-md); border:1.5px solid var(--kje-g200); transition:border-color .2s,box-shadow .2s; }
.kje-search .sfr:focus-within { border-color:var(--kje-green-mid); box-shadow:0 0 0 3px rgba(35,122,77,.15),var(--kje-shadow-md); }
.kje-search .si  { position:relative; flex:1; display:flex; align-items:center; }
.kje-search .si > svg { position:absolute; left:14px; color:var(--kje-g400); pointer-events:none; }
.kje-search .si input[type=search] { width:100%; padding:13px 38px 13px 42px; font-family:var(--kje-font-b); font-size:1rem; color:var(--kje-dark); background:var(--kje-white); border:none; outline:none; -webkit-appearance:none; }
.kje-search .si input[type=search]::placeholder { color:var(--kje-g400); }
.kje-search .sc  { position:absolute; right:10px; width:22px; height:22px; border-radius:50%; background:var(--kje-g200); border:none; cursor:pointer; display:none; align-items:center; justify-content:center; color:var(--kje-g600); flex-shrink:0; padding:0; transition:background .15s,color .15s; }
.kje-search .sc:hover { background:var(--kje-g400); color:#fff; }
.kje-search .sc.vis { display:flex; }
.kje-search .search-form__btn  { padding:0 26px !important; background:linear-gradient(135deg,var(--kje-gold),var(--kje-gold-deep)) !important; color:var(--kje-green) !important; font-family:var(--kje-font-b) !important; font-size:.9rem !important; font-weight:700 !important; border:none !important; border-radius:0 !important; cursor:pointer; white-space:nowrap; transition:background .2s; min-height:100% !important; align-self:stretch !important; }
.kje-search .search-form__btn:hover { background:linear-gradient(135deg,var(--kje-gold-hover),var(--kje-gold)) !important; }

/* ── Stats bar ── */
.kje-search .statsbar { max-width:1200px; margin:0 auto 18px; padding:0 24px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.82rem; color:var(--kje-g400); }
.kje-search .cbadge { background:var(--kje-lime); color:var(--kje-green); font-weight:700; font-size:.75rem; padding:3px 11px; border-radius:20px; flex-shrink:0; }
.kje-search .sdiv   { width:1px; height:16px; background:var(--kje-g200); flex-shrink:0; }

/* ── Correction notice ── */
.kje-search .corrn        { max-width:1200px; margin:-6px auto 14px; padding:10px 24px; font-size:.875rem; color:var(--kje-dark); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kje-search .corrn strong { color:var(--kje-green); }
.kje-search .corrn .orig  { font-size:.78rem; color:var(--kje-g400); }
.kje-search .corrn .orig a { color:var(--kje-g600); text-decoration:underline; text-underline-offset:2px; }
.kje-search .corrn .orig a:hover { color:var(--kje-green-mid); }

/* ── Category dropdown ── */
.kje-search .catdd   { position:relative; display:inline-flex; }
.kje-search .catbtn  { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; cursor:pointer; background:var(--kje-white); color:var(--kje-g600); border:1.5px solid var(--kje-g200); border-radius:20px; padding:4px 12px; white-space:nowrap; transition:border-color .15s,color .15s; }
.kje-search .catbtn:hover    { border-color:var(--kje-green-mid); color:var(--kje-green); }
.kje-search .catbtn.act      { background:var(--kje-green); color:#fff; border-color:var(--kje-green); }
.kje-search .catbtn svg      { transition:transform .2s; flex-shrink:0; }
.kje-search .catbtn.open svg { transform:rotate(180deg); }
.kje-search .catmenu { position:absolute; top:calc(100% + 6px); left:0; min-width:200px; background:var(--kje-white); border:1.5px solid var(--kje-g200); border-radius:var(--kje-r); box-shadow:var(--kje-shadow-lg); z-index:9999; overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-4px); transition:all .2s cubic-bezier(.4,0,.2,1); }
.kje-search .catmenu.open    { opacity:1; visibility:visible; transform:translateY(0); }
.kje-search .catitem  { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; font-size:.84rem; font-weight:500; color:var(--kje-g600); cursor:pointer; transition:background .12s,color .12s; border:none; background:none; width:100%; text-align:left; }
.kje-search .catitem:hover   { background:var(--kje-cream); color:var(--kje-dark); }
.kje-search .catitem.act     { background:var(--kje-lime-soft); color:var(--kje-green); font-weight:700; }
.kje-search .catcnt          { font-size:.72rem; color:var(--kje-g400); font-weight:400; background:var(--kje-g100); border-radius:20px; padding:1px 7px; }
.kje-search .catitem.act .catcnt { background:var(--kje-lime); color:var(--kje-green); }
.kje-search .catsep  { height:1px; background:var(--kje-g100); margin:4px 0; }
.kje-search .catclr  { display:block; width:100%; padding:9px 14px; font-size:.78rem; font-weight:600; color:var(--kje-g400); border:none; background:none; cursor:pointer; text-align:left; transition:color .12s; }
.kje-search .catclr:hover { color:var(--kje-green); }

/* ── Alert ── */
.kje-search .alert { max-width:1200px; margin:0 auto 16px; padding:12px 24px; border-radius:var(--kje-rsm); font-size:.875rem; background:rgba(240,180,41,.1); border:1.5px solid rgba(240,180,41,.35); color:var(--kje-dark); }
.kje-search .alert-success { background:rgba(189,214,49,.2); border:1.5px solid var(--kje-lime); color:var(--kje-green); display:flex; gap:10px; align-items:flex-start; }
.kje-search .alert-error   { background:rgba(240,180,41,.12); border:1.5px solid rgba(240,180,41,.4); color:var(--kje-gold-deep); display:flex; gap:10px; align-items:flex-start; }
.kje-search .alert-success svg,
.kje-search .alert-error svg { flex-shrink:0; margin-top:1px; }

/* ── Result cards ── */
.kje-search .rl  { max-width:1200px; margin:0 auto; padding:0 24px; display:block !important; columns:unset !important; grid-template-columns:unset !important; }
.kje-search .res { display:flex; flex-direction:row !important; flex-wrap:nowrap !important; align-items:flex-start !important; gap:16px; text-decoration:none !important; background:var(--kje-white) !important; border:1px solid var(--kje-g200) !important; border-radius:var(--kje-r); padding:14px 18px !important; margin-bottom:10px !important; margin-left:0 !important; margin-right:0 !important; width:100% !important; box-sizing:border-box !important; position:relative; overflow:hidden; cursor:pointer; transition:box-shadow .2s,transform .2s,border-color .2s; float:none !important; }
.kje-search .res::after { content:""; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--kje-green-mid); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.kje-search .res:hover  { box-shadow:0 8px 32px rgba(27,94,59,.18) !important; border-color:var(--kje-green-mid) !important; transform:translateY(-2px); }
.kje-search .res:hover::after { transform:scaleX(1); }
.kje-search .rth  { flex-shrink:0; width:78px; display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; }
.kje-search .rth img { width:68px; height:68px; object-fit:contain; border-radius:var(--kje-rsm); background:var(--kje-cream); border:1px solid var(--kje-g100); transition:transform .2s; }
.kje-search .res:hover .rth img { transform:scale(1.06); }
.kje-search .rthl { font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--kje-g400); text-align:center; line-height:1.2; }
.kje-search .rthp { flex-shrink:0; width:78px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.kje-search .rthp > svg { width:68px; height:68px; padding:16px; border-radius:var(--kje-rsm); background:var(--kje-lime-soft); border:1px solid rgba(189,214,49,.3); color:var(--kje-green-mid); transition:transform .2s; }
.kje-search .res:hover .rthp > svg { transform:scale(1.06); }
.kje-search .rstar { position:absolute; top:-5px; right:-5px; width:20px; height:20px; background:var(--kje-green) !important; border-radius:50%; display:flex !important; align-items:center; justify-content:center; pointer-events:none; z-index:20 !important; box-shadow:0 1px 5px rgba(0,0,0,.35); }
.kje-search .rstar svg { width:11px; height:11px; display:block; flex-shrink:0; }
.kje-search .rb  { flex:1; min-width:0; }
.kje-search .ru  { font-size:.73rem; color:var(--kje-green-mid); display:block; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kje-search .res h2 { font-family:var(--kje-font-d); font-size:1.05rem; font-weight:600; line-height:1.3; color:var(--kje-dark); margin:0; }
.kje-search .res:hover h2 { color:var(--kje-green-mid); }
.kje-search .rs  { margin-top:6px; font-size:.875rem; color:var(--kje-g600); line-height:1.65; }
.kje-search mark { background:var(--kje-gold-glow); color:var(--kje-gold-deep); padding:0 2px; border-radius:3px; font-weight:600; }

/* ── Empty state ── */
.kje-search .empty   { max-width:1200px; margin:0 auto; padding:56px 24px; text-align:center; color:var(--kje-g400); }
.kje-search .emico   { width:52px; height:52px; margin:0 auto 16px; color:var(--kje-g200); }
.kje-search .empty h2 { font-family:var(--kje-font-d); font-size:1.1rem; color:var(--kje-dark); margin-bottom:6px; }
.kje-search .empty p  { font-size:.875rem; margin-bottom:12px; }
.kje-search .etips   { display:inline-flex; flex-direction:column; align-items:flex-start; gap:5px; font-size:.82rem; }
.kje-search .etips li { list-style:none; padding-left:1.2em; position:relative; }
.kje-search .etips li::before { content:"\2192"; position:absolute; left:0; color:var(--kje-gold); }

/* ── Pagination ── */
.kje-search .pgn { max-width:1200px; margin:28px auto 0; padding:0 24px; display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.kje-search .pgn a,
.kje-search .pgn span { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border-radius:var(--kje-rsm); border:1.5px solid var(--kje-g200); font-size:.875rem; text-decoration:none; color:var(--kje-green); background:var(--kje-white); transition:background .15s,border-color .15s; }
.kje-search .pgn a:hover { background:var(--kje-lime-soft); border-color:var(--kje-lime); }
.kje-search .pgn .cur    { background:var(--kje-green); color:#fff; border-color:var(--kje-green); font-weight:700; }
.kje-search .pgn .ell    { border:none; background:transparent; color:var(--kje-g400); min-width:24px; }

/* ── Browse grid ── */
.kje-search .browse { max-width:1200px; margin:0 auto; padding:0 24px 48px; }
.kje-search .bh     { text-align:center; margin-bottom:28px; }
.kje-search .bh h2  { font-family:var(--kje-font-d); font-size:1.6rem; font-weight:700; color:var(--kje-dark); margin-bottom:6px; }
.kje-search .bh p   { font-size:.95rem; color:var(--kje-g400); }
.kje-search .bg     { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kje-search .bi     { display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 14px; border-radius:var(--kje-r); background:var(--kje-white); border:1px solid transparent; text-decoration:none; text-align:center; transition:all .25s; }
.kje-search .bi:hover { border-color:var(--kje-lime); box-shadow:var(--kje-shadow-md); transform:translateY(-3px); }
.kje-search .bic    { width:96px; height:96px; display:flex; align-items:center; justify-content:center; transition:transform .25s; }
.kje-search .bi:hover .bic { transform:scale(1.08); }
.kje-search .bic img { width:100%; height:100%; object-fit:contain; }
.kje-search .bil    { font-weight:600; font-size:.88rem; color:var(--kje-dark); line-height:1.3; }
.kje-search .bict   { font-size:.72rem; color:var(--kje-g400); }
.kje-search .bintl  { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:24px; }
.kje-search .bintl a { display:inline-flex; align-items:center; gap:6px; padding:7px 18px; background:var(--kje-white); border:1px solid var(--kje-g200); border-radius:100px; font-size:.84rem; font-weight:500; color:var(--kje-green); text-decoration:none; transition:all .2s; }
.kje-search .bintl a:hover { background:var(--kje-gold-glow); border-color:var(--kje-gold); color:var(--kje-dark); }

@media (max-width:768px) { .kje-search .bg { grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px) {
  .kje-search .sw, .kje-search .statsbar, .kje-search .rl,
  .kje-search .alert, .kje-search .pgn, .kje-search .browse { padding-left:12px; padding-right:12px; }
  .kje-search .search-form__btn { padding:0 16px !important; font-size:.83rem !important; }
  .kje-search .res  { padding:12px 14px !important; gap:12px; }
  .kje-search .rth  { width:52px; }
  .kje-search .rth img { width:42px; height:42px; }
  .kje-search .bg   { grid-template-columns:repeat(2,1fr); }
  .kje-search .bic  { width:72px; height:72px; }
}