/* =====================================================================
   MyBhusawal — style.css
   Mobile-first | bade fonts | senior-friendly | Hindi + English
   Palette: deep blue (bharosa) + kesari/amber (Indian, garam) + cream
   ===================================================================== */

:root{
  --bg:        #fbf7ef;   /* warm cream */
  --card:      #ffffff;
  --ink:       #1c2434;   /* deep slate text */
  --muted:     #5b6477;
  --blue:      #14315e;   /* deep blue — trust */
  --blue-soft: #e7eefb;
  --saffron:   #e8762a;   /* kesari accent */
  --saffron-d: #c75f1a;
  --green:     #1f9d57;   /* WhatsApp / success */
  --line:      #ece4d6;
  --radius:    16px;
  --shadow:    0 2px 10px rgba(20,49,94,.07);
  color-scheme: light;   /* phone dark-mode me bhi design light rahe */
}

html{ color-scheme: light; background:#fbf7ef; }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body{
  margin:0;
  font-family:"Noto Sans Devanagari","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:18px;          /* bada base — uncle/aunty friendly */
  line-height:1.5;
}

a{ color:inherit; text-decoration:none; }

/* ---------- Header ---------- */
.header{
  background:var(--blue);
  color:#fff;
  padding:16px 18px;
  position:sticky; top:0; z-index:20;
  box-shadow:var(--shadow);
}
.header .brand{ font-size:24px; font-weight:800; letter-spacing:.2px; }
.header .brand span{ color:var(--saffron); }
.header .tag{ font-size:14px; opacity:.9; margin-top:2px; transition:opacity .25s ease; min-height:19px; }
.headwrap{ display:flex; align-items:center; gap:13px; }
.headwrap .logo{ flex:none; }

.wrap{ max-width:1700px; margin:0 auto; padding:16px 20px; }

/* ---------- Search box (category page) ---------- */
.searchbar{ margin:6px 0 18px; }
.searchbar input{
  width:100%; padding:14px 16px; font-size:18px;
  border:2px solid var(--line); border-radius:var(--radius);
  background:#fff; color:var(--ink);
}
.searchbar input:focus{ outline:none; border-color:var(--saffron); }

/* ---------- Sticky top: search + add button ---------- */
.topactions{
  position:sticky; top:62px; z-index:15;
  background:var(--bg); padding:8px 0 12px;
  display:flex; gap:8px; align-items:stretch;
}
.searchwrap{ position:relative; flex:1; display:flex; }
.searchwrap #catSearch{
  width:100%; padding:14px 44px 14px 16px; font-size:18px;
  border:2px solid var(--line); border-radius:var(--radius);
  background:#fff; color:var(--ink);
}
.searchwrap #catSearch:focus{ outline:none; border-color:var(--saffron); }
#clearSearch{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  display:none; align-items:center; justify-content:center;
  width:30px; height:30px; border:0; border-radius:50%;
  background:var(--line); color:var(--ink); font-size:16px; cursor:pointer;
}
#clearSearch:hover{ background:var(--saffron); color:#fff; }

/* ---------- 🚨 Emergency quick-access ---------- */
.emergbar{
  background:#fff; border:2px solid #f2c7c0;
  border-radius:var(--radius); padding:12px 14px;
  margin-bottom:14px; box-shadow:var(--shadow);
}
.emerghead{
  display:flex; align-items:center; justify-content:space-between;
  font-size:15px; font-weight:800; color:#c0392b; margin-bottom:10px;
}
.emergtog{
  background:none; border:0; color:var(--blue); font-size:13px;
  font-weight:700; cursor:pointer; padding:4px 6px;
}
.emerggrid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
}
@media(min-width:560px){ .emerggrid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:900px){ .emerggrid{ grid-template-columns:repeat(6,1fr); } }

.emergbtn{
  display:flex; align-items:center; gap:8px;
  background:#fdf3f1; border:1px solid #f2c7c0;
  border-radius:11px; padding:9px 10px;
  transition:transform .08s ease;
}
.emergbtn:active{ transform:scale(.97); }
.emergbtn .ei{ font-size:22px; line-height:1; flex:none; }
.emergbtn .et{ display:flex; flex-direction:column; line-height:1.2; font-size:12px; color:var(--muted); }
.emergbtn .et b{ font-size:15px; color:#c0392b; font-weight:800; }
/* local (category) wale — blue tone */
.emergbtn.loc{ background:#eef3fa; border-color:#c7d6ea; }
.emergbtn.loc .et b{ color:var(--blue); font-size:13px; }
/* extra buttons — sirf toggle pe */
.emergbtn.more{ display:none; }
.emerggrid.open .emergbtn.more{ display:flex; }
/* ---------- Shopkeeper CTA banner ---------- */
.ownercta{
  display:flex !important; align-items:center; gap:14px;
  background:linear-gradient(90deg,var(--saffron),var(--saffron-d));
  color:#fff; border-radius:var(--radius); padding:14px 18px;
  margin-bottom:16px; box-shadow:var(--shadow); text-decoration:none;
}
.ownercta:active{ opacity:.92; }
.ownercta .ico{ font-size:30px; flex:none; }
.ownercta .txt{ flex:1; display:flex; flex-direction:column; line-height:1.3; }
.ownercta .txt b{ font-size:17px; color:#fff; }
.ownercta .txt small{ font-size:13px; opacity:.92; color:#fff; }
.ownercta .arrow{ font-size:24px; font-weight:800; flex:none; color:#fff; }

/* ---------- Category grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);   /* mobile: 2 */
  gap:10px;
}
@media(min-width:480px){ .grid{ grid-template-columns:repeat(3,1fr); } }   /* 3 */
@media(min-width:680px){ .grid{ grid-template-columns:repeat(4,1fr); } }   /* 4 */
@media(min-width:900px){ .grid{ grid-template-columns:repeat(5,1fr); } }   /* 5 */
@media(min-width:1100px){ .grid{ grid-template-columns:repeat(6,1fr); } }  /* 6 */
@media(min-width:1350px){ .grid{ grid-template-columns:repeat(7,1fr); } }  /* 7 */
@media(min-width:1600px){ .grid{ grid-template-columns:repeat(8,1fr); } }  /* 8 */

.cat{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:11px 8px;
  text-align:center; box-shadow:var(--shadow);
  transition:transform .08s ease, border-color .08s ease;
}
.cat:active{ transform:scale(.97); border-color:var(--saffron); }
.cat .ic{ font-size:26px; line-height:1; }
.cat .en{ font-size:14px; font-weight:700; margin-top:5px; line-height:1.2; }
.cat .hi{ font-size:12px; font-weight:600; color:var(--muted); margin-top:2px; line-height:1.2; }

/* ---------- Page title (category page) ---------- */
.pagetitle{ display:flex; align-items:center; gap:10px; margin:4px 0 14px; }
.pagetitle .ic{ font-size:30px; }
.pagetitle h1{ font-size:23px; margin:0; }
.pagetitle .count{ font-size:14px; color:var(--muted); }
.back{ display:inline-block; margin-bottom:10px; color:var(--blue); font-weight:600; }

/* ---------- Business cards ---------- */
.list{ display:flex; flex-direction:column; gap:12px; }
@media(min-width:760px){
  .list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
}
.biz{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
.biz h3{ margin:0 0 4px; font-size:20px; }
.biz .verified{
  font-size:12px; color:var(--green); font-weight:700;
  border:1px solid var(--green); border-radius:20px; padding:1px 8px; margin-left:6px;
}
.biz .meta{ color:var(--muted); font-size:15px; margin:2px 0; }
.biz .area{ color:var(--saffron-d); font-weight:600; }
.biz .desc{ font-size:15px; margin:8px 0 2px; }

.actions{ display:flex; gap:10px; margin-top:14px; }
.btn{
  flex:1; text-align:center; padding:13px 10px;
  border-radius:12px; font-size:17px; font-weight:700;
}
.btn-call{ background:var(--blue); color:#fff; }
.btn-wa{ background:var(--green); color:#fff; }
.btn-map{ display:block; margin-top:10px; background:#fff; color:var(--blue); border:2px solid var(--blue); }
.btn:active{ opacity:.85; }
.detail-link{ display:inline-block; margin-top:12px; font-size:14px; font-weight:700; color:var(--saffron-d); }

/* ---------- Empty state ---------- */
.empty{
  background:var(--card); border:1px dashed var(--line);
  border-radius:var(--radius); padding:28px 18px; text-align:center;
  color:var(--muted);
}
.empty .big{ font-size:40px; }

.footer{ text-align:center; color:var(--muted); font-size:13px; padding:24px 0 32px; }
.footer span{ color:var(--saffron-d); font-weight:600; }

/* ---- Add-your-business CTA ---- */
.addcta{
  display:block; margin:20px 0 6px; text-align:center;
  background:var(--saffron); color:#fff; font-weight:700; font-size:17px;
  padding:16px; border-radius:var(--radius); box-shadow:var(--shadow);
}
.addcta:active{ opacity:.9; }