/*! Websetu Demo — © 2026 KHL. All rights reserved. Made by KHL. Unauthorised copying or resale is prohibited. */
/* 🌌 Neon night theme — dark background with cyan / magenta / green glow (body.neon).
   Website: Settings → Website design = Neon. POS / Admin / apps: Settings → "POS / Owner panel look". Fonts same rehte hain. */
body.neon {
  --bg: #060914; --card: #0d1426; --card2: #111a31; --ink: #eaf1ff; --muted: #93a1c6; --line: #1f2b4d; --soft: #141f3c;
  --cyan: #22e6ff; --mag: #ff2bd6; --lime: #3dff8f; --amber: #ffc53d; --violet: #8b6bff;
  --ok: #3dff8f; --warn: #ffc53d; --bad: #ff4d6d; --info: #4db8ff;
  --pink: #ff3fa4; --pink-d: #ff7cc4; --mint: #22e6ff; --mint-d: #0fb9d1; --lemon: #ffd23f; --grape: #8b6bff; --sky: #22e6ff;
  --shadow: 0 0 0 1px #ffffff08, 0 10px 30px rgba(0,0,0,.45);
  color: var(--ink); color-scheme: dark;
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(255,43,214,.20), transparent 60%),
    radial-gradient(800px 600px at 105% 10%, rgba(34,230,255,.18), transparent 60%),
    radial-gradient(700px 500px at 50% 115%, rgba(61,255,143,.12), transparent 60%),
    linear-gradient(180deg, #060914, #070b18 60%, #050811);
  background-attachment: fixed;
}
/* circuit dot grid (image jaisa) */
body.neon::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .55;
  background-image: radial-gradient(circle, rgba(34,230,255,.22) 1px, transparent 1.6px), linear-gradient(90deg, rgba(61,255,143,.05) 1px, transparent 1px), linear-gradient(rgba(255,43,214,.04) 1px, transparent 1px);
  background-size: 28px 28px, 140px 140px, 140px 140px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
}
body.neon a { color: inherit; }
body.neon .muted { color: var(--muted); }

/* surfaces */
body.neon .card, body.neon .kpi, body.neon .modal, body.neon .tbl-wrap, body.neon .sm-tile { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); }
body.neon .card { border-radius: 16px; }
body.neon .kpi .v { text-shadow: 0 0 18px rgba(34,230,255,.25); }
body.neon table.t th { background: #0b1222; color: var(--muted); border-bottom-color: var(--line); }
body.neon table.t td { border-bottom-color: var(--line); }
body.neon table.t tr:hover td { background: #121b33; }
body.neon .modal-bg { background: rgba(2,4,10,.72); backdrop-filter: blur(4px); }
body.neon .modal { box-shadow: 0 0 0 1px rgba(34,230,255,.18), 0 0 40px rgba(34,230,255,.12), 0 30px 80px rgba(0,0,0,.6); }
body.neon .modal-x { background: var(--soft); color: var(--ink); }
body.neon .toast { background: #121b33; border: 1px solid var(--cyan); box-shadow: 0 0 18px rgba(34,230,255,.35); }
body.neon .toast.bad { background: #2a0d18; border-color: var(--bad); box-shadow: 0 0 18px rgba(255,77,109,.35); }
body.neon hr { border-color: var(--line); }

/* inputs & buttons */
body.neon input, body.neon select, body.neon textarea { background: #0a1121; color: var(--ink); border-color: var(--line); }
body.neon input::placeholder, body.neon textarea::placeholder { color: #6c7899; }
body.neon input:focus, body.neon select:focus, body.neon textarea:focus { border-color: var(--cyan); outline: 2px solid rgba(34,230,255,.25); }
body.neon .btn { background: #101a31; color: var(--ink); border-color: #263561; box-shadow: none; }
body.neon .btn:hover { background: #16223f; border-color: var(--cyan); box-shadow: 0 0 14px rgba(34,230,255,.25); }
body.neon .btn.primary { background: linear-gradient(135deg, var(--mag), #ff4f9a 45%, #ff7a45); border-color: transparent; color: #fff; box-shadow: 0 0 18px rgba(255,43,214,.45), inset 0 1px 0 rgba(255,255,255,.3); text-shadow: 0 1px 0 rgba(0,0,0,.2); }
body.neon .btn.primary:hover { box-shadow: 0 0 26px rgba(255,43,214,.6), inset 0 1px 0 rgba(255,255,255,.3); filter: brightness(1.05); }
body.neon .btn.dark { background: linear-gradient(135deg, #0fb9d1, var(--cyan)); color: #04121a; border-color: transparent; box-shadow: 0 0 16px rgba(34,230,255,.4); }
body.neon .btn.danger { color: #ff7d93; }
body.neon .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
body.neon .btn:disabled { opacity: .45; box-shadow: none; }
body.neon .pill-tabs button { background: #0f1830; color: var(--ink); border-color: var(--line); box-shadow: none; }
body.neon .pill-tabs button.on { background: var(--cyan); color: #04121a; border-color: var(--cyan); box-shadow: 0 0 14px rgba(34,230,255,.5); }
body.neon .paymodes button { background: #0f1830; color: var(--ink); border-color: var(--line); box-shadow: none; }
body.neon .paymodes button.on { border-color: var(--mag); background: rgba(255,43,214,.12); color: #ff8ee6; box-shadow: 0 0 12px rgba(255,43,214,.35); }
body.neon .qty { border-color: var(--line); background: #0a1121; }
body.neon .qty button { background: #152043; color: var(--cyan); }

/* badges */
body.neon .badge { background: #1a2547; color: #c9d4f5; }
body.neon .badge.ok { background: rgba(61,255,143,.12); color: var(--lime); }
body.neon .badge.warn { background: rgba(255,197,61,.13); color: var(--amber); }
body.neon .badge.bad { background: rgba(255,77,109,.14); color: #ff8098; }
body.neon .badge.info { background: rgba(77,184,255,.14); color: #8fd0ff; }
body.neon .badge.brand { background: rgba(255,43,214,.14); color: #ff8ee6; }
body.neon .thumb { background: linear-gradient(135deg, #18234a, #0d1426); border-color: var(--line); }

/* admin */
body.neon .side { background: rgba(5,8,17,.92); border-right: 1px solid var(--line); backdrop-filter: blur(10px); }
body.neon .side nav a { color: #b8c3e6; }
body.neon .side nav a:hover { background: #121b33; }
body.neon .side nav a.on { background: linear-gradient(90deg, rgba(255,43,214,.85), rgba(34,230,255,.55)); color: #fff; box-shadow: 0 0 16px rgba(255,43,214,.35); }
body.neon .side select { background: #0d1426 !important; border-color: var(--line) !important; }
body.neon .bars .b i { background: linear-gradient(180deg, var(--cyan), var(--mag)); box-shadow: 0 0 10px rgba(34,230,255,.4); }
body.neon .logo { background: linear-gradient(135deg, var(--mag), var(--cyan)); box-shadow: 0 0 16px rgba(255,43,214,.5); }
body.neon .alert-dot { box-shadow: 0 0 10px rgba(255,77,109,.6); }

/* POS */
body.neon .pos-head, body.neon .pos-cats { background: rgba(9,14,28,.88); border-color: var(--line); backdrop-filter: blur(8px); }
body.neon .pos-cart { background: rgba(9,14,28,.92); border-color: var(--line); }
body.neon .cart-foot { background: #0a1121; border-color: var(--line); }
body.neon .cart-head { border-color: var(--line); }
body.neon .citem { border-color: var(--line); }
body.neon .ptile { background: linear-gradient(180deg, #111a31, #0c1325); border-color: var(--line); color: var(--ink); }
body.neon .ptile:hover { border-color: var(--cyan); box-shadow: 0 0 16px rgba(34,230,255,.3); }
body.neon .ptile .p { color: var(--cyan); }
body.neon .sumrow.total { border-color: var(--line); color: #fff; }

/* login */
body.neon .login-wrap { background: transparent; }
body.neon .pinpad button { background: #0f1830; color: var(--ink); border-color: var(--line); }
body.neon .pinpad button:hover { border-color: var(--cyan); box-shadow: 0 0 12px rgba(34,230,255,.3); }
body.neon .pindots i { border-color: var(--cyan); } body.neon .pindots i.f { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* hub (index) */
body.neon .hub-card { background: linear-gradient(180deg, rgba(17,26,49,.9), rgba(10,16,32,.9)); border: 1px solid var(--line); color: var(--ink); }
body.neon .hub-card:nth-child(3n+1):hover { border-color: var(--mag); box-shadow: 0 0 28px rgba(255,43,214,.35); }
body.neon .hub-card:nth-child(3n+2):hover { border-color: var(--cyan); box-shadow: 0 0 28px rgba(34,230,255,.35); }
body.neon .hub-card:nth-child(3n):hover { border-color: var(--lime); box-shadow: 0 0 28px rgba(61,255,143,.3); }
body.neon .hub h1 { background: linear-gradient(90deg, #fff, var(--cyan) 60%, var(--mag)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- customer website (neon + candy layout) ---------- */
body.neon.candy::before { opacity: .55; z-index: -1; }
body.neon .candy-blobs i { opacity: .35; filter: blur(2px) saturate(1.4); }
body.neon .sf-top { background: linear-gradient(90deg, #ff2bd6, #8b6bff 50%, #22e6ff); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
body.neon .sf-head { background: rgba(6,9,20,.78); border-bottom: 1px solid var(--line); box-shadow: 0 6px 30px rgba(0,0,0,.5); }
body.neon .sf-brand { color: #fff; }
body.neon .sf-search input { background: #0a1121; border-color: var(--line); color: var(--ink); }
body.neon .hero h1 { color: #fff; text-shadow: 0 0 30px rgba(34,230,255,.18); }
body.neon .hero h1 .grad { background: linear-gradient(90deg, var(--mag), var(--violet) 45%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255,43,214,.35)); }
body.neon .hero p { color: var(--muted); }
body.neon .hero .kick { background: rgba(34,230,255,.12); color: var(--cyan); border: 1px solid rgba(34,230,255,.35); }
body.neon .hero .chips span { background: #0d1426; border-color: var(--line); color: var(--ink); }
body.neon .hero-art .scoop { box-shadow: 0 0 0 3px rgba(34,230,255,.6), 0 0 40px rgba(34,230,255,.35), 0 0 90px rgba(255,43,214,.25); }
body.neon .banner { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 30px rgba(0,0,0,.4) !important; }
body.neon .catcard { color: var(--ink); }
body.neon .catcard .e { box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 0 22px var(--c2, #ff3fa4), 0 10px 20px rgba(0,0,0,.4) !important; }
body.neon .sec-h h2 { color: #fff; }
body.neon .sec-h h2::after { background: linear-gradient(90deg, var(--mag), var(--cyan)); height: 4px; border-radius: 4px; box-shadow: 0 0 10px var(--mag); }
body.neon .pcard { background: linear-gradient(180deg, #111a31, #0b1222); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 10px 26px rgba(0,0,0,.45); }
body.neon .pcard:hover { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(34,230,255,.4), 0 0 30px rgba(34,230,255,.28), 0 18px 34px rgba(0,0,0,.5); }
body.neon .pcard .thumb.lg { background: linear-gradient(135deg, #1a1440, #0d2236); }
body.neon .pcard .d { color: var(--muted); }
body.neon .pcard.off { opacity: .55; filter: grayscale(.6); }
body.neon .price { color: var(--cyan); text-shadow: 0 0 12px rgba(34,230,255,.4); }
body.neon .mrp { color: #6c7899; }
body.neon .off { background: rgba(61,255,143,.14); color: var(--lime); }
body.neon .thumb.xl { box-shadow: 0 0 0 1px var(--line), 0 0 40px rgba(34,230,255,.18); }
body.neon .drawer { background: #0a1020; color: var(--ink); border-left: 1px solid var(--line); }
body.neon .drawer .dh { border-color: var(--line); }
body.neon .df { background: #0a1020; border-color: var(--line); }
body.neon .addr { background: #0d1426; border-color: var(--line); color: var(--ink); }
body.neon .addr.on { border-color: var(--mag); box-shadow: 0 0 12px rgba(255,43,214,.3); }
body.neon .steps span { background: var(--line); } body.neon .steps span.on { background: linear-gradient(90deg, var(--mag), var(--cyan)); }
body.neon .ostatus span { background: #121b33; color: var(--muted); } body.neon .ostatus span.on { background: rgba(61,255,143,.16); color: var(--lime); }
body.neon .sf-foot { background: #04060d; border-top: 1px solid var(--line); }
body.neon.candy .sf-foot::before { display: none; }
body.neon .socials a { background: #121b33; } body.neon .socials a:hover { background: var(--mag); box-shadow: 0 0 14px var(--mag); }
body.neon .outlets .addr { background: #0d1426 !important; }
body.neon .closed-bar { background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.5); color: #ffb3c1; }

/* rider / staff / track mobile apps */
body.neon .rd-order, body.neon .rd-tiles div, body.neon .qa button { background: linear-gradient(180deg, #111a31, #0c1325); border-color: var(--line); color: var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
body.neon .qa button:hover { border-color: var(--cyan); box-shadow: 0 0 16px rgba(34,230,255,.3); }
body.neon .rd-tabbar { background: rgba(6,9,20,.92); border-top: 1px solid var(--line); }
body.neon .rd-tabbar button { color: var(--muted); } body.neon .rd-tabbar button.on { color: var(--cyan); }
body.neon .sline { border-color: var(--line); }
body.neon .cnt button { background: #152043; border-color: var(--line); color: var(--cyan); }
body.neon .tk-head, body.neon .tk-sheet { background: rgba(9,14,28,.94); color: var(--ink); border-color: var(--line); }
body.neon .tiles-soft, body.neon .leaflet-tile-pane { filter: invert(.92) hue-rotate(180deg) saturate(.6) brightness(.9); }

/* print: kaagaz hamesha safed */
@media print { body.neon { background: #fff !important; color: #000; } body.neon::before { display: none; } }
@media (prefers-reduced-motion: reduce) { body.neon * { transition: none !important; } }
body.neon .banner .cta { color: #1a1033; }
body.neon .rd-toggle { background: #0f1830; color: var(--ink); border-color: var(--line); }
body.neon .rd-toggle.on { color: var(--lime); border-color: rgba(61,255,143,.5); box-shadow: 0 0 12px rgba(61,255,143,.25); }
body.neon .rd-order [style*="#fff7d6"] { background: rgba(255,197,61,.12) !important; color: var(--amber); }
body.neon .rd-order [style*="#fff1f1"], body.neon .card[style*="#fff1f1"] { background: rgba(255,77,109,.12) !important; border-color: rgba(255,77,109,.4) !important; }
body.neon .tk-plate { background: #241d08; border-color: #6b5a14; color: var(--amber); }
body.neon .tk-card { background: #0d1426; }
body.neon .tk-otp { background: linear-gradient(135deg, rgba(255,43,214,.14), rgba(139,107,255,.14)); border-color: rgba(255,43,214,.4); }
body.neon .receipt, body.neon .a4 { color: #000; }
body.neon .modal [style*="background:#fafafa"] { background: #fff !important; }