/* Customer side of the Electa app (cx.php). Phone first. */
:root{--cx-p:#4361ee;--cx-pd:#3651c7;--cx-soft:#eef1ff;--cx-bg:#f3f6f9;--cx-card:#fff;--cx-text:#2a3042;--cx-mut:#7b8497;--cx-line:#e9ecf1;--cx-ok:#1fa35c;--cx-warn:#f59e0b;--cx-bad:#e5484d;--cx-gold:#f5a524}
*{box-sizing:border-box}
body.cx{margin:0;background:var(--cx-bg);color:var(--cx-text);font-family:'Hind Siliguri',system-ui,sans-serif;font-size:15px;-webkit-tap-highlight-color:transparent}
.cx-wrap{max-width:560px;margin:0 auto;min-height:100vh;padding:0 14px 96px}
.cx-top{position:sticky;top:0;z-index:20;margin:0 -14px;padding:10px 14px;background:rgba(243,246,249,.94);backdrop-filter:blur(8px);display:flex;align-items:center;gap:10px}
.cx-top img{height:28px}.cx-top .cx-t{font-weight:700;font-size:17px;flex:1;line-height:1.1}
.cx-ic{position:relative;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--cx-line);display:grid;place-items:center;font-size:18px;text-decoration:none;color:inherit}
.cx-ic b{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--cx-bad);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 4px}
.cx-hello{margin:6px 0 12px}.cx-hello h1{font-size:21px;margin:0 0 2px}.cx-hello p{margin:0;color:var(--cx-mut);font-size:13.5px}
.cx-card{background:var(--cx-card);border:1px solid var(--cx-line);border-radius:16px;padding:14px;margin-bottom:12px}
.cx-h{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}.cx-h h2{font-size:16.5px;margin:0}.cx-h a{font-size:13px;color:var(--cx-p);text-decoration:none;font-weight:600}
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:12px 16px;font:600 15px 'Hind Siliguri',sans-serif;background:var(--cx-p);color:#fff;cursor:pointer;text-decoration:none}
.cx-btn.block{display:flex;width:100%}.cx-btn.ghost{background:var(--cx-soft);color:var(--cx-pd)}.cx-btn.sm{padding:8px 12px;font-size:13.5px;border-radius:10px}.cx-btn.gold{background:linear-gradient(135deg,#ffb020,#ff7a1a)}.cx-btn.red{background:var(--cx-bad)}
.cx-hero{background:linear-gradient(135deg,#4361ee,#7a5cff);color:#fff;border:0;display:flex;gap:12px;align-items:center}
.cx-hero h3{margin:0 0 3px;font-size:17px}.cx-hero p{margin:0 0 10px;font-size:13px;opacity:.9}.cx-hero .cx-btn{background:#fff;color:var(--cx-pd)}.cx-hero .big{font-size:44px;line-height:1}
.cx-lucky{background:linear-gradient(135deg,#ffb020,#ff6a3d);color:#fff;border:0;display:flex;gap:12px;align-items:center;text-decoration:none}
.cx-lucky .big{font-size:38px}.cx-lucky b{display:block;font-size:16px}.cx-lucky small{opacity:.92;font-size:12.5px}
.cx-prod{display:flex;gap:12px}.cx-prod .im{width:70px;height:70px;border-radius:12px;background:#f1f3f8 center/contain no-repeat;flex:none;border:1px solid var(--cx-line)}
.cx-prod h3{margin:0;font-size:15.5px;line-height:1.25}.cx-prod .sub{color:var(--cx-mut);font-size:12.5px;margin:1px 0 6px}
.cx-bar{height:8px;border-radius:5px;background:#e9ecf4;overflow:hidden}.cx-bar i{display:block;height:100%;border-radius:5px;background:var(--cx-ok)}.cx-bar.w i{background:var(--cx-warn)}.cx-bar.x i{background:var(--cx-bad)}
.cx-wl{display:flex;justify-content:space-between;font-size:12.5px;margin-top:4px;color:var(--cx-mut)}.cx-wl b{color:var(--cx-text)}
.cx-chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;background:var(--cx-soft);color:var(--cx-pd)}.cx-chip.ok{background:#e4f8ec;color:#137a43}.cx-chip.bad{background:#fde9e5;color:#c0392b}.cx-chip.warn{background:#fff3d6;color:#9a6700}
.cx-acts{display:flex;gap:8px;margin-top:10px}.cx-acts .cx-btn{flex:1}
.cx-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx-pc{background:#fff;border:1px solid var(--cx-line);border-radius:14px;padding:10px;text-align:left;cursor:pointer;font:inherit;color:inherit;display:block;width:100%}
.cx-pc .im{aspect-ratio:1/1;border-radius:10px;background:#f4f6fa center/contain no-repeat;margin-bottom:8px}.cx-pc b{display:block;font-size:14px;line-height:1.25;min-height:36px}.cx-pc .pr{color:var(--cx-p);font-weight:700;font-size:15px;margin-top:3px}.cx-pc small{color:var(--cx-mut);font-size:12px}
.cx-empty{text-align:center;color:var(--cx-mut);padding:26px 10px}.cx-empty .big{font-size:42px}
.cx-stat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.cx-stat .cx-card{margin:0;text-align:center;padding:12px 8px}.cx-stat b{font-size:22px;display:block}.cx-stat small{color:var(--cx-mut)}
.cx-row{display:flex;justify-content:space-between;gap:10px;align-items:center}.cx-row+.cx-row{margin-top:8px}
.cx-ord{width:100%;text-align:left;font:inherit;color:inherit;background:#fff;border:1px solid var(--cx-line);border-radius:14px;padding:12px;margin-bottom:8px;display:block;cursor:pointer}
.cx-ord .n{font-weight:700}.cx-ord .d{color:var(--cx-mut);font-size:12.5px}.cx-ord .it{color:var(--cx-text);font-size:13px;margin-top:5px}
.cx-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--cx-line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));display:flex;justify-content:center}
.cx-nav-in{display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:560px;align-items:end}
.cx-nav a,.cx-nav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:1px;font:500 11.5px 'Hind Siliguri',sans-serif;color:var(--cx-mut);text-decoration:none;padding:4px 0;cursor:pointer;position:relative}
.cx-nav .i{font-size:21px;line-height:1.1}.cx-nav .on{color:var(--cx-p);font-weight:700}
.cx-nav .scan .i{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#4361ee,#7a5cff);color:#fff;display:grid;place-items:center;margin-top:-26px;box-shadow:0 6px 16px rgba(67,97,238,.4);font-size:24px}.cx-nav .scan{color:var(--cx-pd);font-weight:700}
.cx-m{position:fixed;inset:0;z-index:60;background:rgba(20,24,38,.55);display:none;align-items:flex-end;justify-content:center}.cx-m.open{display:flex}
.cx-mb{background:#fff;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:cxup .22s ease-out}
@keyframes cxup{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.cx-mb h3{margin:0 0 4px;font-size:18px}.cx-x{float:right;border:0;background:#f1f3f8;width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer}
.cx label{display:block;margin:10px 0 4px;font-size:13px;font-weight:600;color:var(--cx-mut)}
.cx input[type=text],.cx input[type=tel],.cx input[type=password],.cx textarea,.cx select{width:100%;padding:12px;border:1px solid var(--cx-line);border-radius:11px;font:15px 'Hind Siliguri',sans-serif;background:#fff;color:var(--cx-text)}
.cx textarea{min-height:90px;resize:vertical}
.cx-flash{padding:11px 13px;border-radius:12px;margin:10px 0;font-size:14px}.cx-flash.ok{background:#e4f8ec;color:#137a43}.cx-flash.err{background:#fde9e5;color:#c0392b}
.cx-scan{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:1/1;margin:10px 0}.cx-scan video{width:100%;height:100%;object-fit:cover}
.cx-scan:after{content:'';position:absolute;inset:18%;border:3px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.cx-chat{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;padding:4px 2px}.cx-b{max-width:82%;padding:9px 12px;border-radius:14px;font-size:14.5px;white-space:pre-wrap;word-break:break-word}
.cx-b.me{align-self:flex-end;background:var(--cx-p);color:#fff;border-bottom-right-radius:4px}.cx-b.ag{align-self:flex-start;background:#fff;border:1px solid var(--cx-line);border-bottom-left-radius:4px}.cx-b small{display:block;opacity:.7;font-size:11px;margin-top:3px}
.cx-card3{position:relative;height:150px;border-radius:18px;background:linear-gradient(135deg,#ffb020,#ff6a3d);display:grid;place-items:center;color:#fff;overflow:hidden;margin:12px 0}
.cx-card3 .cv{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#c9cdd8,#c9cdd8 10px,#d9dce5 10px,#d9dce5 20px);display:grid;place-items:center;font-weight:700;color:#6b7387;font-size:17px;transition:opacity .6s,transform .6s;cursor:pointer}
.cx-card3.rev .cv{opacity:0;transform:scale(1.15);pointer-events:none}.cx-card3 .res{text-align:center;padding:8px}.cx-card3 .res .big{font-size:42px}.cx-card3 .res b{font-size:19px;display:block}
.cx-card3.lose{background:linear-gradient(135deg,#8a93a8,#5b6478)}
.cx-code{font:700 22px/1 ui-monospace,monospace;letter-spacing:2px;background:rgba(255,255,255,.2);border-radius:10px;padding:8px 12px;display:inline-block;margin-top:6px}
.cx-note{font-size:12.5px;color:var(--cx-mut)}
.cx-pgrid{display:grid;grid-template-columns:1fr;gap:6px}
@media(min-width:700px){.cx-m{align-items:center}.cx-mb{border-radius:20px}}
html,body{overscroll-behavior-y:contain}
/* v101: product page, near-shop, chat */
.cx-pc{text-decoration:none}.cx-back{display:inline-block;margin:2px 0 8px;font-weight:600;color:var(--cx-p);text-decoration:none}
.cx-gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;border-radius:16px;background:#fff;border:1px solid var(--cx-line);-webkit-overflow-scrolling:touch}
.cx-gs{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;background:#f4f6fa;display:flex;align-items:center;justify-content:center}.cx-gs img{max-width:100%;max-height:100%;object-fit:contain}
.cx-gh{text-align:center;font-size:12px;color:var(--cx-mut);margin:4px 0 10px}
.cx-near{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;margin-bottom:10px;background:var(--cx-soft)}.cx-near .big{font-size:30px}.cx-near b{display:block}.cx-near small{display:block;color:var(--cx-mut);font-size:12.5px}
.cx-rich{font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}.cx-rich img{max-width:100%}.cx-rich table{width:100%;border-collapse:collapse}.cx-rich td,.cx-rich th{border:1px solid var(--cx-line);padding:4px 6px}
.cx-vid{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}.cx-vid span{width:36px;height:36px;border-radius:50%;background:var(--cx-p);color:#fff;display:grid;place-items:center}
#cxMsgBody{font:inherit}

/* ---- support chat, WhatsApp-style ---- */
.wa{margin-top:12px;border-radius:16px;overflow:hidden;background:#efeae2;border:1px solid var(--cx-line);display:flex;flex-direction:column}
.wa-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#075e54;color:#fff}.wa-top b{display:block;font-size:16px;line-height:1.2}.wa-top span{display:block;font-size:12px;opacity:.85}
.wa-av{width:40px;height:40px;border-radius:50%;background:#fff;color:#075e54;display:grid;place-items:center;font:700 20px 'Hind Siliguri',sans-serif;flex:none}
.wa-body{height:calc(100vh - 335px);min-height:300px;max-height:none;padding:12px 10px;gap:4px;background-color:#efeae2;background-image:radial-gradient(rgba(0,0,0,.045) 1px,transparent 1px);background-size:14px 14px}
.wa-day{align-self:center;margin:6px 0}.wa-day span{background:#fff;color:#667781;font-size:12px;padding:3px 10px;border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa-empty{align-self:center;max-width:88%;background:#fff8c5;color:#54430b;font-size:13.5px;padding:8px 12px;border-radius:10px;text-align:center;margin:8px 0}
.wa-body .cx-b{max-width:84%;padding:6px 9px 4px;font-size:15px;line-height:1.35;border:0;box-shadow:0 1px 1px rgba(0,0,0,.13);color:#111b21;position:relative}
.wa-body .cx-b.me{background:#d9fdd3;color:#111b21;border-radius:10px 0 10px 10px;margin-top:3px}
.wa-body .cx-b.ag{background:#fff;border-radius:0 10px 10px 10px;margin-top:3px}
.wa-body .cx-b.bot{background:#fff}
.wa-body .cx-b .who{display:block;font-size:12.5px;font-weight:700;color:#06876f;margin-bottom:1px}
.wa-body .cx-b.bot .who{color:#8a5cf6}
.wa-body .cx-b a{color:#027eb5;word-break:break-all}
.wa-body .cx-b small{display:block;text-align:right;font-size:11px;color:#667781;opacity:1;margin-top:1px}.wa-body .cx-b .tick{font-style:normal;color:#53bdeb;letter-spacing:-2px}
.wa-form{display:flex;align-items:flex-end;gap:6px;padding:8px;background:#f0f2f5}
.wa-form textarea{flex:1;min-width:0;min-height:44px;height:44px;box-sizing:border-box;width:auto;margin:0;overflow-y:auto;resize:none;border:0;border-radius:22px;padding:11px 14px;font:15px 'Hind Siliguri',sans-serif;max-height:120px;background:#fff;outline:none;line-height:1.3}
.wa-send,.wa-mic{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;padding:0}
.wa-send{background:#00a884}.wa-mic{background:#fff;font-size:0}.wa-mic::before{content:'🎤';font-size:20px}.wa-mic.is-listening{background:#ffe3e3;animation:waPulse 1s infinite}.wa-mic.is-listening::before{content:'⏹'}
@keyframes waPulse{50%{box-shadow:0 0 0 6px rgba(229,72,77,.18)}}
.wa-note{margin:0;padding:0 12px 8px;background:#f0f2f5;font-size:12.5px;color:#667781;min-height:0}.wa-note:empty{display:none}
@media(prefers-reduced-motion:reduce){.wa-mic.is-listening{animation:none}}

/* full-screen chat */
.wa{position:fixed;inset:0;z-index:55;margin:0;border-radius:0;border:0;height:100vh;height:100dvh}
.wa-body{flex:1 1 auto;height:auto;min-height:0}
.wa-top{padding-top:calc(10px + env(safe-area-inset-top))}
.wa-back{color:#fff;font-size:24px;text-decoration:none;padding:0 4px 0 0;line-height:1}
.wa-dots{background:none;border:0;color:#fff;font-size:26px;line-height:1;padding:4px 8px;cursor:pointer}
.wa-panel{display:none;max-height:55vh;overflow:auto;background:#f3f6f9;padding:10px 12px;border-bottom:1px solid var(--cx-line)}.wa-panel.open{display:block}
.wa-form{padding-bottom:calc(8px + env(safe-area-inset-bottom))}