/* =============================================================
   Bhopal.info — Directory hub + vertical listing pages
   MOBILE-FIRST rebuild: 2026-06-04
   Builds on portal.css tokens. Flat: no shadows / gradients.
   Breakpoints: 480 / 768 / 1024 / 1280 (min-width only)
   ============================================================= */

/* DIRECTORY HEAD */
.dir-head{background:var(--white);border-bottom:1px solid var(--g200)}
.dir-head-in{max-width:var(--max);margin:0 auto;padding:20px var(--pad) 18px;text-align:center}
.dir-head h1{font-family:var(--serif);font-size:clamp(20px,5vw,28px);font-weight:700;color:var(--g900);margin-bottom:6px}
.dir-head .sub{font-size:clamp(13px,2vw,14px);color:var(--g700);margin-bottom:16px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.5}
@media(min-width:768px){.dir-head-in{padding:26px var(--pad) 24px}}

/* Universal search bar */
.usearch{display:flex;align-items:center;max-width:620px;margin:0 auto;border:2px solid var(--red);border-radius:6px;overflow:hidden}
.usearch i{width:18px;height:18px;color:var(--g500);margin-left:12px;flex-shrink:0}
.usearch input{flex:1;border:none;outline:none;font-family:var(--sans);font-size:14px;color:var(--g900);padding:11px 10px;min-height:44px}
.usearch input::placeholder{color:var(--g400)}
.usearch button{background:var(--red);color:#fff;border:none;font-family:var(--sans);font-size:14px;font-weight:600;padding:0 18px;align-self:stretch;cursor:pointer;transition:background 150ms;min-height:44px;white-space:nowrap}
.usearch button:hover{background:var(--red-h)}

/* DIRECTORY HUB */
.hub-sec{max-width:var(--max);margin:24px auto;padding:0 var(--pad)}
@media(min-width:768px){.hub-sec{margin:34px auto}}
.hub-sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;border-bottom:2px solid var(--g200);padding-bottom:10px}
.hub-sec-hd h2{font-family:var(--serif);font-size:clamp(17px,3.5vw,21px);font-weight:700;color:var(--g900);display:flex;align-items:center;gap:10px}
.hub-sec-hd h2 i{width:18px;height:18px;color:var(--red);flex-shrink:0}
.hub-sec-hd .all{font-size:13px;font-weight:600;color:var(--red);display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.hub-sec-hd .all i{width:14px;height:14px}

/* Vertical tiles — mobile first */
.vtiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:768px){.vtiles{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:1024px){.vtiles{grid-template-columns:repeat(4,1fr);gap:16px}}
.vtile{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--g200);border-radius:6px;padding:16px;cursor:pointer;transition:border-color 150ms}
@media(min-width:768px){.vtile{padding:20px}}
.vtile:hover{border-color:var(--red)}
.vtile-ic{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
@media(min-width:768px){.vtile-ic{width:46px;height:46px}}
.vtile-ic i{width:21px;height:21px}
.vtile-ic.red{background:var(--red-lt)} .vtile-ic.red i{color:var(--red)}
.vtile-ic.orange{background:var(--orange-lt)} .vtile-ic.orange i{color:var(--orange-h)}
.vtile-ic.green{background:var(--green-lt)} .vtile-ic.green i{color:var(--green-d)}
.vtile h3{font-family:var(--sans);font-size:clamp(13px,2vw,15px);font-weight:700;color:var(--g900);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.vtile p{font-size:12px;color:var(--g700);line-height:1.5;margin-bottom:12px;flex:1}
.vtile-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--g100);padding-top:10px}
.vtile-count{font-size:11.5px;color:var(--g500);font-weight:500}
.vtile-count strong{color:var(--g900);font-weight:700}
.vtile-go{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--red);transition:gap 150ms}
.vtile-go i{width:13px;height:13px}
.vtile:hover .vtile-go{gap:8px}

/* Popular search chips */
.poprow{display:flex;flex-wrap:wrap;gap:8px}
.popchip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--g700);background:var(--white);border:1px solid var(--g200);border-radius:30px;padding:8px 14px;cursor:pointer;transition:all 150ms;min-height:44px}
.popchip i{width:14px;height:14px;color:var(--g500)}
.popchip:hover{border-color:var(--red);color:var(--red)}
.popchip:hover i{color:var(--red)}

/* Featured strip — mobile first */
.feat-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:480px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.feat-grid{grid-template-columns:repeat(3,1fr);gap:16px}}

/* Stats band — mobile first */
.statband{background:var(--g900);margin-top:12px}
.statband-in{max-width:var(--max);margin:0 auto;padding:20px var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:768px){.statband-in{grid-template-columns:repeat(4,1fr);gap:24px;padding:28px var(--pad)}}
.sb{text-align:center}
.sb .v{font-family:var(--serif);font-size:clamp(22px,5vw,32px);font-weight:700;color:#fff;line-height:1}
.sb .v .u{color:var(--orange-m)}
.sb .l{font-size:clamp(10px,2vw,12.5px);color:#b0b0b0;margin-top:6px;text-transform:uppercase;letter-spacing:.04em}

/* FILTER SECTION */
.filter-section{background:var(--white);border-bottom:1px solid var(--g200);position:sticky;top:54px;z-index:90}
@media(min-width:768px){.filter-section{top:64px}}
@media(min-width:1024px){.filter-section{top:72px}}
.filter-inner{max-width:var(--max);margin:0 auto;padding:10px var(--pad)}
@media(min-width:768px){.filter-inner{padding:13px var(--pad)}}
.cat-chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px;-webkit-overflow-scrolling:touch}
.cat-chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:20px;border:1px solid var(--g200);color:var(--g700);background:var(--white);cursor:pointer;transition:all 150ms;white-space:nowrap;flex-shrink:0;min-height:44px}
.chip i{width:14px;height:14px}
.chip:hover{border-color:var(--red);color:var(--red)}
.chip.active{background:var(--red);border-color:var(--red);color:#fff}
.filter-bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-label{font-size:12px;font-weight:600;color:var(--g500);flex-shrink:0}
.filter-field{display:flex;align-items:center;gap:7px;border:1px solid var(--g200);border-radius:4px;padding:7px 12px;font-size:13px;color:var(--g700);background:var(--white);min-height:44px}
.filter-field i{width:15px;height:15px;color:var(--g500)}
.filter-field select{border:none;background:transparent;font-family:var(--sans);font-size:13px;color:var(--g900);outline:none;cursor:pointer}
.toggle-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--g700);border:1px solid var(--g200);border-radius:4px;padding:7px 13px;cursor:pointer;transition:all 150ms;user-select:none;min-height:44px}
.toggle-chip i{width:14px;height:14px;color:var(--green)}
.toggle-chip.on{background:var(--green-lt);border-color:var(--green);color:var(--green-d)}
.filter-clear{font-size:12px;font-weight:600;color:var(--red);cursor:pointer;margin-left:auto;display:flex;align-items:center;gap:4px}
.filter-clear i{width:13px;height:13px}

.results-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 0 12px;flex-wrap:wrap;gap:8px}
.results-count{font-size:14px;color:var(--g700)}
.results-count strong{color:var(--g900);font-weight:700}

/* LISTING CARD GRID — mobile first */
.lst-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:480px){.lst-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.lst-grid{grid-template-columns:repeat(3,1fr);gap:18px}}

/* Listing card */
.lst-card{background:var(--white);border:1px solid var(--g200);border-radius:6px;overflow:hidden;cursor:pointer;transition:border-color 150ms;display:flex;flex-direction:column}
.lst-card:hover{border-color:var(--red)}
.lst-top{display:flex;gap:12px;padding:14px 14px 0}
@media(min-width:480px){.lst-top{padding:16px 16px 0}}
.lst-logo{width:50px;height:50px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;font-weight:700;border:1px solid var(--g200)}
@media(min-width:768px){.lst-logo{width:54px;height:54px}}
.lst-logo.red{background:var(--red-lt);color:var(--red)}
.lst-logo.orange{background:var(--orange-lt);color:var(--orange-h)}
.lst-logo.green{background:var(--green-lt);color:var(--green-d)}
.lst-head{flex:1;min-width:0}
.lst-name{font-family:var(--serif);font-size:clamp(14px,3vw,16px);font-weight:700;color:var(--g900);line-height:1.25;display:flex;align-items:center;gap:6px;margin-bottom:4px}
.lst-name .vrf{width:14px;height:14px;color:var(--green);flex-shrink:0}
.lst-cat{font-size:12px;color:var(--g500)}
.lst-body{padding:11px 14px 0;flex:1;display:flex;flex-direction:column}
@media(min-width:480px){.lst-body{padding:13px 16px 0}}
.lst-rate{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.lst-rate .stars{display:flex;gap:1px}
.lst-rate .stars i{width:13px;height:13px;color:var(--orange)}
.lst-rate .rv{font-size:12.5px;font-weight:700;color:var(--g900)}
.lst-rate .rc{font-size:11.5px;color:var(--g500)}
.lst-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.lst-tag{font-size:11px;font-weight:600;color:var(--g700);background:var(--g100);border-radius:4px;padding:4px 8px}
.lst-meta{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.lst-meta .m{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--g700)}
.lst-meta .m i{width:13px;height:13px;color:var(--g500);flex-shrink:0}
.lst-meta .m .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.lst-meta .m .dot.open{background:var(--green)}
.lst-meta .m .dot.closed{background:var(--g400)}
.lst-meta .m .ttl{color:var(--green-d);font-weight:600}
.lst-foot{margin-top:auto;border-top:1px solid var(--g200);padding:9px 14px;display:flex;gap:7px}
@media(min-width:480px){.lst-foot{padding:10px 16px}}
.lst-foot .b{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:600;padding:8px;border-radius:4px;border:1px solid var(--g200);color:var(--g700);background:#fff;cursor:pointer;transition:all 150ms;min-height:44px}
.lst-foot .b i{width:13px;height:13px}
.lst-foot .b:hover{border-color:var(--red);color:var(--red)}
.lst-foot .b.primary{background:var(--red);border-color:var(--red);color:#fff}
.lst-foot .b.primary:hover{background:var(--red-h)}

/* Misc */
.badge-abs{position:absolute}
.load-more{display:flex;justify-content:center;padding:28px 0 8px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--g900);color:#fff;padding:12px 20px;border-radius:6px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:all 250ms;z-index:300}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast i{width:16px;height:16px;color:var(--green)}