/* frontend/search/index.css */

/* ===================== VARIABLES ===================== */
:root{
  --brand:#f36b21;
  --brand-deep:#eb4d04;

  --bg:#ffffff;                 /* pure white page */
  --chip-bg: rgba(15,23,42,0.06);
  --input-bg: rgba(15,23,42,0.06);

  --text:#0f172a;
  --muted: rgba(15,23,42,0.72);
  --line: rgba(15,23,42,0.10);

  --shadow-soft: 0 10px 25px rgba(15,23,42,0.08);

  --r-sm: 10px;
  --r-md: 14px;

  --topA-h: 58px;
  --topB-h: 60px;
  --filter-h: 46px;

  --maxw: 1180px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===================== BASE ===================== */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}
a{ color: inherit; text-decoration:none; }
button, input, select{ font-family: inherit; }

*{ scrollbar-width:none; }
*::-webkit-scrollbar{ width:0; height:0; }

/* ===================== STATE A TOPBAR ===================== */
.sTopA{
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

.sTopA__row{
  height: var(--topA-h);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.sTopA__inputWrap{
  display:flex;
  align-items:center;
  gap: 8px;
  background: var(--input-bg);
  border-radius: 12px;
  padding: 10px 12px;
}

.sTopA__icon{ color: rgba(15,23,42,0.55); }

.sTopA__input{
  width:100%;
  border:0;
  outline:0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.sTopA__input::placeholder{
  color: rgba(15,23,42,0.48);
  font-weight: 700;
}

.sCancel{
  border:0;
  background: transparent;
  color: rgba(15,23,42,0.86);
  font-weight: 900;
  font-size: 13.5px;
  padding: 10px 6px;
  cursor:pointer;
}

/* ===================== STATE B TOPBAR ===================== */
.sTopB{
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

.sTopB--hidden{ display:none; }

.sTopB__row{
  height: var(--topB-h);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}

/* brand (home-ish) */
/* brand (EXACTLY like home) */
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight: 500;
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -0.2px;
  white-space: nowrap;
  font-size: large;
}

.brand__icon{ color: var(--brand); }
.brand__text{ color: var(--brand); }

/* search input (home-ish) */
.sTopB__inputWrap{
  display:flex;
  align-items:center;
  gap: 8px;
  background: var(--input-bg);
  border-radius: 12px;
  padding: 10px 12px;
}

.sTopB__icon{ color: rgba(15,23,42,0.55); }

.sTopB__input{
  width:100%;
  border:0;
  outline:0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.sTopB__input::placeholder{
  color: rgba(15,23,42,0.48);
  font-weight: 700;
}

/* ===================== FILTER BAR ===================== */
.sFilterBar{
  position: sticky;
  top: var(--topB-h);
  z-index: 55;
  background: var(--bg);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

.sFilterBar--hidden{ display:none; }

.filterBtn{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  height: var(--filter-h);
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 0 12px;

  border:0;
  background: transparent;
  cursor:pointer;

  font-weight: 900;
  color: rgba(15,23,42,0.86);
}
.filterBtn i{ color: rgba(15,23,42,0.70); }

/* ===================== MAIN ===================== */
.sMain{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 12px 18px;
}

/* ===================== POPULAR CHIPS ===================== */
.popular__title{
  font-weight: 100;
  font-size: large;
  color: rgba(15,23,42,0.82);
  margin: 4px 0 10px;
}

.chipRow{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  color: rgba(15,23,42,0.86);

  border-radius: 999px;
  padding: 10px 12px;

  font-weight: 900;
  font-size: 12.5px;
  cursor:pointer;
}

/* ===================== RESULTS HEADER ===================== */
.resultsHead{
  padding: 2px 0 10px;
}

.resultsHead--hidden{ display:none; }

.resultsHead__title{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 13.5px;
}

.resultsHead__meta{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

/* ===================== RESULTS GRID (2 columns, SDP-like base) ===================== */
.results--hidden{ display:none; }

/* keep cards tight to filter area */
.results{
  padding-top: 4px;
}

.pGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-bottom: 14px;
}

.pCard{
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(114, 126, 153, 0.06);
  overflow:hidden;
  cursor:pointer;
}

.pImg{
  height: 130px;
  width:100%;
  background: rgba(15,23,42,0.06);
  background-size: cover;
  background-position:center;
  margin: 8px;
  border-radius: none;
}

.pBody{
  padding: 0 10px 12px;
}

.pName{
  margin-top: 2px;
  font-weight: 100;
  font-size: small;
  color: rgba(15,23,42,0.92);
  line-height: 1.15;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pPrice{
  margin-top: 7px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: medium;
  color: var(--brand);
}

.pMoq{
  margin-top: 6px;
  font-size: small;
  color: var(--muted);
  font-weight: 950;
}

.pSwitch--pop{
  border-color: rgba(243,107,33,0.22);
  background: rgba(243,107,33,0.10);
  color: rgba(235,77,4,0.92);
}

/* skeleton */
.pCard--skeleton{
  height: 242px;
  position: relative;
  overflow: hidden;
}
.pCard--skeleton::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(15,23,42,0.06),
    rgba(15,23,42,0.10),
    rgba(15,23,42,0.06)
  );
  animation: shimmer 1.1s infinite linear;
}

/* loader */
.pLoader{
  padding: 4px 0 12px;
}
.pLoader__bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.06);
  position: relative;
  overflow: hidden;
}
.pLoader__bar::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(15,23,42,0.06),
    rgba(15,23,42,0.10),
    rgba(15,23,42,0.06)
  );
  animation: shimmer 1.1s infinite linear;
}

/* ===================== FILTER OVERLAY ===================== */
.fOverlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.46);
  z-index: 80;
  display:flex;
  align-items: stretch;
  justify-content: stretch;
}

.fOverlay--hidden{ display:none; }

.fSheet{
  width: 100%;
  height: 100%;
  background: #fff;
  display:flex;
  flex-direction: column;
}

.fHead{
  height: 56px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

.fHead__title{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 14px;
}

.fClose{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.fBody{
  padding: 12px;
  overflow-y: auto;
}

.fBlock{
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

.fLabel{
  font-weight: 900;
  font-size: 12.5px;
  color: rgba(15,23,42,0.86);
  margin-bottom: 10px;
}

.fSelect{
  width:100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  padding: 0 12px;
  font-weight: 800;
  color: rgba(15,23,42,0.88);
  outline: none;
}

.fRow2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fField{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  border-radius: 12px;
  padding: 10px 12px;
}

.fMini{
  font-size: 11px;
  font-weight: 900;
  color: rgba(15,23,42,0.60);
  margin-bottom: 6px;
}

.fInput{
  width:100%;
  border:0;
  outline:0;
  background: transparent;
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,0.90);
}

.fPills{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fPill{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
  color: rgba(15,23,42,0.84);
}

.fPill.isActive{
  border-color: rgba(243,107,33,0.22);
  background: rgba(243,107,33,0.10);
  color: rgba(235,77,4,0.92);
}

.fCheck{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 0;
  font-weight: 800;
  color: rgba(15,23,42,0.80);
  font-size: 12.5px;
}
.fCheck input{ transform: scale(1.05); }

.fCheck--disabled{
  opacity: 0.55;
}

.fRadio{
  display:flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 900;
  color: rgba(15,23,42,0.84);
  font-size: 12.5px;
}
.fRadio input{ transform: scale(1.05); margin-right: 10px; }

/* footer buttons */
.fFoot{
  padding: 12px;
  border-top: 1px solid rgba(15,23,42,0.06);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fGhost{
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.03);
  font-weight: 950;
  cursor:pointer;
}

.fPrimary{
  height: 46px;
  border-radius: 12px;
  border: 0;
  background: var(--brand);
  color: #fff;
  font-weight: 950;
  cursor:pointer;
}

/* ===================== ANIM ===================== */
@keyframes shimmer{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(60%); }
}

/* ===================== RESPONSIVE UPGRADES ===================== */
@media (min-width: 520px){
  .sTopA__row, .sTopB__row{ padding-left: 14px; padding-right: 14px; }
  .sMain{ padding-left: 14px; padding-right: 14px; }
  .pImg{ height: 145px; }
}
@media (min-width: 820px){
  .pImg{ height: 160px; }
}
@media (min-width: 1024px){
  .pImg{ height: 175px; }
}