/* Shared demo runtime styles — themed per site via --demo-* variables set on */ :root{ --demo-acc:#e8b05c; --demo-acc-ink:#1a1207; --demo-bg:#121009; --demo-panel:#1c1712; --demo-ink:#f4efe6; --demo-muted:#a99b86; --demo-line:#2f271e; --demo-r:18px; --demo-font:inherit; } /* concierge chat */ .chat-fab{position:fixed;bottom:22px;right:22px;z-index:80;width:56px;height:56px;border-radius:999px;background:var(--demo-acc);color:var(--demo-acc-ink);border:0;cursor:pointer;display:grid;place-items:center;font-size:24px;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:.3s} .chat-fab:hover{transform:scale(1.07)} .chat-fab .ping{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:999px;background:#4ade80;border:2px solid var(--demo-bg)} .chat-box{position:fixed;bottom:90px;right:22px;z-index:80;width:min(360px,calc(100vw - 32px));background:var(--demo-panel);border:1px solid var(--demo-line);border-radius:var(--demo-r);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55);display:none;flex-direction:column;color:var(--demo-ink);font-family:var(--demo-font)} .chat-box.open{display:flex;animation:demo-fadein .3s ease} @keyframes demo-fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .chat-head{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--demo-line)} .chat-head .av{width:36px;height:36px;border-radius:999px;background:var(--demo-acc);display:grid;place-items:center;font-weight:800;color:var(--demo-acc-ink);font-size:14px;flex-shrink:0} .chat-head .nm{font-weight:700;font-size:14px} .chat-head .st{font-size:11.5px;color:#4ade80;display:flex;align-items:center;gap:5px} .chat-head .st::before{content:"";width:6px;height:6px;border-radius:999px;background:#4ade80} .chat-log{padding:16px;display:flex;flex-direction:column;gap:10px;max-height:320px;overflow-y:auto} .chat-log .msg{max-width:85%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.5} .chat-log .msg.bot{background:rgba(255,255,255,.06);border:1px solid var(--demo-line);border-bottom-left-radius:4px;align-self:flex-start} .chat-log .msg.user{background:var(--demo-acc);color:var(--demo-acc-ink);border-bottom-right-radius:4px;align-self:flex-end} .chat-log .msg.typing span{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--demo-muted);margin-right:3px;animation:demo-blink 1s infinite} .chat-log .msg.typing span:nth-child(2){animation-delay:.2s}.chat-log .msg.typing span:nth-child(3){animation-delay:.4s} @keyframes demo-blink{0%,80%,100%{opacity:.25}40%{opacity:1}} .chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px} .chat-quick button{background:none;border:1px solid var(--demo-line);color:var(--demo-muted);font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.2s;font-family:inherit} .chat-quick button:hover{border-color:var(--demo-acc);color:var(--demo-acc)} /* social-proof toast */ .demo-toast{position:fixed;bottom:22px;left:22px;z-index:70;display:flex;align-items:center;gap:12px;background:var(--demo-panel);border:1px solid var(--demo-line);border-radius:16px;padding:13px 18px;font-size:13px;color:var(--demo-muted);box-shadow:0 16px 40px rgba(0,0,0,.5);transform:translateY(140%);opacity:0;transition:.5s cubic-bezier(.2,.9,.3,1);max-width:min(340px,calc(100vw - 44px));font-family:var(--demo-font)} .demo-toast.show{transform:none;opacity:1} .demo-toast .dot{width:9px;height:9px;border-radius:999px;background:#4ade80;flex-shrink:0;box-shadow:0 0 10px #4ade80} .demo-toast b{color:var(--demo-ink);font-weight:600} /* multi-step journey flow */ .form-shell{max-width:720px;margin:0 auto;background:var(--demo-panel);border:1px solid var(--demo-line);border-radius:calc(var(--demo-r) + 6px);padding:40px} .progress{display:flex;gap:8px;margin-bottom:32px} .progress .p{flex:1;height:4px;border-radius:999px;background:var(--demo-line);transition:.4s} .progress .p.on{background:var(--demo-acc)} .fstep{display:none} .fstep.on{display:block;animation:demo-fadein .45s ease} .fstep h3{font-size:22px;margin-bottom:6px} .fstep .sub{color:var(--demo-muted);font-size:14px;margin-bottom:26px} .field{margin-bottom:18px} .field label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--demo-muted);margin-bottom:8px} .field input,.field select,.field textarea{width:100%;background:rgba(0,0,0,.28);border:1px solid var(--demo-line);border-radius:12px;padding:13px 16px;color:var(--demo-ink);font-family:inherit;font-size:15px;transition:.25s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--demo-acc)} .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px} .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .opt{border:1px solid var(--demo-line);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--demo-muted);cursor:pointer;transition:.2s;text-align:left;background:rgba(0,0,0,.18);font-family:inherit} .opt:hover{border-color:var(--demo-acc)} .opt.sel{border-color:var(--demo-acc);color:var(--demo-ink);background:color-mix(in srgb,var(--demo-acc) 12%,transparent);box-shadow:0 0 0 1px var(--demo-acc)} .fnav{display:flex;justify-content:space-between;margin-top:28px;gap:12px} .confirm{text-align:center;padding:20px 0} .confirm .tick{width:74px;height:74px;border-radius:999px;background:var(--demo-acc);display:grid;place-items:center;font-size:34px;color:var(--demo-acc-ink);margin:0 auto 22px;animation:demo-pop .5s cubic-bezier(.2,1.6,.4,1)} @keyframes demo-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}} .confirm h3{font-size:26px;margin-bottom:10px} .confirm p{color:var(--demo-muted);font-size:15px;max-width:44ch;margin:0 auto 8px} .confirm .sum{margin:22px auto 0;max-width:440px;text-align:left;border:1px solid var(--demo-line);border-radius:14px;padding:18px 22px;background:rgba(0,0,0,.22)} .confirm .sum div{display:flex;justify-content:space-between;gap:18px;padding:7px 0;font-size:13.5px;color:var(--demo-muted);border-bottom:1px solid var(--demo-line)} .confirm .sum div:last-child{border:0} .confirm .sum b{color:var(--demo-ink);font-weight:600;text-align:right} .err{color:#f87171;font-size:13px;margin-top:10px;display:none} /* cart + checkout */ [data-add]{cursor:pointer} .cart-bar{position:fixed;bottom:22px;left:50%;transform:translate(-50%,140%);z-index:75;display:flex;align-items:center;gap:16px;background:var(--demo-panel);border:1px solid var(--demo-acc);border-radius:999px;padding:10px 10px 10px 22px;box-shadow:0 18px 50px rgba(0,0,0,.55);transition:.45s cubic-bezier(.2,.9,.3,1);color:var(--demo-ink);font-family:var(--demo-font);white-space:nowrap} .cart-bar.show{transform:translate(-50%,0)} .cart-bar .ct{font-size:14px;color:var(--demo-muted)} .cart-bar .ct b{color:var(--demo-ink)} .cart-bar .go{background:var(--demo-acc);color:var(--demo-acc-ink);border:0;border-radius:999px;padding:11px 22px;font-weight:700;font-size:13.5px;cursor:pointer;transition:.2s;font-family:inherit} .cart-bar .go:hover{filter:brightness(1.1)} .cart-modal{position:fixed;inset:0;z-index:90;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:18px} .cart-modal.open{display:flex} @media(min-width:640px){.cart-modal{align-items:center}} .cart-panel{width:min(520px,100%);max-height:88vh;overflow-y:auto;background:var(--demo-panel);border:1px solid var(--demo-line);border-radius:calc(var(--demo-r) + 6px);padding:30px;color:var(--demo-ink);animation:demo-fadein .3s ease;font-family:var(--demo-font)} .cart-panel h3{font-size:22px;margin-bottom:18px} .cart-lines{margin-bottom:18px} .cart-line{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--demo-line);font-size:14px} .cart-line .qty{display:flex;align-items:center;gap:10px} .cart-line .qty button{width:26px;height:26px;border-radius:999px;border:1px solid var(--demo-line);background:none;color:var(--demo-ink);cursor:pointer;font-size:14px;line-height:1} .cart-line .qty button:hover{border-color:var(--demo-acc);color:var(--demo-acc)} .cart-line .amt{color:var(--demo-muted);white-space:nowrap} .cart-total{display:flex;justify-content:space-between;font-weight:700;font-size:16px;padding:14px 0 20px} .cart-x{position:absolute;top:0;right:0;padding:14px 18px;background:none;border:0;color:var(--demo-muted);font-size:22px;cursor:pointer} .added-pop{position:fixed;z-index:85;background:var(--demo-acc);color:var(--demo-acc-ink);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;pointer-events:none;animation:demo-rise .8s ease forwards} @keyframes demo-rise{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-34px)}} @media(max-width:640px){ .form-shell{padding:26px 20px} .opts,.slots{grid-template-columns:1fr 1fr} .cart-bar{max-width:calc(100vw - 24px);padding-left:16px;gap:10px} }