:root{
 --p:#2563eb;
 --a:#ff4757;
 --bg:#f2f4f8;
 --card:#fff;
 --radius:20px;
 --blur:blur(18px);
 --shadow:0 12px 30px rgba(0,0,0,.12);
}

/* RESET */

*{
 box-sizing:border-box;
 margin:0;
 padding:0;
 font-family:system-ui,-apple-system;
}

html,body{
 width:100%;
 overflow-x:hidden;
}

/* HEADER */

.header{
 position:sticky;
 top:0;
 z-index:9999;
 background:rgba(255,255,255,.9);
 backdrop-filter:blur(12px);

 height:56px;
 padding:6px 10px;

 display:flex;
 align-items:center;
 justify-content:center;

 box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.logo-box{
 display:flex;
 justify-content:center;
 align-items:center;
}

.logo-box img{
 height:28px;
 max-width:110px;
}

/* SEARCH */

.pro-filter{
 position:relative;
 margin:12px;
 padding:12px;
}

.pro-filter input,
.pro-filter select{
 width:100%;
 margin-top:8px;
 padding:14px;
 border:none;
 border-radius:16px;
 box-shadow:var(--shadow);
}

/* ===== SOMON STYLE CATEGORY GRID ===== */

.categories{
 padding:14px;
}

.main-cats{
 display:grid;
 gap:12px;
}

/* 📱 ТЕЛЕФОН — 3 боло + 3 поён */
@media (max-width:600px){
 .main-cats{
  grid-template-columns:repeat(3,1fr);
 }
}

/* 📱 ПЛАНШЕТ */
@media (min-width:601px) and (max-width:1024px){
 .main-cats{
  grid-template-columns:repeat(4,1fr);
 }
}

/* 💻 КОМПЮТЕР — автомат */
@media (min-width:1025px){
 .main-cats{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
 }
}

/* CATEGORY CARD */

.cat-title{
 background:#ffffff;
 border-radius:18px;

 padding:14px 10px;
 min-height:92px;

 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:8px;

 font-size:14px;
 font-weight:800;
 color:#111;

 width:100%;

 box-shadow:
 0 8px 20px rgba(0,0,0,.08),
 inset 0 -1px 0 rgba(0,0,0,.05);

 transition:
 transform .12s ease,
 box-shadow .12s ease,
 background .12s ease;

 user-select:none;
 -webkit-tap-highlight-color:transparent;
}

/* ICON */

.cat-title span:first-child{
 font-size:28px;
 line-height:1;
}

/* TEXT */

.cat-title span:last-child{
 text-align:center;
 line-height:1.15;
}

/* PRESS EFFECT */

.cat-title:active{
 transform:scale(.96);
 box-shadow:0 4px 10px rgba(0,0,0,.1);
 background:#f7f9fc;
}

/* IOS SAFE FIX */

@supports (-webkit-touch-callout: none){
 .cat-title{
  padding-top:16px;
 }
}

/* SUB CATEGORY */

.subcats{
 margin-top:12px;
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:10px;

 max-height:0;
 overflow:hidden;
 transition:.3s ease;
}

.subcats.show{
 max-height:500px;
}

/* SUB ITEM */

.cat{
 background:#f8fafc;
 border-radius:14px;
 padding:12px;
 text-align:center;
 font-size:13px;
 font-weight:600;
 box-shadow:0 2px 6px rgba(0,0,0,.05);
}

/* MOBILE */

@media(max-width:480px){

 .categories{
  grid-template-columns:repeat(2,1fr);
 }

 .subcats{
  grid-template-columns:repeat(2,1fr);
 }

}

/* MOBILE SAFE */

html,body{
 overflow-x:hidden;
 width:100%;
}

/* ADS GRID */

.ads{
 padding:12px;
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
 gap:14px;
}

/* CARD */

.ad-card{
 position:relative;
 background:white;
 border-radius:18px;
 overflow:hidden;
 box-shadow:var(--shadow);
 transition:.15s;
}

.ad-card:active{
 transform:scale(.97);
}

/* IMAGE */

.ad-card img{
 width:100%;
 height:170px;
 object-fit:cover;
}

/* INFO */

.ad-info{
 padding:10px;
}

/* LIKE HEART SVG */

.like-btn{
 position:absolute;
 top:10px;
 right:10px;

 width:28px;
 height:28px;

 background:transparent; /* круг нест */
 border-radius:0;
 box-shadow:none;

 display:flex;
 align-items:center;
 justify-content:center;

 z-index:10;
}

/* дил */
.like-btn.active svg{
 fill:#ff2d55;
 transform:scale(1.25);
 animation:pop .25s ease;
}

@keyframes pop{
 0%{ transform:scale(.6); }
 100%{ transform:scale(1.25); }
}

/* PRICE */

.ad-price{
 display:flex;
 align-items:center;
 gap:6px;
 font-weight:900;
 color:#16a34a;
}

.ad-price svg{
 width:16px;
 height:16px;
 fill:#16a34a;
}

/* CITY */

.ad-city{
 display:flex;
 align-items:center;
 gap:6px;
 font-size:12px;
 opacity:.7;
}

.ad-city svg{
 width:14px;
 height:14px;
 fill:#666;
}

/* VIP BADGE */

.vip-badge{
 position:absolute;
 top:10px;
 left:10px;
 background:linear-gradient(135deg,#FFD700,#FFA500);
 color:#000;
 font-size:11px;
 font-weight:900;
 padding:4px 8px;
 border-radius:8px;
}

/* BOTTOM NAV */

/* REMOVE BIG FLOATING BUTTON */
.add-btn{
 all:unset;
}

/* ALL NAV ITEMS SAME SIZE */
.bottom-nav{
 position:fixed;
 bottom:0;
 left:0;
 right:0;
 height:70px;
 background:#fff;
 display:flex;
 align-items:center;
 justify-content:space-between;
 box-shadow:0 -4px 12px rgba(0,0,0,.08);
 z-index:9999;
}

/* EACH ITEM */
.nav-item{
 flex:1;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 text-decoration:none;
 color:#666;
 font-size:11px;
 font-weight:600;
}

/* ICON SIZE */
.nav-item .material-icons{
 font-size:24px;
 margin-bottom:2px;
}

/* ACTIVE EFFECT */
.nav-item:active{
 transform:scale(.92);
}

/* SKELETON */

.skeleton{
 background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
 background-size:200% 100%;
 animation:skeleton 1.2s infinite;
 height:170px;
 border-radius:18px;
}

@keyframes skeleton{
 0%{background-position:0%}
 100%{background-position:200%}
}

.lang-box{
 position:absolute;
 right:12px;
 top:12px;
 display:flex;
 gap:6px;
}

.section{
 margin-bottom:22px;
}

.section-title{
 font-size:18px;
 font-weight:900;
 padding:0 12px 8px;
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.section-row{
 display:flex;
 gap:12px;
 padding:0 12px;
 overflow-x:auto;
 scroll-snap-type:x mandatory;
}

.section-row::-webkit-scrollbar{
 display:none;
}

.section-row .ad-card{
 min-width:170px;
 scroll-snap-align:start;
}

.logo-box{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:6px;
}

.logo-img{
 height:46px;
}

.stats-box{
 display:flex;
 gap:8px;
}

.stat{
 font-size:12px;
 font-weight:700;
 padding:4px 10px;
 border-radius:20px;
 background:#f1f5f9;
 display:flex;
 align-items:center;
 gap:4px;
}

.online{
 background:#22c55e;
 color:white;
 position:relative;
}

.total{
 background:#2563eb;
 color:white;
}

.pulse{
 width:8px;
 height:8px;
 background:#fff;
 border-radius:50%;
 animation:pulse 1.5s infinite;
}

@keyframes pulse{
 0%{box-shadow:0 0 0 0 rgba(255,255,255,.7);}
 70%{box-shadow:0 0 0 10px rgba(255,255,255,0);}
 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
}

.book-btn{
 position:fixed;
 bottom:75px;
 right:20px;
 background:#27ae60;
 color:white;
 border:none;
 padding:14px 18px;
 border-radius:50px;
 font-weight:bold;
 box-shadow:0 6px 15px rgba(0,0,0,.2);
}

.tabs{
 display:flex;
 position:sticky;
 top:130px;
 z-index:999;
 background:white;

 margin:10px 12px;
 border-bottom:1px solid #eee;
}

.tab{
 flex:1;
 text-align:center;
 padding:12px 0;
 font-weight:600;
 color:#999;
 cursor:pointer;
}

.tab.active{
 color:#000;
}

.tab-line{
 position:absolute;
 bottom:0;
 left:0;
 width:33.33%;
 height:3px;
 background:linear-gradient(90deg,#ff7a18,#ffb347);
 border-radius:10px;
 transition:.25s;
}

.ads{
 padding-bottom:100px;
}

#homeSections{
 margin-bottom:10px;
}

.tabs{
 margin-top:10px;
 background:white;
 border-radius:14px;
}

.insta-icon{
 position:absolute;
 left:10px;
 top:10px;
 width:34px;
 height:34px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:white;
 border-radius:10px;
 box-shadow:0 3px 8px rgba(0,0,0,.2);
 z-index:999;
}

.insta-icon svg{
 width:20px;
 height:20px;
}

.material-icons{
 font-size:28px;
 line-height:1;
 display:inline-flex;
 align-items:center;
 justify-content:center;

 /* fallback color барои Firefox */
 color:#2563eb;
}

/* ===== PRO INSTAGRAM STYLE ICONS ===== */

.material-icons{
 font-size:28px;
 margin-bottom:6px;
 transition:.2s;
}

/* CARD STYLE */

.cat-title{
 background:linear-gradient(145deg,#ffffff,#f1f5f9);
 border-radius:20px;
 box-shadow:0 8px 20px rgba(0,0,0,.08);
 transition:.25s;
}

.cat-title:active{
 transform:scale(.95);
}

/* ===== CATEGORY GRADIENT FIX (DESKTOP + MOBILE OK) ===== */

/* Амвол */
.cat-title:nth-child(1) .material-icons{
 background:linear-gradient(45deg,#00c853,#69f0ae);
 -webkit-background-clip:text;
 background-clip:text;
 -webkit-text-fill-color:transparent;
 color:transparent;
}

/* Транспорт */
.cat-title:nth-child(2) .material-icons{
 background:linear-gradient(45deg,#2979ff,#00e5ff);
 -webkit-background-clip:text;
 background-clip:text;
 -webkit-text-fill-color:transparent;
 color:transparent;
}

/* Электроника */
.cat-title:nth-child(3) .material-icons{
 background:linear-gradient(45deg,#ff9100,#ffd740);
 -webkit-background-clip:text;
 background-clip:text;
 -webkit-text-fill-color:transparent;
 color:transparent;
}

/* Кор ва хизмат */
.cat-title:nth-child(4) .material-icons{
 background:linear-gradient(45deg,#aa00ff,#e040fb);
 -webkit-background-clip:text;
 background-clip:text;
 -webkit-text-fill-color:transparent;
 color:transparent;
}

/* Хона ва рузгор */
.cat-title:nth-child(5) .material-icons{
 background:linear-gradient(45deg,#795548,#bcaaa4);
 -webkit-background-clip:text;
 background-clip:text;
 -webkit-text-fill-color:transparent;
 color:transparent;
}

/* Дигар */
.cat-title:nth-child(6) .material-icons{
 background:linear-gradient(45deg,#546e7a,#90a4ae);
 -webkit-background-clip:text;
 background-clip:text;
 -webkit-text-fill-color:transparent;
 color:transparent;
}


/* SUBCATEGORY ICON */

.subcats .material-icons{
 font-size:24px;
 margin-bottom:4px;
 color:#555;
}

.subcats .cat:active .material-icons{
 transform:scale(1.2);
}

/* ===== SUBCATEGORY PRO COLOR ICONS ===== */

.subcats .cat{
 background:#fff;
 border-radius:16px;
 box-shadow:0 4px 12px rgba(0,0,0,.06);
 padding:12px;
 transition:.2s;
}

.subcats .cat:active{
 transform:scale(.96);
}

/* ICON BASE */

.subcats .material-icons{
 font-size:24px;
 margin-bottom:4px;
 transition:.2s;
}

/* ===== REAL ESTATE ===== */

#amvol .material-icons{
 background:linear-gradient(45deg,#00c853,#69f0ae);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}

/* ===== TRANSPORT ===== */

#transport .material-icons{
 background:linear-gradient(45deg,#2979ff,#00e5ff);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}

/* ===== TECH ===== */

#tech .material-icons{
 background:linear-gradient(45deg,#ff9100,#ffd740);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}

/* ===== JOB ===== */

#job .material-icons{
 background:linear-gradient(45deg,#aa00ff,#e040fb);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}

/* ===== HOME ===== */

#home .material-icons{
 background:linear-gradient(45deg,#795548,#bcaaa4);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}

/* ===== OTHER ===== */

#other .material-icons{
 background:linear-gradient(45deg,#546e7a,#90a4ae);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}

#topBannerBox img{
 width:100%;
 border-radius:16px;
}

.banner-slider{
 width:100%;
 overflow:hidden;
 border-radius:18px;
 margin:10px;
 box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.slides{
 display:flex;
 transition:transform .5s ease;
}

.slide{
 min-width:100%;
}

.slide img{
 width:100%;
 aspect-ratio: 1200 / 550;
 object-fit:contain;
}

.banner-slide{
 min-width:92%;
 border-radius:18px;
 overflow:hidden;
 scroll-snap-align:center;
 box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.banner-slide img{
 width:100%;
 height:180px;
 object-fit:cover;
}

.logo{
  height:40px;
  width:auto;
}

.online-box{
  font-size:13px;
  padding:0;
}

.top-header{
  height:56px;
  padding:6px 10px;
}

.icon{
 width:18px;
 height:18px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 margin-right:4px;
}

.icon svg{
 width:100%;
 height:100%;
}

.icon-money svg{ fill:#16a34a; }     /* сабз */
.icon-location svg{ fill:#6b7280; }  /* графит */
.icon-like svg{ fill:#ff4757; }      /* сурх */