/* ---------- Search panel (Home + results page) ---------- */
.search-sec{ padding-bottom:56px; }
.search-sec .section-title{ margin-bottom:34px; }
.search-panel{ background:rgba(23,23,23,.7); backdrop-filter:blur(7.5px); -webkit-backdrop-filter:blur(7.5px); border:1px solid rgba(138,59,151,.35); border-radius:25px; padding:15px 13px 26px; }
.search-tabs{ position:relative; background:#171717; border-radius:20px; min-height:89px; display:flex; align-items:center; gap:12px; padding:12px; margin-bottom:39px; }
/* Every tab carries the same padding, so switching no longer resizes one tab and
   shoves its neighbours — that shift is what made the pill impossible to animate.
   min-width:0 holds the three to an equal third: without it the longest label
   ("ร้านค้าที่ติดตั้งและจำหน่าย") pushed its own tab wider than the other two. */
.search-tab{ position:relative; z-index:1; flex:1 1 0; min-width:0; justify-content:center; display:flex; align-items:center; gap:11px; padding:16px 8px; border-radius:15px; font-weight:700; font-size:clamp(16px,1.25vw,24px); white-space:nowrap; cursor:pointer; }
.search-tab .icn{ width:22px; height:22px; }
/* Until the script has measured the pill (and with JS off), the active tab paints
   its own background, so the control never renders without a visible selection. */
.search-tabs:not(.has-tab-ind) .search-tab.active{ background:var(--purple); }

/* Sliding selection pill. JS writes the active tab's box into the transform and
   size; the transition is only armed after the first placement so it does not
   animate in from a zero-size box on load. */
.search-tab-ind{ position:absolute; top:0; left:0; z-index:0; width:0; height:0; border-radius:15px; background:var(--purple); opacity:0; pointer-events:none; }
.search-tabs.has-tab-ind .search-tab-ind{ opacity:1; }
.search-tab-ind.is-armed{ transition:transform .34s cubic-bezier(.22,.61,.36,1), width .34s cubic-bezier(.22,.61,.36,1), height .24s ease; }

/* The panel that comes into view eases up rather than appearing outright. */
@keyframes nexen-panel-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.search-form.is-entering{ animation:nexen-panel-in .3s cubic-bezier(.22,.61,.36,1) both; }

@media (prefers-reduced-motion: reduce){
	.search-tab-ind.is-armed{ transition:none; }
	.search-form.is-entering{ animation:none; }
}
.search-label{ font-size:clamp(18px,1.3vw,25px); font-weight:600; margin-bottom:12px; }
.search-fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:35px; }
.select-box{ position:relative; background:rgba(23,23,23,.75); border:.5px solid var(--purple); border-radius:10px; height:71px; display:flex; align-items:center; padding:0 18px; cursor:pointer; }
.select-box select{ appearance:none; -webkit-appearance:none; background:transparent; border:none; outline:none; width:100%; height:100%; color:#fff; font-family:inherit; font-weight:300; font-size:clamp(16px,1.25vw,22px); cursor:pointer; padding-right:26px; }
.select-box select option{ color:#171717; }
.select-box .chev{ position:absolute; right:18px; top:50%; transform:translateY(-50%); width:17px; height:10px; pointer-events:none; }
.search-btn{ background:var(--purple); border:none; border-radius:10px; height:52px; width:100%; display:flex; align-items:center; justify-content:center; gap:14px; color:#fff; font-size:20px; font-weight:400; cursor:pointer; }
.search-btn .icn{ width:19px; height:19px; }
.search-note{ padding:8px 4px 6px; font-size:clamp(14px,1.1vw,17px); font-weight:300; color:var(--muted); }
.search-note a{ color:var(--purple); }

/* ---------- Results page ---------- */
.sr-sec{ padding-top:20px; padding-bottom:70px; }
.sr-head{ font-size:clamp(18px,1.5vw,24px); font-weight:500; margin:26px 0 30px; }
.sr-head span{ color:var(--purple); }
.sr-panel{ margin-bottom:40px; }

@media (max-width:820px){ .search-fields{ grid-template-columns:1fr; } }

/* Under ~680px a third of the row is narrower than the longest label, so the tabs
   stack full width instead of spilling their text. Equal widths either way. */
@media (max-width:680px){
	.search-tabs{ flex-direction:column; align-items:stretch; min-height:0; }
}