/* CloudPOS modern layer — loaded after app.css. Palette: deep violet + electric accent. */
:root{
  --cp-ink:#1b0b3d; --cp-deep:#271151; --cp-violet:#6b45d2; --cp-violet-2:#8b5cf6;
  --cp-accent:#22d3ee; --cp-soft:#f6f3ff; --cp-line:#e7e0f7; --cp-radius:18px;
  --cp-shadow:0 10px 30px -12px rgba(39,17,81,.28);
}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--cp-violet);color:#fff}
:focus-visible{outline:3px solid rgba(107,69,210,.55);outline-offset:2px;border-radius:6px}

/* header: glassy sticky bar */
header{backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 1px 0 rgba(39,17,81,.06),0 8px 24px -16px rgba(39,17,81,.25)}
header a[href="/book-a-demo/"]{background-image:linear-gradient(135deg,var(--cp-deep),var(--cp-violet))!important;transition:transform .2s,box-shadow .2s}
header a[href="/book-a-demo/"]:hover{transform:translateY(-1px)}

/* general polish: rounder, softer, livelier */
main img{border-radius:var(--cp-radius)}
main [class*="rounded-"][class*="shadow"],main .shadow-lg,main .shadow-md{transition:transform .25s ease,box-shadow .25s ease}
main [class*="rounded-"][class*="shadow"]:hover{transform:translateY(-3px);box-shadow:var(--cp-shadow)}
main a[class*="rounded-full"]{transition:transform .2s,box-shadow .2s,background-color .2s}
main a[class*="rounded-full"]:hover{transform:translateY(-1px)}

/* footer: dark violet gradient with a soft glow (overrides the old background image) */
footer{background-image:radial-gradient(900px 380px at 85% -10%,rgba(139,92,246,.35),transparent 60%),radial-gradient(700px 320px at 0% 110%,rgba(34,211,238,.14),transparent 60%),linear-gradient(160deg,#1b0b3d 0%,#2a1160 55%,#1b0b3d 100%)!important;color:#e9e4f7}
footer::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--cp-violet),var(--cp-accent),var(--cp-violet-2))}
footer h3{color:#fff;letter-spacing:.2px;position:relative;padding-bottom:12px}
footer h3::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--cp-accent),var(--cp-violet-2))}
footer a{color:rgba(255,255,255,.82);transition:color .2s,transform .2s}
footer a:hover{color:var(--cp-accent)!important}
footer ul li a:hover{transform:translateX(3px);display:inline-block}
footer p,footer .text-white\/90{color:rgba(255,255,255,.8)!important}
footer .bg-\[\#6b45d2\]{background:linear-gradient(135deg,var(--cp-violet),var(--cp-violet-2))!important;box-shadow:0 6px 16px -6px rgba(139,92,246,.7)}
footer a.bg-\[\#6b45d2\]:hover{background:var(--cp-accent)!important;color:var(--cp-ink)!important;transform:translateY(-2px)}

/* forms */
.cp-form{border:1px solid var(--cp-line);border-radius:24px;box-shadow:var(--cp-shadow);background:linear-gradient(180deg,#fff,#fbf9ff)}
.cp-form label{font-size:13px;letter-spacing:.2px;text-transform:uppercase;color:#5b4a86}
.cp-form input,.cp-form textarea,.cp-form select{background:#fff;border:1.5px solid var(--cp-line);transition:border-color .2s,box-shadow .2s}
.cp-form button[type=submit]{background-image:linear-gradient(135deg,var(--cp-deep),var(--cp-violet));box-shadow:0 10px 22px -10px rgba(107,69,210,.8);transition:transform .2s,box-shadow .2s,opacity .2s}
.cp-form button[type=submit]:hover{transform:translateY(-2px)}
.cp-form button[type=submit]:disabled{opacity:.65;cursor:progress;transform:none}
.cp-form .cp-status{display:none;margin:0 0 16px;padding:12px 16px;border-radius:12px;font-weight:600;font-size:14px}
.cp-form .cp-status.show{display:block;animation:cpIn .3s ease}
.cp-form .cp-status.ok{background:#e8f8ee;color:#14663a;border:1px solid #b7e6c9}
.cp-form .cp-status.bad{background:#fdeceb;color:#a1221a;border:1px solid #f4c3c0}
.cp-form input[aria-invalid],.cp-form .err ~ input{border-color:#c0262d}
@keyframes cpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* status box for AJAX forms outside .cp-form (CMS-authored forms) */
.cp-status{display:none;margin:0 0 16px;padding:12px 16px;border-radius:12px;font-weight:600;font-size:14px}
.cp-status.show{display:block;animation:cpIn .3s ease}
.cp-status.ok{background:#e8f8ee;color:#14663a;border:1px solid #b7e6c9}
.cp-status.bad{background:#fdeceb;color:#a1221a;border:1px solid #f4c3c0}
form .err{color:#c0262d;font-size:13px;margin-top:4px}

.cp-toast{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:100;max-width:min(92vw,520px);background:#14663a;color:#fff;font-weight:600;padding:14px 22px;border-radius:14px;box-shadow:0 18px 40px -14px rgba(20,102,58,.6);animation:cpIn .3s ease;transition:opacity .4s}
.cp-toast.out{opacity:0}