/* kolkatachicks.com - site search (every page) + girl filters (homepage, gallery). 2026-09-11.
   All classes start with kq- so nothing in style.css / theme-rose.css can reach them.
   Colours come from the theme-rose tokens, with fallbacks. */

/* ---------- search button in the header ---------- */
.kq-open { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: var(--kc-slate-txt, #f3f1fa);
  font: 700 13.5px/1 var(--kc-body, "Manrope", Arial, sans-serif); cursor: pointer; white-space: nowrap; transition: background .2s ease, border-color .2s ease; }
.kq-open:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.kq-open:focus-visible { outline: 2px solid var(--kc-rose, #ff2d95); outline-offset: 2px; }
.kq-open svg { width: 18px; height: 18px; flex: 0 0 auto; }
.kq-open kbd { font: 700 11px/1 var(--kc-body, Arial, sans-serif); padding: 3px 6px; border-radius: 4px; background: rgba(255, 255, 255, .12); color: var(--kc-slate-txt-2, #b8b5ca); }
@media (max-width: 1100px) { .kq-open kbd { display: none; } }
@media (max-width: 900px) { .kq-open { order: 1; margin-left: auto; height: 38px; padding: 0 10px; } .kq-open .kq-lbl { display: none; } }

/* ---------- the search screen ---------- */
.kq-dlg { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; background: rgba(13, 14, 21, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.kq-dlg.kq-on { opacity: 1; }
.kq-dlg[hidden] { display: none; }
.kq-box { width: 100%; max-width: 980px; margin: 0 auto; max-height: 100%; display: flex; flex-direction: column;
  background: var(--kc-slate, #1f2233); color: var(--kc-slate-txt, #f3f1fa); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transform: translateY(-14px); transition: transform .22s ease; }
.kq-dlg.kq-on .kq-box { transform: none; }
@media (min-width: 760px) { .kq-dlg { padding: 5vh 20px; } .kq-box { border-radius: 16px; overflow: hidden; } }
.kq-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.kq-bar svg { width: 22px; height: 22px; color: var(--kc-rose, #ff2d95); flex: 0 0 auto; }
.kq-in { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; color: #fff;
  font: 600 19px/1.2 var(--kc-body, "Manrope", Arial, sans-serif); }
.kq-in::placeholder { color: var(--kc-slate-txt-2, #8f8ca3); font-weight: 500; }
.kq-in::-webkit-search-cancel-button { display: none; }
.kq-x { flex: 0 0 auto; height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: transparent;
  color: var(--kc-slate-txt, #f3f1fa); font: 700 13px/1 var(--kc-body, Arial, sans-serif); cursor: pointer; }
.kq-x:hover { background: rgba(255, 255, 255, .08); }
.kq-x:focus-visible, .kq-chip:focus-visible, .kq-res a:focus-visible, .kq-go:focus-visible { outline: 2px solid var(--kc-rose, #ff2d95); outline-offset: 2px; }
.kq-body { overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 22px; }
.kq-hint { margin: 0 0 12px; font-size: 13.5px; color: var(--kc-slate-txt-2, #b8b5ca); }
.kq-hint b { color: #fff; }
.kq-group { margin: 0 0 14px; }
.kq-gh { margin: 0 0 8px; font: 700 11.5px/1 var(--kc-body, Arial, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--kc-rose, #ff2d95); }
.kq-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.kq-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04); color: var(--kc-slate-txt, #f3f1fa) !important; font: 700 13px/1 var(--kc-body, Arial, sans-serif);
  text-decoration: none !important; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.kq-chip:hover { border-color: var(--kc-rose, #ff2d95); background: rgba(255, 45, 149, .12); }
.kq-chip small { font: 700 11px/1 var(--kc-body, Arial, sans-serif); color: var(--kc-slate-txt-2, #b8b5ca); }
.kq-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 2px 0 12px; }
.kq-sum p { margin: 0; font-size: 14px; color: var(--kc-slate-txt-2, #b8b5ca); }
.kq-sum b { color: #fff; font-variant-numeric: tabular-nums; }
.kq-links { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.kq-res { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.kq-res a { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: var(--kc-slate-txt, #f3f1fa) !important; text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease; }
.kq-res a:hover, .kq-res a.kq-cur { background: rgba(255, 45, 149, .1); border-color: rgba(255, 45, 149, .55); }
.kq-res img { width: 54px; height: 72px; border-radius: 7px; object-fit: cover; background: rgba(255, 255, 255, .06); }
.kq-nm { display: block; font: 700 15.5px/1.2 var(--kc-display, "Unbounded", Arial, sans-serif); color: #fff; }
.kq-mt { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--kc-slate-txt-2, #b8b5ca); }
.kq-pr { text-align: right; font: 800 14px/1.2 var(--kc-body, Arial, sans-serif); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kq-pr small { display: block; font-weight: 600; font-size: 11px; color: var(--kc-slate-txt-2, #b8b5ca); }
.kq-st { display: inline-block; margin-top: 5px; padding: 2px 7px; border-radius: 4px; font: 800 10px/1.3 var(--kc-body, Arial, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.kq-st.kq-free { background: rgba(52, 199, 123, .16); color: #6be3a4; }
.kq-st.kq-na { background: rgba(255, 255, 255, .1); color: #d7d5e0; }
.kq-res a.kq-offr img { filter: grayscale(1); opacity: .7; }
.kq-none { padding: 18px; border-radius: 12px; background: rgba(255, 255, 255, .05); text-align: center; }
.kq-none p { margin: 0 0 12px; color: var(--kc-slate-txt, #f3f1fa); }
.kq-go { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 8px; background: var(--kc-rose, #ff2d95); color: #fff !important;
  font: 800 14px/1 var(--kc-body, Arial, sans-serif); text-decoration: none !important; }
body.kq-lock { overflow: hidden; }

/* ---------- filter bar above a girl grid ---------- */
.kqf { position: sticky; top: 0; z-index: 30; margin: 0 0 16px; padding: 10px 0; background: var(--kc-bg, #f4f3f8); transition: top .3s ease; }
body:has(.kc-head:not(.kc-hide)) .kqf { top: 102px; }
@media (max-width: 900px) { body:has(.kc-head:not(.kc-hide)) .kqf { top: 0; } .kqf { position: relative; } }
.kqf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kqf-q { position: relative; flex: 1 1 220px; min-width: 0; }
.kqf-q svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--kc-txt-2, #5a5670); pointer-events: none; }
.kqf-q input { width: 100%; height: 42px; padding: 0 12px 0 38px; border-radius: 10px; border: 1px solid var(--kc-line, #dcd9e6); background: var(--kc-panel, #fff);
  color: var(--kc-txt, #1d1b2a); font: 600 14.5px/1 var(--kc-body, "Manrope", Arial, sans-serif); }
.kqf-q input:focus { outline: 0; border-color: var(--kc-rose, #ff2d95); box-shadow: 0 0 0 3px rgba(255, 45, 149, .15); }
.kqf-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--kc-line, #dcd9e6);
  background: var(--kc-panel, #fff); color: var(--kc-txt, #1d1b2a); font: 700 13.5px/1 var(--kc-body, Arial, sans-serif); cursor: pointer; white-space: nowrap; }
.kqf-btn:hover { border-color: var(--kc-rose, #ff2d95); }
.kqf-btn:focus-visible { outline: 2px solid var(--kc-rose, #ff2d95); outline-offset: 2px; }
.kqf-btn[aria-expanded="true"] { border-color: var(--kc-rose, #ff2d95); color: var(--kc-rose-deep, #d9127a); }
.kqf-btn svg { width: 12px; height: 12px; }
.kqf-btn .kqf-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--kc-rose, #ff2d95); color: #fff; font-size: 11.5px; line-height: 20px; text-align: center; }
.kqf-free { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--kc-line, #dcd9e6);
  background: var(--kc-panel, #fff); font: 700 13.5px/1 var(--kc-body, Arial, sans-serif); color: var(--kc-txt, #1d1b2a); cursor: pointer; user-select: none; }
.kqf-free input { width: 16px; height: 16px; accent-color: var(--kc-rose, #ff2d95); margin: 0; }
.kqf-panel { margin-top: 10px; padding: 16px; border-radius: 12px; border: 1px solid var(--kc-line, #dcd9e6); background: var(--kc-panel, #fff);
  box-shadow: 0 14px 34px rgba(31, 34, 51, .14); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px 22px; }
.kqf-panel[hidden] { display: none; }
.kqf-g h3 { margin: 0 0 8px !important; font: 700 11.5px/1 var(--kc-body, Arial, sans-serif) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--kc-rose-deep, #d9127a) !important; }
.kqf-g .kqf-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.kqf-o { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--kc-line, #dcd9e6); background: transparent; color: var(--kc-txt, #1d1b2a);
  font: 700 12.5px/1 var(--kc-body, Arial, sans-serif); cursor: pointer; }
.kqf-o small { color: var(--kc-txt-2, #5a5670); font-weight: 600; }
.kqf-o:hover { border-color: var(--kc-rose, #ff2d95); }
.kqf-o[aria-pressed="true"] { background: var(--kc-rose, #ff2d95); border-color: var(--kc-rose, #ff2d95); color: #fff; }
.kqf-o[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }
.kqf-o:disabled { opacity: .38; cursor: default; }
.kqf-o:focus-visible { outline: 2px solid var(--kc-rose, #ff2d95); outline-offset: 2px; }
.kqf-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; border-top: 1px solid var(--kc-line, #dcd9e6); padding-top: 12px; }
.kqf-show { height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--kc-rose, #ff2d95); color: #fff; font: 800 14px/1 var(--kc-body, Arial, sans-serif); cursor: pointer; }
.kqf-clear { background: none; border: 0; padding: 6px 0; color: var(--kc-txt-2, #5a5670); font: 700 13px/1 var(--kc-body, Arial, sans-serif); text-decoration: underline; cursor: pointer; }
.kqf-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 13.5px; color: var(--kc-txt-2, #5a5670); }
.kqf-act:empty { display: none; }
.kqf-act b { color: var(--kc-txt, #1d1b2a); font-variant-numeric: tabular-nums; }
.kqf-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 999px; background: rgba(255, 45, 149, .1); color: var(--kc-rose-deep, #d9127a);
  border: 0; font: 700 12.5px/1 var(--kc-body, Arial, sans-serif); cursor: pointer; }
.kqf-tag span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--kc-rose, #ff2d95); color: #fff; font-size: 12px; line-height: 1; }
.kqf-empty { grid-column: 1 / -1; padding: 26px 16px; text-align: center; border: 1px dashed var(--kc-line, #dcd9e6); border-radius: 12px; }
.kqf-empty p { margin: 0 0 12px; }
li.kqf-out { display: none !important; }
@media (max-width: 900px) {
  /* phone: the panel becomes a sheet that slides up from the bottom */
  .kqf-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10040; margin: 0; max-height: 82vh; overflow-y: auto; border-radius: 16px 16px 0 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); grid-template-columns: 1fr; box-shadow: 0 -12px 40px rgba(13, 14, 21, .35); }
  .kqf-foot { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); background: var(--kc-panel, #fff); padding-bottom: 6px; }
  .kqf-show { flex: 1; }
  .kqf-scrim { position: fixed; inset: 0; z-index: 10039; background: rgba(13, 14, 21, .45); }
  /* 2026-09-12 fix: .kqf is its own stacking layer (z-index 30), so the panel inside it sat UNDER a
     grey layer added to <body> - the sheet showed but nothing on it could be tapped. The grey layer now
     lives inside the bar, next to the panel, and the bar is lifted above the page while the sheet is open. */
  .kqf.kqf-sheet { z-index: 10041; }
  .kqf-q { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kq-dlg, .kq-box, .kqf { transition: none; } }