/* v32 — "classic" look: plain white, thin borders, flat buttons, tidy columns. Loaded after site.css when the
   admin setting "site_classic" is on; turning it off brings the previous look back untouched. */
.classic{--r-xl:12px;--r-lg:10px;--r-md:8px;--r-sm:6px;--cta:#0650E7;--shadow:none;--line:#E3E6EE;--soft:#F6F7FA;font-size:15px}
.classic .btn{height:44px;padding:0 20px;border-radius:8px;box-shadow:none;font-weight:600;background:#0650E7}
.classic .btn:hover{background:#0443C4;filter:none}
.classic .btn.ghost,.classic .btn-line,.classic .btn-google{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px #C9CFDD}
.classic .btn.ghost:hover,.classic .btn-line:hover{background:#F3F5F9}
.classic .btn-lg{height:48px}
.classic .btn-sm{height:36px;border-radius:7px}
/* header */
.classic .hdr .w{height:72px}
.classic .sbox{height:44px;border-radius:8px;border-width:1px;background:#fff}
.classic .sbtn{border-radius:6px;box-shadow:none}
.classic .cnav .w{height:46px}
.classic .cnav a{border-radius:6px;font-weight:600}
.classic .cnav a:first-child{background:transparent;color:var(--navy);box-shadow:none}
/* classic hero */
.classic .chero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;margin-top:24px;padding:40px;border:1px solid var(--line);border-radius:12px;background:#F6F8FC}
.classic .chero-k{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13.5px;font-weight:600;color:#0B7A4E}
.classic .chero-k svg{width:18px;height:18px}
.classic .chero h2{margin:0;font-size:clamp(30px,3.4vw,44px);line-height:1.15;color:var(--navy);font-weight:600}
.classic .chero-p{margin:14px 0 0;font-size:17px;color:var(--ink-2);max-width:46ch}
.classic .chero-b{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.classic .chero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.classic .cpt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;text-align:center}
.classic .cpt:hover{border-color:#9FB6E8}
.classic .cpt img{width:72px;height:72px}
.classic .cpt b{font-size:15px;color:var(--navy)}
.classic .cpt small{font-size:13.5px;color:var(--muted);font-weight:600}
/* trust row */
.classic .trust{border-radius:10px;margin-top:20px}
.classic .tt{padding:16px 18px}
.classic .tt .ic{width:38px;height:38px;border-radius:8px;background:transparent;border:1px solid var(--line)}
/* sections */
.classic .sec{margin-top:48px}
.classic .sh{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.classic .sh h2{font-size:24px;font-weight:700;letter-spacing:-.01em}
.classic .tabs{border-radius:8px}
.classic .tabs a{border-radius:6px}
/* product cards */
.classic .grid{gap:18px}
.classic .card{border:1px solid var(--line);border-radius:10px;padding:12px;gap:10px;background:#fff}
.classic .card .art,.classic .card .pimg{border-radius:8px}
.classic .card .media:hover .art,.classic .card .media:hover .pimg{transform:none;box-shadow:none}
.classic .card h3{font-size:17px}
.classic .card .desc{font-size:14px}
.classic .bdg span{border-radius:5px}
.classic .cgo-n{border-radius:5px}
.classic .cgo-buy{height:42px}
/* how it works: 3 columns */
.classic .how{grid-template-columns:1fr}
.classic .hsteps{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.classic .step{grid-template-columns:44px 1fr;padding:18px;border-radius:10px}
.classic .step .n{width:44px;height:44px;border-radius:8px;font-size:18px;background:#0650E7}
/* FAQ + support */
.classic .support{border-radius:10px;border:1px solid var(--line);background:#fff}
.classic .sup{border-radius:8px;box-shadow:none;border:1px solid var(--line)}
.classic .sup i{border-radius:8px}
/* footer */
.classic .ftr,.classic .ftr2{margin-top:56px}
/* product page */
.classic .pd{gap:36px}
.classic .pd-h{font-weight:700;font-size:clamp(28px,3vw,38px);letter-spacing:-.01em}
.classic .pass{border-width:1px;border-radius:8px}
.classic .pass::before,.classic .pass::after{display:none}
.classic .pass-stub{border-top-style:solid;border-top-width:1px}
.classic .pass:has(input:checked){box-shadow:0 0 0 2px rgba(6,80,231,.18)}
.classic .pd-buybox,.classic .panel,.classic .notify,.classic .pinfo{border-radius:10px;box-shadow:none}
.classic .pd-trust li{border-radius:8px}
.classic .pd-more{grid-template-columns:repeat(3,minmax(0,1fr))}
.classic .pd-col{border-radius:10px;padding:22px}
.classic .reviews{margin-top:44px}
.classic .rv-sum{border-radius:10px;padding:18px 20px}
.classic .rv-empty{padding:4px 0}
.classic .reviews .rv-empty .stars{font-size:18px}
.classic .devs label span{border-radius:8px}
.classic .qty{border-radius:8px}
/* chat bubble: small and quiet */
.classic .chat-fab{height:48px;padding:0 16px 0 14px;font-weight:600;font-size:14px;background:#0650E7;box-shadow:0 6px 16px rgba(10,16,51,.18)}
.classic .chat-panel{border-radius:12px}
.classic .chat-panel header{background:#0B1550}
@media(max-width:900px){
 .classic .chero{grid-template-columns:1fr;padding:24px;gap:24px}
 .classic .hsteps{grid-template-columns:1fr}
 .classic .pd-more{grid-template-columns:1fr}
}
@media(max-width:560px){
 .classic .chero{margin-top:22px;padding:20px 16px}
 .classic .chero h2{font-size:28px}
 .classic .chero-p{font-size:15.5px}
 .classic .chero-b .btn{flex:1}
 .classic .cpt{padding:14px 8px}.classic .cpt img{width:56px;height:56px}
 .classic .card{padding:8px}
 .classic .sh h2{font-size:21px}
}
.classic .rv-grid:has(.rv-empty) .rv-sum{justify-content:flex-start;background:#fff;border-color:var(--line)}
.classic .rv-empty{text-align:left;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.classic .rv-empty .stars span{font-size:16px}
.classic .rv-empty b{margin:0;font-size:15px}
/* v32b — mobile: simpler, easier to scan */
.classic .cnotify{border:1px solid var(--line);border-radius:10px;padding:0 14px;margin-top:14px;background:#fff}
.classic .cnotify summary{cursor:pointer;padding:13px 0;font-size:14.5px;color:var(--brand);font-weight:600;list-style:none}
.classic .cnotify summary::-webkit-details-marker{display:none}
.classic .cnotify .notify{border:0;padding:0 0 14px;margin:0;background:transparent}
.classic .cnotify .notify>p{display:none}
@media(max-width:560px){
 .classic .chero-grid{display:none}
 .classic .chero h2{font-size:27px}
 .classic .chero-k{font-size:12.5px;margin-bottom:8px}
 .classic .trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;border-radius:10px}
 .classic .trust .tt{padding:12px;gap:10px;border-left:0;min-width:0}
 .classic .trust .tt:nth-child(even){border-left:1px solid var(--line)}
 .classic .trust .tt:nth-child(n+3){border-top:1px solid var(--line)}
 .classic .trust .tt .ic{width:32px;height:32px}
 .classic .trust .tt b{font-size:13.5px}.classic .trust .tt span{font-size:12px}
 .classic .tabs{max-width:100%;overflow-x:auto}
 .classic .devs{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
 .classic .devs label span{flex-direction:row;justify-content:center;gap:8px;padding:12px 8px}
 .classic .sh{flex-direction:column;align-items:flex-start;gap:12px}
 .classic .chat-fab{width:46px;height:46px;padding:0;justify-content:center}
}
@media(max-width:560px){
 .classic .trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0}
 .classic .trust .tt{flex:initial;min-width:0;padding:8px 10px 8px 8px!important;border:1px solid var(--line)!important;border-radius:8px}
 .classic .trust .tt b{white-space:normal;font-size:12.5px;line-height:1.25}
}
/* v32c — plans as compact colored buttons; phones keep the 2-column product grid */
.classic .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.classic .pgrid .pass{border:1.5px solid #D5DCEA;border-radius:10px;background:#fff;transition:background .15s,border-color .15s}
.classic .pgrid .pass-main{position:relative;padding:10px 12px!important;gap:2px}
.classic .pgrid .pass-tick{display:none}
.classic .pgrid .pass-name{font-size:13px;font-weight:600;color:#3A4466;padding-right:18px}
.classic .pgrid .pass-price{font-size:18px;font-weight:700;color:var(--navy)}
.classic .pgrid .pass-kind{display:none}
.classic .pgrid .pass-left,.classic .pgrid .pass-out{font-size:11px;font-weight:700}
.classic .pgrid .pass:hover{border-color:#8FA9E6}
.classic .pgrid .pass:has(input:checked){background:#0650E7;border-color:#0650E7;box-shadow:0 4px 14px rgba(6,80,231,.28)}
.classic .pgrid .pass:has(input:checked) .pass-name,.classic .pgrid .pass:has(input:checked) .pass-price{color:#fff}
.classic .pgrid .pass:has(input:checked) .pass-left{color:#C9F2DC}
.classic .pgrid .pass:has(input:checked) .pass-main::after{content:"✓";position:absolute;top:8px;right:9px;width:18px;height:18px;border-radius:50%;background:#fff;color:#0650E7;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1}
.classic .pgrid .pass.is-out{background:#F4F5F8;border-style:dashed;border-color:#D5DCEA}
.classic .pgrid .pass.is-out .pass-name,.classic .pgrid .pass.is-out .pass-price{color:#A0A8BE}
.classic .pinfo{border-radius:10px;background:#F4F7FD;border:1px solid #E1E8F7}
@media(max-width:560px){
 .classic .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .classic .card{padding:8px;gap:6px;border-radius:10px}
 .classic .card .bdg{display:none}
 .classic .card .desc{display:none}
 .classic .card h3{font-size:15px;line-height:1.25}
 .classic .card .meta{font-size:12px}
 .classic .card .cgo-p b{font-size:18px}
 .classic .card .cgo-buy{height:40px;font-size:14px}
 .classic .pgrid .pass-name{font-size:12.5px}
 .classic .pgrid .pass-price{font-size:17px}
}
/* v32d — banners back, quick-buy sheet tidy, one type scale everywhere */
.classic .slider{border-radius:12px;box-shadow:none;margin-top:18px}
/* type scale: one family (Plus Jakarta Sans + Anek Bangla), sizes by role */
.classic{--fs-xs:12px;--fs-sm:13px;--fs-body:15px;--fs-md:16px;--fs-h3:17px;--fs-h2:22px;--fs-h1:30px}
.classic body,.classic{font-size:var(--fs-body);line-height:1.55}
.classic .bn{font-weight:500}
.classic .util{font-size:12.5px}
.classic .sh h2,.classic .h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.01em}
.classic .sh p{font-size:var(--fs-sm)}
.classic .h3{font-size:var(--fs-h3);font-weight:700}
.classic .label,.classic .sh-l{font-size:14px;font-weight:600;color:var(--navy)}
.classic .pd-h{font-size:var(--fs-h1)}
.classic .pd-short{font-size:var(--fs-md)}
.classic .pd-pricebar b,.classic #tprice{font-size:26px}
.classic .card h3{font-size:var(--fs-md);font-weight:600}
.classic .card .meta,.classic .card .desc{font-size:var(--fs-sm)}
.classic .cgo-p small,.classic .cgo-n{font-size:var(--fs-xs)}
.classic .cgo-p b{font-size:20px}
.classic .tt b{font-size:14px;font-weight:600}.classic .tt span{font-size:12.5px}
.classic .step b{font-size:var(--fs-md);font-weight:600}.classic .step p{font-size:var(--fs-sm)}
.classic .q summary{font-size:var(--fs-body);font-weight:600;padding:15px 0}
.classic .q p{font-size:14.5px}
.classic .support h3{font-size:19px}
.classic .ticks li,.classic .psteps li{font-size:14.5px}
.classic .pinfo-g{font-size:var(--fs-sm)}
.classic .devs label span{font-size:14px;font-weight:600}
.classic .ftr p,.classic .ftr ul,.classic .ftr2 p{font-size:14px}
.classic .btn{font-size:15px;font-weight:600;letter-spacing:.005em}
.classic .btn svg{width:18px;height:18px}
/* buy buttons: same look on product page, sticky bar and quick-buy sheet */
.classic .buy-row .btn,.classic .mbar .btn,.classic .sh-btns .btn{height:48px;border-radius:10px}
.classic .mbar{border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(10,16,51,.06)}
/* quick-buy sheet */
.classic .sh-f{border-radius:16px 16px 0 0}
.classic .sh-img{border-radius:10px}
.classic .sh-name{font-size:var(--fs-md);font-weight:600}
.classic .sh-price{font-size:22px;font-weight:700}
.classic .sh-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.classic .chip-opt{display:block;position:relative}
.classic .chip-opt.out{order:2}
.classic .chip-opt span{height:100%;padding:10px 12px;border:1.5px solid #D5DCEA;border-radius:10px}
.classic .chip-opt b{font-size:13px;font-weight:600;color:#3A4466;padding-right:18px}
.classic .chip-opt em{font-size:16px;font-weight:700;color:var(--navy)}
.classic .chip-opt input:checked+span{background:#0650E7;border-color:#0650E7;box-shadow:0 4px 14px rgba(6,80,231,.28)}
.classic .chip-opt input:checked+span b,.classic .chip-opt input:checked+span em{color:#fff}
.classic .chip-opt input:checked+span::after{content:"✓";position:absolute;top:8px;right:9px;width:18px;height:18px;border-radius:50%;background:#fff;color:#0650E7;font-size:11px;font-weight:800;display:grid;place-items:center}
.classic .chip-opt.out span{background:#F4F5F8}
.classic .chip-opt.out em{font-size:11.5px}
.classic .sh-devs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.classic .chip-opt.dev span{text-align:center;justify-items:center;padding:11px 8px}
.classic .chip-opt.dev b{padding-right:0}
.classic .chip-opt.dev input:checked+span::after{display:none}
.classic .sh-btns{position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));background:#fff;margin:14px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);z-index:2}
@media(max-width:560px){
 .classic{--fs-h2:19px;--fs-h1:24px}
 .classic .slider{margin-top:12px;border-radius:10px}
 .classic .card h3{font-size:15px}
 .classic .cgo-p b{font-size:17px}
 .classic .pd-pricebar b,.classic #tprice{font-size:22px}
 .classic .mbar .btn{height:46px;font-size:15px}
}
.classic .chip-opt.out span{border-style:dashed}
.classic .chip-opt.out b{color:#A0A8BE}
.classic .chip-opt.out em{color:var(--sale)}