:root { --sr-bg: url("../assets/img/search-bg.webp"); --sr-grass: url("../assets/img/search-grass.webp"); }
.sr { position: fixed; inset: 0; z-index: 102; overflow: hidden; visibility: hidden; opacity: 0; color: #1b1b1b;
  background: #cfeefb var(--sr-bg) center / cover no-repeat; }
.sr.open { visibility: visible; opacity: 1; }
.sr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 35%); pointer-events: none; }
.sr-grass { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 30vw, 440px); z-index: 1; pointer-events: none;
  background: var(--sr-grass) center bottom / 100% auto no-repeat; }
.sr-x { position: absolute; top: clamp(12px, 2.4vw, 28px); right: clamp(12px, 2.6vw, 34px); z-index: 4; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #2259a2; background: #0d5f82; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(12,93,125,.35); transition: transform .25s cubic-bezier(.2,.9,.25,1.4); }
.sr-x:hover { transform: rotate(90deg) scale(1.06); }
.sr-x svg { width: 20px; height: 20px; }
.sr-scroll { position: absolute; inset: 0; z-index: 2; overflow-y: auto; overscroll-behavior: contain; padding: clamp(64px, 8vw, 110px) clamp(14px, 4vw, 60px) clamp(150px, 26vw, 360px); }
.sr-in { max-width: 1180px; margin: 0 auto; text-align: center; }
.sr-kick { margin: 0 0 6px; font: 800 13px/1 var(--font-en), system-ui, sans-serif; letter-spacing: .22em; color: #0c5d7d; }
.sr-h { margin: 0 0 clamp(16px, 2.4vw, 28px); font-family: var(--font-te-head); font-weight: 800; font-size: clamp(30px, 5.2vw, 64px); line-height: 1.2;
  background: linear-gradient(90deg, #4284a0, #c1af54); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .08em; }
.sr-box { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; padding: 0 10px 0 22px; height: clamp(54px, 6vw, 70px); background: #fff; border: 1.5px solid #0d5f82; border-radius: 999px; box-shadow: 0 10px 28px rgba(12,93,125,.2); }
.sr-box:focus-within { box-shadow: 0 0 0 4px rgba(66,132,160,.22), 0 14px 34px rgba(12,93,125,.28); }
.sr-box > svg { width: 26px; height: 26px; flex: none; }
.sr-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 600 clamp(16px, 1.7vw, 20px)/1.2 var(--font-te, 'Noto Sans Telugu'), 'Space Grotesk', system-ui, sans-serif; color: #0c3c52; }
.sr-box input::placeholder { color: #6b7d63; font-weight: 500; }
.sr-box input::-webkit-search-cancel-button { display: none; }
.sr-clear { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: #f2c230; cursor: pointer; display: none; place-items: center; }
.sr-clear.on { display: grid; }
.sr-clear svg { width: 14px; height: 14px; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: clamp(14px, 2vw, 22px) auto 0; max-width: 980px; }
.sr-chip { font: 700 clamp(12.5px, 1.2vw, 14.5px)/1 var(--font-te, 'Noto Sans Telugu'), var(--font-en), sans-serif; padding: .6em 1.1em; border-radius: 999px; border: 1px solid #0d5f82; background: rgba(255,255,255,.85); color: #0c5d7d; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.sr-chip:hover { transform: translateY(-2px); }
.sr-chip.on { background: #0d5f82; color: #f2c230; }
.sr-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: clamp(14px, 2vw, 22px) 0 clamp(12px, 1.8vw, 20px); }
.sr-ctl { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sr-sort { display: inline-flex; align-items: center; gap: 8px; font: 800 11px/1 var(--font-en), sans-serif; letter-spacing: .12em; color: #0c5d7d; }
.sr-sort select { font: 700 14px/1 var(--font-en), sans-serif; height: 40px; padding: 0 12px; border-radius: 12px; border: 1.5px solid #0d5f82; background: #fff; color: #0c3c52; cursor: pointer; }
.sr-view { display: inline-flex; padding: 3px; gap: 3px; border-radius: 14px; background: #0d5f82; border: 1.5px solid #2259a2; box-shadow: 0 4px 12px rgba(12,93,125,.28); }
.sr-view button { width: 40px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #f2c230; opacity: .7; cursor: pointer; transition: background .2s ease, color .2s ease, opacity .2s ease, transform .2s ease; }
.sr-view button svg { width: 20px; height: 20px; }
.sr-view button:hover { opacity: 1; transform: translateY(-1px); }
.sr-view button.on { background: #f2c230; color: #0c5d7d; opacity: 1; }
.sr-view button:focus-visible, .sr-sort select:focus-visible { outline: 3px solid #0c5d7d; outline-offset: 2px; }
.sr-tx { display: contents; }
.sr-grid.lv { grid-template-columns: 1fr; gap: 12px; }
.sr-grid.lv .sr-card { flex-direction: row; align-items: center; gap: 16px; padding: 10px 16px 10px 10px; border-radius: 18px; }
.sr-grid.lv .sr-cov { flex: none; width: clamp(64px, 9vw, 92px); }
.sr-grid.lv .sr-tx { display: block; flex: 1; min-width: 0; }
.sr-grid.lv .sr-t { margin: 0 0 4px; -webkit-line-clamp: 2; font-size: clamp(14.5px, 1.5vw, 18px); }
.sr-grid.lv .sr-c { margin: 0; }
.sr-grid.lv .sr-act { margin: 0; flex: none; }
.sr-grid.lv .sr-dl { flex: none; padding: 0 20px; }
@media (max-width: 560px) { .sr-grid.lv .sr-card { flex-wrap: wrap; } .sr-grid.lv .sr-act { width: 100%; } .sr-grid.lv .sr-dl { flex: 1; } .sr-ctl { width: 100%; justify-content: space-between; } .sr-sort span { display: none; } }
/* gold lettering on every teal button */
.sr-dl, .sr-dl:visited, .sr-dl:hover, .sr-lib, .sr-lib:visited, .sr-lib span, .sr-chip.on, .sr-view button:not(.on) { color: #f2c230 !important; -webkit-text-fill-color: #f2c230; }
.sr-view button.on { -webkit-text-fill-color: #0c5d7d; }
.sr-dl svg, .sr-dl svg *, .sr-lib .ar, .sr-lib .ar * { stroke: #f2c230; }
.sr-count { margin: 0; font: 700 14px/1.3 var(--font-te, 'Noto Sans Telugu'), var(--font-en), sans-serif; color: #0c5d7d; }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 17vw, 210px), 1fr)); gap: clamp(14px, 1.8vw, 24px); text-align: left; }
.sr-card { display: flex; flex-direction: column; background: #f1eedf; border: 1px solid #4284a0; border-radius: 16px; padding: 10px 10px 12px; box-shadow: 0 8px 20px rgba(12,93,125,.16); }
.sr-cov { display: block; background: #efeeea; border: 1px solid #4284a0; padding: 7px; border-radius: 8px; }
.sr-cov span { display: block; background: #e97b2b; padding: 4px; }
.sr-cov img { display: block; width: 100%; aspect-ratio: 378 / 536; object-fit: cover; background: #fff; }
.sr-t { margin: 10px 2px 2px; font: 800 clamp(13.5px, 1.25vw, 15.5px)/1.35 var(--font-te, 'Noto Sans Telugu'), sans-serif; color: #0c3c52; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sr-t mark { background: #f4c630; color: inherit; border-radius: 3px; padding: 0 2px; }
.sr-c { margin: 0 2px 10px; font: 700 12px/1.3 var(--font-te, 'Noto Sans Telugu'), sans-serif; color: #0c5d7d; }
.sr-act { margin-top: auto; display: flex; gap: 8px; }
.sr-dl { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 10px; background: #0d5f82; border: 1px solid #2259a2; color: #f2c230; text-decoration: none; font: 900 12px/1 var(--font-en), sans-serif; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 10px rgba(12,93,125,.3); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.sr-dl:hover { transform: translateY(-1px); filter: brightness(1.12); box-shadow: 0 6px 14px rgba(12,93,125,.38); }
.sr-dl svg { width: 16px; height: 16px; }
.sr-sh { width: 38px; height: 38px; flex: none; border-radius: 10px; border: 1px solid #0d5f82; background: #f2c230; cursor: pointer; display: grid; place-items: center; transition: transform .2s ease; }
.sr-sh:hover { transform: scale(1.06); }
.sr-sh svg { width: 18px; height: 18px; }
.sr-more { display: none; margin: clamp(20px, 3vw, 34px) auto 0; font: 900 14px/1 var(--font-en), sans-serif; letter-spacing: .06em; padding: 1em 2em; border-radius: 999px; border: 1.5px solid #0d5f82; background: #f2c230; color: #0c5d7d; cursor: pointer; box-shadow: 0 6px 16px rgba(12,93,125,.28); transition: transform .2s ease, filter .2s ease; }
.sr-more:hover { transform: translateY(-2px); filter: brightness(1.06); }
.sr-more.on { display: block; }
.sr-empty { grid-column: 1 / -1; text-align: center; padding: clamp(20px, 4vw, 44px) 10px; font: 700 clamp(15px, 1.5vw, 18px)/1.6 var(--font-te, 'Noto Sans Telugu'), sans-serif; color: #0c5d7d; background: rgba(255,255,255,.7); border-radius: 18px; }
.sr-empty a { color: #0c5d7d; }
.sr-lib { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 7px 26px 7px 7px; border-radius: 999px; background: linear-gradient(135deg, #1a7aa0, #0d5f82 60%, #0a4c69); border: 1.5px solid #2259a2; color: #f2c230; text-decoration: none; overflow: hidden; isolation: isolate;
  font: 900 clamp(14px, 1.5vw, 17px)/1.1 var(--font-te, 'Noto Sans Telugu'), var(--font-en), sans-serif; box-shadow: 0 10px 24px rgba(12,93,125,.35); transition: transform .25s cubic-bezier(.2,.9,.25,1.3), box-shadow .25s ease; }
.sr-lib::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: sr-shine 3.4s ease-in-out infinite; }
@keyframes sr-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.sr-lib .ic { width: 48px; height: 48px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b0, #e8c050 60%, #d9a441); display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(147,68,38,.25); transition: transform .4s cubic-bezier(.2,1.6,.4,1); }
.sr-lib .ic svg { width: 26px; height: 26px; }
.sr-lib .ar { width: 22px; height: 22px; transition: transform .3s ease; }
.sr-lib:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(12,93,125,.42); }
.sr-lib:hover .ic { transform: rotate(-12deg) scale(1.08); }
.sr-lib:hover .ar { transform: translateX(5px); }
.sr-lib:active { transform: translateY(2px); box-shadow: 0 4px 10px rgba(12,93,125,.3); }
.sr-nf { display: flex; flex-direction: column; align-items: center; gap: 14px; background: rgba(255,255,255,.72); backdrop-filter: blur(4px); border: 1px dashed #4284a0; border-radius: 26px; padding: clamp(22px, 4vw, 44px) 16px clamp(24px, 4vw, 40px); }
.sr-nf svg.art { position: relative; inset: auto; flex: none; width: clamp(150px, 22vw, 230px); aspect-ratio: 240 / 190; height: auto; overflow: visible; }
.sr-nf .bob, .sr-nf .lens, .sr-nf .fl { transform-box: fill-box; transform-origin: 50% 50%; }
.sr-nf .t { margin: 0; font: 800 clamp(16px, 1.8vw, 21px)/1.4 var(--font-te, 'Noto Sans Telugu'), sans-serif; color: #0c5d7d; }
.sr-nfa { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.sr-rs { width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid #0d5f82; background: #f2c230; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(12,93,125,.3); transition: transform .3s cubic-bezier(.2,1.6,.4,1); }
.sr-rs:hover { transform: rotate(-180deg); }
.sr-rs svg { width: 26px; height: 26px; }
.sr-off { background: none; padding: 10px 0 0; }
.sr-x:focus-visible, .sr-lib:focus-visible, .sr-rs:focus-visible, .sr-chip:focus-visible, .sr-dl:focus-visible, .sr-sh:focus-visible, .sr-more:focus-visible, .sr-clear:focus-visible { outline: 3px solid #0c5d7d; outline-offset: 3px; }
@media (max-width: 560px) { .sr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sr-box { padding-left: 16px; } }
@media (prefers-reduced-motion: reduce) { .sr-lib::after, .sr-nf .bob, .sr-nf .lens, .sr-nf .fl { animation: none; } .sr, .sr.open { transition: none; } .sr-in > *, .sr-grass { transition: none; opacity: 1; transform: none; } .sr-card { animation: none; } }