/* Messenger + order stepper — shared by the site (account) and wp-admin (order screen). Self-contained colors. */
.cx,.stepper{--cx-ink:#0f1330;--cx-mut:#737a95;--cx-line:#e8eaf4;--cx-bg:#f4f6fc;--cx-blue:#2f45ff;--cx-grad:linear-gradient(135deg,#2f45ff,#7b5cff);font-family:inherit}
.cx{display:flex;flex-direction:column;height:620px;max-height:78vh;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(15,19,48,.04),0 16px 40px -24px rgba(15,19,48,.3);direction:rtl}
.cx-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--cx-line);background:linear-gradient(180deg,#fff,#fafbff)}
.cx-av{width:46px;height:46px;border-radius:15px;background:var(--cx-grad);color:#fff;display:grid;place-items:center;font-weight:900;font-size:18px;flex-shrink:0;box-shadow:0 10px 22px -12px rgba(47,69,255,.8)}
.cx-head>div{flex:1;min-width:0}
.cx-head b{display:block;font-size:16px;font-weight:800;color:var(--cx-ink)}
.cx-head small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--cx-mut)}
.cx-head small i{width:8px;height:8px;border-radius:50%;background:#17a06f;box-shadow:0 0 0 3px rgba(23,160,111,.18)}
.cx-no{font-size:12px;font-weight:700;color:var(--cx-blue);background:#eef1ff;border-radius:999px;padding:4px 12px;direction:ltr}
.cx-list{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:6px;background:var(--cx-bg);background-image:radial-gradient(rgba(47,69,255,.06) 1px,transparent 1.2px);background-size:22px 22px;scroll-behavior:smooth}
.cx-list::-webkit-scrollbar{width:6px}.cx-list::-webkit-scrollbar-thumb{background:#d6d9e8;border-radius:6px}
.cx-day{display:flex;justify-content:center;margin:10px 0 6px;position:sticky;top:0;z-index:1}
.cx-day span{font-size:12px;font-weight:700;color:var(--cx-mut);background:rgba(255,255,255,.9);backdrop-filter:blur(6px);padding:4px 14px;border-radius:999px;box-shadow:0 2px 8px -4px rgba(15,19,48,.2)}
.cx-sys{align-self:center;display:inline-flex;align-items:center;gap:6px;margin:6px 0;font-size:12.5px;color:#4a5170;background:#e9ecfb;padding:6px 14px;border-radius:999px}
.cx-sys time{color:var(--cx-mut);font-size:11px;margin-inline-start:4px}
.cx-msg{display:flex;animation:cxin .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes cxin{from{opacity:0;transform:translateY(6px)}}
.cx-msg.me{justify-content:flex-start}
.cx-msg.them{justify-content:flex-end}
.cx-b{position:relative;max-width:min(78%,520px);padding:10px 14px 8px;border-radius:18px;font-size:14.5px;line-height:1.95;box-shadow:0 1px 2px rgba(15,19,48,.06)}
.cx-b p{margin:0;white-space:pre-wrap;word-wrap:break-word}
.me .cx-b{background:var(--cx-grad);color:#fff;border-start-start-radius:6px}
.them .cx-b{background:#fff;color:var(--cx-ink);border-start-end-radius:6px}
.me .cx-b::before,.them .cx-b::before{content:"";position:absolute;top:0;width:12px;height:14px}
.me .cx-b::before{right:-6px;background:#2f45ff;clip-path:polygon(0 0,100% 0,0 100%)}
.them .cx-b::before{left:-6px;background:#fff;clip-path:polygon(0 0,100% 0,100% 100%)}
.cx-who{display:block;font-size:12px;font-weight:800;color:var(--cx-blue);margin-bottom:2px}
.cx-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;font-size:11px;opacity:.75}
.cx-meta time{font-feature-settings:"tnum"}
.cx-file{display:flex;align-items:center;gap:10px;margin:6px 0 2px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.16);color:inherit;text-decoration:none;min-width:220px;transition:background .2s}
.them .cx-file{background:var(--cx-bg)}
.cx-file:hover{background:rgba(255,255,255,.26)}.them .cx-file:hover{background:#e9ecfb}
.cx-file .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.22);flex-shrink:0}
.them .cx-file .ic{background:#fff;color:var(--cx-blue)}
.cx-file b{display:block;font-size:13px;font-weight:700;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-file small{font-size:11.5px;opacity:.8}
.cx-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--cx-mut);font-size:14px}
.cx-empty svg{color:#9aa6ea}.cx-empty b{color:var(--cx-ink);font-size:16px}
.cx-form{display:flex;align-items:flex-end;gap:10px;padding:12px 14px;border-top:1px solid var(--cx-line);background:#fff}
.cx-attach,.cx-send{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;flex-shrink:0;cursor:pointer;border:0;transition:transform .25s,background .25s,color .25s}
.cx-attach{background:var(--cx-bg);color:var(--cx-mut)}
.cx-attach:hover{color:var(--cx-blue);background:#eef1ff;transform:rotate(-12deg)}
.cx-send{background:var(--cx-grad);color:#fff;box-shadow:0 12px 24px -12px rgba(47,69,255,.9)}
.cx-send:hover{transform:translateY(-2px)}
.cx-send svg{transform:scaleX(-1)}
.cx-send.is-busy{opacity:.55;pointer-events:none}
.cx-input{flex:1;min-width:0;background:var(--cx-bg);border-radius:16px;padding:4px;border:1.5px solid transparent;transition:border-color .2s,background .2s}
.cx-input:focus-within{border-color:#c9d1ff;background:#fff}
.cx-input textarea{display:block;width:100%;min-height:38px;max-height:160px;resize:none;border:0;background:transparent;padding:8px 10px;font:inherit;font-size:14.5px;line-height:1.8;color:var(--cx-ink);outline:0;box-shadow:none}
.cx-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 4px 4px;padding:6px 10px;border-radius:10px;background:#eef1ff;color:var(--cx-blue);font-size:12.5px;font-weight:600}
.cx-chip button{border:0;background:none;color:inherit;font-size:18px;line-height:1;cursor:pointer}
.cx-err{margin:0;padding:8px 16px 12px;color:#d33c3c;font-size:13px;background:#fff}

/* ---------- order stepper ---------- */
.stepper{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;direction:rtl}
.stepper-line{position:absolute;top:26px;inset-inline:12.5%;height:4px;border-radius:4px;background:var(--cx-line)}
.stepper-line i{position:absolute;inset-block:0;right:0;width:var(--p);border-radius:inherit;background:linear-gradient(90deg,#7b5cff,#2f45ff);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.sp-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.sp-dot{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:#fff;color:#b3b8cc;border:2px solid var(--cx-line);transition:all .4s}
.sp-step b{font-size:14px;font-weight:800;color:#a3a8bb}
.sp-step small{font-size:12px;color:var(--cx-mut)}
.sp-step.done .sp-dot{background:var(--cx-grad);border-color:transparent;color:#fff}
.sp-step.now .sp-dot{background:#fff;border-color:var(--cx-blue);color:var(--cx-blue);box-shadow:0 0 0 6px #eef1ff;animation:sppulse 2s infinite}
.sp-step.done b,.sp-step.now b{color:var(--cx-ink)}
@keyframes sppulse{50%{box-shadow:0 0 0 10px rgba(238,241,255,.4)}}
.stepper.is-failed .sp-step.now .sp-dot{border-color:#d33c3c;color:#d33c3c;box-shadow:0 0 0 6px #fdecec;animation:none}
.stepper.is-compact .stepper-line{top:15px;height:3px}
.stepper.is-compact .sp-dot{width:32px;height:32px;border-radius:11px;border-width:1.5px}
.stepper.is-compact .sp-dot svg{width:15px;height:15px}
.stepper.is-compact .sp-step b{font-size:11.5px;font-weight:700}
@media (max-width:640px){.cx{height:70vh;border-radius:20px}.cx-b{max-width:88%}.sp-step small{display:none}.sp-dot{width:42px;height:42px;border-radius:14px}.stepper-line{top:20px}.sp-step b{font-size:12px}}
/* wp-admin resets */
.cx .cx-input textarea{min-height:38px!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:8px 10px!important;margin:0}
.cx .cx-attach,.cx .cx-send{padding:0;margin:0}
.cx .cx-attach input{display:none}
.cx h1,.cx h2,.cx p{margin:0}

/* live: new bubbles slide in, pending (optimistic) bubble is dimmed */
.cx-msg.cx-in{animation:cxin .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes cxin{from{opacity:0;transform:translateY(8px) scale(.98)}}
.cx-msg.cx-pending{opacity:.6}
.cx-pending .cx-tick{letter-spacing:1px;font-style:normal}

/* telegram-style ticks: one check = sent, two = seen, clock = sending */
.cx-meta{opacity:1}
.cx-meta time{opacity:.75}
.cx-tick{position:relative;display:inline-block;width:19px;height:12px;font-style:normal;flex-shrink:0}
.cx-tick>i{position:absolute;top:-1px;right:5px;width:5.5px;height:10.5px;border:solid currentColor;border-width:0 2px 2px 0;border-radius:0 0 1px 0;transform:rotate(45deg);animation:tk .3s ease-out both}
.cx-tick.seen>i:first-child{right:10px}
.cx-tick.seen>i+i{right:4px;animation-delay:.08s}
.cx-tick:not(.seen){opacity:.8}
@keyframes tk{from{opacity:0;transform:rotate(45deg) scale(.4)}}
.cx-tick.cx-clock{width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%;opacity:.8}
.cx-clock::before,.cx-clock::after{content:"";position:absolute;left:50%;top:50%;width:1.5px;margin-left:-.75px;background:currentColor;transform-origin:50% 0;border-radius:1px}
.cx-clock::before{height:3.5px;transform:rotate(180deg)}
.cx-clock::after{height:3px;animation:clk 1.2s linear infinite}
@keyframes clk{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}

/* secure access vault */
.cx-key{color:var(--cx-blue)}
.cx-vault{display:flex;flex-direction:column;gap:12px;padding:14px;border-top:1px solid var(--cx-line);background:linear-gradient(180deg,#f7f8ff,#fff);animation:cxin .3s both}
.cx-vault-h{display:flex;align-items:center;gap:10px}
.cx-vault-h>div{flex:1}
.cx-vault-h b{display:block;font-size:14px;font-weight:800;color:var(--cx-ink)}
.cx-vault-h small{font-size:12px;color:var(--cx-mut)}
.cx-lock{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;color:#fff;background:linear-gradient(135deg,#18b37e,#12d6a0);box-shadow:0 10px 20px -10px #18b37e}
.cx-x{width:32px;height:32px;border:0;border-radius:10px;background:var(--cx-bg);font-size:20px;cursor:pointer;color:var(--cx-mut)}
.cx-types{display:flex;gap:6px;flex-wrap:wrap}
.cx-types button{height:34px;padding-inline:12px;border-radius:10px;border:1px solid var(--cx-line);background:#fff;font:inherit;font-size:12.5px;font-weight:700;color:var(--cx-mut);cursor:pointer}
.cx-types button.on{background:var(--cx-ink);border-color:var(--cx-ink);color:#fff}
.cx-vf{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cx-vf label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--cx-ink)}
.cx-vf .in{width:100%;height:42px;border-radius:12px;border:1.5px solid var(--cx-line);background:#fff;padding-inline:12px;font:inherit;font-size:13.5px}
.cx-vf .pw{position:relative;display:block}
.cx-vf .pw .in{padding-left:44px}
.cx-vf .pw button{position:absolute;left:4px;top:50%;margin-top:-17px;width:34px;height:34px;border:0;border-radius:10px;background:none;color:var(--cx-mut);display:grid;place-items:center;cursor:pointer}
.cx-vault-send{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:42px;padding-inline:16px;border:0;border-radius:13px;background:linear-gradient(135deg,#18b37e,#12d6a0);color:#fff;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;box-shadow:0 12px 24px -12px #18b37e}
.cx-vault-send.is-busy{opacity:.6;pointer-events:none}
.cx-vault-msg{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cx-vault-msg>div{flex:1;min-width:160px}
.cx-vault-msg b{display:block;font-size:13.5px}
.cx-vault-msg small{display:block;font-size:11.5px;opacity:.8}
.me .cx-vault-msg .cx-lock{background:rgba(255,255,255,.2);box-shadow:none}
.cx-vault-msg .cx-meta{width:100%}
.cx-reveal{display:inline-flex;align-items:center;gap:6px;margin-top:8px;height:32px;padding-inline:12px;border:0;border-radius:10px;background:var(--cx-bg);color:var(--cx-blue);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.cx-secret{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:#0f1330;color:#dfe3ff;font:12.5px/1.9 Consolas,monospace;direction:ltr;text-align:left;white-space:pre-wrap;user-select:all}