/* Search: the header button, the pop-up (full screen on phones), the home bar with results right below it, and the results page. */

/* header button, same family as the theme button */
.sr-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:2px solid var(--navy); border-radius:999px; background:transparent; color:var(--navy); cursor:pointer; flex:none; font:700 12px/1 'Inter',sans-serif; transition:background .18s, color .18s;}
.sr-btn:hover{background:var(--navy); color:var(--white);}
.sr-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.sr-btn svg{width:18px; height:18px;}
.sr-btn svg{width:19px; height:19px;}
@media (max-width:600px){ .sr-btn{height:38px; width:38px;} }

/* shared field */
.sr-field{display:flex; align-items:center; gap:12px; padding:0 18px; height:60px; flex:none;}
.sr-field > svg{width:21px; height:21px; flex:none; color:var(--blue);}
.sr-field input{flex:1; min-width:0; height:100%; border:0; outline:0; background:none; color:var(--navy); font:500 17px/1.2 'Inter',sans-serif;}
.sr-field input::placeholder{color:var(--navy-soft);}
.sr-field input::-webkit-search-cancel-button,.sr-field input::-webkit-search-decoration{-webkit-appearance:none; appearance:none; display:none;}
.sr-x{width:28px; height:28px; border:0; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--navy) 9%, transparent); color:var(--navy-soft); cursor:pointer; flex:none;}
.sr-x[hidden]{display:none;}
.sr-x svg{width:13px; height:13px;}
.sr-cancel{display:none; border:0; background:none; color:var(--blue-dark); font:600 14px 'Inter',sans-serif; cursor:pointer; padding:0 2px;}
.sr-k2{font:600 10px/1 'JetBrains Mono',monospace; padding:3px 5px; border:1px solid var(--border-soft); border-radius:5px; color:var(--navy-soft);}

.sr-chips{display:flex; gap:6px; padding:10px 14px; overflow-x:auto; flex:none; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); scrollbar-width:none;}
.sr-chips::-webkit-scrollbar{display:none;}
.sr-chip{flex:none; height:32px; padding:0 13px; border-radius:999px; border:1px solid var(--border-soft); background:transparent; color:var(--navy-soft); font:600 12.5px 'Inter',sans-serif; cursor:pointer; white-space:nowrap;}
.sr-chip:hover{color:var(--navy); border-color:var(--navy-soft);}
.sr-chip[aria-pressed="true"]{color:var(--navy); border-color:color-mix(in srgb, var(--blue) 55%, transparent); background:linear-gradient(135deg, color-mix(in srgb, var(--blue) 24%, transparent), color-mix(in srgb, var(--teal) 20%, transparent));}

.sr-res{overflow-y:auto; overscroll-behavior:contain; padding:6px 8px 8px; flex:1; min-height:0;}
.sr-grp{display:flex; justify-content:space-between; align-items:baseline; padding:10px 8px 4px; font:600 11px 'JetBrains Mono',monospace; letter-spacing:1.2px; text-transform:uppercase; color:var(--navy-soft);}
.sr-grp a{font:600 12px 'Inter',sans-serif; letter-spacing:0; text-transform:none; color:var(--blue-dark); text-decoration:none;}
.sr-row{display:flex; align-items:center; gap:12px; padding:8px; border-radius:12px; color:var(--navy); text-decoration:none; min-width:0; cursor:pointer;}
.sr-row:hover,.sr-row.is-sel{background:color-mix(in srgb, var(--blue) 13%, transparent); color:var(--navy);}
.sr-row.is-static{cursor:default;}
.sr-th{position:relative; width:40px; height:54px; border-radius:8px; flex:none; overflow:hidden; display:grid; place-items:center; color:#fff; font:700 15px 'Sora',sans-serif; text-shadow:0 1px 3px rgb(0 0 0 / .35); background:#5b6cf0;}
.sr-th img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#222;}
.sr-th.k-manga{background:#e0495d;} .sr-th.k-character{background:#e8a13a; height:40px; border-radius:50%;} .sr-th.k-person{background:#2fb8a0; height:40px; border-radius:50%;}
.sr-th.k-company{background:#7a5af0; height:40px;} .sr-th.k-member{background:#4a9ed8; height:40px; border-radius:50%;}
.sr-tx{min-width:0; display:grid; gap:3px;}
.sr-tx b{font:600 14.5px/1.25 'Inter',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sr-tx span{font:400 12.5px/1.3 'Inter',sans-serif; color:var(--navy-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sr-tx mark{background:none; color:var(--blue); font-weight:700;}
.sr-foot{flex:none; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; border-top:1px solid var(--border-soft); font:400 12px 'Inter',sans-serif; color:var(--navy-soft);}
.sr-foot a{font-weight:700; color:var(--blue-dark); text-decoration:none;}
.sr-msg{padding:30px 20px; text-align:center; color:var(--navy-soft); font:400 14px/1.6 'Inter',sans-serif;}
.sr-msg b{display:block; color:var(--navy); font:700 16px 'Sora',sans-serif; margin-bottom:6px;}
.sr-recent .sr-row{padding:9px 8px;}
.sr-recent svg{width:18px; height:18px; flex:none; color:var(--navy-soft);}

/* the pop-up */
.sr-dlg{position:fixed; inset:0; z-index:200; display:flex; justify-content:center; align-items:flex-start; padding:9vh 16px 16px; background:rgb(10 8 6 / .6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
.sr-dlg[hidden]{display:none;}
.sr-panel{width:100%; max-width:640px; max-height:100%; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--border-soft); border-radius:20px; box-shadow:0 30px 70px -20px rgb(0 0 0 / .7); overflow:hidden;}
html.sr-lock{overflow:hidden;}
@media (max-width:720px){
  .sr-dlg{padding:0; background:var(--white); -webkit-backdrop-filter:none; backdrop-filter:none;}
  .sr-panel{max-width:none; height:100%; max-height:none; border:0; border-radius:0; box-shadow:none;}
  .sr-field{padding-top:env(safe-area-inset-top, 0px); height:calc(62px + env(safe-area-inset-top, 0px));}
  .sr-cancel{display:block;}
  .sr-foot .sr-keys{display:none;}
  .sr-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); justify-content:center;}
}

/* the home bar: a plain pill, results drop straight below it */
.sr-hero{padding:28px 0 0;}
.sr-hero .wrap{max-width:720px;}
.sr-bar{position:relative; z-index:40;}
.sr-bar .sr-form,.sr-bar .sr-field{height:58px; padding:0 20px; gap:14px; border:1px solid var(--border-soft); border-radius:999px; background:var(--white); box-shadow:0 10px 30px -18px rgb(0 0 0 / .55); transition:border-color .2s, box-shadow .2s;}
.sr-bar .sr-field > svg,.sr-bar .sr-form > svg{color:var(--navy-soft); transition:color .2s; width:22px; height:22px;}
.sr-bar .sr-field input,.sr-bar .sr-form input{font-size:18px;}
.sr-bar:focus-within .sr-field,.sr-bar.is-open .sr-field,.sr-bar .sr-form:focus-within{border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--blue) 70%, transparent);}
.sr-bar:focus-within .sr-field > svg,.sr-bar.is-open .sr-field > svg,.sr-bar .sr-form:focus-within > svg{color:var(--blue);}
.sr-bar .sr-k2{margin-inline-start:auto;}
.sr-bar .sr-field:has(input:focus) .sr-k2,.sr-bar .sr-field:has(input:not(:placeholder-shown)) .sr-k2{display:none;}
.sr-drop{position:absolute; top:calc(100% + 8px); inset-inline:0; display:flex; flex-direction:column; max-height:min(480px, 70vh); background:var(--white); border:1px solid var(--border-soft); border-radius:20px; box-shadow:0 30px 60px -24px rgb(0 0 0 / .65); overflow:hidden;}
.sr-drop[hidden]{display:none;}
.sr-drop .sr-chips{border-top:0;}
@media (max-width:600px){ .sr-hero{padding-top:18px;} .sr-bar .sr-field,.sr-bar .sr-form{height:54px; padding:0 16px;} .sr-bar .sr-k2{display:none;} .sr-drop .sr-foot .sr-keys{display:none;} }

/* the results page */
.sr-page{padding:32px 0 80px; min-height:60vh;}
.sr-page .wrap{max-width:860px;}
.sr-form{display:flex; align-items:center; gap:14px; height:58px; padding:0 20px; border:1px solid var(--border-soft); border-radius:999px; background:var(--white);}
.sr-form svg{width:22px; height:22px; color:var(--navy-soft); flex:none;}
.sr-form input[type="search"]{flex:1; min-width:0; height:100%; border:0; outline:0; background:none; color:var(--navy); font:500 18px 'Inter',sans-serif;}
.sr-form input::-webkit-search-cancel-button{-webkit-appearance:none;}
.sr-tabs{display:flex; gap:6px; overflow-x:auto; padding:16px 0 8px; scrollbar-width:none;}
.sr-tabs::-webkit-scrollbar{display:none;}
.sr-tabs a{flex:none; height:34px; padding:0 14px; display:inline-flex; align-items:center; border-radius:999px; border:1px solid var(--border-soft); color:var(--navy-soft); text-decoration:none; font:600 13px 'Inter',sans-serif;}
.sr-tabs a:hover{color:var(--navy);}
.sr-tabs a[aria-current="true"]{color:var(--navy); border-color:color-mix(in srgb, var(--blue) 55%, transparent); background:linear-gradient(135deg, color-mix(in srgb, var(--blue) 24%, transparent), color-mix(in srgb, var(--teal) 20%, transparent));}
.sr-sec{margin-top:22px;}
.sr-sec h2{display:flex; justify-content:space-between; align-items:baseline; font:700 18px 'Sora',sans-serif; margin-bottom:8px;}
.sr-sec h2 a{font:600 13px 'Inter',sans-serif; color:var(--blue-dark); text-decoration:none;}
.sr-list{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 14px;}
@media (max-width:640px){ .sr-list{grid-template-columns:1fr;} }
.sr-note,.sr-none{margin-top:40px; text-align:center; color:var(--navy-soft); font:400 15px/1.6 'Inter',sans-serif;}
.sr-none b{display:block; color:var(--navy); font:700 18px 'Sora',sans-serif; margin-bottom:6px;}
.sr-pager{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px; font:600 14px 'Inter',sans-serif;}
.sr-pager a{padding:9px 18px; border:2px solid var(--navy); border-radius:999px; color:var(--navy); text-decoration:none;}
.sr-pager a:hover{background:var(--navy); color:var(--white);}
html[lang="ar"] .sr-field input,html[lang="ar"] .sr-form input{font-family:'Noto Sans Arabic','Inter',sans-serif;}