/* পীরগঞ্জ আইটি শপ */ /* ফন্ট (Hind Siliguri) এখন প্রতিটা পেজের -এ দিয়ে লোড হয় — CSS @import পেজ-স্পিডের জন্য ক্ষতিকর ছিল (ব্রাউজার আগে থেকে ফন্ট ডাউনলোড শুরু করতে পারত না) */ :root{ --teal:#0E6B5C; --teal2:#0a574b; --green:#1B8A5A; --gold:#B8860B; --bg:#F6F8F7; --card:#fff; --ink:#1C2B27; --muted:#67796F; --line:#E4EBE7; } *{box-sizing:border-box} body{margin:0;font-family:'Hind Siliguri',system-ui,sans-serif;background:var(--bg);color:var(--ink)} a{color:inherit;text-decoration:none} img{max-width:100%} /* টপবার */ /* ==== টপবার — একটাই পরিষ্কার সংস্করণ (আগের ছড়ানো-ছিটানো নিয়মগুলো একত্র করা হলো) ==== মোবাইলে: ১ম সারিতে লোগো (বামে) + ফোন/অ্যাকাউন্ট/কার্ট (ডানে, কাছাকাছি), ২য় সারিতে পুরো প্রস্থে সার্চ। ডেস্কটপে (≥760px): সব এক সারিতে। */ .top{position:sticky;top:0;z-index:50;background:var(--teal);color:#fff; box-shadow:0 2px 14px rgba(0,0,0,.16)} .top .in{max-width:1100px;margin:0 auto;padding:9px 16px 9px 14px; display:flex;align-items:center;gap:8px;row-gap:9px;flex-wrap:wrap} .logo{display:flex;align-items:center;flex-shrink:0} .logo img{height:38px;width:auto;display:block} .srch{order:3;flex:1 1 100%;min-width:0;display:flex;background:#fff; border-radius:13px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.13)} .srch input{flex:1;min-width:0;border:none;outline:none;font-family:inherit; font-size:14px;padding:11px 15px} .srch input::placeholder{color:#9AAAA4} .srch button{border:none;background:var(--green);color:#fff;font-size:14.5px; font-weight:800;letter-spacing:.3px;padding:0 20px;cursor:pointer} .call{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;gap:7px; padding:7px 15px;font-size:13.5px;font-weight:800;letter-spacing:.3px; border-radius:22px;white-space:nowrap;background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(2px); transition:background .18s} .call:active{background:rgba(255,255,255,.26)} .acctlink{flex-shrink:0;flex-grow:0;width:38px;min-width:38px;max-width:38px;height:38px;border-radius:50%;font-size:17px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32); display:flex;align-items:center;justify-content:center;text-decoration:none; color:#fff;position:relative} .acctlink:active{background:rgba(255,255,255,.26)} .acctlink.in{background:#fff;border-color:#fff} .acctlink.in .ai-init{color:var(--teal);font-weight:800;font-size:15px} .acctlink.in .ai-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px; border-radius:50%;background:#3BC96A;border:2px solid var(--teal)} .cartlink{flex-shrink:0;flex-grow:0;position:relative;width:38px;min-width:38px;max-width:38px;height:38px;font-size:17px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32); border-radius:50%;display:flex;align-items:center;justify-content:center} .cartlink:active{background:rgba(255,255,255,.26)} .cart-badge{position:absolute;top:-4px;right:-4px;background:#E8590C;color:#fff; font-size:10px;font-weight:800;border-radius:10px;min-width:17px;height:17px; display:inline-flex;align-items:center;justify-content:center;padding:0 4px; box-shadow:0 1px 4px rgba(0,0,0,.3)} @media(min-width:760px){ .top .in{padding:11px 16px} .srch{order:0;flex:1 1 auto;min-width:260px} .call{margin-left:0} .logo img{height:44px} } /* ক্যাটাগরি চিপ */ .cats{max-width:1100px;margin:0 auto;padding:10px 14px 2px;display:flex;gap:8px;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none} .cats::-webkit-scrollbar{display:none} .chip{flex-shrink:0;background:var(--card);border:1px solid var(--line);border-radius:18px; padding:7px 15px;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap} .chip.on{background:var(--teal);border-color:var(--teal);color:#fff} /* হিরো */ .hero{max-width:1100px;margin:12px auto 0;padding:0 14px} .hero .box{background:linear-gradient(120deg,var(--teal),#12876f);color:#fff;border-radius:18px; padding:22px 20px;position:relative;overflow:hidden} .hero h1{margin:0;font-size:21px;font-weight:800;line-height:1.4} .hero p{margin:7px 0 0;font-size:13.5px;opacity:.92;line-height:1.7} /* গ্রিড */ .wrap{max-width:1100px;margin:0 auto;padding:14px} .sect{font-size:15px;font-weight:800;color:var(--teal);margin:6px 2px 10px} .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px} @media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:960px){.grid{grid-template-columns:repeat(4,1fr)}} .pc{background:var(--card);border:1px solid var(--line);border-radius:15px;overflow:hidden; display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s} .pc:hover{box-shadow:0 8px 22px rgba(14,107,92,.13);transform:translateY(-2px)} .pc .ph{aspect-ratio:1/1;background:#F0F5F2;display:flex;align-items:center;justify-content:center;position:relative} .pc .ph img{width:100%;height:100%;object-fit:cover} .pc .ph .noimg{font-size:38px;opacity:.35} .badge{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:800;border-radius:10px;padding:3px 9px} .badge.in{background:#DFF3E9;color:var(--green)} .badge.out{background:#FBEBE9;color:#C94336} .badge.low{background:#FFF0D6;color:#96660A;animation:pulse 1.6s ease-in-out infinite} .wlbtn{position:absolute;top:6px;right:6px;width:30px;height:30px;border:none;border-radius:50%; background:rgba(255,255,255,.92);font-size:15px;display:flex;align-items:center;justify-content:center; cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.15);padding:0;transition:transform .15s} .wlbtn:active{transform:scale(.85)} .wlbtn.on{animation:wlPop .3s ease-out} @keyframes wlPop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}} .wlbtn-main{background:#fff;border:1.5px solid var(--line);border-radius:20px; padding:7px 14px;font-family:inherit;font-size:12px;font-weight:800;color:#C94336;cursor:pointer; white-space:nowrap} .wlbtn-main.on{background:#FBEBE9;border-color:#F0C4BF} .pc .bd{padding:10px 11px 12px;display:flex;flex-direction:column;gap:4px;flex:1} .pc .nm{font-size:13px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;min-height:2.8em} .pc .mt{font-size:11px;color:var(--muted)} .pc .pr{margin-top:auto;font-size:16px;font-weight:800;color:var(--teal)} .pc .wr{font-size:10.5px;color:var(--gold);font-weight:700} /* পেজিনেশন */ .pager{display:flex;justify-content:center;gap:8px;margin:18px 0 6px} .pager a{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:9px 18px; font-weight:700;font-size:13.5px;color:var(--teal)} /* প্রোডাক্ট পেজ */ .pd{max-width:1100px;margin:14px auto;padding:0 14px;display:grid;gap:16px} @media(min-width:860px){.pd{grid-template-columns:1fr 1.1fr}} .pd .photo{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden; aspect-ratio:1/1;display:flex;align-items:center;justify-content:center} .pd .photo img{width:100%;height:100%;object-fit:contain} /* ⭐ রিভিউ সেকশন — .pd-এর ৩য় গ্রিড-আইটেম। মোবাইলে (single-column grid) স্বাভাবিক ক্রমেই নিচে বসবে (আগের মতোই দেখতে)। ডেস্কটপে (২-কলাম গ্রিড) এটা স্বয়ংক্রিয়ভাবে ছবির নিচের ফাঁকা জায়গায়, বাঁ কলামে চলে যাবে — কারণ গ্রিড অটো-প্লেসমেন্ট প্রথম কলাম পূর্ণ করে। */ .pdreview{padding-top:4px} /* গ্রিড-এরিয়া দিয়ে চার-ঘরের বিন্যাস — মোবাইলে (grid-template-areas নেই) স্বাভাবিক DOM-ক্রমেই বসবে: ছবি → দাম/বাটন → বিবরণ → রিভিউ। ডেস্কটপে ২×২ বিন্যাস: ছবি | দাম-বাটন বিবরণ | রিভিউ */ @media(min-width:860px){ .pd{grid-template-areas:"photo pricebox" "desc reviews"} .pd .photo{grid-area:photo} .pddetails{grid-area:pricebox} .pddesc{grid-area:desc;align-self:start} .pdreview{grid-area:reviews;align-self:start} } .pd h1{margin:0;font-size:19px;font-weight:800;line-height:1.45} .pd .meta{font-size:12.5px;color:var(--muted);margin-top:5px} .pd .price{font-size:26px;font-weight:800;color:var(--teal);margin:12px 0 4px} .stockline{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800; border-radius:12px;padding:6px 13px;margin:4px 0 10px} .stockline.in{background:#DFF3E9;color:var(--green)} .stockline.out{background:#FBEBE9;color:#C94336} .wline{font-size:13px;color:var(--gold);font-weight:800;margin-bottom:10px} .cta{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0} .cta a{flex:1;min-width:150px;text-align:center;font-weight:800;font-size:14.5px;border-radius:13px; padding:13px 16px;transition:opacity .15s} .cta a:hover{opacity:.9} .cta .wa{background:#EAF7EF;color:#1B8A5A;border:1.5px solid #BFE6D2;font-size:13px;padding-top:9px;padding-bottom:9px} .cta .ph2{background:#F3F8F6;color:var(--teal);border:1.5px solid var(--line);font-size:13px;padding-top:9px;padding-bottom:9px} .desc{background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px 16px; font-size:13.5px;line-height:1.9;color:#2A3B35;margin-top:6px} .desc h3{margin:0 0 6px;font-size:14px;color:var(--teal)} .trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px} .trust div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 8px; text-align:center;font-size:11px;font-weight:700;color:var(--muted);line-height:1.6} .trust b{display:block;font-size:16px} /* ফুটার */ footer{background:var(--teal2);color:#fff;margin-top:26px} footer .in{max-width:1100px;margin:0 auto;padding:30px 18px 8px;font-size:13px;line-height:1.7} footer a{color:#BFE8DA;font-weight:700;text-decoration:none} .empty{padding:50px 14px;text-align:center;color:var(--muted);font-size:14px} /* ব্রেডক্রাম্ব */ .crumbs{font-size:12px;color:var(--muted);margin-bottom:8px} .crumbs a{color:var(--teal);font-weight:700} .crumbs span{color:var(--muted)} /* Star Tech-স্টাইল তথ্য-টেবিল */ .infobox{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:12px 0} .infobox div{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:9px 14px;border-bottom:1px solid #F0F5F2;font-size:13px} .infobox div:last-child{border-bottom:none} .infobox span{color:var(--muted);flex-shrink:0} .infobox b{text-align:right} .infobox .pbig{font-size:22px;color:var(--teal)} /* SEO টেক্সট */ .seotext{background:#fff;border:1px solid var(--line);border-radius:15px; padding:16px 18px;margin-top:18px} .seotext h2{margin:0 0 8px;font-size:15px;color:var(--teal)} .seotext p{margin:0 0 10px;font-size:12.5px;line-height:1.95;color:#3A4B44} .seotext a{color:var(--teal);font-weight:700} /* ==== হোমপেজ v4 (Star Tech-স্টাইল) ==== */ .hgrid{display:grid;gap:12px} @media(min-width:860px){.hgrid{grid-template-columns:2fr 1fr}} .hero .box{padding:26px 22px} .htag{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35); border-radius:14px;padding:4px 12px;font-size:11.5px;font-weight:800;margin-bottom:10px} .hero h1{font-size:23px} .hbtns{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap} .hbtns a{background:#fff;color:var(--teal);font-weight:800;font-size:13.5px; border-radius:12px;padding:11px 18px} .hbtns a.alt{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4)} .side{display:grid;gap:10px} .mini{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px} .mini b{display:block;font-size:13.5px;color:var(--teal);margin-bottom:3px} .mini span{font-size:11.5px;color:var(--muted);line-height:1.7} /* ক্যাটাগরি টাইল */ .catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media(min-width:640px){.catgrid{grid-template-columns:repeat(4,1fr)}} @media(min-width:960px){.catgrid{grid-template-columns:repeat(6,1fr)}} .cattile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 8px; display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center; transition:box-shadow .15s,transform .15s} .cattile:hover{box-shadow:0 6px 18px rgba(14,107,92,.13);transform:translateY(-2px);border-color:#BFDCD2} .cattile .ic{font-size:26px} .cattile .nm{font-size:12px;font-weight:800;line-height:1.3} .cattile .ct{font-size:10.5px;color:var(--muted)} /* ব্র্যান্ড স্ট্রিপ */ .brands{display:flex;flex-wrap:wrap;gap:8px} .brands a{background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px 15px; font-size:12.5px;font-weight:800;color:var(--teal)} .brands a:hover{border-color:var(--teal)} .brands span{color:var(--muted);font-weight:400} /* ফুটার v6 — আইকন-সারি, পিল-চিপ ক্যাটাগরি, পরিষ্কার বিভাগ */ .fgrid{display:grid;gap:28px} @media(min-width:760px){.fgrid{grid-template-columns:1.3fr 1fr 1fr;gap:32px}} footer .ft{font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase; color:#9DD9C2;display:block;margin-bottom:14px;position:relative;padding-bottom:9px} footer .ft::after{content:'';position:absolute;left:0;bottom:0;width:30px;height:2px; background:#3BC96A;border-radius:2px} footer .fshop{font-size:19px;font-weight:800;color:#fff;letter-spacing:.2px;margin-bottom:14px;display:block} .frows{display:flex;flex-direction:column;gap:11px} .frow{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.6;color:#D9EDE4} .frow i{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center;font-size:12.5px;font-style:normal; margin-top:1px} .frow a{color:#fff;font-weight:700} .frow a:hover{color:#3BC96A} .fchips{display:flex;flex-wrap:wrap;gap:8px} .fchips a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); border-radius:16px;padding:7px 14px;font-size:12px;font-weight:700;color:#D9EDE4; transition:all .15s} .fchips a:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)} .fperks{display:flex;flex-direction:column;gap:11px} .fperk{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#D9EDE4} .fperk i{flex-shrink:0;font-size:15px;font-style:normal} .fbar{border-top:1px solid rgba(255,255,255,.14);margin-top:28px;text-align:center; font-size:11px;line-height:1.9;color:#9BC4B7;padding:16px 18px 20px} .fbar b{color:#D9EDE4} .fbar .fnav{display:flex;justify-content:center;gap:9px;margin-bottom:14px;flex-wrap:wrap} .fbar .fnav a{display:inline-flex;align-items:center;gap:6px;color:#D9EDE4;font-weight:800;font-size:12px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); border-radius:20px;padding:8px 15px;text-decoration:none;transition:background .15s} .fbar .fnav a:active{background:rgba(255,255,255,.18)} .fbar .fnav a i{font-style:normal;font-size:14px} /* ==== প্রাণবন্ত v5 ==== */ /* চলমান হাইলাইট টিকার */ .ticker{background:#0a574b;color:#DFF3E9;overflow:hidden;white-space:nowrap;position:relative; box-shadow:inset 0 3px 6px -3px rgba(0,0,0,.25)} .ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:34px;z-index:2;pointer-events:none} .ticker::before{left:0;background:linear-gradient(90deg,#0a574b,transparent)} .ticker::after{right:0;background:linear-gradient(270deg,#0a574b,transparent)} .tk{display:inline-flex;gap:38px;padding:8px 0;font-size:12px;font-weight:700; animation:tkmove 22s linear infinite} .tk span{flex-shrink:0} @keyframes tkmove{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* পরিসংখ্যান কাউন্টার */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .stats div{background:linear-gradient(135deg,#fff,#F0F7F4);border:1px solid var(--line); border-radius:14px;padding:14px 6px;text-align:center} .stats b{display:block;font-size:21px;color:var(--teal)} .stats span{font-size:11px;color:var(--muted);font-weight:700} /* হিরোতে প্রাণ: ভাসমান আলোকবৃত্ত */ .hero .box{position:relative;overflow:hidden} .hero .box::before,.hero .box::after{content:'';position:absolute;border-radius:50%; background:rgba(255,255,255,.09);animation:float 7s ease-in-out infinite} .hero .box::before{width:190px;height:190px;right:-55px;top:-55px} .hero .box::after{width:120px;height:120px;right:70px;bottom:-45px;animation-delay:2.5s} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .hbtns a{transition:transform .15s,box-shadow .15s} .hbtns a:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.2)} /* রঙিন ক্যাটাগরি টাইল — আইকন রঙিন বুদবুদে, পালাক্রমে রং */ .cattile .ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center; justify-content:center;font-size:25px;margin-bottom:3px; transition:transform .18s;overflow:hidden} .cattile .ic img{width:100%;height:100%;object-fit:cover;border-radius:16px} .cattile:hover .ic{transform:scale(1.12) rotate(-4deg)} .catgrid a:nth-child(6n+1) .ic{background:#E7F5EE;color:#1B8A5A} .catgrid a:nth-child(6n+2) .ic{background:#FFF3E0;color:#C9820A} .catgrid a:nth-child(6n+3) .ic{background:#E8F0FB;color:#3B6FB5} .catgrid a:nth-child(6n+4) .ic{background:#FDEBEC;color:#C94336} .catgrid a:nth-child(6n+5) .ic{background:#F3E9FB;color:#7B4FA6} .catgrid a:nth-child(6n+6) .ic{background:#FFF9E0;color:#B8860B} /* বিশ্বাস-কার্ডে রঙিন বাঁ-বর্ডার */ .mini{border-left:4px solid var(--green)} .side .mini:nth-child(2){border-left-color:#3B6FB5} .side .mini:nth-child(3){border-left-color:var(--gold)} /* সেকশন হেডারে গ্রেডিয়েন্ট আন্ডারলাইন */ .sect{position:relative;padding-bottom:7px} .sect::after{content:'';position:absolute;left:2px;bottom:0;width:52px;height:3.5px; border-radius:3px;background:linear-gradient(90deg,var(--green),#7FD4AE)} /* কার্ড ও টাইল ভেসে ওঠা */ .pc,.cattile,.stats div,.mini{animation:fadeup .5s ease both} @keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .grid .pc:nth-child(2){animation-delay:.05s}.grid .pc:nth-child(3){animation-delay:.1s} .grid .pc:nth-child(4){animation-delay:.15s} .catgrid a:nth-child(2){animation-delay:.04s}.catgrid a:nth-child(3){animation-delay:.08s} .catgrid a:nth-child(4){animation-delay:.12s}.catgrid a:nth-child(5){animation-delay:.16s} .catgrid a:nth-child(6){animation-delay:.2s} /* স্টক ব্যাজে মৃদু পালস */ .badge.in{animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(27,138,90,.35)}50%{box-shadow:0 0 0 6px rgba(27,138,90,0)}} /* ==== v6: হিরো কমপ্যাক্ট (Star Tech-ধাঁচ) ==== */ .hero{margin-top:0} .hero .box{padding:16px 16px 15px} .htag{font-size:10.5px;padding:3px 10px;margin-bottom:7px} .hero h1{font-size:16.5px;line-height:1.5} .hero p{font-size:12px;margin-top:4px} .hbtns{margin-top:11px} .hbtns a{font-size:12.5px;padding:9px 15px;border-radius:10px} .hero .box::before{width:130px;height:130px;right:-40px;top:-40px} .hero .box::after{width:80px;height:80px;right:45px;bottom:-30px} /* বিশ্বাস-স্ট্রিপ: মোবাইলে এক সারিতে ৩টা ছোট চিপ */ .side{grid-template-columns:repeat(3,1fr);gap:8px} .mini{border-left:none;border-top:3px solid var(--green);padding:9px 6px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:3px} .side .mini:nth-child(2){border-top-color:#3B6FB5;border-left:none} .side .mini:nth-child(3){border-top-color:var(--gold);border-left:none} .mini i{font-style:normal;font-size:20px} .mini b{font-size:11px;line-height:1.45;margin:0} /* ডেস্কটপে হিরো একটু বড় ও পাশে স্ট্যাক */ @media(min-width:860px){ .hero .box{padding:24px 22px} .hero h1{font-size:21px} .hero p{font-size:13px} .side{grid-template-columns:1fr;gap:10px} .mini{flex-direction:row;text-align:left;padding:11px 14px;gap:10px} .mini i{font-size:22px} .mini b{font-size:13px} .mini br{display:none} } /* ==== v7: ক্যাটাগরি-ভিত্তিক বেস্ট-সেলার সেকশন ==== */ .secthead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .secthead .sect{margin:0} .soldtag{font-size:10px;font-weight:800;color:#fff;background:linear-gradient(90deg,#E8590C,#F59F00); border-radius:10px;padding:2px 9px;margin-left:6px;vertical-align:middle} .viewall{flex-shrink:0;background:#fff;border:1.5px solid var(--teal);color:var(--teal); font-size:12px;font-weight:800;border-radius:16px;padding:7px 14px; transition:background .15s,color .15s} .viewall:hover{background:var(--teal);color:#fff} .hot{position:absolute;top:8px;right:8px;font-size:9.5px;font-weight:800; background:linear-gradient(90deg,#E8590C,#F59F00);color:#fff;border-radius:9px;padding:3px 8px} /* ==== v11: অফার ব্যানার ==== */ .offers{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none} .offers::-webkit-scrollbar{display:none} .offer{flex:0 0 88%;scroll-snap-align:start;display:flex;align-items:center;gap:13px; background:linear-gradient(115deg,#FFF6E5,#FFEFD0);border:1.5px solid #F1D9A3; border-radius:15px;padding:13px 16px} @media(min-width:760px){.offer{flex-basis:48%}} .oic{font-size:30px;flex-shrink:0} .otx b{display:block;font-size:14px;color:#8a5a00} .otx small{font-size:11.5px;color:#a3803e;line-height:1.6} /* ==== v13: গুগল ম্যাপ ==== */ .mapbox{margin-top:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff} .mapbox iframe{display:block;width:100%;height:240px;border:none} .maplink{display:block;text-align:center;background:#F0F7F4;color:var(--teal); font-size:13px;font-weight:800;padding:11px} .maplink:hover{background:#E1EFE9} /* ==== v9 (cart): চেকআউট ==== */ .pc .pr{display:flex;align-items:center;gap:8px} .addbtn{border:none;background:var(--green);color:#fff;font-size:12.5px;font-weight:800; border-radius:9px;padding:6px 10px;cursor:pointer;flex-shrink:0} .addbtn:hover{opacity:.88} .pg-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:900; background:#1C2B27;color:#fff;font-size:13.5px;font-weight:700;border-radius:13px; padding:11px 18px;opacity:0;transition:all .25s;max-width:88vw;text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.3)} .pg-toast.show{opacity:1;transform:translate(-50%,0)} .qtybox{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--line); border-radius:12px;overflow:hidden;margin:6px 0} .qtybox .qm{width:42px;height:42px;border:none;background:#F0F5F2;font-size:19px; font-weight:800;color:var(--teal);cursor:pointer} .qtybox input{width:52px;height:42px;border:none;text-align:center;font-family:inherit; font-size:15px;font-weight:800;background:#fff} .buynow,.addcart{flex:1;min-width:150px;text-align:center;font-weight:800;font-size:14.5px; border-radius:13px;padding:13px 10px;border:none;cursor:pointer;font-family:inherit} .buynow{background:#E8590C;color:#fff} .addcart{background:var(--teal);color:#fff} .buynow:hover,.addcart:hover{opacity:.9} .cartlist{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden} .citem{display:flex;align-items:center;gap:11px;padding:11px 13px;border-bottom:1px solid var(--line)} .citem:last-child{border-bottom:none} .citem img{width:56px;height:56px;object-fit:cover;border-radius:9px;flex-shrink:0;background:#F0F5F2} .ci-info{flex:1;min-width:0} .ci-nm{font-size:13px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} .ci-pr{font-size:13.5px;font-weight:800;color:var(--teal);margin-top:2px} .ci-qty{display:flex;align-items:center;gap:8px;flex-shrink:0} .ci-qty button{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#F0F5F2; font-size:15px;font-weight:800;color:var(--teal);cursor:pointer} .ci-qty span{min-width:20px;text-align:center;font-weight:800;font-size:14px} .ci-del{border:none;background:none;font-size:16px;cursor:pointer;flex-shrink:0;opacity:.6} .ci-del:hover{opacity:1} .cartsum{display:flex;justify-content:space-between;align-items:center;background:#fff; border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:12px; font-size:15px;font-weight:700} .cartsum b{font-size:19px;color:var(--teal)} .checkoutbtn{display:block;width:100%;margin-top:12px;text-align:center;background:var(--green); color:#fff;font-family:inherit;font-size:15.5px;font-weight:800;border:none; border-radius:14px;padding:15px;cursor:pointer;text-decoration:none;box-sizing:border-box} .checkoutbtn:hover{opacity:.92} .ckerr{background:#FBEBE9;color:#C94336;border:1px solid #F0D0CB;border-radius:12px; padding:11px 15px;font-weight:700;font-size:13.5px;margin-bottom:12px} .ckfld{display:block;margin:12px 0;font-size:13px;font-weight:800;color:var(--muted)} .ckfld small{font-weight:600} .ckfld input,.ckfld textarea{display:block;width:100%;margin-top:5px;box-sizing:border-box; border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-family:inherit; font-size:14.5px;font-weight:600;color:var(--ink);background:#fff;outline:none} .ckfld input:focus,.ckfld textarea:focus{border-color:var(--teal)} .ordersummary{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 15px 10px;margin-bottom:8px} .sumhead{font-size:13px;font-weight:800;color:var(--teal);padding:9px 0 5px;border-bottom:1px dashed var(--line)} .sumrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13.5px; border-bottom:1px dashed var(--line)} .sumrow:last-child{border-bottom:none} .sumrow.total{font-size:15px;font-weight:800} .sumrow.total b{color:var(--teal);font-size:17px} /* ==== v10: OTP + bKash ==== */ .otpbtn{flex-shrink:0;border:none;background:var(--teal);color:#fff;font-family:inherit; font-size:13px;font-weight:800;border-radius:12px;padding:0 16px;cursor:pointer} .otpbtn:disabled{opacity:.6;cursor:default} .payopts{display:grid;gap:8px;margin-bottom:10px} .payopt{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--line); border-radius:13px;padding:12px 14px;cursor:pointer} .payopt:has(input:checked){border-color:var(--teal);background:#F0F7F4} .payopt input{accent-color:var(--teal);width:18px;height:18px;flex-shrink:0} .payopt b{display:block;font-size:14px} .payopt small{font-size:11.5px;color:var(--muted)} /* অপশনের লেখার অংশ প্রসারিত হবে, টাকার অঙ্ক সবসময় ডান কিনারায় সারিবদ্ধ থাকবে */ .payopt > span{flex:1;min-width:0} .delivamt{flex-shrink:0;margin-left:auto;min-width:62px;text-align:right; font-size:14px;font-weight:800;color:var(--teal)} /* পেমেন্ট অপশনের ডান পাশের ছোট ট্যাগ */ .paytag{flex-shrink:0;margin-left:auto;font-size:10px;font-weight:800;border-radius:8px; padding:4px 9px;background:#FFF3E0;color:#C9820A;white-space:nowrap} .paytag.ok{background:#E7F5EE;color:#1B8A5A} .bkashbox{background:#FDF2F6;border:1.5px solid #F2C7D8;border-radius:12px;padding:12px 14px;margin:-2px 0 2px} .bkline{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.7;margin:9px 0} .bknum{color:#D6236B;font-size:16px;letter-spacing:1px} .bkcopy{border:1px solid #E9A9C6;background:#fff;color:#D6236B;font-family:inherit;font-size:11.5px; font-weight:800;border-radius:9px;padding:3px 10px;cursor:pointer;margin-left:6px} #trxField:focus{border-color:#D6236B} /* ==== v11: ফ্লাই-টু-কার্ট + ব্যাজ pop ==== */ @keyframes pgpop{0%{transform:scale(1)}40%{transform:scale(1.7)}100%{transform:scale(1)}} .cart-badge.pop{animation:pgpop .45s cubic-bezier(.3,1.6,.5,1)} @keyframes pgshake{0%,100%{transform:rotate(0)}25%{transform:rotate(-11deg) scale(1.08)} 55%{transform:rotate(9deg) scale(1.06)}80%{transform:rotate(-4deg)}} .cartlink.shake{animation:pgshake .5s ease} /* ==== v13: স্পর্শের রিপল (বড় ও স্পষ্ট) ==== */ @keyframes pgrip{0%{transform:translate(-50%,-50%) scale(.15);opacity:.9} 100%{transform:translate(-50%,-50%) scale(3);opacity:0}} .pg-ripple{position:fixed;width:110px;height:110px;border-radius:50%;z-index:99998;pointer-events:none; background:radial-gradient(circle,rgba(27,138,90,.55) 0%,rgba(27,138,90,.28) 45%,transparent 68%); animation:pgrip .65s ease-out forwards} /* উড়ন্ত বল যেন কোনো কিছুর নিচে চাপা না পড়ে */ .pg-fly{will-change:transform,opacity} /* ব্যাজ pop আরও স্পষ্ট */ @keyframes pgpop2{0%{transform:scale(1)}35%{transform:scale(2.1)}70%{transform:scale(.85)}100%{transform:scale(1)}} .cart-badge.pop{animation:pgpop2 .6s cubic-bezier(.3,1.6,.5,1)} /* ==== v15: কার্টে পণ্যের ছবি ও ক্লিকযোগ্য নাম ==== */ .ci-thumb{flex-shrink:0;display:block;width:60px;height:60px;border-radius:10px;overflow:hidden; background:#F0F5F2;border:1px solid var(--line)} .ci-thumb img{width:100%;height:100%;object-fit:cover;display:block} .ci-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;opacity:.45} a.ci-nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; color:var(--ink);text-decoration:none} a.ci-nm:active{color:var(--teal)} .ci-thumb:active{opacity:.75} /* ==== v16: প্রোডাক্ট ভিউ গোছানো ==== */ .pdhead{max-width:1100px;margin:14px auto 0;padding:0 14px} .pdhead .crumbs{margin-bottom:6px} .pdhead h1{margin:0;font-size:19px;font-weight:800;line-height:1.45} .pd{margin-top:10px;gap:14px} /* ছবি ছোট ও ঝকঝকে — আর পুরো স্ক্রিন দখল করবে না */ .pd .photo{aspect-ratio:auto;height:230px;padding:12px;box-sizing:border-box} @media(min-width:520px){.pd .photo{height:300px}} @media(min-width:860px){.pd .photo{height:400px}} /* দাম + স্টক এক লাইনে */ .pricebar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px} .pricebar .pbig{font-size:27px;font-weight:800;color:var(--teal);line-height:1.1} .stockpill{font-size:12px;font-weight:800;border-radius:20px;padding:5px 12px;white-space:nowrap} .stockpill.in{background:#DFF3E9;color:var(--green)} .stockpill.out{background:#FBEBE9;color:#C94336} .stockpill.low{background:#FFF0D6;color:#96660A} /* স্পেক — দুই কলামের ছোট কার্ড, লম্বা টেবিলের বদলে */ .specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 12px} .specs div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;min-width:0} .specs span{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:2px} .specs b{display:block;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere} .specs b.gold{color:var(--gold)} /* ছবি যেন কখনো ঝাপসা না দেখায় */ .pd .photo img{image-rendering:auto;transition:transform .25s ease;will-change:transform} .pd .photo.zoomable{position:relative;cursor:zoom-in;overflow:hidden} .zoomhint{position:absolute;right:10px;bottom:10px;background:rgba(28,43,39,.72);color:#fff; font-size:11.5px;font-weight:700;border-radius:20px;padding:5px 12px;pointer-events:none} /* পরিমাণ — কোডের ডান পাশের ঘরে */ .qtycell{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;min-width:0} .qtycell>span{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:3px} .qtycell .qtybox{margin:0;width:100%;display:flex;border-width:1px;border-radius:10px} .qtycell .qtybox .qm{flex:0 0 34px;width:34px;height:32px;font-size:17px} .qtycell .qtybox input{flex:1;width:auto;height:32px;font-size:14px} /* 🔍 লাইটবক্স */ .lightbox{position:fixed;inset:0;z-index:99990;background:rgba(10,20,17,.94); display:none;align-items:center;justify-content:center} .lightbox.on{display:flex} .lb-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center; overflow:hidden;touch-action:none} .lb-stage img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center; transition:transform .18s ease-out;user-select:none;-webkit-user-drag:none} .lb-close{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border:none; border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:20px;cursor:pointer} .lb-tip{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75); font-size:12px;font-weight:600;pointer-events:none} /* 🎞️ স্লাইডার */ .slides{display:flex;width:100%;height:100%;transition:transform .32s cubic-bezier(.3,.7,.4,1)} .slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center} .slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .sarr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px; border:none;border-radius:50%;background:rgba(255,255,255,.92);color:var(--teal); font-size:22px;line-height:1;font-weight:800;cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center} .sarr.prev{left:8px} .sarr.next{right:8px} .sarr:active{background:#fff;transform:translateY(-50%) scale(.92)} .sdots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3; display:flex;gap:6px;background:rgba(255,255,255,.85);border-radius:20px;padding:6px 10px} .sdots span{width:7px;height:7px;border-radius:50%;background:#C3D3CC;cursor:pointer;transition:all .2s} .sdots span.on{background:var(--teal);width:18px;border-radius:4px} .zoomhint{bottom:auto;top:10px;right:10px} /* ==== v19: স্লাইডার ফ্লেক্স-ফিক্স (বাম পাশের ফাঁকা জায়গা) ==== */ .pd .photo{display:block;position:relative} .slides{flex:0 0 100%;min-width:0;align-items:center} .slide{min-width:0} /* ==== v20: প্রোডাক্ট পেজ চূড়ান্ত গোছানো ==== */ /* ছবি — কম উচ্চতা, চারপাশে কম ফাঁকা */ .pd .photo{aspect-ratio:4/3;max-height:290px;padding:8px} @media(min-width:520px){.pd .photo{aspect-ratio:1/1;max-height:400px}} /* জুম ইঙ্গিত — ছোট গোল বাটন, ছবি ঢাকে না */ .zoomhint{top:8px;right:8px;width:32px;height:32px;padding:0;border-radius:50%;font-size:14px; display:flex;align-items:center;justify-content:center;background:rgba(28,43,39,.55)} /* সেকশনগুলোর মাঝে কম ফাঁক */ .pdhead h1{font-size:18px} .pd{margin-top:8px;gap:10px} .pricebar{padding:11px 15px} .pricebar .pbig{font-size:25px} .specs{gap:7px;margin:9px 0 10px} .specs div{padding:8px 11px} /* বিজোড় সংখ্যক স্পেক হলে শেষেরটা পুরো প্রস্থ নেবে — ডান পাশ আর ফাঁকা থাকবে না */ .specs div:last-child:nth-child(odd){grid-column:1/-1} /* পরিমাণ — লেবেলসহ এক সারিতে */ .qtyrow{display:flex;align-items:center;gap:10px;margin:2px 0 10px} .qtylbl{font-size:12.5px;font-weight:800;color:var(--muted)} .qtyrow .qtybox{margin:0} .cta{gap:8px} .trust{margin-top:10px} /* ==== v21: ফিল্টার + সাজেশন + স্টকসীমা বার্তা ==== */ /* ফিল্টার বার */ .filterbar{display:flex;gap:8px;align-items:center;margin:0 0 10px} .fbtn{flex-shrink:0;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-family:inherit; font-size:13px;font-weight:800;border-radius:11px;padding:9px 14px;cursor:pointer} .fbtn.on{border-color:var(--teal);color:var(--teal);background:#F0F7F4} .sortform{flex:1;min-width:0} .sortform select{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:11px; padding:9px 11px;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);outline:none} .fpanel{display:none;background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px 15px;margin-bottom:12px} .fpanel.open{display:block} .fgrp{margin-bottom:12px} .flabel{font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:7px} .fchips{display:flex;flex-wrap:wrap;gap:7px} .fchip{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line);border-radius:20px; padding:6px 13px;font-size:12.5px;font-weight:700;cursor:pointer;background:#fff;white-space:nowrap} .fchip input{display:none} .fchip.on,.fchip:has(input:checked){border-color:var(--teal);background:#F0F7F4;color:var(--teal)} .fchip i{font-style:normal;font-size:10.5px;opacity:.6} .frange{display:flex;align-items:center;gap:9px} .frange input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:11px;padding:10px 12px; font-family:inherit;font-size:14px;font-weight:700;outline:none} .frange input:focus{border-color:var(--teal)} .frange span{color:var(--muted);font-weight:800} .fcheck{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;cursor:pointer;margin-bottom:12px} .fcheck input{width:17px;height:17px;accent-color:var(--teal)} .fact{display:flex;gap:8px;align-items:center} .fapply{flex:1;border:none;background:var(--teal);color:#fff;font-family:inherit;font-size:14px; font-weight:800;border-radius:12px;padding:12px;cursor:pointer} .fclear{flex-shrink:0;color:#C94336;font-weight:800;font-size:13px;padding:12px 14px;text-decoration:none} /* স্পেক কার্ড লিংক */ a.speclink{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line); border-radius:12px;padding:8px 11px;min-width:0} a.speclink b{color:var(--teal)} a.speclink:active{background:#F0F7F4} /* 🔍 সার্চ সাজেশন */ .sugbox{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:120;background:#fff; border:1px solid var(--line);border-radius:14px;overflow:hidden;max-height:70vh;overflow-y:auto; box-shadow:0 12px 30px rgba(0,0,0,.16)} .sugbox.on{display:block} .sug{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line); text-decoration:none;color:var(--ink)} .sug:last-child{border-bottom:none} .sug.on,.sug:active{background:#F0F7F4} .sug img,.sug-ph{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#F0F5F2} .sug-ph{display:flex;align-items:center;justify-content:center;font-size:18px;opacity:.5} .sug-t{flex:1;min-width:0} .sug-t b{display:block;font-size:12.5px;font-weight:700;line-height:1.35; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sug-t i{font-style:normal;font-size:11px;color:var(--muted)} .sug-p{flex-shrink:0;font-size:13px;font-weight:800;color:var(--teal)} /* 📦 স্টকসীমা বার্তা */ .pg-limit{position:fixed;inset:0;z-index:99992;background:rgba(10,20,17,.55);display:flex; align-items:center;justify-content:center;padding:22px;opacity:0;transition:opacity .22s} .pg-limit.on{opacity:1} .pl-card{position:relative;background:#fff;border-radius:20px;padding:24px 20px 20px;max-width:400px; width:100%;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.3); transform:translateY(14px);transition:transform .25s cubic-bezier(.2,1.3,.4,1)} .pg-limit.on .pl-card{transform:translateY(0)} .pl-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border:none;border-radius:50%; background:#F0F5F2;color:var(--muted);font-size:15px;cursor:pointer} .pl-ic{font-size:42px;line-height:1} .pl-h{font-size:17px;font-weight:800;color:#C94336;margin:6px 0 8px} .pl-t{font-size:13.5px;line-height:1.75;color:var(--ink)} .pl-t b{color:var(--teal)} .pl-btns{display:grid;gap:9px;margin-top:16px} .pl-call,.pl-wa{display:block;text-decoration:none;font-size:15.5px;font-weight:800;border-radius:13px; padding:14px;letter-spacing:.3px} .pl-call{background:var(--teal);color:#fff;box-shadow:0 4px 14px rgba(14,107,92,.3)} .pl-wa{background:#25D366;color:#fff;box-shadow:0 4px 14px rgba(37,211,102,.3)} .pl-call:active,.pl-wa:active{opacity:.88} /* ==== v22: সাজেশন বাক্স fixed (সার্চ ফর্মের overflow:hidden এড়াতে) ==== */ .sugbox{position:fixed;left:0;top:0;right:auto;z-index:200;box-shadow:0 14px 34px rgba(0,0,0,.22)} .sug-none{padding:14px;text-align:center;font-size:13px;color:var(--muted);font-weight:600} /* ==== v24: ছবির বাক্স পুরো প্রস্থ নেবে ==== কারণ: aspect-ratio + max-height একসাথে থাকলে উচ্চতার সীমা মেনে প্রস্থও ছোট হয়ে যায় (৪:৩ অনুপাত রাখতে) — তাই ডানে ফাঁকা পড়ছিল। */ /* ছবির উচ্চতা — ডান কলামের (দাম+বাটন+ট্রাস্ট ব্যাজ) স্বাভাবিক উচ্চতার সাথে মিলিয়ে, যাতে দুই কলাম প্রায় সমান দেখায় আর নিচে ফাঁকা জায়গা না থাকে */ .pd .photo{aspect-ratio:auto;max-height:none;width:100%;height:300px} @media(min-width:520px){.pd .photo{height:380px}} @media(min-width:860px){ /* ফিক্সড উচ্চতা না দিয়ে ছবির বাক্সটাকে গ্রিডের ডিফল্ট আচরণে ডান কলামের (দাম+বাটন) সমান উচ্চতায় স্ট্রেচ হতে দিচ্ছি — পণ্যভেদে ডান কলামের উচ্চতা বদলালেও এটা স্বয়ংক্রিয়ভাবে মিলে যাবে, প্রতিবার সংখ্যা বসিয়ে অনুমান করতে হবে না। ছবি নিজে বিকৃত হবে না, কারণ ভেতরের img{object-fit:contain} সবসময় ঠিক থাকে। */ .pd .photo{height:auto;align-self:stretch} } /* (হেডারের v25/v26 পুরনো নিয়মগুলো সরানো হলো — উপরের একক পরিষ্কার ব্লকই এখন একমাত্র সক্রিয়) */ /* কার্টে বিদ্যমান সংখ্যা — পপআপে */ .pl-cart{background:#F0F7F4;border:1px solid #CFE4DB;border-radius:11px;padding:9px 14px; margin:4px 0 12px;font-size:13.5px;font-weight:700;color:#2A4A41} .pl-cart b{color:var(--teal);font-size:15px} /* পপআপে পণ্যের নাম — ছোট ও সংযত, বার্তা যেন চাপা না পড়ে */ .pl-nm{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.5;margin:2px 0 10px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pl-h{color:var(--teal);font-size:18px} .pl-t{font-size:14px} /* ==== v29: স্টকসীমা পপআপ — নতুন ডিজাইন ==== */ .pl-card{padding:0;overflow:hidden;text-align:left;max-width:380px;border-radius:22px} .pl-x{background:rgba(255,255,255,.22);color:#fff;top:14px;right:14px} .pl-x:active{background:rgba(255,255,255,.4)} /* উপরের রঙিন অংশ */ .pl-top{display:flex;align-items:center;gap:13px;padding:20px 20px 18px; background:linear-gradient(135deg,#0E6B5C 0%,#12836F 100%);color:#fff} .pl-ic{flex-shrink:0;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18); display:flex;align-items:center;justify-content:center;font-size:22px} .pl-h{font-size:17.5px;font-weight:800;color:#fff;margin:0;line-height:1.3} .pl-sub{font-size:12px;opacity:.85;margin-top:2px;font-weight:600} /* পণ্যের সারি */ .pl-prod{display:flex;align-items:center;gap:11px;padding:14px 20px;background:#F7FAF8; border-bottom:1px solid var(--line)} .pl-prod img,.pl-ph{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0; background:#fff;border:1px solid var(--line)} .pl-ph{display:flex;align-items:center;justify-content:center;font-size:22px;opacity:.5} .pl-pinfo{min-width:0;flex:1} .pl-nm{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.45;margin:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pl-qty{font-size:11.5px;color:var(--muted);margin-top:3px;font-weight:600} .pl-qty b{color:var(--teal);font-size:13px} /* মূল বার্তা */ .pl-t{padding:15px 20px 4px;font-size:13.5px;line-height:1.8;text-align:left} /* বাটন — আইকন + দুই লাইনের লেখা */ .pl-btns{display:grid;gap:9px;padding:12px 20px 20px;margin:0} .pl-call,.pl-wa{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px; text-decoration:none;color:#fff;box-shadow:none} .pl-call{background:var(--teal)} .pl-wa{background:#25D366} .pl-call i,.pl-wa i{font-style:normal;font-size:20px;width:34px;height:34px;flex-shrink:0; border-radius:50%;background:rgba(255,255,255,.2); display:flex;align-items:center;justify-content:center} .pl-call span,.pl-wa span{display:flex;flex-direction:column;line-height:1.3;font-size:11.5px; font-weight:600;opacity:.85;letter-spacing:0} .pl-call b,.pl-wa b{font-size:15.5px;font-weight:800;opacity:1;letter-spacing:.3px} .pl-call:active,.pl-wa:active{transform:scale(.985)} /* পপআপ — বাক্যের ধাঁচে পণ্যের সারি */ .pl-top{padding:18px 20px} .pl-qty{font-size:13.5px;color:var(--ink);font-weight:600;margin:0 0 3px} .pl-qty b{color:var(--teal);font-size:15px;font-weight:800} .pl-nm{margin:0;color:var(--muted)} /* ফিল্টার প্রয়োগের সময় হালকা আভাস */ .fpanel.loading{opacity:.55;pointer-events:none;transition:opacity .15s} /* ==== v32: চেকআউট পেজ পুনঃগঠন ==== */ .ckpage{padding-bottom:96px} /* নিচের স্থির বারের জন্য জায়গা */ .ckwrap{max-width:640px} /* ধাপের নম্বর-ব্যাজ ও সহায়ক লেখা */ .cknum{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%; background:var(--teal);color:#fff;font-size:12px;font-weight:800;font-style:normal;margin-right:7px;flex-shrink:0} .ckhint{font-size:12px;color:var(--muted);line-height:1.6} /* ধাপ নির্দেশক — নম্বর-বৃত্ত + রঙিন সংযোগ-লাইন */ .steps{display:flex;align-items:flex-start;justify-content:center;gap:0;padding:16px 14px 6px; max-width:640px;margin:0 auto} .st{display:flex;flex-direction:column;align-items:center;gap:5px; text-decoration:none;min-width:64px} .stcircle{width:30px;height:30px;border-radius:50%;background:#EEF2F0;color:var(--muted); display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800; border:2px solid #E2EAE6;transition:all .2s} .stlbl{font-size:11px;font-weight:800;color:var(--muted)} .st.done .stcircle{background:var(--green);color:#fff;border-color:var(--green)} .st.done .stlbl{color:var(--green)} .st.on .stcircle{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 0 0 4px rgba(14,107,92,.15)} .st.on .stlbl{color:var(--teal)} .stline{flex:1;height:3px;background:#E2EAE6;border-radius:2px;margin-top:16px;max-width:60px} .stline.done{background:var(--green)} .bkstepno{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:21px;height:21px; margin-top:1px;border-radius:50%;background:var(--teal);color:#fff;font-size:11.5px;font-weight:800} /* সেকশন কার্ড */ .cksec{background:#fff;border:2px solid #DCE8E3;border-radius:16px;overflow:hidden; margin-bottom:0;box-shadow:0 2px 10px rgba(28,43,39,.06);transition:border-color .25s,box-shadow .25s} /* ধাপের অবস্থা: বাকি / এখন চলছে / সম্পন্ন */ .cksec.is-active{border-color:var(--teal);box-shadow:0 4px 16px rgba(14,107,92,.16)} .cksec.is-done{border-color:#BFE3D0} .cksec.is-done .ckhead{background:#F1F9F4} .cksec.is-done .cknum{background:var(--green)} .cksec.is-todo .ckhead{background:#F7F8F8;color:var(--muted)} .cksec.is-todo .cknum{background:#C3CFCA} .cknum{transition:background-color .25s} /* ধাপের মাঝে নিচমুখী তীর — পরের ধাপ কোনটা তা বোঝায় */ .ckarrow{display:flex;align-items:center;justify-content:center;height:34px;color:#B6CFC6;font-size:18px} .ckarrow span{display:flex;align-items:center;justify-content:center;width:26px;height:26px; border-radius:50%;background:#EAF3EF;color:var(--teal);font-size:13px;font-weight:800; transition:background-color .25s,color .25s} .ckarrow.is-done span{background:var(--green);color:#fff} /* ⚠️ যে ধাপে কিছু বাকি — সাবমিট চাপলে এভাবে চোখে পড়বে */ .cksec.is-problem{border-color:#E8776A;box-shadow:0 4px 20px rgba(201,67,54,.22)} .cksec.is-problem .ckhead{background:#FDECEA;color:#C94336} .cksec.is-problem .cknum{background:#C94336} .ckproblem{display:flex;flex-direction:column;gap:2px;background:#FDECEA;border-bottom:1px solid #F3B5AC; padding:10px 15px;font-size:12.5px;line-height:1.55} .ckproblem b{color:#C94336;font-size:12px} .ckproblem span{color:#8A3B31} @keyframes ckshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)} 40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}} .cksec.shake{animation:ckshake .45s ease} /* যেসব ধাপ এখনো বাকি, হেডারে ছোট ব্যাজ */ .cksec.is-todo .ckhead::after,.cksec.is-active .ckhead::after{ content:'বাকি আছে';margin-left:auto;flex-shrink:0;font-size:10.5px;font-weight:800; background:#FFF3E0;color:#C9820A;border-radius:8px;padding:3px 9px} .cksec.is-done .ckhead::after{content:'✓ হয়েছে';margin-left:auto;flex-shrink:0;font-size:10.5px; font-weight:800;background:#E7F5EE;color:#1B8A5A;border-radius:8px;padding:3px 9px} .cksec.is-problem .ckhead::after{content:'⚠️ দরকার';background:#FDECEA;color:#C94336} .ckhead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:12px 15px; background:#F7FAF8;border-bottom:1px solid var(--line);font-size:14px;font-weight:800;color:var(--teal)} .ckhead b{font-weight:600;font-size:11.5px;color:var(--muted)} .ckedit{font-size:12px;font-weight:800;color:var(--teal);text-decoration:none; background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:5px 11px} .ckedit:active{background:#F0F7F4} .ckbody{padding:4px 15px 14px} /* অর্ডার আইটেম */ .ckitem{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line); text-decoration:none;color:var(--ink)} .ckitem:last-of-type{border-bottom:none} .ckitem img,.ck-ph{width:46px;height:46px;border-radius:9px;object-fit:cover;flex-shrink:0; background:#F0F5F2;border:1px solid var(--line)} .ck-ph{display:flex;align-items:center;justify-content:center;font-size:20px;opacity:.5} .ck-i{flex:1;min-width:0;display:block} .ck-i b{display:block;font-size:12.5px;font-weight:700;line-height:1.45; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ck-i i{font-style:normal;font-size:11.5px;color:var(--muted)} .ck-l{flex-shrink:0;font-size:14px;font-weight:800;color:var(--teal)} .cktotal{display:flex;justify-content:space-between;align-items:center;padding:12px 15px; background:#F7FAF8;border-top:1px solid var(--line);font-size:13.5px;font-weight:700} .cktotal b{font-size:18px;color:var(--teal)} .ckback{display:block;text-align:center;padding:11px;font-size:12.5px;font-weight:700; color:var(--muted);text-decoration:none;border-top:1px dashed var(--line)} .ckback:active{background:#F7FAF8;color:var(--teal)} .cknote{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.9;margin:2px 0 0} #trxField{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px; padding:12px 14px;font-family:inherit;font-size:15px;font-weight:800; text-transform:uppercase;letter-spacing:2px;margin-top:6px;outline:none} /* নিচের স্থির বার */ .ckbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff; border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(0,0,0,.09)} .ckbar-in{max-width:640px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:12px} .ckbar-t{display:flex;flex-direction:column;line-height:1.35;flex-shrink:0} .ckbar-t span{font-size:11px;color:var(--muted);font-weight:700} .ckbar-t b{font-size:19px;color:var(--teal);font-weight:800} .ckbar-btn{flex:1;border:none;background:var(--green);color:#fff;font-family:inherit;font-size:15px; font-weight:800;border-radius:13px;padding:14px 12px;cursor:pointer} .ckbar-btn:disabled{opacity:.6} /* (পুরনো okbtns/ok-inv/ok-shop নিয়মগুলো সরানো হলো — নিচে v37+ সংস্করণই এখন একমাত্র সক্রিয়) */ /* ==== v33: কাস্টমার প্যানেল (acctlink স্টাইল এখন উপরের হেডার ব্লকেই আছে) ==== */ /* ==== ☰ সব-পেজে মেনু বাটন + প্যানেল ==== */ .menu-fab{position:fixed;left:16px;bottom:20px;z-index:90;width:52px;height:52px;border-radius:50%; background:#0E6B5C;display:flex;align-items:center;justify-content:center; box-shadow:0 6px 18px rgba(14,107,92,.4);border:none;cursor:pointer;color:#fff;font-size:22px} .menu-fab:active{transform:scale(.94)} @media(min-width:760px){.menu-fab{left:26px;bottom:26px}} .ckpage .menu-fab{bottom:90px} .menu-overlay{position:fixed;inset:0;z-index:190;background:rgba(10,20,17,.5); display:none;align-items:flex-end} .menu-overlay.on{display:flex} .menu-panel{background:#fff;width:100%;border-radius:20px 20px 0 0;padding:10px 0 8px; max-height:80vh;overflow-y:auto;transform:translateY(16px);opacity:0; transition:all .2s cubic-bezier(.2,1,.3,1)} .menu-overlay.on .menu-panel{transform:translateY(0);opacity:1} .menu-handle{width:40px;height:4px;background:#DCE5E1;border-radius:3px;margin:2px auto 8px} .menu-item{display:flex;align-items:center;gap:13px;padding:13px 20px;text-decoration:none; color:var(--ink);font-size:15px;font-weight:700} .menu-item:active{background:#F3F6F4} .menu-item i{font-style:normal;font-size:19px;width:24px;text-align:center;flex-shrink:0} .menu-item .sub{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px} .menu-sep{height:1px;background:var(--line);margin:6px 16px} /* লগইন */ .acc-login{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 22px; text-align:center;margin-top:16px} .acc-ic{font-size:46px} .acc-login h1{font-size:20px;margin:8px 0 2px} .acc-inp{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px; padding:13px 15px;font-family:inherit;font-size:15px;font-weight:700;outline:none} .acc-inp:focus{border-color:var(--teal)} .acc-btn{width:100%;margin-top:12px;border:none;background:var(--teal);color:#fff;font-family:inherit; font-size:15.5px;font-weight:800;border-radius:13px;padding:14px;cursor:pointer} /* হিরো */ .acc-hero{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#0E6B5C,#12836F); color:#fff;border-radius:18px;padding:18px 20px;margin-top:16px} .acc-av{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800} .acc-nm{font-size:18px;font-weight:800;line-height:1.2} .acc-ph{font-size:13px;opacity:.9;margin-top:2px} .acc-out{flex-shrink:0;background:rgba(255,255,255,.2);color:#fff;font-size:12px;font-weight:800; border-radius:20px;padding:7px 14px;text-decoration:none} .acc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0} .acc-stats div{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 8px;text-align:center} .acc-stats b{display:block;font-size:18px;font-weight:800;color:var(--teal)} .acc-stats span{font-size:11px;color:var(--muted);font-weight:700} /* অর্ডার কার্ড */ .acc-ord{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:10px} .acc-ord-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px} .acc-ord-no{font-weight:800;color:var(--teal);font-size:14px} .acc-tag{font-size:10.5px;font-weight:800;border-radius:9px;padding:3px 10px} .acc-tag.pend{background:#FFF6E9;color:#B77A0F} .acc-tag.conf{background:#DFF3E9;color:var(--green)} .acc-tag.canc{background:#FBEBE9;color:#C94336} .acc-ord-items{font-size:12.5px;color:#444;line-height:1.5;margin-bottom:9px} .acc-ord-bot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap; font-size:12px;color:var(--muted);font-weight:600;border-top:1px dashed var(--line);padding-top:9px} .acc-links{display:flex;gap:12px} .acc-links a{color:var(--teal);font-weight:800;text-decoration:none} .acc-shop{display:block;text-align:center;background:#fff;border:1.5px solid var(--line);border-radius:13px; padding:13px;font-weight:800;color:var(--teal);text-decoration:none;margin-top:6px} /* ==== v34: অ্যাকাউন্ট ট্যাব ও ফর্ম ==== */ .acc-tabs{display:flex;gap:8px;margin:16px 0 4px;background:#F0F5F2;border-radius:12px;padding:4px} .acc-tabs a{flex:1;text-align:center;padding:9px;border-radius:9px;font-size:13px;font-weight:800; text-decoration:none;color:var(--muted)} .acc-tabs a.on{background:#fff;color:var(--teal);box-shadow:0 1px 4px rgba(0,0,0,.08)} .acc-fl{display:block;font-size:12px;font-weight:800;color:var(--muted);margin:10px 0} .acc-fl .acc-inp{margin-top:5px} /* চেকআউটে লগইন ব্যানার */ .cklogin{background:#DFF3E9;border:1px solid #B6E3CD;border-radius:10px;padding:9px 13px; font-size:12.5px;font-weight:700;color:#1B7A56;margin-bottom:10px} /* ==== v36: অ্যাকাউন্ট — স্বাগত বার্তা ==== */ .acc-welcome{background:#F0F7F4;border:1px solid #CFE4DB;border-radius:12px;padding:13px 15px; font-size:14px;line-height:1.6;color:var(--teal);margin-bottom:6px} .acc-welcome b{font-size:15.5px} .acc-welcome span{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:3px} /* ==== v37: অর্ডার সফল পেজ পুনঃডিজাইন ==== */ .osuc{text-align:center;padding:24px 0 6px} .osuc-ic{width:74px;height:74px;margin:0 auto;border-radius:50%;background:var(--green);color:#fff; font-size:40px;font-weight:800;display:flex;align-items:center;justify-content:center; box-shadow:0 8px 24px rgba(27,138,90,.35);animation:opop .5s cubic-bezier(.3,1.5,.5,1)} @keyframes opop{0%{transform:scale(0)}100%{transform:scale(1)}} .osuc h1{font-size:22px;margin:14px 0 4px} .osuc p{color:var(--muted);font-size:13.5px;margin:0} .osuc-no{display:inline-block;margin-top:12px;background:#F0F7F4;border:1px solid #CFE4DB;border-radius:20px; padding:7px 16px;font-size:13px;color:var(--muted)} .osuc-no b{color:var(--teal);font-size:14px} /* ট্র্যাকার */ .otrack{display:flex;align-items:flex-start;justify-content:center;gap:4px;margin:20px auto 8px;max-width:400px} .ot{flex:0 0 auto;text-align:center;font-size:11px;font-weight:700;color:var(--muted);line-height:1.35;width:70px} .ot span{display:flex;width:40px;height:40px;margin:0 auto 5px;border-radius:50%;background:#EEF2F0; align-items:center;justify-content:center;font-size:18px;border:2px solid var(--line)} .ot.on{color:var(--teal)} .ot.on span{background:#DFF3E9;border-color:var(--green)} .otrack i{flex:1;height:2px;background:var(--line);margin-top:19px;max-width:44px} .otrack i.on{background:var(--green)} /* কার্ড */ .ocard{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;margin:12px 0} .ocard-h{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background:#F7FAF8; border-bottom:1px solid var(--line);font-size:14px;font-weight:800;color:var(--teal)} .ocard-h span{font-size:11.5px;font-weight:600;color:var(--muted)} .oitem{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:11px 15px; border-bottom:1px dashed var(--line);font-size:13.5px} .oi-n{flex:1;min-width:0} .oi-n i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px} .ocard-t{display:flex;justify-content:space-between;padding:12px 15px;background:#F7FAF8;font-weight:800;font-size:15px} .ocard-t b{color:var(--teal);font-size:17px} .oinfo{padding:13px 15px;font-size:13.5px;line-height:1.95} .oinfo b{font-size:14.5px} .opay{margin-top:8px;padding-top:10px;border-top:1px dashed var(--line);font-weight:700} .opay span{color:var(--muted);font-weight:500;font-size:12px} .onote{text-align:center;font-size:12.5px;color:var(--muted);line-height:1.9;margin:16px 0} .onote a{color:var(--teal);font-weight:800} /* বাটন */ .okbtns{display:grid;gap:9px;margin:16px 0 8px} .ok-inv{display:block;text-align:center;background:var(--teal);color:#fff;font-weight:800;font-size:15px; border-radius:13px;padding:14px;text-decoration:none;box-shadow:0 3px 12px rgba(14,107,92,.25)} .okrow{display:grid;grid-template-columns:1fr 1fr;gap:9px} .ok-acct,.ok-shop{display:block;text-align:center;background:#fff;color:var(--teal);border:1.5px solid var(--line); font-weight:800;font-size:13.5px;border-radius:13px;padding:13px 8px;text-decoration:none} .ok-wa{display:block;text-align:center;background:#25D366;color:#fff;font-weight:800;font-size:14.5px; border-radius:13px;padding:13px;text-decoration:none} .ok-inv:active,.ok-acct:active,.ok-shop:active,.ok-wa:active{opacity:.88} /* ==== v38: অ্যাকাউন্ট — সার্চ + ফিল্টার চিপ ==== */ .acc-search{margin:12px 0 10px} .acc-search input{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px; padding:11px 15px;font-family:inherit;font-size:14px;background:#fff;outline:none} .acc-search input:focus{border-color:var(--teal)} .acc-fbar{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;margin-bottom:12px; -ms-overflow-style:none;scrollbar-width:none} .acc-fbar::-webkit-scrollbar{display:none} .acc-fbar .fchip{flex-shrink:0;border:1.5px solid var(--line);background:#fff;border-radius:20px; padding:8px 14px;font-family:inherit;font-size:12.5px;font-weight:700; color:var(--muted);cursor:pointer;white-space:nowrap} .acc-fbar .fchip b{font-weight:800;margin-left:3px} .acc-fbar .fchip.on{border-color:var(--teal);color:var(--teal);background:#EAF3EF} /* ==== v41: ব্লক-নোটিশ (চেকআউট) ==== */ .blkbox{background:#fff;border:1.5px solid #F2C7C0;border-radius:18px;padding:26px 20px; text-align:center;margin:16px 0} .blk-ic{font-size:46px} .blkbox h2{font-size:17px;margin:10px 0 8px;color:#C94336} .blkbox p{font-size:13.5px;line-height:1.8;color:var(--ink);margin:6px 0} .blkbox p b{color:#C94336} .blk-sub{color:var(--muted)!important;font-size:12.5px!important} .blk-btns{display:grid;gap:9px;margin-top:16px} .blk-btns a{display:block;text-align:center;font-weight:800;font-size:14.5px;border-radius:13px; padding:13px;text-decoration:none} .blk-call{background:var(--teal);color:#fff} .blk-wa{background:#25D366;color:#fff} .blk-mail{background:#fff;color:var(--ink);border:1.5px solid var(--line)} /* ==== v42: ব্লক ব্যানার, মিনি-প্রগ্রেস, প্রোফাইল সেটিংস ==== */ .acc-blkbanner{display:flex;gap:11px;background:#FBEBE9;border:1.5px solid #F2C7C0;border-radius:15px; padding:14px 16px;margin-top:12px} .ab-ic{font-size:26px;flex-shrink:0} .acc-blkbanner b{color:#C94336;font-size:14px} .ab-reason{font-size:12.5px;color:#8A2E24;margin-top:3px} .ab-sub{font-size:12px;color:#8A2E24;margin-top:6px;line-height:1.6} .ab-btns{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap} .ab-btns a{font-size:12px;font-weight:800;border-radius:9px;padding:7px 12px;text-decoration:none; background:#fff;color:#C94336;border:1px solid #F2C7C0} /* মিনি প্রগ্রেস (অর্ডার কার্ডে) */ .acc-mini-prog{display:flex;align-items:center;gap:2px;margin:8px 0} .acc-mini-prog span{width:20px;height:20px;border-radius:50%;background:#EEF2F0;font-size:10px; display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.4} .acc-mini-prog span.on{background:#E7F5EE;opacity:1} .acc-mini-prog i{flex:1;height:2px;background:#E2EAE6;min-width:6px} .acc-mini-prog i.on{background:var(--green)} /* প্রোফাইল সেটিংস — অ্যাকর্ডিয়ন (ভাঁজ করা) */ .acc-accordion{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;margin-top:10px} .asc-toggle{display:flex;align-items:center;justify-content:space-between;width:100%; background:none;border:none;border-bottom:1px solid var(--line); padding:14px 16px;font-family:inherit;font-size:13.5px;font-weight:800; color:var(--teal);cursor:pointer;text-align:left} .asc-toggle i{font-style:normal;font-size:16px;color:var(--muted);transition:transform .2s;transform:rotate(90deg)} .asc-toggle.open i{transform:rotate(-90deg)} .asc-panel{display:none;padding:4px 16px 16px;border-bottom:1px solid var(--line)} .asc-panel.open{display:block} .asc-panel:last-child,.asc-panel.open:last-child{border-bottom:none} .acc-accordion label{display:block;font-size:11.5px;font-weight:800;color:var(--muted);margin:9px 0 3px} .acc-accordion input,.acc-accordion textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--line); border-radius:10px;padding:10px 12px;font-family:inherit;font-size:13.5px;outline:none} .acc-accordion input:focus,.acc-accordion textarea:focus{border-color:var(--teal)} .asc-save{margin-top:11px;width:100%;background:var(--teal);color:#fff;border:none;border-radius:11px; font-family:inherit;font-size:13.5px;font-weight:800;padding:12px;cursor:pointer} /* ==== v44: চেকআউটে ফোন-ফরম্যাট সতর্কতা ==== */ .ckphonewarn{margin-top:7px;font-size:12px;font-weight:700;color:#C94336; background:#FBEBE9;border-radius:9px;padding:8px 12px} /* ==== v45: অর্ডার নিশ্চিত না হওয়া পর্যন্ত ইনভয়েস-অপেক্ষার অবস্থা ==== */ .acc-inv-wait{color:var(--muted);font-weight:600;cursor:default} .ok-inv-wait{text-align:center;background:#F3F6F4;border:1px dashed var(--line);color:var(--muted); font-size:12.5px;font-weight:700;border-radius:13px;padding:12px;margin-bottom:10px} /* (v27/v28 প্যাচগুলো সরানো হলো — হেডার ব্লকেই এখন সঠিক gap/padding বসানো আছে) */ /* ============ 🎞️ হোমপেজ হিরো স্লাইডার ============ */ .heroslider{position:relative;overflow:hidden} .hstrip{display:flex;align-items:flex-start;transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform} .hslide{flex:0 0 100%;min-width:100%;padding:8px 0;box-sizing:border-box} .hbanner{display:block;position:relative;margin:0 14px;border-radius:16px;overflow:hidden; text-decoration:none;background:#EEF3F1;box-shadow:0 3px 14px rgba(28,43,39,.10)} .hbanner img{width:100%;display:block;aspect-ratio:16/7;object-fit:cover} .hbcap{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;color:#fff;font-weight:800; font-size:14.5px;line-height:1.45;background:linear-gradient(transparent,rgba(0,0,0,.72))} /* পাশের তীর */ .harrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px; border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--teal);font-size:22px; line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18);display:none} .harrow.prev{left:20px} .harrow.next{right:20px} @media(min-width:760px){.harrow{display:flex;align-items:center;justify-content:center}} /* নিচের বিন্দু */ .hdots{display:flex;justify-content:center;gap:7px;padding:10px 0 2px} .hdots i{width:7px;height:7px;border-radius:50%;background:#CBDAD4;transition:all .25s;cursor:pointer} .hdots i.on{background:var(--teal);width:20px;border-radius:4px} /* ---- ডিজাইন করা ব্যানার (ছবি ছাড়া, ব্রাউজারই আঁকে — সব স্ক্রিনে ঝকঝকে) ---- */ .hdesign{display:flex;align-items:center;gap:14px;margin:0 14px;padding:20px 18px;border-radius:16px; text-decoration:none;color:#fff;min-height:260px;box-sizing:border-box;position:relative;overflow:hidden; box-shadow:0 3px 14px rgba(28,43,39,.14)} .hdesign::after{content:'';position:absolute;width:150px;height:150px;border-radius:50%; background:rgba(255,255,255,.10);right:-45px;top:-55px} .hdesign .hd-ic{font-size:42px;flex-shrink:0;line-height:1;position:relative;z-index:1} .hdesign .hd-txt{display:flex;flex-direction:column;gap:5px;min-width:0;position:relative;z-index:1} .hdesign b{font-size:19px;font-weight:800;line-height:1.35} .hdesign i{font-style:normal;font-size:13px;opacity:.93;line-height:1.55} .hdesign em{font-style:normal;align-self:flex-start;margin-top:6px;background:rgba(255,255,255,.95); color:#14403A;font-size:12.5px;font-weight:800;border-radius:20px;padding:7px 15px} .hdesign.t-teal{background:linear-gradient(135deg,#0E6B5C,#128974)} .hdesign.t-amber{background:linear-gradient(135deg,#E07C1F,#F2A63B)} .hdesign.t-blue{background:linear-gradient(135deg,#2A5CA8,#3E82D4)} .hdesign.t-purple{background:linear-gradient(135deg,#5B3C93,#7E5CC0)} .hdesign.t-green{background:linear-gradient(135deg,#1B8A5A,#31AC74)} .hdesign.t-dark{background:linear-gradient(135deg,#1C2B27,#334741)} @media(min-width:620px){ .hdesign{padding:26px 26px;min-height:180px;gap:20px} .hdesign .hd-ic{font-size:56px} .hdesign b{font-size:24px} .hdesign i{font-size:14.5px} } /* স্লাইডারের ভেতরে পরিচয়-স্লাইডটা একটু কম্প্যাক্ট, যাতে ব্যানারের সাথে উচ্চতার পার্থক্য কম হয় */ .heroslider .hero{padding-bottom:0} .heroslider .hero .side{margin-top:8px} .hdots{padding:12px 0 4px} /* ============ 🖥️ ডেস্কটপ/ট্যাবলেট — দুই পাশে ৭.৫% করে ফাঁকা (মোট ১৫%) ============ vw ব্যবহার করা হয়েছে যাতে ফাঁকটা সবসময় স্ক্রিনের প্রস্থের অনুপাতেই থাকে। */ @media(min-width:760px){ .wrap, .pd, .pdhead, .hero, .cats, .top .in, footer .in{ padding-left:7.5vw; padding-right:7.5vw; } .hbanner, .hdesign{ margin-left:7.5vw; margin-right:7.5vw; } .heroslider .hero{ padding-left:7.5vw; padding-right:7.5vw; } /* ফাঁক যোগ হওয়ায় ভেতরের কনটেন্ট যেন সরু হয়ে না যায় */ .wrap, .pd, .pdhead, .hero, .cats, .top .in, footer .in{ max-width:1400px; } } /* ছবি/টেবিল যেন কখনো বাক্স ছাপিয়ে না যায় */ img, video, canvas{ max-width:100%; height:auto } table{ max-width:100% } /* ⭐ রিভিউ সেকশনের বার্তা */ .msg{border-radius:12px;padding:11px 15px;margin:0 0 12px;font-size:13.5px;font-weight:700} .msg.ok{background:#E7F5EE;color:#1B8A5A;border:1px solid #BFE3D0} .msg.err{background:#FDEBEC;color:#C94336;border:1px solid #F3B5AC}