/* =========================================================
   CSSBORKA.UZ — yangi bo'limlar uchun umumiy dizayn
   (qidiruv, FAQ, reyting, izohlar, video, o'xshash materiallar, saralash)
   Tungi rejim — standart, kunduzgi — html.light-mode
   ========================================================= */
.x-scope,.x-block{
    --x-card:rgba(15,20,31,.82);
    --x-card2:rgba(255,255,255,.05);
    --x-line:rgba(255,255,255,.1);
    --x-text:#ffffff;
    --x-muted:#a6b2c2;
    --x-accent:#ff9a39;
    --x-accent-strong:#ff6a00;
    --x-input:rgba(4,8,14,.7);
    --x-shadow:0 18px 50px rgba(0,0,0,.35);
}
html.light-mode .x-scope,html.light-mode .x-block{
    --x-card:#ffffff;
    --x-card2:#f6f8fb;
    --x-line:rgba(15,23,42,.1);
    --x-text:#0f172a;
    --x-muted:#526071;
    --x-accent:#c2410c;
    --x-accent-strong:#ea580c;
    --x-input:#ffffff;
    --x-shadow:0 14px 40px rgba(15,23,42,.08);
}

/* ---------- Sahifa qobig'i ---------- */
.x-page{width:min(1320px,94%);margin:30px auto 60px;color:var(--x-text);font-family:Arial,sans-serif;}
.x-page *{box-sizing:border-box;}
.x-page a{color:inherit;text-decoration:none;}
.x-head{position:relative;overflow:hidden;padding:34px;border-radius:28px;border:1px solid var(--x-line);background:radial-gradient(circle at 85% 10%,rgba(255,106,0,.2),transparent 40%),var(--x-card);box-shadow:var(--x-shadow);margin-bottom:20px;}
.x-head h1{margin:0 0 10px;font-size:clamp(28px,4vw,42px);line-height:1.15;font-weight:900;color:var(--x-text);}
.x-head h1 span{color:var(--x-accent-strong);}
.x-head p{margin:0;color:var(--x-muted);font-size:15px;line-height:1.75;max-width:820px;}
.x-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;font-weight:700;color:var(--x-muted);margin-bottom:14px;}
.x-crumbs a{color:var(--x-accent)!important;}

/* ---------- Qidiruv maydoni ---------- */
.x-search{display:flex;gap:10px;margin-top:20px;}
.x-search input{flex:1;min-width:0;height:54px;padding:0 18px;border-radius:16px;border:1px solid var(--x-line);background:var(--x-input);color:var(--x-text);font-size:16px;font-weight:700;outline:0;}
.x-search input::placeholder{color:var(--x-muted);opacity:1;}
.x-search input:focus{border-color:#ff6a00;box-shadow:0 0 0 4px rgba(255,106,0,.15);}
.x-search button{height:54px;padding:0 26px;border:0;border-radius:16px;background:linear-gradient(135deg,#f45d00,#e03a00);color:#fff;font-weight:900;font-size:15px;cursor:pointer;}

/* ---------- Chiplar (filtr / saralash) ---------- */
.x-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;}
.x-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:14px;border:1px solid var(--x-line);background:var(--x-card);color:var(--x-text)!important;font-size:14px;font-weight:800;transition:.2s;}
.x-chip small{font-size:12px;color:var(--x-muted);font-weight:800;}
.x-chip:hover{border-color:rgba(255,106,0,.5);}
.x-chip.active{background:linear-gradient(135deg,#f45d00,#e03a00);border-color:transparent;color:#fff!important;}
.x-chip.active small{color:rgba(255,255,255,.85);}
.x-sort{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;}
.x-sort b{font-size:13px;color:var(--x-muted);margin-right:4px;}
.x-sort a{padding:7px 12px;border-radius:12px;border:1px solid var(--x-line);background:var(--x-card);font-size:13px;font-weight:800;color:var(--x-text)!important;}
.x-sort a.active{border-color:#ff6a00;color:var(--x-accent)!important;box-shadow:inset 0 0 0 1px #ff6a00;}

/* ---------- Kartalar ---------- */
.x-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;}
.x-card{display:flex;flex-direction:column;overflow:hidden;border-radius:22px;border:1px solid var(--x-line);background:var(--x-card);box-shadow:var(--x-shadow);transition:.22s;}
.x-card:hover{transform:translateY(-4px);border-color:rgba(255,106,0,.45);}
.x-card-img{position:relative;aspect-ratio:16/10;background:#0b0f16;overflow:hidden;}
.x-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.x-type{position:absolute;top:10px;left:10px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:900;letter-spacing:.3px;text-transform:uppercase;}
.x-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.x-card-body h3{margin:0;font-size:17px;line-height:1.35;font-weight:900;color:var(--x-text);overflow-wrap:anywhere;}
.x-card-body p{margin:0;font-size:14px;line-height:1.6;color:var(--x-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.x-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px;font-size:13px;font-weight:800;color:var(--x-muted);}
.x-meta .x-star{color:#b45309;}
html:not(.light-mode) .x-meta .x-star{color:#fbbf24;}
.x-empty{padding:40px 24px;text-align:center;border-radius:22px;border:1px dashed var(--x-line);background:var(--x-card);color:var(--x-muted);font-weight:800;line-height:1.7;}
.x-empty b{display:block;color:var(--x-text);font-size:18px;margin-bottom:6px;}
.x-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px 0 0;}
.x-pages a,.x-pages span{min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:12px;border:1px solid var(--x-line);background:var(--x-card);font-weight:900;color:var(--x-text);}
.x-pages .active{background:linear-gradient(135deg,#f45d00,#e03a00);color:#fff;border-color:transparent;}

/* ---------- Material sahifasi qo'shimcha bloklari ---------- */
.x-block{margin-top:22px;padding:22px;border-radius:24px;border:1px solid var(--x-line);background:var(--x-card);box-shadow:var(--x-shadow);color:var(--x-text);font-family:Arial,sans-serif;}
.x-block *{box-sizing:border-box;}
.x-block h2{margin:0 0 14px;font-size:22px;font-weight:900;color:var(--x-accent-strong);}
html.light-mode .x-block h2{color:#c2410c;}
.x-block p{color:var(--x-muted);line-height:1.7;}

/* Reyting */
.x-rating{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;}
.x-stars{display:inline-flex;gap:4px;}
.x-stars button{width:44px;height:44px;border:0;background:transparent;padding:0;cursor:pointer;color:#475569;transition:transform .15s;}
html.light-mode .x-stars button{color:#cbd5e1;}
.x-stars button svg{width:100%;height:100%;fill:currentColor;display:block;}
.x-stars button.on{color:#fbbf24;}
html.light-mode .x-stars button.on{color:#f59e0b;}
.x-stars button:hover{transform:scale(1.12);}
.x-stars[aria-disabled="true"] button{cursor:default;}
.x-stars[aria-disabled="true"] button:hover{transform:none;}
.x-rating-num{font-size:30px;font-weight:900;color:var(--x-text);line-height:1;}
.x-rating-num small{display:block;margin-top:6px;font-size:13px;font-weight:800;color:var(--x-muted);}
.x-rating-msg{font-size:14px;font-weight:800;color:var(--x-muted);min-height:20px;}
.x-rating-msg.ok{color:#059669;}
html:not(.light-mode) .x-rating-msg.ok{color:#34d399;}

/* Video */
.x-video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;}
.x-video iframe,.x-video button{position:absolute;inset:0;width:100%;height:100%;border:0;}
.x-video button{cursor:pointer;background:#000 center/cover no-repeat;}
.x-video button:after{content:"";position:absolute;left:50%;top:50%;width:74px;height:52px;transform:translate(-50%,-50%);border-radius:14px;background:#e11d1d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center/30px no-repeat;box-shadow:0 10px 30px rgba(0,0,0,.4);}

/* Ro'yxatlar (talablar, o'rnatish) */
.x-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px;}
.x-steps li{position:relative;padding:14px 14px 14px 56px;border-radius:16px;background:var(--x-card2);border:1px solid var(--x-line);color:var(--x-text);line-height:1.6;font-size:15px;counter-increment:s;overflow-wrap:anywhere;}
.x-steps li:before{content:counter(s);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f45d00,#e03a00);color:#fff;font-weight:900;font-size:14px;}
.x-req{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0;padding:0;list-style:none;}
.x-req li{padding:12px 14px;border-radius:14px;background:var(--x-card2);border:1px solid var(--x-line);color:var(--x-text);font-weight:700;line-height:1.5;overflow-wrap:anywhere;}
.x-safe{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.35);color:var(--x-text);font-weight:800;line-height:1.5;}
.x-safe a{margin-left:auto;padding:9px 14px;border-radius:12px;background:#047857;color:#fff!important;font-weight:900;white-space:nowrap;}

/* O'xshash materiallar */
.x-similar{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.x-similar a{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--x-line);background:var(--x-card2);transition:.2s;}
.x-similar a:hover{border-color:rgba(255,106,0,.5);transform:translateY(-3px);}
.x-similar img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#0b0f16;}
.x-similar b{display:block;padding:10px 12px 4px;font-size:14px;line-height:1.35;color:var(--x-text);overflow-wrap:anywhere;}
.x-similar span{display:block;padding:0 12px 12px;font-size:12px;font-weight:800;color:var(--x-muted);}

/* Izohlar */
.x-comments{display:grid;gap:12px;margin-bottom:18px;}
.x-comment{padding:14px 16px;border-radius:16px;background:var(--x-card2);border:1px solid var(--x-line);}
.x-comment-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-bottom:6px;}
.x-comment-head b{color:var(--x-text);font-size:15px;}
.x-comment-head span{color:var(--x-muted);font-size:12px;font-weight:700;}
.x-comment p{margin:0;color:var(--x-text);opacity:.9;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere;}
.x-form{display:grid;gap:10px;}
.x-form input,.x-form textarea{width:100%;padding:13px 15px;border-radius:14px;border:1px solid var(--x-line);background:var(--x-input);color:var(--x-text);font-size:16px;font-family:inherit;outline:0;}
.x-form input::placeholder,.x-form textarea::placeholder{color:var(--x-muted);opacity:1;}
.x-form textarea{min-height:110px;resize:vertical;}
.x-form input:focus,.x-form textarea:focus{border-color:#ff6a00;}
.x-form button{justify-self:start;height:48px;padding:0 24px;border:0;border-radius:14px;background:linear-gradient(135deg,#f45d00,#e03a00);color:#fff;font-weight:900;font-size:15px;cursor:pointer;}
.x-form button:disabled{opacity:.6;cursor:wait;}
.x-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.x-note{font-size:13px;color:var(--x-muted);font-weight:700;}
.x-alert{padding:12px 14px;border-radius:14px;font-weight:800;line-height:1.5;}
.x-alert.ok{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.4);color:#047857;}
html:not(.light-mode) .x-alert.ok{color:#6ee7b7;}
.x-alert.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.4);color:#b91c1c;}
html:not(.light-mode) .x-alert.err{color:#fca5a5;}

/* FAQ */
.x-faq{display:grid;gap:12px;}
.x-faq details{border-radius:18px;border:1px solid var(--x-line);background:var(--x-card);box-shadow:var(--x-shadow);overflow:hidden;}
.x-faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 20px;position:relative;font-size:17px;font-weight:900;line-height:1.4;color:var(--x-text);}
.x-faq summary::-webkit-details-marker{display:none;}
.x-faq summary:after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,106,0,.14);color:var(--x-accent);font-size:20px;font-weight:900;}
.x-faq details[open] summary:after{content:"−";}
.x-faq .x-ans{padding:0 20px 20px;color:var(--x-muted);font-size:15px;line-height:1.75;}
.x-faq .x-ans ol,.x-faq .x-ans ul{margin:8px 0;padding-left:22px;}
.x-faq .x-ans code{padding:2px 6px;border-radius:6px;background:var(--x-card2);border:1px solid var(--x-line);color:var(--x-text);font-size:14px;}
.x-faq .x-ans a{color:var(--x-accent)!important;font-weight:800;text-decoration:underline!important;}

@media(max-width:700px){
    .x-page{margin-top:18px;}
    .x-head{padding:22px;border-radius:22px;}
    .x-search{flex-direction:column;}
    .x-search input{flex:0 0 auto;width:100%;height:52px;}
    .x-search button{width:100%;}
    .x-grid{grid-template-columns:1fr;gap:16px;}
    .x-block{padding:18px;border-radius:20px;}
    .x-block h2{font-size:20px;}
    .x-stars button{width:40px;height:40px;}
    .x-safe a{margin-left:0;width:100%;text-align:center;}
    .x-similar{grid-template-columns:1fr 1fr;gap:10px;}
    .x-faq summary{font-size:16px;padding:16px 50px 16px 16px;}
    .x-faq .x-ans{padding:0 16px 16px;}
    .x-form button{width:100%;}
}
@media(max-width:360px){.x-similar{grid-template-columns:1fr;}}

/* ---------- Sevimlilar / solishtirish tugmalari ---------- */
.cs-card-acts{position:absolute;top:10px;right:10px;z-index:9;display:flex;gap:6px;}
.cs-card-acts button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.62);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.15s;padding:0;}
.cs-card-acts button:hover{transform:scale(1.08);}
.cs-card-acts .cs-fav-btn.on{background:#e11d48;border-color:#e11d48;}
.cs-card-acts .cs-cmp-btn.on{background:#2563eb;border-color:#2563eb;}
.cs-item-acts{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px;}
.cs-item-acts button{flex:1 1 180px;min-height:46px;padding:0 16px;border-radius:14px;border:1px solid rgba(255,106,0,.35);background:rgba(255,255,255,.06);color:#fff;font-weight:900;font-size:15px;cursor:pointer;}
html.light-mode .cs-item-acts button{background:#fff;color:#111827;border-color:rgba(255,106,0,.35);}
.cs-item-acts .cs-fav-btn.on{background:#e11d48;border-color:#e11d48;color:#fff;}
.cs-item-acts .cs-cmp-btn.on{background:#2563eb;border-color:#2563eb;color:#fff;}
.cs-cmp-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:99990;display:flex;align-items:center;gap:6px;padding:6px;border-radius:16px;background:#2563eb;box-shadow:0 14px 40px rgba(0,0,0,.35);}
.cs-cmp-bar a{padding:10px 16px;color:#fff!important;font-weight:900;font-size:15px;text-decoration:none!important;white-space:nowrap;}
.cs-cmp-bar button{width:36px;height:36px;border:0;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;font-size:20px;cursor:pointer;}
.cs-toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);z-index:99991;padding:12px 18px;border-radius:12px;background:#111827;color:#fff;font-weight:800;font-size:14px;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;text-align:center;}
.cs-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.x-rank{position:absolute;left:10px;bottom:10px;z-index:3;min-width:40px;height:40px;padding:0 8px;border-radius:12px;background:linear-gradient(135deg,#f45d00,#e03a00);color:#fff;font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.35);}
.x-note-match{color:#059669!important;font-weight:800;font-size:13px!important;}
html:not(.light-mode) .x-note-match{color:#34d399!important;}
.item-card .item-slider-count{top:54px!important;}
.item-card>.cs-card-acts{top:12px;right:12px;}

/* ===== Telefon: bosish maydonlari va matn o'lchami ===== */
@media(max-width:760px){
  .breadcrumb a,.x-crumbs a{display:inline-block;padding:9px 4px}
  .x-sort a,.x-quick a,.cs-quick a{min-height:38px;display:inline-flex;align-items:center}
  .card-title-link{display:inline-block;padding:6px 0}
  .x-type,.slot-cat,.slot-feat,.rl-ribbon{font-size:12px!important}
}
.card-title-link{color:inherit;text-decoration:none}

/* Ekrandan tashqaridagi kartalar brauzer tomonidan keyin chiziladi (telefonda birinchi yuklash tezroq) */
.item-card,.build-card{content-visibility:auto;contain-intrinsic-size:auto 620px}
.popular-card{content-visibility:auto;contain-intrinsic-size:auto 230px}

/* Orqa fondagi bezak rasmlari: telefonda faqat bittasi (LCP va trafik tejaladi) */
@media(max-width:760px){.cs-bg img:nth-child(n+2){display:none}}