PageSourceSearch

https://kwickflix.shop/cart.php?a=view

html kwickflix.shop collected 2026-10-10 00:35:08 UTC 279,258 bytes, 5,223 lines download raw bytes

1<!doctype html>
2<html lang="en" data-kf-theme="dark">
3<head>
4    <meta charset="utf-8" />
5            
5<script>(function(){try{var m=localStorage.getItem('kf_theme');if(m==='dark'){document.documentElement.setAttribute('data-kf-theme','dark');}else if(m==='light'){document.documentElement.removeAttribute('data-kf-theme');}}catch(e){}})();</script>
5
6        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <title>Shopping Cart - The Kwick Shop</title>
8    <!-- Styling -->
9<link href="/assets/fonts/css/open-sans-family.css" rel="stylesheet" type="text/css" />
10<link href="/templates/kwickflix/css/all.min.css?v=25dc9a" rel="stylesheet">
11<link href="/templates/kwickflix/css/theme.min.css?v=25dc9a" rel="stylesheet">
12<link href="/assets/css/fontawesome-all.min.css" rel="stylesheet">
13
14<script>
15    var csrfToken = 'd66098c0313efd9f2d4965c38006c430ccd696ff',
16        markdownGuide = 'Markdown Guide',
17        locale = 'en',
18        saved = 'saved',
19        saving = 'autosaving',
20        whmcsBaseUrl = "";
21    </script>
vendor: 1 bytes, line 21
21
22<script src="/templates/kwickflix/js/scripts.min.js?v=25dc9a"></script>
22
23
24    <!-- kwickflixstyle-detect | vars=kwickflix | systpl= | carttpl= | App= | Setting=kwickflix | scope=kwickflix | bailed=no -->
25<style id="kf-critical-css">body #mainNavbar a.cart-btn,body #mainNavbar a.cart-btn:hover,body #mainNavbar a.cart-btn i{color:#000000 !important;}body #mainNavbar a.cart-btn .badge,body #mainNavbar a.cart-btn .badge-info,body .navbar-nav.toolbar a.cart-btn .badge-info{background-color:#1a8ee6 !important;border-color:#1a8ee6 !important;color:var(--ca-on-accent,#fff) !important;}body #mainNavbar ul.navbar-nav.ml-auto > li > a.cart-btn,body #header ul.navbar-nav.toolbar > li > a.cart-btn,body #mainNavbar a.cart-btn{--kf-glow:rgba(26,142,230,.65) !important;}body #mainNavbar ul.navbar-nav.ml-auto > li > a.cart-btn:hover,body #header ul.navbar-nav.toolbar > li > a.cart-btn:hover,body #mainNavbar a.cart-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,.12),0 0 18px rgba(26,142,230,.65) !important;}body #mainNavbar ul.navbar-nav.ml-auto > li.dropdown > a.dropdown-toggle,body #mainNavbar ul.navbar-nav.ms-auto > li.dropdown > a.dropdown-toggle{--kf-glow:rgba(26,142,230,.65) !important;}body #mainNavbar ul.navbar-nav.ml-auto > li.dropdown > a.dropdown-toggle:hover,body #mainNavbar ul.navbar-nav.ms-auto > li.dropdown > a.dropdown-toggle:hover{box-shadow:0 4px 14px rgba(0,0,0,.12),0 0 18px rgba(26,142,230,.65) !important;}body #mainNavbar a.notif-btn,body #mainNavbar a.notif-btn:hover,body #mainNavbar a.notif-btn i,body .navbar-nav.toolbar a.notif-btn,body .navbar-nav.toolbar a.notif-btn i{color:#1f1a14 !important;}body #mainNavbar a.notif-btn .badge,body #mainNavbar a.notif-btn .badge-info,body .navbar-nav.toolbar a.notif-btn .badge-info{background-color:#e96a0b !important;border-color:#e96a0b !important;color:var(--ca-on-accent,#fff) !important;}body #mainNavbar ul.navbar-nav.ml-auto > li > a.notif-btn,body #header ul.navbar-nav.toolbar > li > a.notif-btn,body #mainNavbar a.notif-btn{--kf-glow:rgba(233,106,11,.65) !important;}body #mainNavbar ul.navbar-nav.ml-auto > li > a.notif-btn:hover,body #header ul.navbar-nav.toolbar > li > a.notif-btn:hover,body #mainNavbar a.notif-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,.12),0 0 18px rgba(233,106,11,.65) !important;}.kf-bg-image,.kf-bg-video{filter:grayscale(100%) brightness(1.85) contrast(.35) !important;-webkit-filter:grayscale(100%) brightness(1.85) contrast(.35) !important;opacity:.6 !important;}</style>
26
27
28
29        
30        <meta property="og:title" content="Premium Streaming Services - Kwickflix">
31    <meta name="twitter:title" content="Premium Streaming Services - Kwickflix">    <meta property="og:description" content="IPTV, Jellyfin, Seer, Plex, Audiobookshelf, Grimmory, Trials and Reseller Tools Built for people who actually care about quality">
32    <meta name="description" content="IPTV, Jellyfin, Seer, Plex, Audiobookshelf, Grimmory, Trials and Reseller Tools Built for people who actually care about quality">
33    <meta name="twitter:description" content="IPTV, Jellyfin, Seer, Plex, Audiobookshelf, Grimmory, Trials and Reseller Tools Built for people who actually care about quality">    <meta property="og:image" content="/assets/img/logo.png">
34    <meta name="twitter:image" content="/assets/img/logo.png">
35    <meta name="twitter:card" content="summary_large_image">    <meta property="og:type" content="website">
36
37        
38
39<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
40
41<style>
42/* ============================================================
43   KWICKFLIX GLOBAL DESIGN SYSTEM
44   Lives in header.tpl — loads on every page.
45   No custom.css. All dynamic settings injected by the
46   kwickflixstyle addon via the head hook below this block.
47   ============================================================ */
48
49:root{
50  --ca-page:#f1f1f1;
51  --ca-surface:#fefdfb;
52  --ca-surface2:#f7f5f0;
53  --ca-surface3:#ede9e2;
54  --ca-white:#ffffff;
55  --ca-border:#d8d3cc;
56  --ca-border2:#bfb8ae;
57  --ca-text:#13110e;
58  --ca-muted:#7a7268;
59  --ca-muted2:#5a5249;
60  --ca-on-accent:#ffffff;
61  --ca-ink-rgb:19,17,14;
62  --ca-paper-rgb:254,253,251;
63  --ca-ink-shadow:#13110e;
64  --ca-ink-border:#13110e;
65
66  --ca-accent:#22a04a;
67  --ca-accent-dark:#167a36;
68  --ca-accent-bg:rgba(34,160,74,.07);
69  --ca-accent-border:rgba(34,160,74,.18);
70  --ca-danger:#cc2828;
71  --ca-danger-bg:rgba(204,40,40,.06);
72  --ca-danger-border:rgba(204,40,40,.20);
73  --ca-warning:#9a6303;
74  --ca-warning-bg:rgba(243,156,18,.08);
75  --ca-warning-border:rgba(243,156,18,.25);
76
77  --ca-shadow-sm:0 1px 3px rgba(19,17,14,.05),0 2px 8px rgba(19,17,14,.03);
78  --ca-shadow-md:0 4px 16px rgba(19,17,14,.08),0 2px 6px rgba(19,17,14,.04);
79  --ca-shadow-lg:0 8px 32px rgba(19,17,14,.10),0 2px 8px rgba(19,17,14,.05);
80  --ca-shadow-green:0 6px 24px rgba(34,160,74,.22),0 2px 8px rgba(34,160,74,.10);
81
82  --kf-display:'Barlow Condensed',sans-serif;
83  --kf-body:'Outfit',sans-serif;
84}
85
86/* ── DARK MODE TOKENS ──────────────────────────────────────
87   Charcoal, not black. The ink token flips light, so the 2px
88   borders and hard offset shadows go cream on charcoal — the
89   inverted-terminal look. `html[data-kf-theme="dark"]` outranks
90   `:root`, so the addon's late `:root{--ca-accent…}` repaint can
91   never drag a dark page back to light. Accents are shared; only
92   the hover shade and the tints get a brighter dark variant. */
93html[data-kf-theme="dark"]{
94  color-scheme:dark;
95  --ca-page:#1b1a18;
96  --ca-surface:#232220;
97  --ca-surface2:#2b2a27;
98  --ca-surface3:#34322e;
99  --ca-white:#2b2a27;
100  --ca-border:#48453f;
101  --ca-border2:#5c5851;
102  --ca-text:#dbcfb7;
103  --ca-muted:#a89e8b;
104  --ca-muted2:#c2b69f;
105  --ca-on-accent:#f1e9d8;
106  --ca-ink-rgb:219,207,183;
107  --ca-paper-rgb:27,26,24;
108  /* Hard offset shadows go near-black in dark (the cream border stays
109     the frame; a cream block behind it read as a second outline). */
110  --ca-ink-shadow:#0c0b0a;
111  /* The 2px box frames go muted grey-tan in dark — cream frames clashed. */
112  --ca-ink-border:#5f5a51;
113
114  /* Accent lifted a notch for charcoal (the addon re-derives this from
115     the admin's accent in Renderer::dynamicCss). */
116  --ca-accent:#25ad50;
117  --ca-accent-dark:#3fc86a;
118  --ca-accent-bg:rgba(34,160,74,.16);
119  --ca-accent-border:rgba(34,160,74,.38);
120  --ca-danger:#f06060;
121  --ca-danger-bg:rgba(240,96,96,.14);
122  --ca-danger-border:rgba(240,96,96,.35);
123  --ca-warning:#f0b445;
124  --ca-warning-bg:rgba(240,180,69,.14);
125  --ca-warning-border:rgba(240,180,69,.35);
126
127  --ca-shadow-sm:0 1px 3px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25);
128  --ca-shadow-md:0 4px 16px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.30);
129  --ca-shadow-lg:0 8px 32px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
130}
131
132/* ── BODY / GLOBAL ─────────────────────────────────────── */
133html,body{
134  height:100%;
135  margin:0;
136  display:flex;
137  flex-direction:column;
138  font-family:var(--kf-body);
139  color:var(--ca-text);
140}
141#main-body{flex:1 0 auto;}
142#footer{flex-shrink:0;}
143
144/* Background layers (only render when addon emits them) */
145.kf-bg-video,
146.kf-bg-image{
147  position:fixed;
148  inset:0;
149  width:100vw;
150  height:100vh;
151  object-fit:cover;
152  z-index:-2;
153  pointer-events:none;
154}
155.kf-bg-image{background-size:cover;background-position:center;background-repeat:no-repeat;}
156.kf-bg-overlay{
157  position:fixed;
158  inset:0;
159  z-index:-1;
160  pointer-events:none;
161  background:rgba(var(--ca-paper-rgb),.55);
162}
163html[data-kf-theme="dark"] .kf-bg-overlay{background:rgba(var(--ca-paper-rgb),.72);}
164
165/* Terminal grid lines over the background (addon toggle:
166   General → Whole-Site Background → grid lines). Sits after the
167   wash overlay in the DOM so it paints above it at the same
168   z-index, but stays behind all page content. */
169.kf-bg-grid{
170  position:fixed;
171  inset:0;
172  z-index:-1;
173  pointer-events:none;
174  background-size:32px 32px;
175  background-image:
176    linear-gradient(to right, rgba(var(--ca-ink-rgb),.045) 1px, transparent 1px),
177    linear-gradient(to bottom, rgba(var(--ca-ink-rgb),.045) 1px, transparent 1px);
178}
179html[data-kf-theme="dark"] .kf-bg-grid{
180  background-image:
181    linear-gradient(to right, rgba(var(--ca-ink-rgb),.06) 1px, transparent 1px),
182    linear-gradient(to bottom, rgba(var(--ca-ink-rgb),.06) 1px, transparent 1px);
183}
184
185/* Light / dark logo pairs — both <img>s render; CSS shows one.
186   `!important` because the desktop navbar rule forces display:block. */
187#header .navbar-brand img.kf-logo-dark,
188#header .kf-bn-logo a img.kf-logo-dark,
189.kf-top-logo-bar a img.kf-logo-dark{display:none !important;}
190html[data-kf-theme="dark"] #header .navbar-brand.kf-has-dark-logo img.kf-logo-light,
191html[data-kf-theme="dark"] #header .kf-bn-logo a.kf-has-dark-logo img.kf-logo-light,
192html[data-kf-theme="dark"] .kf-top-logo-bar a.kf-has-dark-logo img.kf-logo-light{display:none !important;}
193html[data-kf-theme="dark"] #header .navbar-brand.kf-has-dark-logo img.kf-logo-dark{display:block !important;}
194html[data-kf-theme="dark"] #header .kf-bn-logo a.kf-has-dark-logo img.kf-logo-dark,
195html[data-kf-theme="dark"] .kf-top-logo-bar a.kf-has-dark-logo img.kf-logo-dark{display:inline-block !important;}
196html[data-kf-theme="dark"] #header .navbar-brand img,
197html[data-kf-theme="dark"] #header .logo-img,
198html[data-kf-theme="dark"] .kf-top-logo-bar img{filter:drop-shadow(0 4px 12px rgba(0,0,0,.55)) !important;}
199
200/* Theme selector pill (renders only when the addon is set to "Selector").
201   Two icons, CSS shows the one for the mode you can switch TO. */
202#mainNavbar a.kf-theme-btn,
203.navbar-nav.toolbar a.kf-theme-btn{--kf-glow:rgba(245,180,69,.60);cursor:pointer;}
204.kf-theme-btn .kf-ti-sun{display:none;}
205html[data-kf-theme="dark"] .kf-theme-btn .kf-ti-sun{display:inline-block;}
206html[data-kf-theme="dark"] .kf-theme-btn .kf-ti-moon{display:none;}
207html[data-kf-theme="dark"] #mainNavbar a.kf-theme-btn,
208html[data-kf-theme="dark"] .navbar-nav.toolbar a.kf-theme-btn{--kf-glow:rgba(120,170,255,.60);}
209
210/* Top centered hero logo (optional) */
211.kf-top-logo-bar{
212  text-align:center;
213  padding:24px 16px 8px;
214}
215.kf-top-logo-bar img{
216  max-height:120px;
217  max-width:100%;
218  width:auto;
219  filter:drop-shadow(0 6px 18px rgba(0,0,0,.18));
220}
221/* Mobile: scale the logo down so it doesn't overflow narrow viewports.
222   Without max-width:100% above, wide logos (like the kwickflix wordmark)
223   were getting horizontally clipped at the screen edge. */
224@media (max-width: 600px){
225  .kf-top-logo-bar{padding:16px 12px 4px;}
226  .kf-top-logo-bar img{max-height:80px;}
227}
228
229/* ── HEADER / NAVBAR ───────────────────────────────────── */
230#header.header{
231  background:transparent !important;
232  border-bottom:none !important;
233  box-shadow:none !important;
234  position:relative;
235  z-index:5;
236}
237#header .navbar-brand img,
238#header .logo-img{
239  max-height:58px !important;
240  width:auto !important;
241  filter:drop-shadow(0 4px 12px rgba(0,0,0,.18)) !important;
242}
243.master-breadcrumb{display:none !important;}
244
245/* Desktop: 3-column grid centers the logo */
246@media (min-width:1200px){
247  .navbar.navbar-light .container{
248    display:grid !important;
249    grid-template-columns:1fr auto 1fr !important;
250    align-items:center !important;
251    width:100% !important;
252  }
253  .navbar.navbar-light .navbar-brand{
254    grid-column:2 !important;
255    justify-self:center !important;
256    margin:0 !important;padding:0 !important;
257    position:static !important;transform:none !important;
258  }
259  .navbar.navbar-light .navbar-nav.toolbar{
260    grid-column:3 !important;
261    justify-self:end !important;
262    margin:0 !important;
263  }
264  .navbar.navbar-light .navbar-brand img{
265    max-height:64px !important;
266    width:auto !important;display:block !important;
267  }
268}
269
270/* Mobile: stack centered */
271@media (max-width:1199px){
272  .navbar.navbar-light .container{
273    flex-direction:column;align-items:center;text-align:center;
274    padding-left:0 !important;padding-right:0 !important;
275  }
276  .navbar-brand{margin:0 0 15px 0 !important;padding:0 !important;}
277  .navbar-brand img{margin:0 auto;display:block;}
278  .navbar-nav.toolbar{margin:0 !important;display:flex;justify-content:center;}
279  .navbar-nav.toolbar .nav-item{margin:0 10px !important;}
280}
281
282/* ── NAV PILL BUTTONS (rows 1 + 2 + account + cart + notifications) ──── */
283#mainNavbar ul#nav > li > a,
284#mainNavbar ul.kf-nav-row2 > li > a,
285#mainNavbar ul.navbar-nav.ml-auto > li > a,
286#mainNavbar a.cart-btn,
287#mainNavbar a.notif-btn{
288  display:inline-flex !important;
289  align-items:center !important;
290  justify-content:center !important;
291  min-height:26px !important;
292  padding:3px 11px !important;
293  font-family:var(--kf-body) !important;
294  font-size:12px !important;
295  font-weight:700 !important;
296  line-height:1 !important;
297  text-decoration:none !important;
298  color:var(--ca-text) !important;
299  background:var(--ca-surface) !important;
300  border:2px solid var(--ca-ink-border) !important;
301  border-radius:4px !important;
302  box-shadow:2px 2px 0 var(--ca-ink-shadow) !important;
303  box-sizing:border-box !important;
304  transition:box-shadow .1s ease, transform .1s ease, background .1s ease !important;
305}
306
307/* gap between pills */
308#mainNavbar ul#nav > li,
309#mainNavbar ul.kf-nav-row2 > li,
310#mainNavbar ul.navbar-nav.ml-auto > li{
311  margin:0 6px 0 0 !important;
312  padding:0 !important;
313}
314#mainNavbar ul#nav > li:last-child,
315#mainNavbar ul.kf-nav-row2 > li:last-child,
316#mainNavbar ul.navbar-nav.ml-auto > li:last-child{margin-right:0 !important;}
317
318#mainNavbar ul#nav > li > a:hover,
319#mainNavbar ul.kf-nav-row2 > li > a:hover,
320#mainNavbar ul.navbar-nav.ml-auto > li > a:hover,
321#mainNavbar a.cart-btn:hover,
322#mainNavbar a.notif-btn:hover{
323  background:var(--ca-surface2) !important;
324  border-color:var(--ca-ink-border) !important;
325  color:var(--ca-text) !important;
326  box-shadow:3px 3px 0 var(--ca-ink-shadow), 0 0 18px var(--kf-glow, rgba(34,160,74,.30)) !important;
327  transform:translate(-1px,-1px) !important;
328  text-decoration:none !important;
329}
330
331#mainNavbar ul#nav > li.active > a,
332#mainNavbar ul#nav > li > a.active{
333  background:linear-gradient(135deg,var(--ca-accent),var(--ca-accent-dark)) !important;
334  color:var(--ca-on-accent) !important;
335  border-color:var(--ca-ink-border) !important;
336}
337
338#mainNavbar a.cart-btn .badge,
339#mainNavbar a.cart-btn .badge-info,
340.navbar-nav.toolbar a.cart-btn .badge-info,
341#mainNavbar a.notif-btn .badge,
342#mainNavbar a.notif-btn .badge-info,
343.navbar-nav.toolbar a.notif-btn .badge-info{
344  background-color:#00b4b4 !important;
345  color:var(--ca-on-accent) !important;
346  border-color:#00b4b4 !important;
347  border-radius:3px !important;
348  font-size:11px !important;
349  font-weight:700 !important;
350  padding:2px 6px !important;
351  margin-left:4px !important;
352}
353
354#mainNavbar ul#nav > li > a,
355#mainNavbar ul.kf-nav-row2 > li > a,
356#mainNavbar ul.navbar-nav.ml-auto > li > a{--kf-glow:rgba(34,160,74,.30);}
357#mainNavbar a.cart-btn{--kf-glow:rgba(0,180,180,.65);}
358#mainNavbar a.notif-btn{--kf-glow:rgba(255,165,0,.55);}
359#mainNavbar ul.navbar-nav.ml-auto > li > a.dropdown-toggle{--kf-glow:rgba(0,0,0,.55);}
360
361/* Two-row layout */
362@media (max-width:1199px){
363  #mainNavbar.collapse:not(.show){display:none;}
364  #mainNavbar.collapse.show{display:block;}
365}
366#mainNavbar > ul.kf-nav-row2{
367  list-style:none !important;
368  padding-left:0 !important;
369  margin:8px 0 14px 0 !important;
370  width:100% !important;
371}
372#mainNavbar > ul.kf-nav-row2 > li{margin:0 4px 4px 0 !important;padding:0 !important;}
373
374@media (min-width:1200px){
375  #mainNavbar.collapse{display:flex !important;flex-wrap:wrap !important;align-items:center !important;}
376  #mainNavbar > ul#nav{flex:1 1 auto !important;width:auto !important;order:1 !important;}
377  #mainNavbar > ul.navbar-nav.ml-auto{flex:0 0 auto !important;width:auto !important;order:2 !important;margin-left:auto !important;}
378  #mainNavbar > ul.kf-nav-row2{
379    display:flex !important;
380    flex:0 0 100% !important;
381    width:100% !important;
382    order:3 !important;
383    flex-wrap:wrap !important;
384    gap:6px !important;
385    margin:8px 0 14px 0 !important;
386    padding-top:0 !important;
387    border-top:none !important;
388  }
389}
390
391/* Hide WHMCS overflow "More" */
392#mainNavbar a#navbarDropdownMenu{display:none !important;}
393#mainNavbar ul#nav > li:has(> a#navbarDropdownMenu){display:none !important;}
394
395/* Mobile hamburger / cart */
396.navbar.navbar-light .navbar-nav.toolbar .btn,
397.navbar.navbar-light .navbar-nav.toolbar .nav-link{
398  background:var(--ca-surface) !important;
399  border:2px solid var(--ca-ink-border) !important;
400  border-radius:4px !important;
401  box-shadow:2px 2px 0 var(--ca-ink-shadow) !important;
402  color:var(--ca-text) !important;
403}
404
405/* Topbar (logged in) */
406.topbar{
407  background:rgba(var(--ca-paper-rgb),.45) !important;
408  border-bottom:1px solid rgba(var(--ca-ink-rgb),.06) !important;
409  backdrop-filter:blur(6px);
410}
411.topbar .btn,
412.topbar .input-group-text{
413  background:transparent !important;
414  border:1px solid rgba(var(--ca-ink-rgb),.10) !important;
415  color:var(--ca-text) !important;
416  border-radius:4px !important;
417  font-family:var(--kf-body);
418  font-size:13px;
419  font-weight:600;
420}
421
422/* ── GLOBAL CARD STYLE (terminal) ──────────────────────── */
423.card{
424  background:var(--ca-surface) !important;
425  border:2px solid var(--ca-ink-border) !important;
426  border-radius:6px !important;
427  box-shadow:4px 4px 0 var(--ca-ink-shadow) !important;
428  overflow:hidden;
429  transition:.15s ease;
430}
431/* Header strips match the homepage boxes: centered, small-caps,
432   letterspaced title on the darker tone behind a 2px divider.
433   Action buttons (e.g. "My Services", "Pay Now") pin to the right. */
434.card-header{
435  position:relative;
436  display:flex;
437  align-items:center;
438  justify-content:center;
439  text-align:center;
440  background:var(--ca-surface3) !important;
441  border-bottom:2px solid var(--ca-ink-border) !important;
442  padding:9px 110px !important;
443  min-height:38px;
444}
445.card-header .card-title,
446.card-header h3{
447  font-family:var(--kf-body);
448  font-size:11px;
449  font-weight:800;
450  text-transform:uppercase;
451  letter-spacing:.2em;
452  color:var(--ca-muted2);
453  margin:0;
454}
455/* WHMCS nests the header action inside the title:
456   .card-header > .card-title > .float-right > a.btn — so target the
457   float wrappers at any depth. They pin to the strip's right edge
458   (the header is position:relative) while the title stays centered. */
459.card-header .float-right,
460.card-header .pull-right,
461.card-header > .btn,
462.card-header > a.btn{
463  position:absolute;
464  right:10px;
465  top:50%;
466  transform:translateY(-50%);
467  float:none !important;
468}
469/* Header action buttons — terminal chips, same family as the navbar
470   pills. Overrides WHMCS's bg-color-N tint classes. */
471.card-header .btn{
472  display:inline-flex !important;
473  align-items:center !important;
474  gap:6px !important;
475  padding:4px 10px !important;
476  font-family:var(--kf-body) !important;
477  font-size:11px !important;
478  font-weight:800 !important;
479  line-height:1.2 !important;
480  color:var(--ca-text) !important;
481  background:var(--ca-surface) !important;
482  border:2px solid var(--ca-ink-border) !important;
483  border-radius:4px !important;
484  box-shadow:2px 2px 0 var(--ca-ink-shadow) !important;
485  text-transform:none !important;
486  letter-spacing:0 !important;
487  transition:background .1s ease, box-shadow .1s ease !important;
488}
489.card-header .btn:hover{
490  background:var(--ca-surface2) !important;
491  color:var(--ca-text) !important;
492  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important;
493  text-decoration:none !important;
494}
495.card-body{padding:22px 24px;}
496
497.card-columns.home .card{
498  border-radius:6px !important;
499  box-shadow:4px 4px 0 var(--ca-ink-shadow) !important;
500  transition:.15s ease;
501}
502.card-columns.home .card:hover{
503  transform:translate(-2px,-2px);
504  box-shadow:6px 6px 0 var(--ca-ink-shadow) !important;
505  border-color:var(--ca-ink-border) !important;
506}
507
508/* ── BUTTONS (kwickplayer terminal style, site-wide) ─────
509   Neutral fill, accent-colored label, hard 2px dark border and
510   offset shadow. This is the single source for every primary
511   button — the auth pages and homepage sections match it. */
512.btn-primary,.btn.btn-primary{
513  background:var(--ca-surface3) !important;
514  border:2px solid var(--ca-ink-border) !important;
515  color:var(--ca-accent) !important;
516  border-radius:4px !important;
517  font-family:var(--kf-body) !important;
518  font-weight:800 !important;
519  padding:10px 22px !important;
520  box-shadow:2px 2px 0 var(--ca-ink-shadow) !important;
521  transition:.1s ease !important;
522}
523.btn-primary:hover,.btn.btn-primary:hover{
524  background:var(--ca-surface2) !important;
525  border-color:var(--ca-ink-border) !important;
526  color:var(--ca-accent) !important;
527  transform:translate(-1px,-1px);
528  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important;
529}
530.btn-primary:active,.btn.btn-primary:active{
531  background:var(--ca-surface2) !important;
532  border-color:var(--ca-ink-border) !important;
533  color:var(--ca-accent) !important;
534  transform:translate(1px,1px);
535  box-shadow:1px 1px 0 var(--ca-ink-shadow) !important;
536}
537.btn-default,.btn.btn-default{
538  background:var(--ca-surface2) !important;
539  border:2px solid var(--ca-ink-border) !important;
540  color:var(--ca-text) !important;
541  border-radius:4px !important;
542  box-shadow:2px 2px 0 var(--ca-ink-shadow) !important;
543  font-family:var(--kf-body) !important;
544  font-weight:700 !important;
545}
546.btn-default:hover,.btn.btn-default:hover{
547  background:var(--ca-white) !important;
548  border-color:var(--ca-border2) !important;
549}
550.btn-outline-primary{
551  border:1.5px solid var(--ca-accent) !important;
552  color:var(--ca-accent) !important;
553  background:transparent !important;
554  border-radius:8px !important;
555  font-weight:700 !important;
556}
557.btn-outline-primary:hover{background:var(--ca-accent) !important;color:var(--ca-on-accent) !important;}
558
559/* ── FORMS ─────────────────────────────────────────────── */
560.form-control,
561input.form-control,
562select.form-control,
563textarea.form-control{
564  border:1.5px solid var(--ca-border) !important;
565  border-radius:8px !important;
566  font-family:var(--kf-body) !important;
567  font-size:14px !important;
568  padding:10px 14px !important;
569  background:var(--ca-surface) !important;
570  color:var(--ca-text) !important;
571  transition:.15s ease !important;
572  height:auto !important;
573}
574.form-control:focus{
575  border-color:var(--ca-accent) !important;
576  box-shadow:0 0 0 3px var(--ca-accent-bg) !important;
577  outline:none !important;
578}
579.input-group-text{
580  background:var(--ca-surface2) !important;
581  border:1.5px solid var(--ca-border) !important;
582  color:var(--ca-muted) !important;
583  border-radius:8px !important;
584}
585
586/* ── ALERTS ────────────────────────────────────────────── */
587.alert{
588  border-radius:10px !important;
589  font-family:var(--kf-body);
590  font-size:14px;
591  padding:14px 18px;
592  border:1px solid var(--ca-border);
593}
594.alert-success{background:var(--ca-accent-bg) !important;border-color:var(--ca-accent-border) !important;color:var(--ca-accent-dark) !important;}
595.alert-danger{background:var(--ca-danger-bg) !important;border-color:var(--ca-danger-border) !important;color:var(--ca-danger) !important;}
596.alert-info{background:var(--ca-surface2) !important;border-color:var(--ca-border) !important;color:var(--ca-muted2) !important;}
597.alert-warning{background:var(--ca-warning-bg) !important;border-color:var(--ca-warning-border) !important;color:var(--ca-warning) !important;}
598
599/* ── TABLES ────────────────────────────────────────────── */
600.table{background:var(--ca-surface) !important;border:1px solid var(--ca-border);border-radius:4px;overflow:hidden;}
601.table thead th{
602  background:var(--ca-surface3) !important;
603  color:var(--ca-muted2) !important;
604  border-bottom:2px solid var(--ca-ink-border) !important;
605  font-family:var(--kf-body);
606  font-weight:800;
607  letter-spacing:.1em;
608  font-size:11px;
609  text-transform:uppercase;
610}
611.table tbody td{border-color:var(--ca-border) !important;color:var(--ca-text) !important;}
612.table-striped tbody tr:nth-of-type(odd){background:var(--ca-surface2) !important;}
613
614/* List pages (invoices, tickets, services, domains, quotes…) —
615   the shared table container becomes a terminal box. When a
616   container sits INSIDE a card the card already provides the
617   frame, so the inner one goes transparent to avoid box-in-box. */
618.table-container{
619  background:var(--ca-surface);
620  border:2px solid var(--ca-ink-border);
621  border-radius:6px;
622  box-shadow:4px 4px 0 var(--ca-ink-shadow);
623  overflow:hidden;
624}
625.table-container .table{border:none !important;border-radius:0 !important;margin-bottom:0 !important;}
626/* Phones: wide tables must scroll INSIDE the box, never clip and
627   never drag the whole page sideways */
628@media (max-width:767px){
629  .table-container{overflow-x:auto;}
630  .dataTables_filter input{min-width:0 !important;width:100% !important;}
631  .table-container .dataTables_filter{margin:10px 16px 0 16px !important;float:none !important;}
632}
633.card .table-container{
634  border:none;
635  border-radius:0;
636  box-shadow:none;
637  background:transparent;
638}
639
640/* DataTables controls — search box + "Show N entries" */
641.dataTables_filter input,
642.dataTables_length select,
643.dataTables_length input{
644  border:2px solid var(--ca-ink-border) !important;
645  border-radius:4px !important;
646  background:var(--ca-surface) !important;
647  color:var(--ca-text) !important;
648  box-shadow:2px 2px 0 var(--ca-ink-shadow) !important;
649  font-family:var(--kf-body) !important;
650  padding:8px 12px !important;
651}
652.dataTables_filter input{min-width:230px !important;}
653.dataTables_filter input::placeholder{color:var(--ca-muted);}
654.dataTables_filter input:focus,
655.dataTables_length select:focus,
656.dataTables_length input:focus{
657  outline:none !important;
658  border-color:var(--ca-accent) !important;
659}
660
661/* Breathing room for the controls DataTables renders inside the
662   terminal-boxed container (info text, search, length, pagination) */
663.table-container .dataTables_info{padding:12px 16px !important;}
664.table-container .dataTables_filter{margin:10px 16px 0 0 !important;}
665.table-container .dataTables_length{padding:10px 16px 12px !important;}
666.table-container .dataTables_paginate{padding:10px 16px 12px !important;}
667
668/* Terminal prompt strip on list tables — the strip itself is
669   injected by a small script at the end of footer.tpl. */
670.kf-list-head{
671  display:flex;
672  flex-wrap:wrap;
673  align-items:center;
674  justify-content:space-between;
675  gap:2px 12px;
676  background:var(--ca-surface3);
677  border-bottom:2px solid var(--ca-ink-border);
678  padding:7px 14px;
679  font-family:'Cascadia Code',Consolas,'Courier New',monospace;
680  font-size:12px;
681  font-weight:700;
682  color:var(--ca-muted2);
683}
684.kf-list-head .kf-lh-sym{color:var(--ca-accent);margin-right:8px;}
685.kf-list-head .kf-lh-cmd{color:var(--ca-muted);}
686.kf-list-head .kf-lh-cursor{
687  display:inline-block;width:7px;height:13px;
688  background:var(--ca-text);
689  animation:kfLhBlink 1s infinite;
690  vertical-align:middle;margin-left:8px;
691}
692@keyframes kfLhBlink{0%,100%{opacity:1;}50%{opacity:0;}}
693.kf-list-shell tbody tr{transition:background .1s ease;}
694.kf-list-shell tbody tr:hover td{background:var(--ca-surface2) !important;}
695.kf-list-shell tbody tr[onclick]:hover{cursor:pointer;}
696.kf-list-shell tbody tr[onclick]:hover td:first-child{box-shadow:inset 3px 0 0 var(--ca-accent);}
697
698/* ── HEADINGS ──────────────────────────────────────────── */
699h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{
700  font-family:var(--kf-display);
701  font-weight:800;
702  letter-spacing:-.01em;
703  color:var(--ca-text);
704}
705
706/* ── HOMEPAGE ACTION TILES ─────────────────────────────── */
707.row.my-5.action-icon-btns > div > a{
708  display:block;
709  border-radius:14px !important;
710  background:var(--ca-surface) !important;
711  border:1px solid var(--ca-border) !important;
712  box-shadow:var(--ca-shadow-sm) !important;
713  transition:.2s ease;
714  color:var(--ca-text) !important;
715  text-decoration:none !important;
716}
717.row.my-5.action-icon-btns > div > a:hover{
718  transform:translateY(-3px);
719  box-shadow:var(--ca-shadow-md) !important;
720  border-color:var(--ca-accent-border) !important;
721}
722.row.my-5.action-icon-btns .ico-container i{color:var(--ca-accent) !important;}
723
724/* ── SIDEBAR ───────────────────────────────────────────── */
725.sidebar .list-group{border-radius:14px;overflow:hidden;border:1px solid var(--ca-border);}
726.sidebar .list-group-item{
727  background:var(--ca-surface) !important;
728  border-color:var(--ca-border) !important;
729  color:var(--ca-text) !important;
730  font-family:var(--kf-body);
731  font-weight:600;
732}
733.sidebar .list-group-item:hover{background:var(--ca-surface2) !important;color:var(--ca-text) !important;}
734.sidebar .list-group-item.active{
735  background:var(--ca-accent) !important;
736  border-color:var(--ca-accent) !important;
737  color:var(--ca-on-accent) !important;
738}
739
740/* ── LINKS ─────────────────────────────────────────────── */
741a{color:var(--ca-accent);}
742a:hover{color:var(--ca-accent-dark);}
743
744/* ── DROPDOWNS (terminal style — account menu etc.) ────── */
745.dropdown-menu{
746  border:2px solid var(--ca-ink-border) !important;
747  border-radius:4px !important;
748  box-shadow:4px 4px 0 var(--ca-ink-shadow) !important;
749  background:var(--ca-surface) !important;
750  padding:4px !important;
751}
752.dropdown-item{font-family:var(--kf-body);font-weight:700;color:var(--ca-text);border-radius:3px;}
753.dropdown-item:hover{background:var(--ca-surface2);color:var(--ca-text);}
754
755/* ── POPOVERS (notification pill dropdown, plus any other
756       data-toggle="popover" usage) ─────────────────────── */
757/* Bootstrap renders the notification panel as a .popover (not a
758   .dropdown-menu) because the button uses data-toggle="popover".
759   Mirror the dropdown look so the two trigger types feel consistent. */
760.popover{
761  border:2px solid var(--ca-ink-border) !important;
762  border-radius:4px !important;
763  box-shadow:4px 4px 0 var(--ca-ink-shadow) !important;
764  background:var(--ca-surface) !important;
765  font-family:var(--kf-body) !important;
766  max-width:380px !important;
767  padding:0 !important;
768}
769.popover .popover-header,
770.popover .popover-title{
771  background:var(--ca-surface2) !important;
772  border-bottom:1px solid var(--ca-border) !important;
773  border-radius:10px 10px 0 0 !important;
774  font-family:'Barlow Condensed',sans-serif !important;
775  font-weight:800 !important;
776  font-size:15px !important;
777  letter-spacing:.02em !important;
778  text-transform:uppercase !important;
779  color:var(--ca-text) !important;
780  padding:12px 16px !important;
781  margin:0 !important;
782}
783.popover .popover-body,
784.popover .popover-content{
785  padding:12px 16px !important;
786  color:var(--ca-text) !important;
787  font-size:13px !important;
788}
789.popover .popover-body a,
790.popover .popover-content a{
791  color:var(--ca-accent) !important;
792  font-weight:600;
793}
794.popover .popover-body a:hover,
795.popover .popover-content a:hover{
796  color:var(--ca-accent-dark) !important;
797}
798/* Popover arrow — match the popover border color (Bootstrap 4 places
799   the arrow via .arrow::before/::after pseudo-elements) */
800.popover .arrow::before{border-bottom-color:var(--ca-border) !important;}
801.popover .arrow::after{border-bottom-color:var(--ca-surface) !important;}
802.popover.bs-popover-bottom .arrow::after{border-bottom-color:var(--ca-surface2) !important;}
803.popover.bs-popover-top .arrow::before{border-top-color:var(--ca-border) !important;}
804.popover.bs-popover-top .arrow::after{border-top-color:var(--ca-surface) !important;}
805
806/* ── BADGES (status pills → terminal chips) ────────────── */
807.badge,.label{
808  border-radius:3px !important;
809  font-family:var(--kf-body) !important;
810  font-weight:800 !important;
811  font-size:11px !important;
812  padding:3px 8px !important;
813  text-transform:uppercase !important;
814  letter-spacing:.04em !important;
815}
816.badge-info,.badge-primary{
817  background:var(--ca-accent-bg) !important;
818  color:var(--ca-accent-dark) !important;
819  border:1px solid var(--ca-accent-border) !important;
820}
821
822/* ── BREADCRUMB (in-content) ───────────────────────────── */
823.breadcrumb{background:transparent !important;font-family:var(--kf-body);font-size:13px;padding:8px 0;}
824.breadcrumb-item.active{color:var(--ca-muted);}
825.breadcrumb-item a{color:var(--ca-accent);}
826
827/* ── PAGINATION (terminal chips) ───────────────────────── */
828.pagination .page-link{
829  font-family:var(--kf-body);
830  font-weight:700;
831  padding:7px 13px;
832  border:2px solid var(--ca-ink-border);
833  background:var(--ca-surface);
834  color:var(--ca-text);
835  border-radius:4px !important;
836  box-shadow:2px 2px 0 var(--ca-ink-shadow);
837  margin:0 3px;
838  transition:.1s ease;
839}
840.pagination .page-link:hover{
841  background:var(--ca-surface2);
842  border-color:var(--ca-ink-border);
843  color:var(--ca-text);
844  box-shadow:3px 3px 0 var(--ca-ink-shadow);
845}
846.pagination .page-item.active .page-link{
847  background:var(--ca-accent);
848  border-color:var(--ca-ink-border);
849  color:var(--ca-on-accent);
850}
851.pagination .page-item.disabled .page-link{
852  opacity:.45;
853  box-shadow:none;
854}
855
856/* ── NAVBAR STYLE: BANNER (addon → Header → Navbar Style) ──
857   Renders instead of the classic logo + pill rows. The image carries the
858   brand; nav2 links ride its top edge, the stats strip sits on its bottom
859   edge and reveals the account quick-links on hover, and nav1 becomes a
860   row of icon buttons that lift and take their icon color when hovered.
861   Selectors are prefixed `body .kf-nav-banner` so they outrank the
862   classic pill rules on #mainNavbar ul#nav that share the markup. */
863.kf-nav-banner .kf-bn-wrap{padding:14px 15px 0;}
864/* Ribbon colors: light mode gets a cream band (a black band under a photo
865   read wrong on the light page); dark mode keeps the near-black band. */
866.kf-nav-banner{
867  --kf-bn-ribbon:var(--ca-surface3);
868  --kf-bn-ribbon-ink:var(--ca-text);
869  --kf-bn-ribbon-muted:var(--ca-muted2);
870  --kf-bn-fold:#a99f92;
871  --kf-bn-sep:rgba(19,17,14,.28);
872  --kf-bn-ribbon-shadow:0 3px 8px rgba(0,0,0,.22);
873  /* strips over the image: cream in light mode (a black bar under a
874     photo on the light page read wrong — Mason), black in dar
874k */
875  --kf-bn-strip:rgba(247,245,240,.62);
876  --kf-bn-strip-ink:#13110e;
877  --kf-bn-strip-muted:#5a5249;
878  --kf-bn-ql:rgba(237,233,226,.8);
879  --kf-bn-hover-block:rgba(247,245,240,.78);
880  /* light mode: solid chips — tints on the see-through strip were unreadable */
881  --kf-bn-vip-bd:#c78f04;
882  --kf-bn-vip-bg:linear-gradient(135deg,#ffe7a3,#ffd05e);
883  --kf-bn-vip-fg:#5c3a00;
884  --kf-bn-vip-num:#3a2400;
885  --kf-bn-vip-crown:#9a6303;
886  --kf-bn-ref-bd:#1c833d;
887  --kf-bn-ref-bg:linear-gradient(135deg,#c9f0d4,#9fe3b5);
888  --kf-bn-ref-fg:#0f5a26;
889  --kf-bn-ref-num:#073a16;
890}
891html[data-kf-theme="dark"] .kf-nav-banner{
892  --kf-bn-ribbon:#121110;
893  --kf-bn-ribbon-ink:#e8e2d6;
894  --kf-bn-ribbon-muted:#9a9286;
895  --kf-bn-fold:#060504;
896  --kf-bn-sep:#000;
897  --kf-bn-ribbon-shadow:0 3px 8px rgba(0,0,0,.6);
898  --kf-bn-strip:rgba(0,0,0,.64);
899  --kf-bn-strip-ink:#f1e9d8;
900  --kf-bn-strip-muted:#b9b2a6;
901  --kf-bn-ql:rgba(0,0,0,.8);
902  --kf-bn-hover-block:rgba(0,0,0,.72);
903  --kf-bn-vip-bd:rgba(245,179,1,.55);
904  --kf-bn-vip-bg:linear-gradient(135deg,rgba(245,179,1,.22),rgba(217,119,6,.10));
905  --kf-bn-vip-fg:#f0b445;
906  --kf-bn-vip-num:#fde047;
907  --kf-bn-vip-crown:#f5b301;
908  --kf-bn-ref-bd:rgba(63,200,106,.55);
909  --kf-bn-ref-bg:linear-gradient(135deg,rgba(63,200,106,.22),rgba(34,160,74,.10));
910  --kf-bn-ref-fg:#5fd68a;
911  --kf-bn-ref-num:#9df0b6;
912}
913/* Flat photo banner, no frame — the ribbon underneath is the frame. */
914.kf-nav-banner .kf-bn-banner{
915  position:relative;
916  height:var(--kf-bn-h,190px);
917  background:#1b1a18 var(--kf-bn-img,none) center/cover no-repeat;
918  border-radius:3px 3px 0 0;
919  overflow:hidden;
920  box-shadow:0 2px 10px rgba(0,0,0,.35);
921}
922.kf-nav-banner .kf-bn-banner::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,var(--kf-bn-dim,.15));pointer-events:none;z-index:1;}
923/* Fit mode: fixed height and the picture is stretched to the box's exact
924   dimensions — every banner image fills the same frame edge to edge. */
925.kf-nav-banner .kf-bn-banner.kf-bn-fit-fit{height:var(--kf-bn-h,190px);background-image:none;}
926.kf-nav-banner .kf-bn-banner.kf-bn-fit-fit .kf-bn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;}
927.kf-nav-banner .kf-bn-banner .kf-bn-bg{display:none;}
928.kf-nav-banner .kf-bn-banner.kf-bn-fit-cover .kf-bn-img{display:none;}
929.kf-nav-banner .kf-bn-top{
930  position:absolute;top:0;left:0;right:0;z-index:2;
931  display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;
932  padding:4px 8px 14px;
933  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));
934}
935.kf-nav-banner .kf-bn-top a{
936  display:inline-flex;align-items:center;padding:4px 10px;border-radius:3px;
937  color:#f1e9d8 !important;font-family:var(--kf-body);font-size:12px;font-weight:700;
938  text-decoration:none !important;text-shadow:0 1px 3px rgba(0,0,0,.85);
939  transition:color .12s ease,background .12s ease;
940}
941/* IPT-style: a dark block appears behind the link on hover */
942.kf-nav-banner .kf-bn-top a:hover{background:var(--kf-bn-hover-block);color:var(--kf-item-c,var(--ca-accent)) !important;text-shadow:none;}
943.kf-nav-banner .kf-bn-top a i{margin-right:5px;color:var(--kf-item-c,inherit);}
944.kf-nav-banner .kf-bn-top .kf-bn-top-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
945.kf-nav-banner .kf-bn-top a.kf-bn-theme{
946  display:inline-flex;align-items:center;min-height:24px;padding:2px 9px;
947  background:rgba(0,0,0,.45);border:1.5px solid rgba(241,233,216,.5);border-radius:4px;text-shadow:none;
948}
949.kf-nav-banner .kf-bn-top a.kf-bn-theme:hover{background:rgba(0,0,0,.7);color:#f1e9d8 !important;}
950.kf-nav-banner .kf-bn-logo{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;}
951.kf-nav-banner .kf-bn-logo a{pointer-events:auto;display:inline-flex;}
952.kf-nav-banner .kf-bn-logo img{max-height:calc(var(--kf-bn-h,190px) * .42);max-width:min(60vw,520px);width:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.65)) !important;}
953.kf-nav-banner .kf-bn-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;}
954.kf-nav-banner .kf-bn-stats{
955  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
956  padding:6px 14px;background:var(--kf-bn-strip);backdrop-filter:blur(4px);
957  color:var(--kf-bn-strip-ink);font-family:var(--kf-body);font-size:12px;font-weight:600;
958}
959.kf-nav-banner .kf-bn-user{font-family:'Cascadia Code',Consolas,'Courier New',monospace;font-size:13px;font-weight:700;color:var(--kf-bn-strip-ink) !important;text-decoration:none !important;}
960.kf-nav-banner .kf-bn-user b{color:var(--ca-accent);font-weight:700;}
961/* gold crown chip — active service count (IPT puts VIP days here) */
962.kf-nav-banner .kf-bn-vip{
963  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;margin-left:2px;
964  border-radius:3px;border:1px solid var(--kf-bn-vip-bd);
965  background:var(--kf-bn-vip-bg);
966  color:var(--kf-bn-vip-fg) !important;font-family:'Cascadia Code',Consolas,'Courier New',monospace;font-size:11px;font-weight:700;
967  line-height:1.3;white-space:nowrap;text-decoration:none !important;transition:border-color .15s ease,box-shadow .15s ease,filter .15s ease;
968}
969.kf-nav-banner .kf-bn-vip b{color:var(--kf-bn-vip-num);font-weight:800;}
970.kf-nav-banner .kf-bn-vip:hover{border-color:rgba(250,204,21,.85);box-shadow:0 0 10px rgba(245,179,1,.3);filter:saturate(1.25);}
971.kf-nav-banner .kf-bn-vip .kf-bn-crown{color:var(--kf-bn-vip-crown);animation:kfBnCrown 2.6s ease-in-out infinite;}
972@keyframes kfBnCrown{0%,100%{filter:drop-shadow(0 0 1px rgba(245,179,1,.35));}50%{filter:drop-shadow(0 0 4px rgba(245,179,1,.8));}}
973.kf-nav-banner .kf-bn-vip.is-zero{border-color:rgba(128,120,108,.4);background:rgba(128,120,108,.12);color:var(--kf-bn-strip-muted) !important;}
974.kf-nav-banner .kf-bn-vip.is-zero b{color:var(--kf-bn-strip-ink);}
975.kf-nav-banner .kf-bn-vip.is-zero .kf-bn-crown{color:var(--kf-bn-strip-muted);animation:none;}
976/* IPT-style stat row: colored icon + value, no boxes (only the crown is a badge) */
977.kf-nav-banner .kf-bn-sts{display:inline-flex;align-items:center;gap:0 14px;flex-wrap:wrap;margin-left:6px;}
978.kf-nav-banner .kf-bn-st{
979  display:inline-flex;align-items:center;gap:6px;
980  font-family:'Cascadia Code',Consolas,'Courier New',monospace;font-size:11.5px;font-weight:700;
981  color:var(--kf-bn-strip-ink) !important;text-decoration:none !important;white-space:nowrap;
982  transition:filter .12s ease;
983}
984.kf-nav-banner .kf-bn-st i{font-size:12px;line-height:1;}
985.kf-nav-banner .kf-bn-st:hover{filter:brightness(1.25);}
986.kf-nav-banner .kf-bn-st.st-ref i{color:var(--kf-bn-c-green);}
987.kf-nav-banner .kf-bn-st.st-credit i{color:var(--kf-bn-c-gold);}
988.kf-nav-banner .kf-bn-st.st-inv i{color:var(--kf-bn-c-red);}
989.kf-nav-banner .kf-bn-st.st-discord i{color:#5865F2;font-size:13px;}
990html[data-kf-theme="dark"] .kf-nav-banner .kf-bn-st.st-discord i{color:#7b86ff;}
991.kf-nav-banner .kf-bn-st.st-due i{color:var(--kf-bn-c-blue);}
992.kf-nav-banner .kf-bn-st.is-dim,.kf-nav-banner .kf-bn-st.is-dim i{color:var(--kf-bn-strip-muted) !important;}
993.kf-nav-banner .kf-bn-st.is-hot{color:var(--kf-bn-c-red) !important;}
994.kf-nav-banner .kf-bn-st.is-warm{color:var(--kf-bn-c-orange) !important;}
995.kf-nav-banner .kf-bn-st.is-hot i,.kf-nav-banner .kf-bn-st.is-warm i{color:inherit;}
996.kf-nav-banner{--kf-bn-c-green:#167a36;--kf-bn-c-gold:#9a6303;--kf-bn-c-red:#b91c1c;--kf-bn-c-orange:#b45309;--kf-bn-c-blue:#0369a1;}
997html[data-kf-theme="dark"] .kf-nav-banner{--kf-bn-c-green:#3fc86a;--kf-bn-c-gold:#f0b445;--kf-bn-c-red:#f06060;--kf-bn-c-orange:#f7a541;--kf-bn-c-blue:#4db3f0;}
998@media (prefers-reduced-motion:reduce){.kf-nav-banner .kf-bn-vip .kf-bn-crown{animation:none;}}
999.kf-nav-banner .kf-bn-stats ul.navbar-nav{display:flex !important;flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 0 auto !important;padding:0 !important;list-style:none;}
1000.kf-nav-banner .kf-bn-stats ul.navbar-nav > li{margin:0 !important;}
1001.kf-nav-banner .kf-bn-stats .dropdown-menu{margin-top:6px;}
1002.kf-nav-banner .kf-bn-ql{
1003  display:flex;flex-wrap:wrap;gap:0 16px;padding:0 14px;max-height:0;overflow:hidden;
1004  background:var(--kf-bn-ql);transition:max-height .22s ease,padding .22s ease;
1005}
1006.kf-nav-banner .kf-bn-foot:hover .kf-bn-ql,
1007.kf-nav-banner .kf-bn-foot:focus-within .kf-bn-ql{max-height:140px;padding:6px 14px 8px;}
1008.kf-nav-banner .kf-bn-ql a{color:var(--kf-bn-strip-ink) !important;font-family:var(--kf-body);font-size:11px;font-weight:700;text-decoration:none !important;white-space:nowrap;line-height:1.9;}
1009.kf-nav-banner .kf-bn-ql a::before{content:'\276F';margin-right:5px;color:var(--ca-accent);font-family:'Cascadia Code',Consolas,monospace;}
1010.kf-nav-banner .kf-bn-ql a i{margin-right:5px;color:var(--kf-item-c,inherit);}
1011.kf-nav-banner .kf-bn-ql a:hover{color:var(--kf-item-c,var(--ca-accent)) !important;}
1012/* touch screens can't hover — keep the bar open */
1013@media (hover:none){.kf-nav-banner .kf-bn-ql{max-height:none;padding:6px 14px 8px;}}
1014
1015/* Button row (nav1) — the IPTorrents ribbon. A band 10px wider than the
1016   banner on each side (the overhang folds under with two little
1017   triangles); icon and label both sit INSIDE the band. Hover lifts the
1018   cell and paints the label the item's icon color. */
1019body .kf-nav-banner #mainNavbar{display:block !important;}
1020body .kf-nav-banner #mainNavbar ul.kf-bn-buts{
1021  /* Bootstrap's .navbar-nav is a COLUMN outside .navbar-expand — force the row. */
1022  position:relative;display:flex !important;flex-direction:row !important;flex-wrap:nowrap;align-items:stretch;
1023  width:calc(100% + 20px) !important;margin:-1px -10px 0 !important;padding:0 !important;list-style:none;
1024  --kf-bn-band:54px;
1025}
1026/* tighten the page against the ribbon (the stock 20px main-body padding,
1027   the ribbon's margin and the homepage box's 24px top margin stacked into
1028   a hole under the header) */
1029#header.kf-nav-banner ~ #main-body{padding-top:14px !important;}
1030#header.kf-nav-banner ~ #main-body .kf-hp-landing{margin-top:0 !important;} /* homepage box: the 14px above is the whole gap */
1031/* The product / pricing pages pull themselves up under the classic header
1032   with a negative top margin (.kf-wrap{margin-top:-34px}); under the ribbon
1033   that buried their eyebrow line. Neutralise it in banner mode. */
1034#header.kf-nav-banner ~ #main-body .kf-wrap{margin-top:0 !important;}
1035@media (max-width:580px){#header.kf-nav-banner ~ #main-body .kf-wrap{margin-top:0 !important;}}
1036/* the band itself (icon + label live inside it) */
1037body .kf-nav-banner #mainNavbar ul.kf-bn-buts::before{
1038  content:'';position:absolute;left:0;right:0;top:0;height:var(--kf-bn-band);
1039  background:var(--kf-bn-ribbon);border-radius:2px;
1040  box-shadow:var(--kf-bn-ribbon-shadow);
1041}
1042/* the folded ends under the overhang — left one hangs off the first
1043   button, right one off the band itself (the last <li> is WHMCS's hidden
1044   "More" item, so a pseudo on it never renders) */
1045body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li:first-child::before,
1046body .kf-nav-banner #mainNavbar ul.kf-bn-buts::after{
1047  content:'';position:absolute;top:var(--kf-bn-band);width:0;height:0;z-index:1;
1048  border-style:solid;border-width:7px 10px 0 10px;border-color:var(--kf-bn-fold) transparent transparent transparent;
1049}
1050body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li:first-child::before{left:0;border-left-color:transparent;border-left-width:0;border-right-width:10px;}
1051body .kf-nav-banner #mainNavbar ul.kf-bn-buts::after{right:0;border-right-color:transparent;border-right-width:0;border-left-width:10px;}
1052body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li{position:relative;flex:1 1 0;min-width:0;margin:0 !important;padding:0 !important;}
1053body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li.collapsable-dropdown{display:none !important;}
1054/* thin separators between icons, inside the band */
1055/* separators sit on the <li>, not the link — the link lifts on hover and
1056   took the line with it. Full band height, solid, like IPT's. */
1057body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li + li::before{
1058  content:'';position:absolute;left:0;top:0;height:var(--kf-bn-band);width:1px;background:var(--kf-bn-sep);z-index:1;pointer-events:none;
1059}
1060body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li > a{
1061  position:relative;display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:5px;
1062  min-height:0 !important;height:var(--kf-bn-band) !important;padding:0 6px !important;
1063  background:transparent !important;border:none !important;border-radius:0 !important;box-shadow:none !important;
1064  color:var(--kf-bn-ribbon-muted) !important;font-family:var(--kf-body) !important;font-size:11.5px !important;font-weight:700 !important;
1065  letter-spacing:.02em;text-transform:none;line-height:1 !important;white-space:nowrap;
1066  transform:none !important;transition:transform .14s ease,color .14s ease !important;
1067}
1068body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li > a i{
1069  display:block;font-size:18px;line-height:1;margin:0;
1070  color:var(--kf-item-c,var(--ca-accent));
1071  transition:transform .14s ease;
1072}
1073/* Icon weight (addon: Navbar Style → Ribbon icon weight). Font Awesome
1074   Pro picks the glyph set by weight — 300 light / 400 regular / 900 solid —
1075   so this is how the ribbon gets IPT's thin crisp outline icons no matter
1076   which style the item was configured with. Duotone icons are re-homed on
1077   the Pro family so the weight applies to them too. "auto" leaves icons
1078   exactly as configured. */
1079body .kf-nav-banner #mainNavbar ul.kf-bn-buts.kf-bn-iw-light > li > a i,
1080body .kf-nav-banner #mainNavbar ul.kf-bn-buts.kf-bn-iw-regular > li > a i,
1081body .kf-nav-banner #mainNavbar ul.kf-bn-buts.kf-bn-iw-solid > li > a i{font-family:'Font Awesome 5 Pro','Font Awesome 6 Pro','Font Awesome 5 Free','Font Awesome 6 Free' !important;}
1082body .kf-nav-banner #mainNavbar ul.kf-bn-buts.kf-bn-iw-light > li > a i{font-weight:300 !important;}
1083body .kf-nav-banner #mainNavbar ul.kf-bn-buts.kf-bn-iw-regular > li > a i{font-weight:400 !important;}
1084body .kf-nav-banner #mainNavbar ul.kf-bn-buts.kf-bn-iw-solid > li > a i{font-weight:900 !important;}
1085/* Duotone icons: FA draws them as an absolutely-positioned ::before plus
1086   an in-flow ::after. Once re-homed on the Pro family the ::after glyph
1087   doesn't exist, so it is hidden — and ::before must come back into flow
1088   or the icon collapses to zero height and lands on top of the label. */
1089body .kf-nav-banner #mainNavbar ul.kf-bn-buts[class*="kf-bn-iw-"]:not(.kf-bn-iw-auto) > li > a i::after{display:none !important;}
1090body .kf-nav-banner #mainNavbar ul.kf-bn-buts[class*="kf-bn-iw-"]:not(.kf-bn-iw-auto) > li > a i::before{position:static !important;opacity:1 !important;color:inherit !important;}
1091body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li > a:hover{
1092  background:transparent !important;color:var(--kf-item-c,var(--ca-accent)) !important;
1093  transform:translateY(-3px) !important;box-shadow:none !important;text-decoration:none !important;
1094}
1095body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li > a:hover i{transform:scale(1.12);}
1096body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li.active > a,
1097body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li > a.active{color:var(--kf-item-c,var(--ca-accent)) !important;}
1098body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li > a .badge{position:absolute;top:6px;right:calc(50% - 26px);}
1099@media (max-width:767px){
1100  .kf-nav-banner .kf-bn-wrap{padding:10px 10px 0;}
1101  .kf-nav-banner .kf-bn-banner{height:calc(var(--kf-bn-h,190px) * .6);min-height:118px;}
1102  .kf-nav-banner .kf-bn-top{gap:2px 12px;padding:6px 10px 12px;}
1103  .kf-nav-banner .kf-bn-top a{font-size:11px;}
1104  .kf-nav-banner .kf-bn-stats{padding:5px 10px;font-size:11px;}
1105  .kf-nav-banner .kf-bn-user{font-size:12px;}
1106  /* phones: no overhang, cells wrap four per row and each carries its own band */
1107  body .kf-nav-banner #mainNavbar ul.kf-bn-buts{width:100% !important;margin:4px 0 0 !important;flex-wrap:wrap;gap:4px;}
1108  body .kf-nav-banner #mainNavbar ul.kf-bn-buts::before,
1109  body .kf-nav-banner #mainNavbar ul.kf-bn-buts::after,
1110  body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li:first-child::before,
1111  body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li + li::before{display:none;}
1112  body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li{flex:1 1 calc(25% - 3px);min-width:calc(25% - 3px);}
1113  body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li > a{background:var(--kf-bn-ribbon) !important;border-radius:3px !important;height:auto !important;min-height:58px !important;padding:8px 4px !important;gap:5px;color:var(--kf-bn-ribbon-muted) !important;font-size:10px !important;white-space:normal;text-align:center;box-shadow:var(--kf-bn-ribbon-shadow) !important;}
1114  body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li > a i{font-size:17px;}
1115  body .kf-nav-banner #mainNavbar ul.kf-bn-buts > li > a:hover{background:var(--kf-bn-ribbon) !important;color:var(--kf-bn-ribbon-ink) !important;transform:none !important;}
1116}
1117
1118/* ── TILES (clientarea quick stats) ────────────────────── */
1119.tiles .tile{
1120  background:var(--ca-surface) !important;
1121  border:2px solid var(--ca-ink-border) !important;
1122  border-radius:6px !important;
1123  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important;
1124  margin:6px;
1125  padding:18px;
1126  text-decoration:none !important;
1127  color:var(--ca-text) !important;
1128  transition:.15s ease;
1129  display:block;
1130  position:relative;
1131  overflow:hidden;
1132}
1133.tiles .tile:hover{
1134  transform:translate(-2px,-2px);
1135  box-shadow:5px 5px 0 var(--ca-ink-shadow) !important;
1136  border-color:var(--ca-ink-border) !important;
1137}
1138.tiles .tile .stat{font-family:var(--kf-display);font-size:32px;font-weight:900;color:var(--ca-text);}
1139.tiles .tile .title{font-family:var(--kf-body);font-size:13px;font-weight:600;color:var(--ca-muted);text-transform:uppercase;letter-spacing:.08em;}
1140.tiles .tile i{color:var(--ca-accent);font-size:24px;margin-bottom:8px;}
1141.tiles .tile .highlight{display:none !important;}
1142
1143/* ============================================================
1144   DARK MODE — GLOBAL OVERRIDES
1145   Everything the stock WHMCS theme.css paints white/light that
1146   the token system above doesn't already reach. Page templates
1147   handle their own scoped bits; this block is the safety net so
1148   light never creeps into a dark page. `!important` throughout
1149   because theme.css and the addon's late CSS both use it.
1150   ============================================================ */
1151html[data-kf-theme="dark"] body,
1152html[data-kf-theme="dark"] body.primary-bg-color{background:var(--ca-page) !important;color:var(--ca-text) !important;}
1153html[data-kf-theme="dark"] #main-body,
1154html[data-kf-theme="dark"] .main-content,
1155html[data-kf-theme="dark"] .primary-content{background:transparent !important;color:var(--ca-text) !important;}
1156html[data-kf-theme="dark"] p,
1157html[data-kf-theme="dark"] li,
1158html[data-kf-theme="dark"] td,
1159html[data-kf-theme="dark"] th,
1160html[data-kf-theme="dark"] label,
1161html[data-kf-theme="dark"] dt,
1162html[data-kf-theme="dark"] dd,
1163html[data-kf-theme="dark"] legend,
1164html[data-kf-theme="dark"] .text-dark,
1165html[data-kf-theme="dark"] .text-body,
1166html[data-kf-theme="dark"] .text-black-50{color:var(--ca-text);}
1167html[data-kf-theme="dark"] .text-muted,
1168html[data-kf-theme="dark"] small,
1169html[data-kf-theme="dark"] .small,
1170html[data-kf-theme="dark"] .help-block,
1171html[data-kf-theme="dark"] .form-text{color:var(--ca-muted) !important;}
1172html[data-kf-theme="dark"] hr{border-top-color:var(--ca-border) !important;}
1173html[data-kf-theme="dark"] code,
1174html[data-kf-theme="dark"] pre,
1175html[data-kf-theme="dark"] kbd{background:var(--ca-surface2) !important;color:var(--ca-text) !important;border-color:var(--ca-border) !important;}
1176html[data-kf-theme="dark"] ::selection{background:var(--ca-accent);color:var(--ca-on-accent);}
1177html[data-kf-theme="dark"] ::-webkit-scrollbar{width:12px;height:12px;}
1178html[data-kf-theme="dark"] ::-webkit-scrollbar-track{background:var(--ca-page);}
1179html[data-kf-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--ca-border2);border:3px solid var(--ca-page);border-radius:6px;}
1180
1181/* Bootstrap utility backgrounds */
1182html[data-kf-theme="dark"] .bg-white,
1183html[data-kf-theme="dark"] .bg-light,
1184html[data-kf-theme="dark"] .bg-transparent-light,
1185html[data-kf-theme="dark"] .well,
1186html[data-kf-theme="dark"] .jumbotron,
1187html[data-kf-theme="dark"] .panel,
1188html[data-kf-theme="dark"] .panel-body,
1189html[data-kf-theme="dark"] .panel-default,
1190html[data-kf-theme="dark"] .card-footer,
1191html[data-kf-theme="dark"] .modal-content,
1192html[data-kf-theme="dark"] .modal-header,
1193html[data-kf-theme="dark"] .modal-body,
1194html[data-kf-theme="dark"] .modal-footer,
1195html[data-kf-theme="dark"] .list-group-item,
1196html[data-kf-theme="dark"] .list-group-item-action,
1197html[data-kf-theme="dark"] .tab-content,
1198html[data-kf-theme="dark"] .toast,
1199html[data-kf-theme="dark"] .accordion,
1200html[data-kf-theme="dark"] .card-columns .card,
1201html[data-kf-theme="dark"] .client-home-panels .card,
1202html[data-kf-theme="dark"] .ticket-reply,
1203html[data-kf-theme="dark"] .ticket-reply .card,
1204html[data-kf-theme="dark"] .kb-article,
1205html[data-kf-theme="dark"] .kb-article-list .kb-article,
1206html[data-kf-theme="dark"] .kb-categories .kb-category,
1207html[data-kf-theme="dark"] .markdown-editor,
1208html[data-kf-theme="dark"] .editor-toolbar,
1209html[data-kf-theme="dark"] .CodeMirror,
1210html[data-kf-theme="dark"] .dataTables_wrapper,
1211html[data-kf-theme="dark"] .paginate_button,
1212html[data-kf-theme="dark"] .panel-sidebar,
1213html[data-kf-theme="dark"] .sidebar-card,
1214html[data-kf-theme="dark"] .sidebar-card-body{background-color:var(--ca-surface) !important;color:var(--ca-text) !important;border-color:var(--ca-border) !important;}
1215html[data-kf-theme="dark"] .modal-content{border:2px solid var(--ca-ink-border) !important;box-shadow:6px 6px 0 var(--ca-ink-shadow) !important;border-radius:6px !important;}
1216html[data-kf-theme="dark"] .modal-header{background:var(--ca-surface3) !important;border-bottom:2px solid var(--ca-ink-border) !important;}
1217html[data-kf-theme="dark"] .modal-footer{background:var(--ca-surface2) !important;border-top:1px solid var(--ca-border) !important;}
1218html[data-kf-theme="dark"] .modal-backdrop{background:#000 !important;}
1219html[data-kf-theme="dark"] .modal-backdrop.show{opacity:.7 !important;}
1220html[data-kf-theme="dark"] .close,
1221html[data-kf-theme="dark"] .modal .close{color:var(--ca-text) !important;text-shadow:none !important;opacity:.8;}
1222html[data-kf-theme="dark"] .modal-title,
1223html[data-kf-theme="dark"] .panel-title,
1224html[data-kf-theme="dark"] .card-title{color:var(--ca-text) !important;}
1225html[data-kf-theme="dark"] .card-header .card-title,
1226html[data-kf-theme="dark"] .card-header h3{color:var(--ca-muted2) !important;}
1227html[data-kf-theme="dark"] .panel-heading,
1228html[data-kf-theme="dark"] .panel-default>.panel-heading{background:var(--ca-surface3) !important;color:var(--ca-muted2) !important;border-color:var(--ca-border) !important;}
1229html[data-kf-theme="dark"] .list-group-item:hover{background-color:var(--ca-surface2) !important;}
1230html[data-kf-theme="dark"] .list-group-item.active{background-color:var(--ca-accent) !important;color:var(--ca-on-accent) !important;}
1231
1232/* Tabs, pills */
1233html[data-kf-theme="dark"] .nav-tabs{border-bottom-color:var(--ca-border) !important;}
1234html[data-kf-theme="dark"] .nav-tabs .nav-link{color:var(--ca-muted) !important;border-color:transparent !important;background:transparent !important;}
1235html[data-kf-theme="dark"] .nav-tabs .nav-link:hover{color:var(--ca-text) !important;border-color:var(--ca-border) var(--ca-border) transparent !important;}
1236html[data-kf-theme="dark"] .nav-tabs .nav-link.active,
1237html[data-kf-theme="dark"] .nav-tabs .nav-item.show .nav-link{color:var(--ca-text) !important;background:var(--ca-surface) !important;border-color:var(--ca-border) var(--ca-border) var(--ca-surface) !important;}
1238html[data-kf-theme="dark"] .nav-pills .nav-link{color:var(--ca-text) !important;}
1239html[data-kf-theme="dark"] .nav-pills .nav-link.active{background:var(--ca-accent) !important;color:var(--ca-on-accent) !important;}
1240
1241/* Forms — inputs, selects, checks, file pickers, select2, datepicker */
1242html[data-kf-theme="dark"] .form-control,
1243html[data-kf-theme="dark"] input.form-control,
1244html[data-kf-theme="dark"] select.form-control,
1245html[data-kf-theme="dark"] textarea.form-control,
1246html[data-kf-theme="dark"] .custom-select,
1247html[data-kf-theme="dark"] .custom-file-label,
1248html[data-kf-theme="dark"] .input-group-text,
1249html[data-kf-theme="dark"] .select2-container--default .select2-selection--single,
1250html[data-kf-theme="dark"] .select2-container--default .select2-selection--multiple,
1251html[data-kf-theme="dark"] .select2-dropdown,
1252html[data-kf-theme="dark"] .select2-search__field,
1253html[data-kf-theme="dark"] .datepicker,
1254html[data-kf-theme="dark"] .bootstrap-datetimepicker-widget,
1255html[data-kf-theme="dark"] .iti__country-list{background:var(--ca-surface2) !important;color:var(--ca-text) !important;border-color:var(--ca-border) !important;}
1256html[data-kf-theme="dark"] .form-control::placeholder,
1257html[data-kf-theme="dark"] input::placeholder,
1258html[data-kf-theme="dark"] textarea::placeholder{color:var(--ca-muted) !important;opacity:1;}
1259html[data-kf-theme="dark"] .form-control:disabled,
1260html[data-kf-theme="dark"] .form-control[readonly]{background:var(--ca-surface3) !important;color:var(--ca-muted) !important;}
1261html[data-kf-theme="dark"] select.form-control option,
1262html[data-kf-theme="dark"] .custom-select option{background:var(--ca-surface2);color:var(--ca-text);}
1263html[data-kf-theme="dark"] .select2-container--default .select2-selection__rendered,
1264html[data-kf-theme="dark"] .select2-results__option{color:var(--ca-text) !important;}
1265html[data-kf-theme="dark"] .select2-results__option--highlighted{background:var(--ca-accent) !important;color:var(--ca-on-accent) !important;}
1266html[data-kf-theme="dark"] .custom-control-label::before,
1267html[data-kf-theme="dark"] .custom-checkbox .custom-control-label::before,
1268html[data-kf-theme="dark"] .custom-radio .custom-control-label::before{background:var(--ca-surface2) !important;border-color:var(--ca-border2) !important;}
1269html[data-kf-theme="dark"] .custom-control-input:checked~.custom-control-label::before{background:var(--ca-accent) !important;border-color:var(--ca-accent) !important;}
1270html[data-kf-theme="dark"] .iti__country-list li:hover,
1271html[data-kf-theme="dark"] .iti__country-list .iti__country.iti__highlight{background:var(--ca-surface3) !important;}
1272
1273/* Buttons the token system doesn't already cover */
1274html[data-kf-theme="dark"] .btn-light,
1275html[data-kf-theme="dark"] .btn-secondary,
1276html[data-kf-the
1276me="dark"] .btn-outline-secondary,
1277html[data-kf-theme="dark"] .btn-default,
1278html[data-kf-theme="dark"] .btn.btn-default,
1279html[data-kf-theme="dark"] .btn-link.btn-block{background:var(--ca-surface2) !important;color:var(--ca-text) !important;border-color:var(--ca-ink-border) !important;}
1280html[data-kf-theme="dark"] .btn-default:hover,
1281html[data-kf-theme="dark"] .btn.btn-default:hover,
1282html[data-kf-theme="dark"] .btn-secondary:hover,
1283html[data-kf-theme="dark"] .btn-light:hover{background:var(--ca-surface3) !important;color:var(--ca-text) !important;}
1284html[data-kf-theme="dark"] .btn-link{color:var(--ca-accent) !important;}
1285
1286/* Tables, DataTables */
1287html[data-kf-theme="dark"] .table,
1288html[data-kf-theme="dark"] .table-container,
1289html[data-kf-theme="dark"] table.dataTable{background:var(--ca-surface) !important;color:var(--ca-text) !important;border-color:var(--ca-border) !important;}
1290html[data-kf-theme="dark"] .table tbody td,
1291html[data-kf-theme="dark"] .table tbody th,
1292html[data-kf-theme="dark"] .table td,
1293html[data-kf-theme="dark"] .table th{border-color:var(--ca-border) !important;color:var(--ca-text) !important;background:transparent;}
1294html[data-kf-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
1295html[data-kf-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td{background:var(--ca-surface2) !important;}
1296html[data-kf-theme="dark"] .table-hover tbody tr:hover,
1297html[data-kf-theme="dark"] .table-hover tbody tr:hover td{background:var(--ca-surface3) !important;color:var(--ca-text) !important;}
1298html[data-kf-theme="dark"] .dataTables_info,
1299html[data-kf-theme="dark"] .dataTables_length,
1300html[data-kf-theme="dark"] .dataTables_filter,
1301html[data-kf-theme="dark"] .dataTables_paginate,
1302html[data-kf-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button{color:var(--ca-text) !important;background:transparent !important;}
1303html[data-kf-theme="dark"] table.dataTable thead .sorting:after,
1304html[data-kf-theme="dark"] table.dataTable thead .sorting_asc:after,
1305html[data-kf-theme="dark"] table.dataTable thead .sorting_desc:after{color:var(--ca-muted) !important;}
1306
1307/* Alerts / badges / labels the stock CSS paints with light tints */
1308html[data-kf-theme="dark"] .alert-secondary,
1309html[data-kf-theme="dark"] .alert-light,
1310html[data-kf-theme="dark"] .alert-default{background:var(--ca-surface2) !important;color:var(--ca-text) !important;border-color:var(--ca-border) !important;}
1311html[data-kf-theme="dark"] .badge-light,
1312html[data-kf-theme="dark"] .badge-secondary,
1313html[data-kf-theme="dark"] .label-default{background:var(--ca-surface3) !important;color:var(--ca-text) !important;border:1px solid var(--ca-border2) !important;}
1314html[data-kf-theme="dark"] .badge-info,
1315html[data-kf-theme="dark"] .badge-primary{background:var(--ca-accent-bg) !important;color:var(--ca-accent-dark) !important;border-color:var(--ca-accent-border) !important;}
1316
1317/* Tooltips, popovers, dropdown separators */
1318html[data-kf-theme="dark"] .tooltip-inner{background:var(--ca-surface3) !important;color:var(--ca-text) !important;border:1px solid var(--ca-border2);}
1319html[data-kf-theme="dark"] .tooltip .arrow::before{border-top-color:var(--ca-border2) !important;border-bottom-color:var(--ca-border2) !important;}
1320html[data-kf-theme="dark"] .dropdown-divider{border-top-color:var(--ca-border) !important;}
1321html[data-kf-theme="dark"] .dropdown-item{color:var(--ca-text) !important;}
1322html[data-kf-theme="dark"] .dropdown-item:hover,
1323html[data-kf-theme="dark"] .dropdown-item:focus{background:var(--ca-surface2) !important;color:var(--ca-text) !important;}
1324html[data-kf-theme="dark"] .popover .arrow::after{border-bottom-color:var(--ca-surface) !important;}
1325
1326/* Client-area bits: service list rows, status placeholders, alerts list */
1327html[data-kf-theme="dark"] .div-service-item,
1328html[data-kf-theme="dark"] .client-home-shortcuts .btn-block,
1329html[data-kf-theme="dark"] .client-alerts li a{color:var(--ca-text) !important;}
1330html[data-kf-theme="dark"] .client-alerts li{border-bottom-color:var(--ca-border) !important;}
1331html[data-kf-theme="dark"] .client-alerts li a:hover{background:var(--ca-surface2) !important;}
1332html[data-kf-theme="dark"] .list-group-item-heading{color:var(--ca-text) !important;}
1333html[data-kf-theme="dark"] .card-header.bg-color-1,
1334html[data-kf-theme="dark"] .card-header[class*="bg-color-"]{background:var(--ca-surface3) !important;}
1335html[data-kf-theme="dark"] .loader-overlay,
1336html[data-kf-theme="dark"] .modal-loading{background:rgba(27,26,24,.75) !important;}
1337html[data-kf-theme="dark"] img.logo-img{background:transparent !important;}
1338
1339/* Markdown editor (ticket replies) + progress tracks — theme.css hits
1340   these with high-specificity !important rules, so match them here. */
1341html[data-kf-theme="dark"] .md-editor,
1342html[data-kf-theme="dark"] .md-editor.active,
1343html[data-kf-theme="dark"] .md-editor > .md-header,
1344html[data-kf-theme="dark"] .md-editor > .md-footer,
1345html[data-kf-theme="dark"] .md-editor > textarea.markdown-editor,
1346html[data-kf-theme="dark"] .md-editor > .md-preview,
1347html[data-kf-theme="dark"] .md-editor .md-preview{background:var(--ca-surface2) !important;color:var(--ca-text) !important;border-color:var(--ca-border) !important;}
1348html[data-kf-theme="dark"] .md-editor .btn-toolbar .btn,
1349html[data-kf-theme="dark"] .md-editor .btn-default{background:var(--ca-surface3) !important;color:var(--ca-text) !important;border-color:var(--ca-border2) !important;}
1350html[data-kf-theme="dark"] .progress{background:var(--ca-surface3) !important;}
1351
1352/* Service overview tile (product name / group box) — theme.css paints it
1353   white; native <select> option lists — options inherit a muted color. */
1354html[data-kf-theme="dark"] div.product-details div.product-status,
1355html[data-kf-theme="dark"] .product-details .product-status,
1356html[data-kf-theme="dark"] .product-details .product-icon{background:var(--ca-surface) !important;color:var(--ca-text) !important;}
1357html[data-kf-theme="dark"] .product-details .product-icon h3,
1358html[data-kf-theme="dark"] .product-details .product-icon h4,
1359html[data-kf-theme="dark"] .product-details .product-status h3,
1360html[data-kf-theme="dark"] .product-details .product-status h4{color:var(--ca-text) !important;}
1361html[data-kf-theme="dark"] .product-details .product-icon h4{color:var(--ca-muted) !important;}
1362html[data-kf-theme="dark"] select,
1363html[data-kf-theme="dark"] select option,
1364html[data-kf-theme="dark"] #order-standard_cart select,
1365html[data-kf-theme="dark"] #order-standard_cart select option{color:var(--ca-text) !important;background-color:var(--ca-surface2) !important;}
1366html[data-kf-theme="dark"] select option:disabled{color:var(--ca-muted) !important;}
1367html[data-kf-theme="dark"] select option:checked{background-color:var(--ca-surface3) !important;}
1368
1369/* Return-to-admin tab, footer wrapper, breadcrumbs */
1370html[data-kf-theme="dark"] .btn-return-to-admin{background:var(--ca-surface3) !important;color:var(--ca-text) !important;border-color:var(--ca-ink-border) !important;}
1371html[data-kf-theme="dark"] .breadcrumb-item.active{color:var(--ca-muted) !important;}
1372html[data-kf-theme="dark"] .breadcrumb-item+.breadcrumb-item::before{color:var(--ca-muted) !important;}
1373</style>
1374
1375
1376
1377
1378<!-- Dynamic Template Compatibility -->
1379<!-- Please update your theme to include or have a comment on the following to negate dynamic inclusion -->
1380<link rel="stylesheet" type="text/css" href="/assets/fonts/css/fontawesome.min.css" />
1381
1382
1383<!-- Dynamic Template Compatibility -->
1384<!-- Please update your theme to include or have a comment on the following to negate dynamic inclusion -->
1385<link rel="stylesheet" type="text/css" href="/assets/fonts/css/fontawesome-solid.min.css" />
1386
1387
1388<!-- Dynamic Template Compatibility -->
1389<!-- Please update your theme to include or have a comment on the following to negate dynamic inclusion -->
1390<link rel="stylesheet" type="text/css" href="/assets/fonts/css/fontawesome-regular.min.css" />
1391
1392
1393<!-- Dynamic Template Compatibility -->
1394<!-- Please update your theme to include or have a comment on the following to negate dynamic inclusion -->
1395<link rel="stylesheet" type="text/css" href="/assets/fonts/css/fontawesome-light.min.css" />
1396
1397
1398<!-- Dynamic Template Compatibility -->
1399<!-- Please update your theme to include or have a comment on the following to negate dynamic inclusion -->
1400<link rel="stylesheet" type="text/css" href="/assets/fonts/css/fontawesome-brands.min.css" />
1401
1402
1403<!-- Dynamic Template Compatibility -->
1404<!-- Please update your theme to include or have a comment on the following to negate dynamic inclusion -->
1405<link rel="stylesheet" type="text/css" href="/assets/fonts/css/fontawesome-duotone.min.css" />
1406
1407</head>
1408<body class="primary-bg-color" data-phone-cc-input="1">
1409
1410                <video class="kf-bg-video"
1411               autoplay muted loop playsinline preload="auto"
1412               disablepictureinpicture
1413               controlslist="nodownload noplaybackrate noremoteplayback"
1414               tabindex="-1"
1415               aria-hidden="true">
1416            <source src="/templates/kwickflix/img/videobg/macos.mp4" type="video/mp4">
1417        </video>
1418        <div class="kf-bg-overlay"></div>
1419                <div class="kf-bg-grid" aria-hidden="true"></div>
1420    
1421        
1422
1423        
1424                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
1425            <header id="header" class="header kf-nav-banner">
1426        <div class="container kf-bn-wrap">
1427            <div id="mainNavbar" class="kf-bn-main">
1428                <div class="kf-bn-banner kf-bn-fit-fit" style="--kf-bn-h:225px;--kf-bn-dim:0.15;--kf-bn-img:url('/templates/kwickflix/img/banner-images/doom.png');">
1429                                                                <img class="kf-bn-img" src="/templates/kwickflix/img/banner-images/doom.png" alt="">
1430                                        <div class="kf-bn-top">
1431                                                                        <sp
1431an class="kf-bn-top-right">
1432                                                            <a class="kf-theme-btn kf-bn-theme" href="#" role="button" aria-label="Switch light / dark mode" title="Light / dark mode"><i class="far fa-moon fa-fw kf-ti-moon"></i><i class="far fa-sun fa-fw kf-ti-sun"></i></a>
1433                                                    </span>
1434                    </div>
1435                                        <div class="kf-bn-foot">
1436                        <div class="kf-bn-stats">
1437                                                            <span class="kf-bn-user"><b>&#10095;</b> The Kwick Shop</span>
1438                                                        <ul class="navbar-nav ml-auto">
1439                                                                <li class="nav-item">
1440                                    <a class="nav-link cart-btn" href="/cart.php?a=view">
1441                                        <i class="far fa-shopping-cart fa-fw"></i>
1442                                        <span id="cartItemCountDesktop" class="badge badge-info">0</span>
1443                                        <span class="sr-only">Shopping Cart</span>
1444                                    </a>
1445                                </li>
1446                                                                                                                                                                                                                                                                                            <li class="nav-item kf-bn-acct" menuItemName="Login" id="Secondary_Navbar-Account-Login">
1447                                                        <a class="nav-link" href="/clientarea.php">Login</a>
1448                                                    </li>
1449                                                                                                                                                                                                <li class="nav-item kf-bn-acct" menuItemName="Register" id="Secondary_Navbar-Account-Register">
1450                                                        <a class="nav-link" href="/register.php">Register</a>
1451                                                    </li>
1452                                                                                                                                                                                                                                                                                            <li class="nav-item kf-bn-acct" menuItemName="Forgot Password?" id="Secondary_Navbar-Account-Forgot_Password?">
1453                                                        <a class="nav-link" href="/index.php?rp=/password/reset">Forgot Password?</a>
1454                                                    </li>
1455                                                                                                                                                                                                                                    </ul>
1456                        </div>
1457                                                                    </div>
1458                </div>
1459                                <ul id="kfBnNav" class="navbar-nav kf-bn-buts kf-bn-iw-light">
1460                        <li menuItemName="Home" class="d-block no-collapse" id="Primary_Navbar-Home">
1461        <a class="pr-4" href="/index.php">
1462            <i class="fas fa-home"></i>&nbsp;            Home
1463                    </a>
1464            </li>
1465    <li menuItemName="Client Area" class="d-block" id="Primary_Navbar-Client_Area">
1466        <a class="pr-4" href="/clientarea.php">
1467            <i class="fad fa-users"></i>&nbsp;            Client Area
1468                    </a>
1469            </li>
1470    <li menuItemName="Server Status" class="d-block" id="Primary_Navbar-Server_Status">
1471        <a class="pr-4" href="/serverstatus.php">
1472            <i class="fad fa-server"></i>&nbsp;            Server Status
1473                    </a>
1474            </li>
1475    <li menuItemName="Announcements" class="d-block" id="Primary_Navbar-Announcements">
1476        <a class="pr-4" href="/index.php?rp=/announcements">
1477            <i class="fas fa-bullhorn"></i>&nbsp;            Announcements
1478                    </a>
1479            </li>
1480    <li menuItemName="Media Library" class="d-block" id="Primary_Navbar-Media_Library">
1481        <a class="pr-4" href="/media-library.php">
1482            <i class="fas fa-popcorn"></i>&nbsp;            Media Library
1483                    </a>
1484            </li>
1485    <li menuItemName="IPTV Channels" class="d-block" id="Primary_Navbar-IPTV_Channels">
1486        <a class="pr-4" href="/iptv-guide.php">
1487            <i class="fad fa-tv-retro"></i>&nbsp;            IPTV Channels
1488                    </a>
1489            </li>
1490    <li class="d-none dropdown collapsable-dropdown">
1491        <a class="dropdown-toggle" href="#" id="navbarDropdownMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
1492            More
1493        </a>
1494        <ul class="collapsable-dropdown-menu dropdown-menu" aria-labelledby="navbarDropdownMenu">
1495        </ul>
1496    </li>
1497                </ul>
1498            </div>
1499        </div>
1500    </header>
1501    
1502        
1503    
1503<script>
1504    (function() {
1505        function initMobileNotifPopover() {
1506            if (typeof jQuery === 'undefined' || !jQuery.fn.popover) {
1507                // jQuery/Bootstrap not ready yet — retry shortly.
1508                setTimeout(initMobileNotifPopover, 100);
1509                return;
1510            }
1511            var $btn = jQuery('#accountNotificationsMobile');
1512            if (!$btn.length) return;
1513            // Dispose any pre-existing popover instance (defensive against
1514            // double-init if WHMCS's stock JS auto-discovers data-toggle).
1515            try { $btn.popover('dispose'); } catch (e) {}
1516            $btn.popover({
1517                html: true,
1518                placement: 'bottom',
1519                trigger: 'manual',
1520                container: 'body',
1521                content: function() {
1522                    var $c = jQuery('#accountNotificationsMobileContent');
1523                    return $c.length ? $c.html() : '';
1524                }
1525            });
1526            // Manual toggle on click — more reliable than trigger:'click'
1527            // when WHMCS's own JS may also be wiring popover handlers.
1528            $btn.on('click', function(e) {
1529                e.preventDefault();
1530                e.stopPropagation();
1531                $btn.popover('toggle');
1532            });
1533            // Click-outside closes the popover.
1534            jQuery(document).on('click.kfMobileNotif', function(e) {
1535                if (!jQuery(e.target).closest('#accountNotificationsMobile, .popover').length) {
1536                    $btn.popover('hide');
1537                }
1538            });
1539        }
1540        if (document.readyState === 'loading') {
1541            document.addEventListener('DOMContentLoaded', initMobileNotifPopover);
1542        } else {
1543            initMobileNotifPopover();
1544        }
1545    })();
1546
1547    /* Light / dark selector pills. Toggles the html attribute, remembers
1548       the choice in localStorage (read back by the tiny script in <head>
1549       on the next page so there is no flash), and fires a DOM event any
1550       page script can listen for (`kf-theme-change`, detail.theme). */
1551    (function(){
1552        function current(){ return document.documentElement.getAttribute('data-kf-theme') === 'dark' ? 'dark' : 'light'; }
1553        function apply(mode){
1554            if (mode === 'dark') document.documentElement.setAttribute('data-kf-theme','dark');
1555            else document.documentElement.removeAttribute('data-kf-theme');
1556            try { localStorage.setItem('kf_theme', mode); } catch(e){}
1557            try { document.dispatchEvent(new CustomEvent('kf-theme-change', {detail:{theme:mode}})); } catch(e){}
1558        }
1559        function wire(){
1560            var btns = document.querySelectorAll('.kf-theme-btn');
1561            for (var i = 0; i < btns.length; i++){
1562                btns[i].addEventListener('click', function(e){
1563                    e.preventDefault();
1564                    apply(current() === 'dark' ? 'light' : 'dark');
1565                });
1566            }
1567        }
1568        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', wire);
1569        else wire();
1570    })();
1571    </script>
1571
1572    
1573
1574    
1575    <nav class="master-breadcrumb" aria-label="breadcrumb">
1576        <div class="container">
1577            <ol class="breadcrumb">
1578            <li class="breadcrumb-item active" aria-current="page">
1579                        Shopping Cart
1580                    </li>
1581    </ol>
1582        </div>
1583    </nav>
1584
1585        
1586    
1587    <section id="main-body">
1588        <div class="container">
1589            <div class="row">
1590
1591                        <div class="col-12 primary-content">
1592
1593
1594
1595    
1595<script>
1596        var statesTab = 10;
1597        var stateNotRequired = true;
1598    </script>
1598
1599    <link rel="stylesheet" type="text/css" href="/templates/orderforms/kwick_cart/css/all.min.css?v=25dc9a" />
1600<link rel="stylesheet" type="text/css" href="/templates/orderforms/kwick_cart/css/kwickflix.css?v=25dc9a" />
1601<script type="text/javascript" src="/templates/orderforms/kwick_cart/js/scripts.min.js?v=25dc9a"></script>
1601    
1601<script type="text/javascript" src="/assets/js/StatesDropdown.js"></script>
1601
1602
1603                <div class="kf-cart-marquee "
1604             style="--kf-cart-mq-speed:1;">
1605            <div class="kf-cart-marquee-track" id="kfCartMarqueeTrack">
1606                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/bch.svg" alt="BCH" loading="lazy"></div>
1607                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/bnb.svg" alt="BNB" loading="lazy"></div>
1608                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/btc.svg" alt="BTC" loading="lazy"></div>
1609                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/btt.svg" alt="BTT" loading="lazy"></div>
1610                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/busd.svg" alt="BUSD" loading="lazy"></div>
1611                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/creditcard.svg" alt="CREDITCARD" loading="lazy"></div>
1612                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/dash.svg" alt="DASH" loading="lazy"></div>
1613                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/doge.svg" alt="DOGE" loading="lazy"></div>
1614                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/etc.svg" alt="ETC" loading="lazy"></div>
1615                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/eth.svg" alt="ETH" loading="lazy"></div>
1616                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/ltc.svg" alt="LTC" loading="lazy"></div>
1617                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/mastercard.svg" alt="MASTERCARD" loading="lazy"></div>
1618                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/shib.svg" alt="SHIB" loading="lazy"></div>
1619                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/tron.svg" alt="TRON" loading="lazy"></div>
1620                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/tusd.svg" alt="TUSD" loading="lazy"></div>
1621                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/usdc.svg" alt="USDC" loading="lazy"></div>
1622                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/usdt.svg" alt="USDT" loading="lazy"></div>
1623                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/visa.svg" alt="VISA" loading="lazy"></div>
1624                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/xmr.svg" alt="XMR" loading="lazy"></div>
1625                                    <div class="kf-cart-marquee-item"><img src="/templates/kwickflix/img/checkoutmarquee/zec.svg" alt="ZEC" loading="lazy"></div>
1626                            </div>
1627        </div>
1628        
1629        
1629<script>
1630        (function(){
1631            var track = document.getElementById('kfCartMarqueeTrack');
1632            if (!track) return;
1633            // Shuffle once per pageload for visual variety, then duplicate
1634            // the (now-shuffled) set so the -50% scroll loops seamlessly.
1635            var items = Array.from(track.children);
1636            for (var i = items.length - 1; i > 0; i--){
1637                var j = Math.floor(Math.random() * (i + 1));
1638                var tmp = items[i]; items[i] = items[j]; items[j] = tmp;
1639            }
1640            track.innerHTML = '';
1641            items.forEach(function(el){ track.appendChild(el.cloneNode(true)); });
1642            items.forEach(function(el){ track.appendChild(el.cloneNode(true)); });
1643        })();
1644        </script>
1644
1645        
1646    
1647    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
1648
1649    
1650    <style>
1651    /* ── WHMCS WRAPPER STRIP ── */
1652    .panel,.panel-default,.panel-body,.portlet,.portlet-body,
1653    .card,.card-body,.content-container,.content-panel{
1654      background:transparent !important;
1655      border:none !important;
1656      box-shadow:none !important;
1657    }
1658
1659    :root{
1660      --vc-bg:var(--ca-surface3);
1661      --vc-surface:var(--ca-surface);
1662      --vc-surface2:var(--ca-surface2);
1663      --vc-surface3:var(--ca-surface3);
1664      --vc-border:var(--ca-border);
1665      --vc-border2:var(--ca-border2);
1666      --vc-text:var(--ca-text);
1667      --vc-muted:var(--ca-muted);
1668      --vc-muted2:var(--ca-muted2);
1669      --vc-accent:var(--ca-accent);
1670      --vc-accent-dark:var(--ca-accent-dark);
1671      --vc-accent-bg:var(--ca-accent-bg);
1672      --vc-accent-border:var(--ca-accent-border);
1673      --vc-danger:var(--ca-danger);
1674      --vc-shadow-sm:var(--ca-shadow-sm);
1675      --vc-shadow-md:var(--ca-shadow-md);
1676      --vc-shadow-lg:0 12px 40px rgba(var(--ca-ink-rgb),.1),0 4px 12px rgba(var(--ca-ink-rgb),.06);
1677      --vc-shadow-green:0 6px 24px rgba(34,160,74,.25),0 2px 8px rgba(34,160,74,.12);
1678    }
1679
1680    /* ── CART MARQUEE (inline so it works even if the bridge CSS file isn't loaded) ── */
1681    .kf-cart-marquee{
1682      overflow:hidden;
1683      width:100%;
1684      margin:0 0 20px;
1685      -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
1686              mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
1687    }
1688    .kf-cart-marquee-track{
1689      display:flex;
1690      align-items:center;
1691      gap:60px;
1692      width:max-content;
1693      padding-right:60px;
1694      animation:kfCartMarqueeScroll calc(35s / var(--kf-cart-mq-speed, 1)) linear infinite;
1695    }
1696    .kf-cart-marquee-item{
1697      flex-shrink:0;
1698      display:flex;
1699      align-items:center;
1700      transition:opacity .2s ease, filter .2s ease;
1701    }
1702    .kf-cart-marquee-item img{
1703      height:52px;
1704      width:auto;
1705      object-fit:contain;
1706      opacity:.85;
1707    }
1708    @keyframes kfCartMarqueeScroll{
1709      from{transform:translateX(0);}
1710      to  {transform:translateX(-50%);}
1711    }
1712    .kf-cart-marquee.kf-cart-marquee-greyscale .kf-cart-marquee-item{
1713      opacity:.4;
1714      filter:grayscale(1);
1715    }
1716    .kf-cart-marquee.kf-cart-marquee-greyscale .kf-cart-marquee-item:hover{
1717      opacity:.9;
1718      filter:grayscale(0);
1719    }
1720
1721    /* ── CART WRAPPER ── */
1722    #order-standard_cart{
1723      font-family:'Outfit',sans-serif;
1724      color:var(--vc-text);
1725      max-width:1100px;
1726      margin:0 auto;
1727      padding:0 0 60px;
1728    }
1729
1730    /* ── PAGE TITLE ── */
1731    #order-standard_cart .header-lined{
1732      margin-bottom:28px;
1733      padding-bottom:20px;
1734      border-bottom:1px solid var(--vc-border);
1735    }
1736
1737    #order-standard_cart .header-lined h1{
1738      font-family:'Barlow Condensed',sans-serif;
1739      font-size:clamp(36px,6vw,56px);
1740      font-weight:900;
1741      letter-spacing:-.02em;
1742      line-height:1;
1743      color:var(--vc-text);
1744    }
1745
1746    /* ── ALERTS ── */
1747    #order-standard_cart .alert{
1748      border-radius:10px;
1749      border:1px solid var(--vc-border);
1750      font-family:'Outfit',sans-serif;
1751      font-size:14px;
1752      padding:14px 18px;
1753      margin-bottom:20px;
1754    }
1755    #order-standard_cart .alert-warning{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.25);color:#92400e;}
1756    #order-standard_cart .alert-danger{background:var(--ca-danger-bg);border-color:var(--ca-danger-border);color:var(--vc-danger);}
1757    #order-standard_cart .alert-success{background:var(--vc-accent-bg);border-color:var(--vc-accent-border);color:var(--vc-accent-dark);}
1758    #order-standard_cart .alert-info{background:rgba(26,111,255,.06);border-color:rgba(26,111,255,.2);color:#1a4fff;}
1759
1760    /* ── CART ITEMS HEADER ── */
1761    #order-standard_cart .view-cart-items-header{
1762      background:var(--vc-surface2);
1763      border:1px solid var(--vc-border);
1764      border-radius:10px 10px 0 0;
1765      padding:12px 18px;
1766      font-size:11px;
1767      font-weight:800;
1768      text-transform:uppercase;
1769      letter-spacing:.14em;
1770      color:var(--vc-muted);
1771    }
1772
1773    /* ── CART ITEMS LIST ── */
1774    #order-standard_cart .view-cart-items{
1775      border:1px solid var(--vc-border);
1776      border-top:none;
1777      border-radius:0 0 10px 10px;
1778      background:var(--vc-surface);
1779      margin-bottom:4px;
1780      overflow:hidden;
1781    }
1782
1783    #order-standard_cart .view-cart-items .item{
1784      padding:16px 18px;
1785      border-bottom:1px solid var(--vc-border);
1786      transition:.15s ease;
1787    }
1788
1789    #order-standard_cart .view-cart-items .item:last-child{border-bottom:none;}
1790    #order-standard_cart .view-cart-items .item:hover{background:var(--vc-surface2);}
1791
1792    #order-standard_cart .item-title{
1793      font-size:15px;
1794      font-weight:600;
1795      color:var(--vc-text);
1796      display:block;
1797      margin-bottom:3px;
1798    }
1799
1800    #order-standard_cart .item-group{
1801      font-size:12px;
1802      color:var(--vc-muted);
1803      font-weight:400;
1804      display:block;
1805    }
1806
1807    #order-standard_cart .item-domain{
1808      font-size:12px;
1809      color:var(--vc-muted2);
1810      font-weight:500;
1811      display:block;
1812      font-style:italic;
1813    }
1814
1815    #order-standard_cart .item-price{
1816      font-size:15px;
1817      font-weight:700;
1818      color:var(--vc-text);
1819      text-align:right;
1820    }
1821
1822    #order-standard_cart .item-price .cycle{
1823      display:block;
1824      font-size:11px;
1825      font-weight:500;
1826      color:var(--vc-muted);
1827      margin-top:2px;
1828    }
1829
1830    #order-standard_cart .view-cart-empty{
1831      padding:40px 24px;
1832      text-align:center;
1833      font-size:15px;
1834      color:var(--vc-muted);
1835      font-style:italic;
1836    }
1837
1838    /* ── EDIT/REMOVE LINKS ── */
1839    #order-standard_cart .btn-link{
1840      color:var(--vc-muted) !important;
1841      font-size:12px !important;
1842      font-weight:500;
1843      padding:0 6px;
1844      text-decoration:none;
1845      transition:.15s;
1846    }
1847    #order-standard_cart .btn-link:hover{color:var(--vc-danger) !important;}
1848
1849    /* ── EMPTY CART BTN ── */
1850    #order-standard_cart .empty-cart{
1851      margin-bottom:24px;
1852      text-align:right;
1853    }
1854    #order-standard_cart #btnEmptyCart{
1855      background:var(--vc-danger);
1856      color:var(--ca-on-accent) !important;
1857      border-radius:6px;
1858      padding:6px 14px;
1859      font-weight:600;
1860      font-size:13px;
1861      text-decoration:none;
1862    }
1863    #order-standard_cart #btnEmptyCart:hover{
1864      background:#a81f1f;
1865      color:var(--ca-on-accent) !important;
1866    }
1867    #order-standard_cart #btnEmptyCart i,
1868    #order-standard_cart #btnEmptyCart span{
1869      color:var(--ca-on-accent) !important;
1870    }
1871
1872    /* ── TABS (promo / tax) ── */
1873    #order-standard_cart .view-cart-tabs{
1874      margin-top:16px;
1875    }
1876
1877    #order-standard_cart .nav-tabs{
1878      border-bottom:1px solid var(--vc-border);
1879      margin-bottom:0;
1880    }
1881
1882    #order-standard_cart .nav-tabs .nav-item .nav-link{
1883      font-family:'Outfit',sans-serif;
1884      font-size:13px;
1885      font-weight:600;
1886      color:var(--vc-muted);
1887      border:1px solid transparent;
1888      border-radius:8px 8px 0 0;
1889      padding:10px 18px;
1890      transition:.15s;
1891    }
1892
1893    #order-standard_cart .nav-tabs .nav-item .nav-link:hover{color:var(--vc-text);}
1894    #order-standard_cart .nav-tabs .nav-item .nav-link.active{
1895      color:var(--vc-accent);
1896      background:var(--vc-surface);
1897      border-color:var(--vc-border) var(--vc-border) var(--vc-surface);
1898    }
1899
1900    #order-standard_cart .tab-content{
1901      background:var(--vc-surface);
1902      border:1px solid var(--vc-border);
1903      border-top:none;
1904      border-radius:0 0 10px 10px;
1905      padding:20px 18px;
1906    }
1907
1908    /* ── PROMO INPUT ── */
1909    #order-standard_cart .form-group .form-control{
1910      border:1.5px solid var(--vc-border);
1911      border-radius:8px;
1912      font-family:'Outfit',sans-serif;
1913      font-size:14px;
1914      padding:10px 14px;
1915      background:var(--vc-surface);
1916      color:var(--vc-text);
1917      transition:.15s;
1918    }
1919
1920    #order-standard_cart .form-group .form-control:focus{
1921      border-color:var(--vc-accent);
1922      box-shadow:0 0 0 3px var(--vc-accent-bg);
1923      outline:none;
1924    }
1925
1926    #order-standard_cart .prepend-icon .field-icon{
1927      color:var(--vc-muted);
1928    }
1929    #order-standard_cart .prepend-icon .form-control{
1930      padding-left:40px;
1931    }
1932
1933    #order-standard_cart .btn-default{
1934      background:var(--vc-surface2);
1935      border:1.5px solid var(--vc-border);
1936      border-radius:8px;
1937      font-family:'Outfit',sans-serif;
1938      font-size:14px;
1939      font-weight:600;
1940      color:var(--vc-text);
1941      padding:10px 20px;
1942      transition:.18s ease;
1943    }
1944
1945    #order-standard_cart .btn-default:hover{
1946      background:var(--vc-surface3);
1947      border-color:var(--vc-border2);
1948    }
1949
1950    /* ── VIEW CART GATEWAY ── */
1951    #order-standard_cart .view-cart-gateway-checkout{
1952      margin:12px 0;
1953    }
1954
1955    /* ── ORDER SUMMARY SIDEBAR ── */
1956    /* Kill stock .summary-container background (#f8f8f8 + padding +
1957       border-radius from css/style.css line 428) — it creates an inner
1958       box inside the order-summary card. The parent provides the chrome. */
1959    #order-standard_cart .summary-container,
1960    #order-standard_cart #producttotal,
1961    #order-standard_cart #producttotal .summary-container{
1962      background:transparent !important;
1963      border:none !important;
1964      border-radius:0 !important;
1965      padding:0 !important;
1966      min-height:0 !important;
1967      box-shadow:none !important;
1968      font-size:inherit !important;
1969    }
1970
1971    #order-standard_cart .order-summary{
1972      background:var(--vc-surface);
1973      border:1px solid var(--vc-border);
1974      border-radius:14px;
1975      box-shadow:var(--vc-shadow-md);
1976      padding:24px 22px;
1977      position:sticky;
1978      top:24px;
1979    }
1980
1981    #order-standard_cart .order-summary h2{
1982      font-family:'Barlow Condensed',sans-serif;
1983      font-size:28px;
1984      font-weight:900;
1985      letter-spacing:-.01em;
1986      color:var(--vc-text);
1987      margin-bottom:20px;
1988      line-height:1;
1989    }
1990
1991    #order-standard_cart .summary-container .subtotal{
1992      display:flex;
1993      justify-content:space-between;
1994      align-items:center;
1995      font-size:14px;
1996      font-weight:500;
1997      color:var(--vc-muted);
1998      padding-bottom:12px;
1999      margin-bottom:12px;
2000      border-bottom:1px solid var(--vc-border);
2001    }
2002
2003    #order-standard_cart .summary-container .bordered-totals{
2004      padding:10px 0;
2005      border-bottom:1px solid var(--vc-border);
2006      margin-bottom:10px;
2007    }
2008
2009    #order-standard_cart .summary-container .bordered-totals .clearfix{
2010      display:flex;
2011      justify-content:space-between;
2012      font-size:13px;
2013      color:var(--vc-muted);
2014      margin-bottom:6px;
2015    }
2016
2017    #order-standard_cart .recurring-totals{
2018      display:flex;
2019      justify-content:space-between;
2020      align-items:flex-start;
2021      font-size:14px;
2022      color:var(--vc-muted2);
2023      font-weight:500;
2024      padding-bottom:16px;
2025      margin-bottom:16px;
2026      border-bottom:1px solid var(--vc-border);
2027    }
2028
2029    #order-standard_cart .recurring-charges{
2030      text-align:right;
2031      font-size:13px;
2032      color:var(--vc-muted);
2033    }
2034
2035    #order-standard_cart .recurring-charges .cost{
2036      font-weight:700;
2037      color:var(--vc-text);
2038    }
2039
2040    /* Total Due Today — flat centered typography, NOT a nested card.
2041       The order-summary parent already provides the card chrome; another
2042       boxed element inside it reads as box-in-box. The accent color on
2043       the price text gives it enough emphasis on its own. No top border
2044       either — the breathing room above is enough of a separator. */
2045    #order-standard_cart .total-due-today{
2046      background:transparent;
2047      border:none;
2048      padding:8px 0 4px;
2049      margin-bottom:12px;
2050      display:flex;
2051      flex-direction:column;
2052      align-items:center;
2053      text-align:center;
2054      gap:4px;
2055    }
2056
2057    #order-standard_cart .total-due-today .amt{
2058      font-family:'Barlow Condensed',sans-serif;
2059      font-size:40px;
2060      font-weight:900;
2061      color:var(--vc-accent);
2062      line-height:1;
2063      letter-spacing:-.02em;
2064    }
2065
2066    #order-standard_cart .total-due-today > span:last-child{
2067      font-size:11px;
2068      font-weight:700;
2069      text-transform:uppercase;
2070      letter-spacing:.12em;
2071      color:var(--vc-muted);
2072    }
2073
2074    /* ── CHECKOUT BUTTON ── */
2075    #order-standard_cart .btn-checkout{
2076      display:block;
2077      width:100%;
2078      background:var(--vc-accent);
2079      color:var(--ca-on-accent) !important;
2080      border:none;
2081      border-radius:8px;
2082      padding:16px 24px;
2083      font-family:'Outfit',sans-serif;
2084      font-size:16px;
2085      font-weight:700;
2086      text-align:center;
2087      text-decoration:none !important;
2088      transition:.2s ease;
2089      box-shadow:var(--vc-shadow-green);
2090      margin-bottom:10px;
2091    }
2092
2093    #order-standard_cart .btn-checkout:hover{
2094      background:var(--vc-accent-dark);
2095      transform:translateY(-1px);
2096      box-shadow:0 8px 32px rgba(34,160,74,.32);
2097      color:var(--ca-on-accent) !important;
2098    }
2099
2100    #order-standard_cart .btn-checkout.disabled{
2101      opacity:.5;
2102      pointer-events:none;
2103    }
2104
2105    #order-standard_cart .btn-continue-shopping{
2106      display:block;
2107      text-align:center;
2108      font-size:13px;
2109      font-weight:600;
2110      color:var(--vc-muted) !important;
2111      margin-top:6px;
2112      text-decoration:none;
2113    }
2114
2115    #order-standard_cart .btn-continue-shopping:hover{color:var(--vc-text) !important;}
2116
2117    /* ── PROMO CODE APPLIED ── */
2118    #order-standard_cart .view-cart-promotion-code{
2119      background:var(--vc-accent-bg);
2120      border:1px solid var(--vc-accent-border);
2121      border-radius:8px;
2122      padding:10px 14px;
2123      font-size:13px;
2124      font-weight:600;
2125      color:var(--vc-accent-dark);
2126      margin-bottom:12px;
2127    }
2128
2129    /* ── MODAL ── */
2130    #order-standard_cart .modal-content{
2131      border-radius:14px;
2132      border:1px solid var(--vc-border);
2133      box-shadow:var(--vc-shadow-lg);
2134      font-family:'Outfit',sans-serif;
2135    }
2136
2137    #order-standard_cart .modal-body{padding:28px 28px 20px;}
2138    #order-standard_cart .modal-footer{padding:16px 28px 24px;border-top:1px solid var(--vc-border);}
2139
2140    #order-standard_cart .modal-title{
2141      font-family:'Barlow Condensed',sans-serif;
2142      font-size:24px;
2143      font-weight:800;
2144      color:var(--vc-text);
2145    }
2146
2147    #order-standard_cart .modal-footer .btn-primary{
2148      background:var(--vc-danger);
2149      border:none;
2150      border-radius:8px;
2151      padding:10px 24px;
2152      font-weight:700;
2153      font-size:14px;
2154    }
2155
2156    /* ── HIDE SIDEBAR, CENTER LAYOUT ── */
2157    #order-standard_cart .cart-sidebar{
2158      display:none !important;
2159    }
2160    #order-standard_cart .cart-body{
2161      width:100% !important;
2162      max-width:900px;
2163      margin:0 auto;
2164      float:none !important;
2165    }
2166    /* Also hide collapsed sidebar categories on mobile */
2167    #order-standard_cart .sidebar-categories-collapsed,
2168#order-standard_cart .sidebar-categories-collapsed *,
2169#order-standard_cart .cart-sidebar,
2170#order-standard_cart .cart-sidebar *,
2171#order-standard_cart .categories-collapsed,
2172#order-standard_cart .categories-collapsed *,
2173#order-standard_cart .panel-actions,
2174#order-standard_cart .panel-actions *,
2175#order-standard_cart .actions,
2176#order-standard_cart .actions *{
2177  display:none !important;
2178}
2179
2180    /* ── RESPONSIVE ── */
2181    @media(max-width:767px){
2182      #order-standard_cart .order-summary{
2183        position:static;
2184        margin-top:24px;
2185      }
2186    }
2187    
2188/* ═══════════════════════════════════════════════════════════════════
2189   KWICKFLIX TERMINAL LAYER
2190   Sits after the softer rules above and out-ranks them (html body
2191   prefix + !important) — hard 2px ink borders, offset shadows, strip
2192   headers, squared chips, kwickplayer outlined buttons. Colors still
2193   flow from the --vc-* tokens (and the addon's per-gateway accents).
2194   ═══════════════════════════════════════════════════════════════════ */
2195html body #order-standard_cart{
2196  --vc-shadow-sm:none;
2197  --vc-shadow-md:none;
2198  --vc-shadow-lg:none;
2199  --vc-shadow-green:none;
2200  --vc-mono:'Cascadia Code',Consolas,'Courier New',monospace;
2201}
2202
2203/* page title — a terminal title bar, like the card strips */
2204html body #order-standard_cart .header-lined{
2205  background:var(--vc-surface3) !important;
2206  border:2px solid var(--ca-ink-border) !important;
2207  border-radius:5px !important;
2208  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important;
2209  padding:11px 16px !important;
2210  margin:0 0 22px !important;
2211  text-align:center !important;
2212}
2213html body #order-standard_cart .header-lined h1{
2214  font-family:'Outfit',sans-serif !important;
2215  font-size:14px !important;
2216  font-weight:800 !important;
2217  letter-spacing:.22em !important;
2218  text-transform:uppercase !important;
2219  color:var(--vc-muted2) !important;
2220  margin:0 !important;
2221  line-height:1.4 !important;
2222}
2223html body #order-standard_cart .kf-configure-subtitle{
2224  font-family:var(--vc-mono) !important;
2225  font-size:12px !important;
2226  font-weight:600 !important;
2227  text-align:center;
2228}
2229
2230/* ── boxes ── */
2231html body #order-standard_cart .product-info,
2232html body #order-standard_cart .field-container,
2233html body #order-standard_cart .product-configurable-options,
2234html body #order-standard_cart .kf-checkout-box,
2235html body #order-standard_cart .already-registered,
2236html body #order-standard_cart .apply-credit-container,
2237html body #order-standard_cart .cc-input-container,
2238html body #order-standard_cart .panel-addon,
2239html body #order-standard_cart #containerExistingAccountSelect,
2240html body #order-standard_cart .kf-payment-box{
2241  background:var(--vc-surface) !important;
2242  border:2px solid var(--ca-ink-border) !important;
2243  border-radius:5px !important;
2244  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important;
2245}
2246html body #order-standard_cart .panel-addon:hover{
2247  transform:translate(-2px,-2px);
2248  box-shadow:5px 5px 0 var(--ca-ink-shadow) !important;
2249}
2250html body #order-standard_cart .panel-addon-selected{
2251  box-shadow:3px 3px 0 var(--vc-accent) !important;
2252}
2253html body #order-standard_cart .panel-price{
2254  border-top:2px solid var(--ca-ink-border) !important;
2255  background:var(--vc-surface2) !important;
2256  font-family:var(--vc-mono) !important;
2257  font-size:12.5px !important;
2258  color:var(--vc-accent-dark) !important;
2259}
2260html body #order-standard_cart .panel-add{
2261  background:var(--vc-surface3) !important;
2262  color:var(--vc-accent-dark) !important;
2263  border-top:2px solid var(--ca-ink-border) !important;
2264  font-weight:800 !important;
2265}
2266html body #order-standard_cart .panel-add:hover{background:var(--vc-surface2) !important;}
2267
2268/* section sub-headings inside boxes */
2269html body #order-standard_cart .sub-heading .primary-bg-color{
2270  text-transform:uppercase !important;
2271  letter-spacing:.03em !important;
2272  border-bottom:2px solid var(--ca-ink-border) !important;
2273  padding-bottom:8px !important;
2274}
2275html body #order-standard_cart .additional-info-title{
2276  text-transform:uppercase !important;
2277  letter-spacing:.03em !important;
2278}
2279html body #order-standard_cart .additional-info-required{
2280  font-family:var(--vc-mono) !important;
2281  font-weight:600 !important;
2282  color:var(--vc-muted) !important;
2283}
2284
2285/* ── inputs ── */
2286html body #order-standard_cart .form-control,
2287html body #order-standard_cart .field,
2288html body #order-standard_cart input.form-control,
2289html body #order-standard_cart select.form-control,
2290html body #order-standard_cart select.custom-select,
2291html body #order-standard_cart textarea.form-control,
2292html body #order-standard_cart .prepend-icon .form-control,
2293html body #order-standard_cart .input-group .form-control{
2294  border:2px solid var(--ca-ink-border) !important;
2295  border-radius:4px !important;
2296  box-shadow:2px 2px 0 var(--ca-ink-shadow) !important;
2297  background-color:var(--vc-surface) !important;
2298}
2299html body #order-standard_cart .form-control:focus,
2300html body #order-standard_cart .field:focus,
2301html body #order-standard_cart input.form-control:focus,
2302html body #order-standard_cart select.form-control:focus,
2303html body #order-standard_cart select.custom-select:focus,
2304html body #order-standard_cart textarea.form-control:focus,
2305html body #order-standard_cart .prepend-icon .form-control:focus,
2306html body #order-standard_cart .input-group .form-control:focus{
2307  border-color:var(--ca-ink-border) !important;
2308  box-shadow:2px 2px 0 var(--vc-accent) !important;
2309  outline:none !important;
2310}
2311html body #order-standard_cart .input-group-prepend .input-group-text,
2312html body #order-standard_cart .input-group-append .input-group-text{
2313  border:2px solid var(--ca-ink-border) !important;
2314  border-radius:4px !important;
2315  background:var(--vc-surface3) !important;
2316}
2317
2318/* ── buttons — kwickplayer outlined style ── */
2319html body #order-standard_cart .btn-default,
2320html body #order-standard_cart .btn-info,
2321html body #order-standard_cart .btn-warning,
2322html body #order-standard_cart .btn.generate-password,
2323html body #order-standard_cart .modal-footer .btn,
2324html body #order-standard_cart #btnEmptyCart{
2325  background:var(--vc-surface3) !important;
2326  color:var(--vc-muted2) !important;
2327  border:2px solid var(--ca-ink-border) !important;
2328  border-radius:4px !important;
2329  box-shadow:2px 2px 0 var(--ca-ink-shadow) !important;
2330  font-family:'Outfit',sans-serif !important;
2331  font-weight:800 !important;
2332  text-shadow:none !important;
2333  transition:.1s ease !important;
2334  transform:none;
2335}
2336html body #order-standard_cart .btn-default:hover,
2337html body #order-standard_cart .btn-info:hover,
2338html body #order-standard_cart .btn-warning:hover,
2339html body #order-standard_cart .btn.generate-password:hover,
2340html body #order-standard_cart .modal-footer .btn:hover,
2341html body #order-standard_cart #btnEmptyCart:hover{
2342  background:var(--vc-surface2) !important;
2343  transform:translate(-1px,-1px);
2344  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important;
2345}
2346html body #order-standard_cart .btn-default:active,
2347html body #order-standard_cart .btn-info:active,
2348html body #order-standard_cart .btn-warning:active,
2349html body #order-standard_cart .btn.generate-password:active,
2350html body #order-standard_cart .modal-footer .btn:active,
2351html body #order-standard_cart #btnEmptyCart:active{
2352  transform:translate(1px,1px);
2353  box-shadow:1px 1px 0 var(--ca-ink-shadow) !important;
2354}
2355html body #order-standard_cart .btn-info{color:#1d4ed8 !important;}
2356html body #order-standard_cart .btn-warning{color:#b45309 !important;}
2357html body #order-standard_cart .btn.generate-password{color:var(--vc-accent-dark) !important;}
2358html body #order-standard_cart #btnEmptyCart,
2359html body #order-standard_cart #btnEmptyCart i,
2360html body #order-standard_cart #btnEmptyCart span,
2361html body #order-standard_cart .modal-footer .btn-primary{color:#b91c1c !important;}
2362html body #order-standard_cart .modal-footer .btn-primary{background:var(--vc-surface3) !important;border:2px solid var(--ca-ink-border) !important;}
2363html body #order-standard_cart .btn *{color:inherit !important;}
2364
2365/* the big CTAs — Continue / Checkout / Complete Order */
2366html body #order-standard_cart #btnCompleteProductConfig,
2367html body #order-standard_cart .btn-checkout,
2368html body #order-standard_cart #btnCompleteOrder,
2369html body #order-standard_cart #btnExistingLogin{
2370  background:var(--vc-surface3) !important;
2371  color:var(--vc-accent-dark) !important;
2372  border:2px solid var(--ca-ink-border) !important;
2373  border-radius:4px !important;
2374  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important;
2375  font-family:'Outfit',sans-serif !important;
2376  font-weight:900 !important;
2377  text-shadow:none !important;
2378  transition:.1s ease !important;
2379  transform:none;
2380}
2381html body #order-standard_cart #btnCompleteProductConfig:hover,
2382html body #order-standard_cart .btn-checkout:hover,
2383html body #order-standard_cart #btnCompleteOrder:hover:not([disabled]),
2384html body #order-standard_cart #btnExistingLogin:hover{
2385  background:var(--vc-surface2) !important;
2386  color:var(--vc-accent-dark) !important;
2387  transform:translate(-1px,-1px);
2388  box-shadow:4px 4px 0 var(--ca-ink-shadow) !important;
2389}
2390html body #order-standard_cart #btnCompleteProductConfig:active,
2391html body #order-standard_cart .btn-checkout:active,
2392html body #order-standard_cart #btnCompleteOrder:active,
2393html body #order-standard_cart #btnExistingLogin:active{
2394  transform:translate(1px,1px);
2395  box-shadow:1px 1px 0 var(--ca-ink-shadow) !important;
2396}
2397html body #order-standard_cart .btn-checkout.disabled,
2398html body #order-standard_cart #btnCompleteOrder[disabled]{
2399  opacity:.5 !important;
2400  transform:none !important;
2401  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important;
2402}
2403html body #order-standard_cart .btn-continue-shopping{
2404  font-family:var(--vc-mono) !important;
2405  font-size:12px !important;
2406  font-weight:700 !important;
2407}
2408html body #order-standard_cart .btn-continue-shopping::before{content:'❯ ';color:var(--vc-accent);}
2409
2410/* ── order summary — title strip + terminal card ── */
2411html body #order-standard_cart .order-summary,
2412html body #order-standard_cart #orderSummary .order-summary{
2413  background:var(--vc-surface) !important;
2414  border:2px solid var(--ca-ink-border) !important;
2415  border-radius:5px !important;
2416  box-shadow:4px 4px 0 var(--ca-ink-shadow) !important;
2417  padding:0 0 18px !important;
2418  overflow:visible !important;
2419}
2420html body #order-standard_cart .order-summary h2,
2421html body #order-standard_cart #orderSummary .order-summary h2{
2422  background:var(--vc-surface3) !important;
2423  border-bottom:2px solid var(--ca-ink-border) !important;
2424  border-radius:3px 3px 0 0 !important;
2425  padding:9px 14px !important;
2426  margin:0 0 16px !important;
2427  text-align:center !important;
2428  font-family:'Outfit',sans-serif !important;
2429  font-size:11px !important;
2430  font-weight:800 !important;
2431  letter-spacing:.2em !important;
2432  text-transform:uppercase !important;
2433  color:var(--vc-muted2) !important;
2434  line-height:1.4 !important;
2435}
2436html body #order-standard_cart .order-summary .summary-container,
2437html body #order-standard_cart #orderSummary #producttotal,
2438html body #order-standard_cart .order-summary > .text-right,
2439html body #order-standard_cart #orderSummary > .text-center{
2440  padding:0 18px !important;
2441}
2442html body #order-standard_cart #orderSummary > .text-center{margin-top:14px;}
2443html body #order-standard_cart .order-summary .loader{
2444  position:absolute;right:14px;top:9px;padding:0 !important;
2445}
2446html body #order-standard_cart .order-summary .product-name{
2447  font-family:'Barlow Condensed',sans-serif !important;
2448  font-size:19px !important;
2449  font-weight:900 !important;
2450  text-transform:uppercase;
2451  letter-spacing:.01em;
2452}
2453html body #order-standard_cart .order-summary .product-group{
2454  font-family:var(--vc-mono) !important;
2455  font-style:normal !important;
2456  border-bottom:1px dashed var(--vc-accent-border) !important;
2457}
2458html body #order-standard_cart .order-summary .product-group::before{content:'❯ ';color:var(--vc-accent);}
2459html body #order-standard_cart .total-due-today{
2460  background:var(--vc-surface2) !important;
2461  border:1px dashed var(--vc-accent-border) !important;
2462  border-radius:4px !important;
2463  padding:12px 10px 10px !important;
2464  margin:4px 0 14px !important;
2465}
2466html body #order-standard_cart .total-due-today > span:last-child{
2467  font-family:var(--vc-mono) !important;
2468  letter-spacing:.14em !important;
2469}
2470html body #order-standard_cart .recurring-charges .cost,
2471html body #order-standard_cart .summary-container .subtotal span:last-child,
2472html body #order-standard_cart .summary-container .bordered-totals .clearfix span:last-child{
2473  font-family:var(--vc-mono) !important;
2474  font-weight:700 !important;
2475  color:var(--vc-text) !important;
2476}
2477
2478/* ── review cart — item list ── */
2479html body #order-standard_cart .view-cart-items-header{
2480  background:var(--vc-surface3) !important;
2481  border:2px solid var(--ca-ink-border) !important;
2482  border-bottom:2px solid var(--ca-ink-border) !important;
2483  border-radius:5px 5px 0 0 !important;
2484  font-size:10px !important;
2485  letter-spacing:.2em !important;
2486  color:var(--vc-muted2) !important;
2487  padding:9px 18px !important;
2488  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important; /* same offset as the body; the body paints over the overlap so the seam is invisible */
2489}
2490html body #order-standard_cart .view-cart-items{
2491  border:2px solid var(--ca-ink-border) !important;
2492  border-top:0 !important;
2493  border-radius:0 0 5px 5px !important;
2494  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important;
2495  margin-bottom:14px !important;
2496}
2497html body #order-standard_cart .item-price > span:first-child{
2498  font-family:'Barlow Condensed',sans-serif !important;
2499  font-size:22px !important;
2500  font-weight:900 !important;
2501}
2502html body #order-standard_cart .item-price .cycle{
2503  font-family:var(--vc-mono) !important;
2504  font-size:11px !important;
2505}
2506html body #order-standard_cart .empty-cart{margin:0 0 18px !important;}
2507
2508/* promo / tax — the tab strip becomes a card title bar */
2509html body #order-standard_cart .view-cart-tabs{margin-top:18px !important;}
2510html body #order-standard_cart .view-cart-tabs .nav-tabs{
2511  display:flex !important;
2512  justify-content:center !important;
2513  background:var(--vc-surface3) !important;
2514  border:2px solid var(--ca-ink-border) !important;
2515  border-bottom:0 !important;
2516  border-radius:5px 5px 0 0 !important;
2517  margin:0 !important;
2518  padding:0 !important;
2519  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important; /* same offset as the panel; the panel paints over the overlap so the seam is invisible */
2520}
2521html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-item{margin:0 !important;}
2522html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link,
2523html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active{
2524  background:transparent !important;
2525  border:0 !important;
2526  border-radius:0 !important;
2527  padding:9px 18px !important;
2528  margin:0 !important;
2529  font-family:'Outfit',sans-serif !important;
2530  font-size:11px !important;
2531  font-weight:800 !important;
2532  letter-spacing:.2em !important;
2533  text-transform:uppercase !important;
2534  color:var(--vc-muted) !important;
2535}
2536html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active{
2537  color:var(--vc-muted2) !important;
2538}
2539html body #order-standard_cart .view-cart-tabs .tab-content{
2540  background:var(--vc-surface) !important;
2541  border:2px solid var(--ca-ink-border) !important;
2542  border-radius:0 0 5px 5px !important;
2543  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important;
2544}
2545html body #order-standard_cart .view-cart-promotion-code{
2546  border:1px dashed var(--vc-accent-border) !important;
2547  border-radius:4px !important;
2548  background:var(--vc-surface2) !important;
2549  font-family:var(--vc-mono) !important;
2550}
2551html body #order-standard_cart .view-cart-promotion-code::before{content:'❯ ';color:var(--vc-accent);}
2552
2553/* ── checkout — payment options (addon-controlled colors kept) ── */
2554html body #order-standard_cart .kf-payment-box-header{
2555  background:var(--vc-surface3) !important;
2556  border-bottom:2px solid var(--ca-ink-border) !important;
2557  padding:9px 14px !important;
2558  text-align:center !important;
2559  font-family:'Outfit',sans-serif !important;
2560  font-size:11px !important;
2561  font-weight:800 !important;
2562  letter-spacing:.2em !important;
2563  text-transform:uppercase !important;
2564  color:var(--vc-muted2) !important;
2565}
2566html body #order-standard_cart .kf-payment-methods{padding:14px !important;}
2567html body #order-standard_cart .kf-payment-method{
2568  border:2px solid var(--ca-ink-border) !important;
2569  border-radius:4px !important;
2570  box-shadow:2px 2px 0 var(--ca-ink-shadow) !important;
2571  margin:0 0 12px 0 !important;
2572  transition:.12s ease !important;
2573}
2574html body #order-standard_cart .kf-payment-method:hover{
2575  transform:translate(-1px,-1px);
2576  box-shadow:3px 3px 0 var(--ca-ink-shadow) !important;
2577}
2578html body #order-standard_cart .kf-payment-method:has(input:checked){
2579  background:var(--vc-accent-bg) !important;
2580  border-color:var(--ca-ink-border) !important;
2581  box-shadow:3px 3px 0 var(--kf-pmt-row-accent, var(--vc-accent)) !important;
2582  transform:translate(-1px,-1px);
2583}
2584html body #order-standard_cart .kf-payment-method.kf-payment-method-preferred:has(input:checked){
2585  background:rgba(253,200,88,.08) !important;
2586  border-color:var(--ca-ink-border) !important;
2587  box-shadow:3px 3px 0 var(--kf-pmt-preferred, #d97706) !important;
2588}
2589html body #order-standard_cart .kf-payment-method-title{font-weight:800 !important;}
2590html body #order-standard_cart .kf-payment-method-desc{font-family:var(--vc-mono) !important;font-size:11px !important;}
2591html body #order-standard_cart .kf-payment-method-ribbon{
2592  font-family:var(--vc-mono) !important;
2593  box-shadow:0 1px 0 rgba(var(--ca-ink-rgb),.35) !important;
2594}
2595
2596/* review page — the amount itself, big */
2597html body #order-standard_cart .total-due-today .amt,
2598html body #order-standard_cart .total-due-today #totalDueToday.amt{
2599  font-family:'Barlow Condensed',sans-serif !important;
2600  font-size:46px !important;
2601  font-weight:900 !important;
2602  color:var(--vc-accent) !important;
2603  letter-spacing:-.02em !important;
2604  line-height:1 !important;
2605  background:transparent !important;
2606  border:0 !important;
2607  box-shadow:none !important;
2608  padding:0 !important;
2609  margin:0 !important;
2610}
2611
2612/* ── checkout — strip headers on the account / login boxes ──
2613   (.sub-heading is the first child of each .kf-checkout-box; negative
2614   margins pull it out to the box edges so it reads as a title bar) */
2615html body #order-standard_cart .kf-checkout-box{padding:0 !important;overflow:hidden;}
2616html body #order-standard_cart .kf-checkout-box > *{margin-left:20px;margin-right:20px;}
2617html body #order-standard_cart .kf-checkout-box > .row{margin-left:5px;margin-right:5px;}
2618html body #order-standard_cart .kf-checkout-box > *:last-child{margin-bottom:20px;}
2619html body #order-standard_cart .kf-checkout-box > .sub-heading{
2620  margin:0 0 18px !important;
2621  padding:0 !important;
2622  background:var(--vc-surface3) !important;
2623  border-bottom:2px solid var(--ca-ink-border) !important;
2624}
2625html body #order-standard_cart .kf-checkout-box > .sub-heading:not(:first-child){margin-top:6px !important;}
2626html body #order-standard_cart .kf-checkout-box > .sub-heading .primary-bg-color{
2627  padding:9px 14px !important;
2628  border-bottom:0 !important;
2629  text-align:center !important;
2630  font-family:'Outfit',sans-serif !important;
2631  font-size:11px !important;
2632  font-weight:800 !important;
2633  letter-spacing:.2em !important;
2634  text-transform:uppercase !important;
2635  color:var(--vc-muted2) !important;
2636  line-height:1.4 !important;
2637}
2638html body #order-standard_cart .kf-checkout-box > .sub-heading .primary-bg-color i,
2639html body #order-standard_cart .kf-checkout-box > .sub-heading .primary-bg-color small{
2640  font-family:var(--vc-mono) !important;
2641  font-size:10px !important;
2642  letter-spacing:.04em !important;
2643  text-transform:none !important;
2644  margin-top:2px !important;
2645}
2646
2647/* ── checkout — payment box title strip + in-box notice ── */
2648html body #order-standard_cart .kf-cart-notice-inbox,
2649html body .kf-cart-notice-inbox{margin:14px 14px 0 !important;}
2650html body #order-standard_cart .kf-payment-box .kf-payment-methods{padding:14px !important;}
2651
2652/* ── checkout — final step box (total / notice / terms / Complete Order) ── */
2653html body #order-standard_cart .kf-checkout-final{
2654  background:var(--vc-surface) !important;
2655  border:2px solid var(--ca-ink-border) !important;
2656  border-radius:5px !important;
2657  box-shadow:4px 4px 0 var(--ca-ink-shadow) !important;
2658  margin:20px 0 0 !important;
2659  overflow:hidden;
2660}
2661html body #order-standard_cart .kf-checkout-final-head{
2662  background:var(--vc-surface3) !important;
2663  border-bottom:2px solid var(--ca-ink-border) !important;
2664  padding:9px 14px !important;
2665  text-align:center !important;
2666  font-family:'Outfit',sans-serif !important;
2667  font-size:11px !important;
2668  font-weight:800 !important;
2669  letter-spacing:.2em !important;
2670  text-transform:uppercase !important;
2671  color:var(--vc-muted2) !important;
2672}
2673html body #order-standard_cart .kf-checkout-final-body{padding:18px 18px 20px !important;}
2674html body #order-standard_cart .kf-checkout-final .kf-cart-notice-inbox{margin:0 0 16px !important;}
2675html body #order-standard_cart #totalDueToday:not(.amt){
2676  display:flex !important;
2677  flex-direction:column !important;
2678  align-items:center !important;
2679  gap:4px !important;
2680  background:var(--vc-surface2) !important;
2681  border:1px dashed var(--vc-accent-border) !important;
2682  border-radius:4px !important;
2683  box-shadow:none !important;
2684  padding:14px 12px 12px !important;
2685  margin:0 0 16px !important;
2686  font-family:var(--vc-mono) !important;
2687  font-size:11px !important;
2688  font-weight:700 !important;
2689  letter-spacing:.14em !important;
2690  text-transform:uppercase !important;
2691  color:var(--vc-muted) !important;
2692}
2693html body #order-standard_cart #totalDueToday:not(.amt) strong{
2694  display:block !important;
2695  font-family:'Barlow Condensed',sans-serif !important;
2696  font-size:46px !important;
2697  font-weight:900 !important;
2698  letter-spacing:-.02em !important;
2699  line-height:1 !important;
2700  color:var(--vc-accent) !important;
2701  margin:0 !important;
2702}
2703html body #order-standard_cart .kf-tos-row{margin:0 0 14px !important;}
2704html body #order-standard_cart .kf-tos-row label{font-weight:600 !important;color:var(--vc-muted2) !important;}
2705html body #order-standard_cart .kf-checkout-final-actions #btnCompleteOrder{
2706  display:flex !important;
2707  width:100% !important;
2708  justify-content:center !important;
2709  align-items:center !important;
2710  gap:10px !important;
2711  padding:15px 24px !important;
2712  font-size:16px !important;
2713}
2714/* account cards + password meter */
2715html body #order-standard_cart .account{
2716  border:2px solid var(--vc-border) !important;
2717  border-radius:4px !important;
2718}
2719html body #order-standard_cart .account.active,
2720html body #order-standard_cart .account:has(input:checked){
2721  border-color:var(--ca-ink-border) !important;
2722  background:var(--vc-accent-bg) !important;
2723  box-shadow:2px 2px 0 var(--vc-accent) !important;
2724}
2725html body #order-standard_cart .password-strength-meter .progress{
2726  border:2px solid var(--ca-ink-border) !important;
2727  border-radius:3px !important;
2728  height:12px !important;
2729  background:var(--vc-surface) !important;
2730}
2731html body #order-standard_cart #passwordStrengthTextLabel{
2732  font-family:var(--vc-mono) !important;
2733  font-weight:600 !important;
2734}
2735
2736/* ── alerts + notice boxes ── */
2737html body #order-standard_cart .alert{
2738  border-radius:4px !important;
2739  border-width:2px !important;
2740  border-style:solid !important;
2741  font-weight:600 !important;
2742}
2743html body #order-standard_cart .alert-warning{border-color:#d97706 !important;box-shadow:2px 2px 0 #d97706 !important;}
2744html body #order-standard_cart .alert-danger{border-color:#cc2828 !important;box-shadow:2px 2px 0 #cc2828 !important;color:#8f1d1d !important;}
2745html body #order-standard_cart .alert-success{border-color:var(--vc-accent) !important;box-shadow:2px 2px 0 var(--vc-accent) !important;}
2746html body #order-standard_cart .alert-info{border-color:#1d4ed8 !important;box-shadow:2px 2px 0 #1d4ed8 !important;}
2747/* (ID included — the bridge css targets these with #order-standard_cart,
2748   which out-ranks any class-only selector regardless of order) */
2749html body #order-standard_cart .kf-cart-notice,
2750html body .kf-cart-notice{
2751  border-radius:4px !important;
2752  border-width:1px !important;
2753  border-style:dashed !important;
2754  background:var(--vc-surface2) !important;
2755}
2756html body #order-standard_cart .kf-cart-notice-success,
2757html body .kf-cart-notice-success{border-color:rgba(34,160,74,.55) !important;background:var(--vc-surface2) !important;}
2758html body #order-standard_cart .kf-cart-notice-info,
2759html body .kf-cart-notice-info{border-color:rgba(29,78,216,.5) !important;background:var(--vc-surface2) !important;}
2760html body #order-standard_cart .kf-cart-notice-warning,
2761html body .kf-cart-notice-warning{border-color:rgba(217,119,6,.55) !important;background:var(--vc-surface2) !important;}
2762html body #order-standard_cart .kf-cart-notice-danger,
2763html body .kf-cart-notice-danger{border-color:rgba(204,40,40,.55) !important;background:var(--vc-surface2) !important;}
2764html body #order-standard_cart .kf-cart-notice > .kf-cart-notice-title,
2765html body .kf-cart-notice > .kf-cart-notice-title{
2766  font-family:'Outfit',sans-serif !important;
2767  font-size:11px !important;
2768  letter-spacing:.2em !important;
2769}
2770
2771/* ── modals ── */
2772html body #order-standard_cart .modal-content{
2773  border:2px solid var(--ca-ink-border) !important;
2774  border-radius:5px !important;
2775  box-shadow:6px 6px 0 var(--ca-ink-shadow) !important;
2776}
2777html body #order-standard_cart .modal-footer{border-top:2px solid var(--ca-ink-border) !important;}
2778html body #order-standard_cart .modal-title{text-transform:uppercase;letter-spacing:.02em;}
2779
2780/* radios / checkboxes */
2781html body #order-standard_cart input[type="radio"],
2782html body #order-standard_cart input[type="checkbox"]{accent-color:var(--vc-accent);}
2783
2784@media(max-width:767px){
2785  html body #order-standard_cart .kf-payment-method,
2786  html body #order-standard_cart .kf-payment-method:hover,
2787  html body #order-standard_cart .kf-payment-method:has(input:checked){transform:none;}
2788}
2789
2790/* ── DARK MODE ──
2791   Everything above flows from --vc-* → --ca-* and flips on its own. This
2792   block only lifts the fixed status hues (blue / amber / red) that are too
2793   dark to read on charcoal, and doubles the alert tints. Selectors mirror
2794   the terminal layer with the html[data-kf-theme] prefix so they out-rank
2795   it in dark and do nothing in light. */
2796html[data-kf-theme="dark"] #order-standard_cart .alert-warning{color:#f7a541;background:rgba(245,158,11,.14);}
2797html[data-kf-theme="dark"] #order-standard_cart .alert-info{color:#6d9cff;background:rgba(26,111,255,.14);}
2798html[data-kf-theme="dark"] body #order-standard_cart .alert-danger{color:var(--ca-danger) !important;}
2799html[data-kf-theme="dark"] body #order-standard_cart .btn-info{color:#6d9cff !important;}
2800html[data-kf-theme="dark"] body #order-standard_cart .btn-warning{color:#f7a541 !important;}
2801html[data-kf-theme="dark"] body #order-standard_cart #btnEmptyCart,
2802html[data-kf-theme="dark"] body #order-standard_cart #btnEmptyCart i,
2803html[data-kf-theme="dark"] body #order-standard_cart #btnEmptyCart span,
2804html[data-kf-theme="dark"] body #order-standard_cart .modal-footer .btn-primary{color:var(--ca-danger) !important;}
2805html[data-kf-theme="dark"] #order-standard_cart .kf-cart-notice-info,
2806html[data-kf-theme="dark"] .kf-cart-notice-info,
2807html[data-kf-theme="dark"] #order-standard_cart .kf-cart-notice-info .kf-cart-notice-title,
2808html[data-kf-theme="dark"] .kf-cart-notice-info .kf-cart-notice-title{color:#6d9cff;}
2809html[data-kf-theme="dark"] #order-standard_cart .kf-cart-notice-warning,
2810html[data-kf-theme="dark"] .kf-cart-notice-warning{color:#f7a541;}
2811html[data-kf-theme="dark"] body #order-standard_cart .kf-payment-method.kf-payment-method-preferred:has(input:checked){background:rgba(253,200,88,.14) !important;}
2812
2813</style>
2814    
2815
2816    <div id="order-standard_cart">
2817        <div class="row">
2818            <div class="cart-sidebar">
2819                    <div menuItemName="Categories" class="panel card card-sidebar mb-3 panel-sidebar">
2820        <div class="panel-heading card-header">
2821            <h3 class="panel-title">
2822                                    <i class="fas fa-shopping-cart"></i>&nbsp;
2823                
2824                Categories
2825
2826                
2827                <i class="fas fa-chevron-up card-minimise panel-minimise pull-right float-right"></i>
2828            </h3>
2829        </div>
2830
2831        
2832                    <div class="list-group collapsable-card-body">
2833                                                            <a menuItemName="Jellyfin" href="/index.php?rp=/store/jellyfin" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-Jellyfin">
2834                            
2835                            Jellyfin
2836
2837                                                    </a>
2838                                                                                <a menuItemName="Jellyfin (w/ Downloads)" href="/index.php?rp=/store/jellyfin-w-downloads" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-Jellyfin_(w__Downloads)">
2839                            
2840                            Jellyfin (w/ Downloads)
2841
2842                                                    </a>
2843                                                                                <a menuItemName="Jellyfin Request Boosts" href="/index.php?rp=/store/more-requests" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-Jellyfin_Request_Boosts">
2844                            
2845                            Jellyfin Request Boosts
2846
2847                                                    </a>
2848                                                                                <a menuItemName="Plex Request Boosts" href="/index.php?rp=/store/plex-request-boosts" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-Plex_Request_Boosts">
2849                            
2850                            Plex Request Boosts
2851
2852                                                    </a>
2853                                                                                <a menuItemName="KwickTV (30 Days)" href="/index.php?rp=/store/kwicktv" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-KwickTV_(30_Days)">
2854                            
2855                            KwickTV (30 Days)
2856
2857                                                    </a>
2858                                                                                <a menuItemName="KwickTV (90 Days)" href="/index.php?rp=/store/kwicktv-90-days" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-KwickTV_(90_Days)">
2859                            
2860                            KwickTV (90 Days)
2861
2862                                                    </a>
2863                                                                                <a menuItemName="KwickTV (180 Days)" href="/index.php?rp=/store/kwicktv-180-days" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-KwickTV_(180_Days)">
2864                            
2865                            KwickTV (180 Days)
2866
2867                                                    </a>
2868                                                                                <a menuItemName="KwickTV (1 Year)" href="/index.php?rp=/store/kwicktv-1-year" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-KwickTV_(1_Year)">
2869                            
2870                            KwickTV (1 Year)
2871
2872                                                    </a>
2873                                                                                <a menuItemName="KwickTV (Lifetime)" href="/index.php?rp=/store/kwicktv-lifetime" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-KwickTV_(Lifetime)">
2874                            
2875                            KwickTV (Lifetime)
2876
2877                                                    </a>
2878                                                                                <a menuItemName="KwickTV (Resellers)" href="/index.php?rp=/store/kwicktv-resellers" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-KwickTV_(Resellers)">
2879                            
2880                            KwickTV (Resellers)
2881
2882                                                    </a>
2883                                                                                <a menuItemName="KwickTV (Resellers) (Bonus)" href="/index.php?rp=/store/kwicktv-resellers-bonus" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-KwickTV_(Resellers)_(Bonus)">
2884                            
2885                            KwickTV (Resellers) (Bonus)
2886
2887                                                    </a>
2888                                                                                <a menuItemName="Grimmory" href="/index.php?rp=/store/grimmory" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-Grimmory">
2889                            
2890                            Grimmory
2891
2892                                                    </a>
2893                                                                                <a menuItemName="Grimmory (w/ Downloads) " href="/index.php?rp=/store/grimmory-w-downloads" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-Grimmory_(w__Downloads)_">
2894                            
2895                            Grimmory (w/ Downloads) 
2896
2897                                                    </a>
2898                                                                                <a menuItemName="Audiobookshelf" href="/index.php?rp=/store/audiobookshelf" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-Audiobookshelf">
2899                            
2900                            Audiobookshelf
2901
2902                                                    </a>
2903                                                                                <a menuItemName="Audiobookshelf (w/ Downloads)" href="/index.php?rp=/store/audiobookshelf-w-downloads" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-Audiobookshelf_(w__Downloads)">
2904                            
2905                            Audiobookshelf (w/ Downloads)
2906
2907                                                    </a>
2908                                                                                <a menuItemName="Trials" href="/index.php?rp=/store/trials" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-Trials">
2909                            
2910                            Trials
2911
2912                                                    </a>
2913                                                                                <a menuItemName="WHMCS Modules &amp; Addons" href="/index.php?rp=/store/whmcs-modules-and-addons" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-WHMCS_Modules_&amp;_Addons">
2914                            
2915                            WHMCS Modules &amp; Addons
2916
2917                                                    </a>
2918                                                                                <a menuItemName="Other Services" href="/index.php?rp=/store/other-services" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-Other_Services">
2919                            
2920                            Other Services
2921
2922                                                    </a>
2923                                                </div>
2924        
2925            </div>
2926
2927        <div menuItemName="Actions" class="panel card card-sidebar mb-3 panel-sidebar">
2928        <div class="panel-heading card-header">
2929            <h3 class="panel-title">
2930                                    <i class="fas fa-plus"></i>&nbsp;
2931                
2932                Actions
2933
2934                
2935                <i class="fas fa-chevron-up card-minimise panel-minimise pull-right float-right"></i>
2936            </h3>
2937        </div>
2938
2939        
2940                    <div class="list-group collapsable-card-body">
2941                                                            <a menuItemName="View Cart" href="/cart.php?a=view" class="list-group-item list-group-item-action active" id="Secondary_Sidebar-Actions-View_Cart">
2942                                                            <i class="fas fa-shopping-cart fa-fw"></i>&nbsp;
2943                            
2944                            View Cart
2945
2946                                                    </a>
2947                                                </div>
2948        
2949            </div>
2950
2951                </div>
2952            <div class="cart-body">
2953                <div class="header-lined">
2954                    <h1 class="font-size-36">Review & Checkout</h1>
2955                </div>
2956
2957                
2958                <div class="row">
2959                    <div class="secondary-cart-body">
2960
2961                        
2962                        
2963                        <form method="post" action="/cart.php?a=view">
2964<input type="hidden" name="token" value="d66098c0313efd9f2d4965c38006c430ccd696ff" />
2965
2966                            <div class="view-cart-items-header">
2967                                <div class="row">
2968                                    <div class="col-sm-7 col-xs-7 col-7">
2969                                        Product/Options
2970                                    </div>
2971                                                                        <div class="col-sm-4 col-xs-5 col-5 text-right">
2972                                        Price/Cycle
2973                                    </div>
2974                                </div>
2975                            </div>
2976
2977                            <div class="view-cart-items">
2978
2979                                
2980                                
2981                                
2982                                
2983                                
2984                                
2985                                
2986                                                                    <div class="view-cart-empty">Your Shopping Cart is Empty</div>
2987                                
2988                            </div>
2989
2990                            
2991                        </form>
2992
2993                        
2994                        
2995                        <div class="view-cart-tabs">
2996                            <ul class="nav nav-tabs" role="tablist">
2997                                <li role="presentation" class="nav-item active">
2998                                    <a href="#applyPromo" class="nav-link active" aria-controls="applyPromo" role="tab" data-toggle="tab" aria-expanded="true">
2999                                        Apply Promo Code
3000                                    </a>
3001                                </li>
3002                                                            </ul>
3003                            <div class="tab-content">
3004                                <div role="tabpanel" class="tab-pane active promo" id="applyPromo">
3005                                                                            <form method="post" action="/cart.php?a=view">
3006<input type="hidden" name="token" value="d66098c0313efd9f2d4965c38006c430ccd696ff" />
3007                                            <div class="form-group prepend-icon">
3008                                                <label for="cardno" class="field-icon"><i class="fas fa-ticket-alt"></i></label>
3009                                                <input type="text" name="promocode" id="inputPromotionCode" class="field form-control" placeholder="Enter promo code if you have one" required="required">
3010                                            </div>
3011                                            <button type="submit" name="validatepromo" class="btn btn-block btn-default" value="Validate Code">
3012                                                Validate Code
3013                                            </button>
3014                                        </form>
3015                                                                    </div>
3016                                <div role="tabpanel" class="tab-pane" id="calcTaxes">
3017                                    <form method="post" action="/cart.php?a=setstateandcountry">
3018<input type="hidden" name="token" value="d66098c0313efd9f2d4965c38006c430ccd696ff" />
3019                                        <div class="form-group row">
3020                                            <label for="inputState" class="pt-sm-2 col-sm-4 control-label text-sm-right">State</label>
3021                                            <div class="col-sm-7">
3022                                                <input type="text" name="state" id="inputState" value="" class="form-control" />
3023                                            </div>
3024                                        </div>
3025                                        <div class="form-group row">
3026                                            <label for="inputCountry" class="pt-sm-2 col-sm-4 control-label text-sm-right">Country</label>
3027                                            <div class="col-sm-7">
3028           
3028                                     <select name="country" id="inputCountry" class="form-control">
3029                                                                                                            <option value="AF">Afghanistan</option>
3030                                                                                                            <option value="AX">Aland Islands</option>
3031                                                                                                            <option value="AL">Albania</option>
3032                                                                                                            <option value="DZ">Algeria</option>
3033                                                                                                            <option value="AS">American Samoa</option>
3034                                                                                                            <option value="AD">Andorra</option>
3035                                                                                                            <option value="AO">Angola</option>
3036                                                                                                            <option value="AI">Anguilla</option>
3037                                                                                                            <option value="AQ">Antarctica</option>
3038                                                                                                            <option value="AG">Antigua And Barbuda</option>
3039                                                                                                            <option value="AR">Argentina</option>
3040                                                                                                            <option value="AM">Armenia</option>
3041                                                                                                            <option value="AW">Aruba</option>
3042                                                                                                            <option value="AU">Australia</option>
3043                                                                                                            <option value="AT">Austria</option>
3044                                                                                                            <option value="AZ">Azerbaijan</option>
3045                                                                                                            <option value="BS">Bahamas</option>
3046                                                                                                            <option value="BH">Bahrain</option>
3047                                                                                                            <option value="BD">Bangladesh</option>
3048                                                                                                            <option value="BB">Barbados</option>
3049                                                                                                            <option value="BY">Belarus</option>
3050                                                                                                            <option value="BE">Belgium</option>
3051                                                                                                            <option value="BZ">Belize</option>
3052                                                                                                            <option value="BJ">Benin</option>
3053                                                                                                            <option value="BM">Bermuda</option>
3054                                                                                                            <option value="BT">Bhutan</option>
3055                                                                                                            <option value="BO">Bolivia</option>
3056                                                                                                            <option value="BA">Bosnia And Herzegovina</option>
3057                                                                                                            <option value="BW">Botswana</option>
3058                                                                                                            <option value="BR">Brazil</option>
3059                                                                                                            <option value="IO">British Indian Ocean Territory</option>
3060                                                                                                            <option value="BN">Brunei Darussalam</option>
3061                                                                                                            <option value="BG">Bulgaria</option>
3062                                                                                                            <option value="BF">Burkina Faso</option>
3063                                                                                                            <option value="BI">Burundi</option>
3064                                                                                                            <option value="KH">Cambodia</option>
3065                                                                                                            <option value="CM">Cameroon</option>
3066                                                                                                            <option value="CA">Canada</option>
3067                                                                                                            <option value="IC">Canary Islands</option>
3068                                                                                                            <option value="CV">Cape Verde</option>
3069                                                                                                            <option value="KY">Cayman Islands</option>
3070                                                                                                            <option value="CF">Central African Republic</option>
3071                                                                                                            <option value="TD">
3071Chad</option>
3072                                                                                                            <option value="CL">Chile</option>
3073                                                                                                            <option value="CN">China</option>
3074                                                                                                            <option value="CX">Christmas Island</option>
3075                                                                                                            <option value="CC">Cocos (Keeling) Islands</option>
3076                                                                                                            <option value="CO">Colombia</option>
3077                                                                                                            <option value="KM">Comoros</option>
3078                                                                                                            <option value="CG">Congo</option>
3079                                                                                                            <option value="CD">Congo, Democratic Republic</option>
3080                                                                                                            <option value="CK">Cook Islands</option>
3081                                                                                                            <option value="CR">Costa Rica</option>
3082                                                                                                            <option value="CI">Cote D'Ivoire</option>
3083                                                                                                            <option value="HR">Croatia</option>
3084                                                                                                            <option value="CU">Cuba</option>
3085                                                                                                            <option value="CW">Curacao</option>
3086                                                                                                            <option value="CY">Cyprus</option>
3087                                                                                                            <option value="CZ">Czech Republic</option>
3088                                                                                                            <option value="DK">Denmark</option>
3089                                                                                                            <option value="DJ">Djibouti</option>
3090                                                                                                            <option value="DM">Dominica</option>
3091                                                                                                            <option value="DO">Dominican Republic</option>
3092                                                                                                            <option value="EC">Ecuador</option>
3093                                                                                                            <option value="EG">Egypt</option>
3094                                                                                                            <option value="SV">El Salvador</option>
3095                                                                                                            <option value="GQ">Equatorial Guinea</option>
3096                                                                                                            <option value="ER">Eritrea</option>
3097                                                                                                            <option value="EE">Estonia</option>
3098                                                                                                            <option value="ET">Ethiopia</option>
3099                                                                                                            <option value="FK">Falkland Islands (Malvinas)</option>
3100                                                                                                            <option value="FO">Faroe Islands</option>
3101                                                                                                            <option value="FJ">
3101Fiji</option>
3102                                                                                                            <option value="FI">Finland</option>
3103                                                                                                            <option value="FR">France</option>
3104                                                                                                            <option value="GF">French Guiana</option>
3105                                                                                                            <option value="PF">French Polynesia</option>
3106                                                                                                            <option value="TF">French Southern Territories</option>
3107                                                                                                            <option value="GA">Gabon</option>
3108                                                                                                            <option value="GM">Gambia</option>
3109                                                                                                            <option value="GE">Georgia</option>
3110                                                                                                            <option value="DE">Germany</option>
3111                                                                                                            <option value="GH">Ghana</option>
3112                                                                                                            <option value="GI">Gibraltar</option>
3113                                                                                                            <option value="GR">Greece</option>
3114                                                                                                            <option value="GL">Greenland</option>
3115                                                                                                            <option value="GD">Grenada</option>
3116                                                                                                            <option value="GP">Guadeloupe</option>
3117                                                                                                            <option value="GU">Guam</option>
3118                                                                                                            <option value="GT">Guatemala</option>
3119                                                                                                            <option value="GG">Guernsey</option>
3120                                                                                                            <option value="GN">Guinea</option>
3121                                                                                                            <option value="GW">Guinea-Bissau</option>
3122                                                                                                            <option value="GY">Guyana</option>
3123                                                                                                            <option value="HT">Haiti</option>
3124                                                                                                            <option value="HM">Heard Island & Mcdonald Islands</option>
3125                                                                                                            <option value="VA">Holy See (Vatican City State)</option>
3126                                                                                                            <option value="HN">Honduras</option>
3127                                                                                                            <option value="HK">Hong Kong</option>
3128                                                                                                            <option value="HU">Hungary</option>
3129                                                                                                            <option value="IS">Iceland</option>
3130                                                                                                            <option value="IN">India</option>
3131                                                                                                            <option value="ID">Indonesia</option>
3132                                                                                                            <option value="IR">
3132Iran, Islamic Republic Of</option>
3133                                                                                                            <option value="IQ">Iraq</option>
3134                                                                                                            <option value="IE">Ireland</option>
3135                                                                                                            <option value="IM">Isle Of Man</option>
3136                                                                                                            <option value="IL">Israel</option>
3137                                                                                                            <option value="IT">Italy</option>
3138                                                                                                            <option value="JM">Jamaica</option>
3139                                                                                                            <option value="JP">Japan</option>
3140                                                                                                            <option value="JE">Jersey</option>
3141                                                                                                            <option value="JO">Jordan</option>
3142                                                                                                            <option value="KZ">Kazakhstan</option>
3143                                                                                                            <option value="KE">Kenya</option>
3144                                                                                                            <option value="KI">Kiribati</option>
3145                                                                                                            <option value="KR">Korea</option>
3146                                                                                                            <option value="XK">Kosovo</option>
3147                                                                                                            <option value="KW">Kuwait</option>
3148                                                                                                            <option value="KG">Kyrgyzstan</option>
3149                                                                                                            <option value="LA">Lao People's Democratic Republic</option>
3150                                                                                                            <option value="LV">Latvia</option>
3151                                                                                                            <option value="LB">Lebanon</option>
3152                                                                                                            <option value="LS">Lesotho</option>
3153                                                                                                            <option value="LR">Liberia</option>
3154                                                                                                            <option value="LY">Libyan Arab Jamahiriya</option>
3155                                                                                                            <option value="LI">Liechtenstein</option>
3156                                                                                                            <option value="LT">Lithuania</option>
3157                                                                                                            <option value="LU">Luxembourg</option>
3158                                                                                                            <option value="MO">Macao</option>
3159                                                                                                            <option value="MK">Macedonia</option>
3160                                                                                                            <option value="MG">Madagascar</option>
3161                                                                                                            <option value="MW">Malawi</option>
3162                                                                                                            <option value="MY">Malaysia</option>
3163                                                                                                            <option value="MV">Maldives</option>
3164                                                                                                            <option value="ML">Mali</option>
3165                                                                                                            <option value="MT">Malta</option>
3166                                                                                                            <option value="MH">Marshall Islands</option>
3167                                                                                                            <option value="MQ">Martinique</option>
3168                                                                                                            <option value="MR">Mauritania</option>
3169                                                                                                            <option value="MU">Mauritius</option>
3170                                                                                                            <option value="YT">Mayotte</option>
3171                                                                                                            <option value="MX">Mexico</option>
3172                                                                                                            <option value="FM">Micronesia, Federated States Of</option>
3173                                                                                                            <option value="MD">Moldova</option>
3174                                                                                                            <option value="MC">Monaco</option>
3175                                                                                                            <option value="MN">Mongolia</option>
3176                                                                                                            <option value="ME">Montenegro</option>
3177                                                                                                            <option value="MS">Montserrat</option>
3178                                                                                                            <option value="MA">Morocco</option>
3179                                                                                                            <option value="MZ">Mozambique</option>
3180                                                                                                            <option value="MM">Myanmar</option>
3181                                                                                                            <option value="NA">Namibia</option>
3182                                                                                                            <option value="NR">Nauru</option>
3183                                                                                                            <option value="NP">Nepal</option>
3184                                                                                                            <option value="NL">Netherlands</option>
3185                                                                                                            <option value="AN">Netherlands Antilles</option>
3186                                                                                                            <option value="NC">New Caledonia</option>
3187                                                                                                            <option value="NZ">New Zealand</option>
3188                                                                                                            <option value="NI">Nicaragua</option>
3189                                                                                                            <option value="NE">Niger</option>
3190                                                                                                            <option value="NG">Nigeria</option>
3191                                                                                                            <option value="NU">Niue</option>
3192                                                                                                            <option value="NF">Norfolk Island</option>
3193                                                                                                            <option value="MP">Northern Mariana Islands</option>
3194                                                                                                            <option value="NO">Norway</option>
3195                                                                                                            <option value="OM">Oman</option>
3196                                                                                                            <option value="PK">Pakistan</option>
3197                                                                                                            <option value="PW">Palau</option>
3198                                                                                                            <option value="PS">Palestine, State of</option>
3199                                                                                                            <option value="PA">Panama</option>
3200                                                                                                            <option value="PG">Papua New Guinea</option>
3201                                                                                                            <option value="PY">Paraguay</option>
3202                                                                                                            <option value="PE">
3202Peru</option>
3203                                                                                                            <option value="PH">Philippines</option>
3204                                                                                                            <option value="PN">Pitcairn</option>
3205                                                                                                            <option value="PL">Poland</option>
3206                                                                                                            <option value="PT">Portugal</option>
3207                                                                                                            <option value="PR">Puerto Rico</option>
3208                                                                                                            <option value="QA">Qatar</option>
3209                                                                                                            <option value="RE">Reunion</option>
3210                                                                                                            <option value="RO">Romania</option>
3211                                                                                                            <option value="RU">Russian Federation</option>
3212                                                                                                            <option value="RW">Rwanda</option>
3213                                                                                                            <option value="BL">Saint Barthelemy</option>
3214                                                                                                            <option value="SH">Saint Helena</option>
3215                                                                                                            <option value="KN">Saint Kitts And Nevis</option>
3216                                                                                                            <option value="LC">Saint Lucia</option>
3217                                                                                                            <option value="MF">Saint Martin</option>
3218                                                                                                            <option value="PM">Saint Pierre And Miquelon</option>
3219                                                                                                            <option value="VC">Saint Vincent And Grenadines</option>
3220                                                                                                            <option value="WS">Samoa</option>
3221                                                                                                            <option value="SM">San Marino</option>
3222                                                                                                            <option value="ST">Sao Tome And Principe</option>
3223                                                                                                            <option value="SA">Saudi Arabia</option>
3224                                                                                                            <option value="SN">Senegal</option>
3225                                                                                                            <option value="RS">Serbia</option>
3226                                                                                                            <option value="SC">Seychelles</option>
3227                                                                                                            <option value="SL">Sierra Leone</option>
3228                                                                                                            <option value="SG">Singapore</option>
3229                                                                                                            <option value="SK">Slovakia</option>
3230                                                                                                            <option value="SI">Slovenia</option>
3231                                                                                                            <option value="SB">Solomon Islands</option>
3232                                                                                                            <option value="SO">Somalia</option>
3233                                                                                                            <option value="ZA">South Africa</option>
3234                                                                                                            <option value="GS">South Georgia And Sandwich Isl.</option>
3235                                                                                                            <option value="ES">Spain</option>
3236                                                                                                            <option value="LK">Sri Lanka</option>
3237                                                                                                            <option value="SD">Sudan</option>
3238                                                                                                            <option value="SS">South Sudan</option>
3239                                                                                                            <option value="SR">Suriname</option>
3240                                                                                                            <option value="SJ">Svalbard And Jan Mayen</option>
3241                                                                                                            <option value="SZ">Swaziland</option>
3242                                                                                                            <option value="SE">Sweden</option>
3243                                                                                                            <option value="CH">Switzerland</option>
3244                                                                                                            <option value="SY">Syrian Arab Republic</option>
3245                                                                                                            <option value="TW">Taiwan</option>
3246                                                                                                            <option value="TJ">Tajikistan</option>
3247                                                                                                            <option value="TZ">Tanzania</option>
3248                                                                                                            <option value="TH">Thailand</option>
3249                                                                                                            <option value="TL">Timor-Leste</option>
3250                                                                                                            <option value="TG">Togo</option>
3251                                                                                                            <option value="TK">Tokelau</option>
3252                                                                                                            <option value="TO">Tonga</option>
3253                                                                                                            <option value="TT">Trinidad And Tobago</option>
3254                                                                                                            <option value="TN">Tunisia</option>
3255                                                                                                            <option value="TR">Turkey</option>
3256                                                                                                            <option value="TM">Turkmenistan</option>
3257                                                                                                            <option value="TC">Turks And Caicos Islands</option>
3258                                                                                                            <option value="TV">Tuvalu</option>
3259                                                                                                            <option value="UG">Uganda</option>
3260                                                                                                            <option value="UA">Ukraine</option>
3261                                                                                                            <option value="AE">United Arab Emirates</option>
3262                                                                                                            <option value="GB">United Kingdom</option>
3263                                                                                                            <option value="US" selected>United States</option>
3264                                                                                                            <option value="UM">United States Outlying Islands</option>
3265                                                                                                            <option value="UY">Uruguay</option>
3266                                                                                                            <option value="UZ">Uzbekistan</option>
3267                                                                                                            <option value="VU">Vanuatu</option>
3268                                                                                                            <option value="VE">Venezuela</option>
3269                                                                                                            <option value="VN">Viet Nam</option>
3270                                                                                                            <option value="VG">Virgin Islands, British</option>
3271                                                                                                            <option value="VI">Virgin Islands, U.S.</option>
3272                                                                                                            <option value="WF">Wallis And Futuna</option>
3273                                                                                                            <option value="EH">Western Sahara</option>
3274                                                                                                            <option value="YE">Yemen</option>
3275                                                                                                            <option value="ZM">Zambia</option>
3276                                                                                                            <option value="ZW">Zimbabwe</option>
3277                                                                                                    </select>
3278                                            </div>
3279                                        </div>
3280                                        <div class="form-group text-center">
3281                                            <button type="submit" class="btn btn-default">Update Totals</button>
3282                                        </div>
3283                                    </form>
3284                                </div>
3285                            </div>
3286                        </div>
3287
3288                    </div>
3289                    <div class="secondary-cart-sidebar" id="scrollingPanelContainer">
3290
3291                        <div class="order-summary" id="orderSummary">
3292                            <div class="loader w-hidden" id="orderSummaryLoader">
3293                                <i class="fas fa-fw fa-sync fa-spin"></i>
3294                            </div>
3295                            <h2 class="font-size-30">Order Summary</h2>
3296                            <div class="summary-container">
3297
3298                                <div class="subtotal clearfix">
3299                                    <span class="pull-left float-left">Subtotal</span>
3300                                    <span id="subtotal" class="pull-right float-right">$0.00 USD</span>
3301                                </div>
3302
3303                                
3304                                <div class="recurring-totals clearfix">
3305                                    <span class="pull-left float-left">Totals</span>
3306                                    <span id="recurring" class="pull-right float-right recurring-charges">
3307                                        <span id="recurringMonthly" style="display:none;"><span class="cost"></span> Monthly<br /></span>
3308                                        <span id="recurringQuarterly" style="display:none;"><span class="cost"></span> Quarterly<br /></span>
3309                                        <span id="recurringSemiAnnually" style="display:none;"><span class="cost"></span> Semi-Annually<br /></span>
3310                                        <span id="recurringAnnually" style="display:none;"><span class="cost"></span> Annually<br /></span>
3311                                        <span id="recurringBiennially" style="display:none;"><span class="cost"></span> Biennially<br /></span>
3312                                        <span id="recurringTriennially" style="display:none;"><span class="cost"></span> Triennially<br /></span>
3313                                    </span>
3314                                </div>
3315
3316                                <div class="total-due-today total-due-today-padded">
3317                                    <span id="totalDueToday" class="amt">$0.00 USD</span>
3318                                    <span>Total Due Today</span>
3319                                </div>
3320
3321                                <div class="express-checkout-buttons">
3322                                                                    </div>
3323
3324                                <div class="text-right">
3325                                    <a href="/cart.php?a=checkout&e=false" class="btn btn-success btn-lg btn-checkout disabled" id="checkout">
3326                                        Checkout <i class="fas fa-arrow-right"></i>
3327                                    </a><br />
3328                                    <a href="/cart.php" class="btn btn-link btn-continue-shopping" id="continueShopping">
3329                                        Continue Shopping
3330                                    </a>
3331                                </div>
3332
3333                            </div>
3334                        </div>
3335
3336                    </div>
3337                </div>
3338            </div>
3339        </div>
3340
3341        <form method="post" action="/cart.php">
3342<input type="hidden" name="token" value="d66098c0313efd9f2d4965c38006c430ccd696ff" />
3343            <input type="hidden" name="a" value="remove" />
3344            <input type="hidden" name="r" value="" id="inputRemoveItemType" />
3345            <input type="hidden" name="i" value="" id="inputRemoveItemRef" />
3346            <input type="hidden" name="rt" value="" id="inputRemoveItemRenewalType">
3347            <div class="modal fade modal-remove-item" id="modalRemoveItem" tabindex="-1" role="dialog">
3348                <div class="modal-dialog" role="document">
3349                    <div class="modal-content">
3350                        <div class="modal-body">
3351                            <div class="float-right">
3352                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
3353                            </div>
3354                            <h4 class="modal-title margin-bottom mb-3">
3355                                <i class="fas fa-times fa-3x"></i> <span>Remove Item</span>
3356                            </h4>
3357                            Are you sure you want to remove this item from your cart?
3358                        </div>
3359                        <div class="modal-footer justify-content-center">
3360                            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
3361                            <button type="submit" class="btn btn-primary">Yes</button>
3362                        </div>
3363                    </div>
3364                </div>
3365            </div>
3366        </form>
3367
3368        <form method="post" action="/cart.php">
3369<input type="hidden" name="token" value="d66098c0313efd9f2d4965c38006c430ccd696ff" />
3370            <input type="hidden" name="a" value="empty" />
3371            <div class="modal fade modal-remove-item" id="modalEmptyCart" tabindex="-1" role="dialog">
3372                <div class="modal-dialog" role="document">
3373                    <div class="modal-content">
3374                        <div class="modal-body">
3375                            <div class="float-right">
3376                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
3377                            </div>
3378                            <h4 class="modal-title margin-bottom mb-3">
3379                                <i class="fas fa-trash-alt fa-3x"></i> <span>Empty Cart</span>
3380                            </h4>
3381                            Are you sure you want to empty your shopping cart?
3382                        </div>
3383                        <div class="modal-footer justify-content-center">
3384                            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
3385                            <button type="submit" class="btn btn-primary">Yes</button>
3386                        </div>
3387                    </div>
3388                </div>
3389            </div>
3390        </form>
3391
3392    </div>
3393    <div class="modal fade" id="recommendationsModal" tabindex="-1" role="dialog">
3394    <div class="modal-dialog" role="document">
3395        <div class="modal-content">
3396            <div class="modal-header">
3397                <h4 class="float-left pull-left">
3398                                            Recommendations
3399                                    </h4>
3400                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
3401                <div class="clearfix"></div>
3402            </div>
3403            <div class="modal-body">
3404                <div class="product-recommendations-container">
3405    <div class="product-recommendations">
3406                    <p>Based on your order, we recommend:</p>
3407                    </div>
3408</div>
3409            </div>
3410            <div class="modal-footer">
3411                <a class="btn btn-primary" href="#" id="btnContinueRecommendationsModal" data-dismiss="modal" role="button">
3412                    <span class="w-hidden hidden"><i class="fas fa-spinner fa-spin"></i>&nbsp;</span>Continue
3413                </a>
3414            </div>
3415        </div>
3416    </div>
3417    <div class="product-recommendation clonable w-hidden hidden">
3418        <div class="header">
3419            <div class="cta">
3420                <div class="price">
3421                    <span class="w-hidden hidden">FREE!</span>
3422                    <span class="breakdown-price"></span>
3423                    <span class="setup-fee"><small>&nbsp;Setup Fee</small></span>
3424                </div>
3425                <button type="button" class="btn btn-sm btn-add">
3426                    <span class="text">Add to Cart</span>
3427                    <span class="arrow"><i class="fas fa-chevron-right"></i></span>
3428                </button>
3429            </div>
3430            <div class="expander">
3431                <i class="fas fa-chevron-right rotate" data-toggle="tooltip" data-placement="right" title="Click to learn more."></i>
3432            </div>
3433            <div class="content">
3434                <div class="headline truncate"></div>
3435                <div class="tagline truncate">
3436                    A description (tagline) is not available for this product.
3437                </div>
3438            </div>
3439        </div>
3440        <div class="body clearfix"><p></p></div>
3441    </div>
3442</div>
3443
3444
3445<style>
3446/* ============================================================
3447   KWICKFLIX FOOTER
3448   Layout matches the reference exactly: brand block on the left,
3449   3 configurable link columns on the right.
3450   All column titles, links, the description and logo come from
3451   the kwickflixstyle addon (defaults shown if addon is inactive).
3452   ============================================================ */
3453
3454#footer.footer{
3455  background:linear-gradient(180deg,#161a20 0%,#101318 100%);
3456  color:rgba(255,255,255,0.78);
3457  padding:44px 0 30px;
3458  margin-top:34px;
3459  position:relative;
3460  /* terminal treatment: hard 2px edge where the cream page meets
3461     the dark footer, matching the boxes above it */
3462  border-top:2px solid var(--ca-ink-border,#13110e);
3463}
3464
3465#footer .kf-footer-wrap{
3466  display:grid;
3467  /* Brand block on the left, link columns in a flex container on the right.
3468     The flex container can auto-center its children when there are fewer
3469     than 3 columns to display, instead of leaving empty grid tracks. */
3470  grid-template-columns:1.35fr 3fr;
3471  gap:34px;
3472  align-items:start;
3473}
3474#footer .kf-footer-cols-wrap{
3475  display:flex;
3476  justify-content:center;
3477  gap:34px;
3478  flex-wrap:wrap;
3479}
3480#footer .kf-footer-cols-wrap > .kf-footer-col{
3481  flex:1 1 0;
3482  min-width:0;
3483  max-width:240px;
3484}
3485/* When the cols wrap is empty (no columns enabled), hide it so the brand
3486   block can claim the full width naturally. */
3487#footer .kf-footer-cols-wrap:empty{display:none;}
3488#footer .kf-footer-wrap:has(.kf-footer-cols-wrap:empty){
3489  grid-template-columns:1fr;
3490}
3491
3492/* Left brand column */
3493#footer .kf-footer-brand{display:flex;flex-direction:column;gap:14px;}
3494#footer .kf-footer-logo{display:flex;align-items:center;gap:12px;}
3495#footer .kf-footer-logo img{height:34px;width:auto;display:block;}
3496#footer .kf-footer-brand p{
3497  margin:0;
3498  font-size:13px;
3499  line-height:1.55;
3500  color:rgba(255,255,255,0.70);
3501  max-width:360px;
3502  font-family:'Outfit',sans-serif;
3503}
3504
3505/* Menu columns — terminal prompt marker before each title */
3506#footer .kf-footer-col h6{
3507  margin:0 0 14px 0;
3508  font-size:14px;
3509  font-weight:900;
3510  color:var(--ca-on-accent);
3511  font-family:'Barlow Condensed',sans-serif;
3512  letter-spacing:.04em;
3513  text-transform:uppercase;
3514}
3515#footer .kf-footer-col h6::before{
3516  content:"❯ ";
3517  color:var(--ca-accent,#22a04a);
3518}
3519#footer .kf-footer-links{
3520  list-style:none;
3521  padding:0;
3522  margin:0;
3523  display:flex;
3524  flex-direction:column;
3525  gap:10px;
3526}
3527#footer .kf-footer-links a{
3528  color:rgba(255,255,255,0.72);
3529  text-decoration:none;
3530  font-weight:600;
3531  font-size:13px;
3532  font-family:'Outfit',sans-serif;
3533  transition:color .15s ease;
3534}
3535#footer .kf-footer-links a:hover{color:var(--ca-accent,#22a04a);text-decoration:none;}
3536
3537/* Bottom bar */
3538#footer .kf-footer-bottom{
3539  margin-top:34px;
3540  padding-top:18px;
3541  border-top:1px solid rgba(255,255,255,0.08);
3542  display:flex;
3543  flex-direction:column;
3544  justify-content:center;
3545  align-items:center;
3546  text-align:center;
3547  gap:8px;
3548}
3549#footer .kf-footer-bottom .copyright{
3550  margin:0;
3551  font-size:12px;
3552  color:rgba(255,255,255,0.60);
3553  font-family:'Outfit',sans-serif;
3554}
3555
3556/* Minimal mode — copyright-only footer, tight padding, no divider */
3557#footer.footer.kf-footer-min{padding:16px 0 14px;}
3558#footer.kf-footer-min .kf-footer-bottom{
3559  margin-top:0;
3560  padding-top:0;
3561  border-top:none;
3562}
3563
3564/* Hide default WHMCS footer lists (social + nav) */
3565#footer .list-inline,
3566#footer .nav.justify-content-center{display:none !important;}
3567
3568@media(max-width:992px){
3569  #footer .kf-footer-wrap{grid-template-columns:1fr 1fr;}
3570}
3571@media(max-width:576px){
3572  #footer .kf-footer-wrap{grid-template-columns:1fr;}
3573}
3574
3575/* ── Fix: international phone field (intl-tel-input) ──────────────────
3576   theme.min.css forces .form-control{padding-left:45px!important;background:search-icon},
3577   which clobbers the plugin's own left padding so the number/dial-code
3578   render on top of the flag. Re-assert correct spacing, scoped to the
3579   phone widget only so normal inputs are untouched. Mode-specific
3580   padding mirrors the plugin's own values. */
3581.intl-tel-input{position:relative;display:block;width:100%;}
3582.intl-tel-input>input,
3583.intl-tel-input>input[type=tel],
3584.intl-tel-input>input[type=text]{
3585  background-image:none !important;
3586  padding-right:36px !important;
3587  padding-left:12px !important;
3588}
3589.intl-tel-input.allow-dropdown>input,
3590.intl-tel-input.allow-dropdown>input[type=tel],
3591.intl-tel-input.allow-dropdown>input[type=text],
3592.intl-tel-input.separate-dial-code>input,
3593.intl-tel-input.separate-dial-code>input[type=tel],
3594.intl-tel-input.separate-dial-code>input[type=text]{
3595  padding-right:12px !important;
3596  padding-left:52px !important;
3597}
3598.intl-tel-input.separate-dial-code.iti-sdc-2>input{padding-left:66px !important;}
3599.intl-tel-input.separate-dial-code.iti-sdc-3>input{padding-left:74px !important;}
3600.intl-tel-input.separate-dial-code.iti-sdc-4>input{padding-left:82px !important;}
3601.intl-tel-input.separate-dial-code.iti-sdc-5>input{padding-left:90px !important;}
3602.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2>input{padding-left:76px !important;}
3603.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3>input{padding-left:84px !important;}
3604.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4>input{padding-left:92px !important;}
3605.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5>input{padding-left:100px !important;}
3606.intl-tel-input .selected-flag{z-index:2;}
3607
3608/* ── DARK MODE ── */
3609/* The footer is dark in both modes. On a charcoal page, warm its
3610   blue-black gradient so it sits on the same palette as the page. */
3611html[data-kf-theme="dark"] #footer.footer{background:linear-gradient(180deg,#141311 0%,#0e0d0b 100%);}
3612</style>
3613
3614
3615                    </div>
3616
3617                    </div>
3618                                    <div class="clearfix"></div>
3619            </div>
3620        </div>
3621    </section>
3622
3623                            
3624    <footer id="footer" class="footer kf-footer-min">
3625        <div class="container">
3626
3627            
3628            <div class="kf-footer-bottom">
3629                <p class="copyright">
3629Copyright &copy; 2026 The Kwick Shop. All Rights Reserved.</p>
3630            </div>
3631
3632        </div>
3633    </footer>
3634
3635    <div id="fullpage-overlay" class="w-hidden">
3636        <div class="outer-wrapper">
3637            <div class="inner-wrapper">
3638                <img src="/assets/img/overlay-spinner.svg" alt="">
3639                <br>
3640                <span class="msg"></span>
3641            </div>
3642        </div>
3643    </div>
3644
3645    <div class="modal system-modal fade" id="modalAjax" tabindex="-1" role="dialog" aria-hidden="true">
3646        <div class="modal-dialog">
3647            <div class="modal-content">
3648                <div class="modal-header">
3649                    <h5 class="modal-title"></h5>
3650                    <button type="button" class="close" data-dismiss="modal">
3651                        <span aria-hidden="true">&times;</span>
3652                        <span class="sr-only">Close</span>
3653                    </button>
3654                </div>
3655                <div class="modal-body">Loading...</div>
3656                <div class="modal-footer">
3657                    <div class="float-left loader">
3658                        <i class="fas fa-circle-notch fa-spin"></i> Loading...
3659                    </div>
3660                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
3661                    <button type="button" class="btn btn-primary modal-submit">Submit</button>
3662                </div>
3663            </div>
3664        </div>
3665    </div>
3666
3667    <form method="get" action="/cart.php?a=view&">
3668        <div class="modal modal-localisation" id="modalChooseLanguage" tabindex="-1" role="dialog">
3669            <div class="modal-dialog modal-lg" role="document">
3670                <div class="modal-content">
3671                    <div class="modal-body">
3672                        <button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
3673                            <span aria-hidden="true">&times;</span>
3674                        </button>
3675
3676                                                    <h5 class="h5 pt-5 pb-3">Choose language</h5>
3677                            <div class="row item-selector">
3678                                <input type="hidden" name="language" data-current="english" value="english" />
3679                                                                    <div class="col-4">
3680                                        <a href="#" class="item" data-value="arabic">
3681                                            العربية
3682                                        </a>
3683                                    </div>
3684                                                                    <div class="col-4">
3685                                        <a href="#" class="item" data-value="azerbaijani">
3686                                            Azerbaijani
3687                                        </a>
3688                                    </div>
3689                                                                    <div class="col-4">
3690                                        <a href="#" class="item" data-value="catalan">
3691                                            Català
3692                                        </a>
3693                                    </div>
3694                                                                    <div class="col-4">
3695                                        <a href="#" class="item" data-value="chinese">
3696                                            中文
3697                                        </a>
3698                                    </div>
3699                                                                    <div class="col-4">
3700                                        <a href="#" class="item" data-value="croatian">
3701                                            Hrvatski
3702                                        </a>
3703                                    </div>
3704                                                                    <div class="col-4">
3705                                        <a href="#" class="item" data-value="czech">
3706                                            Čeština
3707                                        </a>
3708                                    </div>
3709                                                                    <div class="col-4">
3710                                        <a href="#" class="item" data-value="danish">
3711                                            Dansk
3712                                        </a>
3713                                    </div>
3714                                                                    <div class="col-4">
3715                                        <a href="#" class="item" data-value="dutch">
3716                                            Nederlands
3717                                        </a>
3718                                    </div>
3719                                                                    <div class="col-4">
3720                                        <a href="#" class="item active" data-value="english">
3721                                            English
3722                                        </a>
3723                                    </div>
3724                                                                    <div class="col-4">
3725                                        <a href="#" class="item" data-value="estonian">
3726                                            Estonian
3727                                        </a>
3728                                    </div>
3729                                                                    <div class="col-4">
3730                                        <a href="#" class="item" data-value="farsi">
3731                                            Persian
3732                                        </a>
3733                                    </div>
3734                                                                    <div class="col-4">
3735                                        <a href="#" class="item" data-value="french">
3736                                            Français
3737                                        </a>
3738                                    </div>
3739                                                                    <div class="col-4">
3740                                        <a href="#" class="item" data-value="german">
3741                                            Deutsch
3742                                        </a>
3743                                    </div>
3744                                                                    <div class="col-4">
3745                                        <a href="#" class="item" data-value="hebrew">
3746                                            עברית
3747                                        </a>
3748                                    </div>
3749                                                                    <div class="col-4">
3750                                        <a href="#" class="item" data-value="hungarian">
3751                                            Magyar
3752                                        </a>
3753                                    </div>
3754                                                                    <div class="col-4">
3755                                        <a href="#" class="item" data-value="italian">
3756                                            Italiano
3757                                        </a>
3758                                    </div>
3759                                                                    <div class="col-4">
3760                                        <a href="#" class="item" data-value="macedonian">
3761                                            Macedonian
3762                                        </a>
3763                                    </div>
3764                                                                    <div class="col-4">
3765                                        <a href="#" class="item" data-value="norwegian">
3766                                            Norwegian
3767                                        </a>
3768                                    </div>
3769                                                                    <div class="col-4">
3770                                        <a href="#" class="item" data-value="portuguese-br">
3771                                            Português
3772                                        </a>
3773                                    </div>
3774                                                                    <div class="col-4">
3775                                        <a href="#" class="item" data-value="portuguese">
3776                                            Português
3777                                        </a>
3778                                    </div>
3779                                                                    <div class="col-4">
3780                                        <a href="#" class="item" data-value="romanian">
3781                                            Română
3782                                        </a>
3783                                    </div>
3784                                                                    <div class="col-4">
3785                                        <a href="#" class="item" data-value="russian">
3786                                            Русский
3787                                        </a>
3788                                    </div>
3789                                                                    <div class="col-4">
3790                                        <a href="#" class="item" data-value="spanish">
3791                                            Español
3792                                        </a>
3793                                    </div>
3794                                                                    <div class="col-4">
3795                                        <a href="#" class="item" data-value="swedish">
3796                                            Svenska
3797                                        </a>
3798                                    </div>
3799                                                                    <div class="col-4">
3800                                        <a href="#" class="item" data-value="turkish">
3801                                            Türkçe
3802                                        </a>
3803                                    </div>
3804                                                                    <div class="col-4">
3805                                        <a href="#" class="item" data-value="ukrainian">
3806                                            Українська
3807                                        </a>
3808                                    </div>
3809                                                            </div>
3810                                                                    </div>
3811                    <div class="modal-footer">
3812                        <button type="submit" class="btn btn-default">Apply</button>
3813                    </div>
3814                </div>
3815            </div>
3816        </div>
3817    </form>
3818
3819    
3820    <form action="#" id="frmGeneratePassword">
3821    <div class="modal fade" id="modalGeneratePassword">
3822        <div class="modal-dialog">
3823            <div class="modal-content">
3824                <div class="modal-header bg-primary text-white">
3825                    <h4 class="modal-title">
3826                        Generate Password
3827                    </h4>
3828                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
3829                        <span aria-hidden="true">&times;</span>
3830                    </button>
3831                </div>
3832                <div class="modal-body">
3833                    <div class="alert alert-danger w-hidden" id="generatePwLengthError">
3834                        Please enter a number between 8 and 64 for the password length
3835                    </div>
3836                    <div class="form-group row">
3837                        <label for="generatePwLength" class="col-sm-4 col-form-label">Password Length</label>
3838                        <div class="col-sm-8">
3839                            <input type="number" min="8" max="64" value="12" step="1" class="form-control input-inline input-inline-100" id="inputGeneratePasswordLength">
3840                        </div>
3841                    </div>
3842                    <div class="form-group row">
3843                        <label for="generatePwOutput" class="col-sm-4 col-form-label">Generated Password</label>
3844                        <div class="col-sm-8">
3845                            <input type="text" class="form-control" id="inputGeneratePasswordOutput">
3846                        </div>
3847                    </div>
3848                    <div class="row">
3849                        <div class="col-sm-8 offset-sm-4">
3850                            <button type="submit" class="btn btn-default btn-sm">
3851                                <i class="fas fa-plus fa-fw"></i>
3852                                Generate new password
3853                            </button>
3854                            <button type="button" class="btn btn-default btn-sm copy-to-clipboard" data-clipboard-target="#inputGeneratePasswordOutput">
3855                                <img src="/assets/img/clippy.svg" alt="Copy to clipboard" width="15">
3856                                Copy
3857                            </button>
3858                        </div>
3859                    </div>
3860                </div>
3861                <div class="modal-footer">
3862                    <button type="button" class="btn btn-default" data-dismiss="modal">
3863                        Close
3864                    </button>
3865                    <button type="button" class="btn btn-primary" id="btnGeneratePasswordInsert" data-clipboard-target="#inputGeneratePasswordOutput">
3866                        Copy to clipboard and Insert
3867                    </button>
3868                </div>
3869            </div>
3870        </div>
3871    </div>
3872</form>
3873
3874    
3874<script>window.KWICK_SEERR_VALIDATE_URL="https:\/\/kwickflix.shop\/modules\/servers\/kwickseerr\/validate.php";window.KWICK_SEERR_FORCED_PLATFORM="";</script>
3874<script src="https://kwickflix.shop/modules/servers/kwickseerr/validate-order-js.php?v=7"></script>
vendor: 1 bytes, line 3874
3874
3875<script type="text/javascript">$crisp = [];CRISP_WEBSITE_ID = "3d88c665-0b55-4b66-9505-536fe1f0cd92";(function(){d=document;s=d.createElement('script');s.src='//client.crisp.chat/l.js';s.async=1;d.getElementsByTagName('head')[0].appendChild(s);})();</script>
3875<script type="text/javascript">CRISP_RUNTIME_CONFIG = { session_merge : true };</script>
3875
3876<style>
3877.kf-crisp-bubble{
3878  position:fixed;
3879  right:24px;
3880  bottom:90px;
3881  max-width:260px;
3882  display:flex;
3883  align-items:center;
3884  justify-content:center;
3885  padding:13px 18px;
3886  background:#fefdfb;
3887  color:#2a2a2a;
3888  border:1px solid #d8d3cc;
3889  border-radius:18px;
3890  box-shadow:0 8px 28px rgba(0,0,0,0.16);
3891  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
3892  font-size:14px;
3893  line-height:1.35;
3894  text-align:center;
3895  cursor:pointer;
3896  z-index:2147483000;
3897  opacity:0;
3898  transform:translateY(8px) scale(0.96);
3899  pointer-events:none;
3900  transition:opacity .28s ease, transform .28s cubic-bezier(.18,.89,.32,1.28);
3901}
3902.kf-crisp-bubble.kf-show{
3903  opacity:1;
3904  transform:translateY(0) scale(1);
3905  pointer-events:auto;
3906}
3907.kf-crisp-bubble::after{
3908  content:"";
3909  position:absolute;
3910  right:24px;
3911  bottom:-7px;
3912  width:14px;
3913  height:14px;
3914  background:#fefdfb;
3915  border-right:1px solid #d8d3cc;
3916  border-bottom:1px solid #d8d3cc;
3917  transform:rotate(45deg);
3918}
3919.kf-crisp-bubble-text{width:100%;}
3920
3921/* sonar pulse: hollow rings that ping outward from the launcher edge */
3922.kf-crisp-pulse{
3923  position:fixed;
3924  pointer-events:none;
3925  z-index:2147482999;
3926  display:none;
3927}
3928.kf-crisp-pulse::before,
3929.kf-crisp-pulse::after{
3930  content:"";
3931  position:absolute;
3932  inset:0;
3933  border-radius:50%;
3934  border:2px solid rgba(29,122,255,0.6);
3935  box-shadow:0 0 8px rgba(29,122,255,0.45);
3936  animation:kfPing 2s ease-out infinite;
3937}
3938.kf-crisp-pulse::after{ animation-delay:1s; }
3939@keyframes kfPing{
3940  0%{ transform:scale(1); opacity:.7; }
3941  80%{ opacity:0; }
3942  100%{ transform:scale(2.1); opacity:0; }
3943}
3944
3945@media (max-width:480px){
3946  .kf-crisp-bubble{right:18px;bottom:84px;max-width:200px;font-size:13px;}
3947}
3948@media (prefers-reduced-motion:reduce){
3949  .kf-crisp-bubble{transition:opacity .2s ease;transform:none;}
3950  .kf-crisp-bubble.kf-show{transform:none;}
3951  .kf-crisp-pulse::before,.kf-crisp-pulse::after{animation:none;}
3952}
3953</style><div id="kfCrispBubble" class="kf-crisp-bubble" role="button" tabindex="0" aria-label="Open live chat" data-delay="4000"><span class="kf-crisp-bubble-text">Billing Support</span></div>
3953<script>
3954(function(){
3955  var bubble = document.getElementById("kfCrispBubble");
3956  if (!bubble) return;
3957
3958  /* ---- tuning knobs ---- */
3959  var OFFSET_X = 0;    // nudge pulse left(-) / right(+) if not centered
3960  var OFFSET_Y = 0;    // nudge pulse up(-) / down(+) if not centered
3961  var DOCK_MAX = 95;   // launcher must be within this many px of the corner to draw the pulse
3962  /* ---------------------- */
3963
3964  var delay = parseInt(bubble.getAttribute("data-delay"), 10) || 4000;
3965  var chatOpen = false;
3966
3967  // suppress the teaser once a real conversation exists, so it never covers
3968  // Crisp's own message preview; remember it for the whole browser session
3969  var suppressed = false;
3970  try { if (sessionStorage.getItem("kfCrispSuppressed") === "1") suppressed = true; } catch (e) {}
3971  function suppress(){
3972    suppressed = true;
3973    try { sessionStorage.setItem("kfCrispSuppressed", "1"); } catch (e) {}
3974    hideBubble();
3975  }
3976
3977  var pulse = document.createElement("div");
3978  pulse.className = "kf-crisp-pulse";
3979  document.body.appendChild(pulse);
3980
3981  function crispReady(cb){
3982    var tries = 0;
3983    var t = setInterval(function(){
3984      tries++;
3985      if (window.$crisp && findLauncher()) { clearInterval(t); cb(); }
3986      else if (tries > 60) { clearInterval(t); }
3987    }, 150);
3988  }
3989
3990  // Find the launcher: a small, visible, roughly-square clickable element whose
3991  // corner sits closest to the bottom-right of the window.
3992  function findLauncher(){
3993    var root = document.querySelector(".crisp-client");
3994    if (!root) return null;
3995    var nodes = root.querySelectorAll('a, button, [role="button"]');
3996    var best = null, bestScore = Infinity;
3997    for (var i = 0; i < nodes.length; i++){
3998      var n = nodes[i];
3999      var cs = window.getComputedStyle(n);
4000      if (cs.visibility === "hidden" || cs.display === "none" || parseFloat(cs.opacity) === 0) continue;
4001      var r = n.getBoundingClientRect();
4002      if (r.width === 0 || r.height === 0) continue;
4003      if (r.width > 100 || r.height > 100) continue;
4004      if ((window.innerWidth - r.right) > 160) continue;
4005      if ((window.innerHeight - r.bottom) > 160) continue;
4006      var dx = window.innerWidth - r.right;
4007      var dy = window.innerHeight - r.bottom;
4008      var score = dx * dx + dy * dy;
4009      if (score < bestScore){ bestScore = score; best = n; }
4010    }
4011    return best;
4012  }
4013
4014  function positionPulse(){
4015    if (chatOpen){ pulse.style.display = "none"; return; }
4016    var el = findLauncher();
4017    if (!el){ pulse.style.display = "none"; return; }
4018    var r = el.getBoundingClientRect();
4019    var dx = window.innerWidth - r.right;
4020    var dy = window.innerHeight - r.bottom;
4021    if (dx > DOCK_MAX || dy > DOCK_MAX || dx < -30 || dy < -30){ pulse.style.display = "none"; return; }
4022    var d = Math.min(r.width, r.height);
4023    var cx = r.left + r.width / 2 + OFFSET_X;
4024    var cy = r.top + r.height / 2 + OFFSET_Y;
4025    pulse.style.display = "block";
4026    pulse.style.width  = d + "px";
4027    pulse.style.height = d + "px";
4028    pulse.style.left = (cx - d / 2) + "px";
4029    pulse.style.top  = (cy - d / 2) + "px";
4030  }
4031
4032  function trackAfterClose(){
4033    pulse.style.display = "none";
4034    var n = 0;
4035    var t = setInterval(function(){
4036      n++;
4037      if (chatOpen){ clearInterval(t); return; }
4038      positionPulse();
4039      if (n > 24){ clearInterval(t); }
4040    }, 50);
4041  }
4042
4043  function showBubble(){
4044    if (chatOpen || suppressed) return;
4045    bubble.classList.add("kf-show");
4046  }
4047  function hideBubble(){ bubble.classList.remove("kf-show"); }
4048
4049  function openChat(){
4050    try { $crisp.push(["do", "chat:open"]); } catch (e) {}
4051    hideBubble();
4052  }
4053
4054  bubble.addEventListener("click", openChat);
4055  bubble.addEventListener("keydown", function(e){
4056    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openChat(); }
4057  });
4058
4059  window.addEventListener("resize", positionPulse);
4060
4061  crispReady(function(){
4062    // already a conversation with unread messages? stay out of the way
4063    try { var u = $crisp.get("chat:unread:count"); if (u && u > 0) suppressed = true; } catch (e) {}
4064
4065    positionPulse();
4066    setInterval(positionPulse, 800);
4067    try {
4068      $crisp.push(["on", "chat:opened",     function(){ chatOpen = true; hideBubble(); pulse.style.display = "none"; }]);
4069      $crisp.push(["on", "chat:closed",     function(){ chatOpen = false; trackAfterClose(); }]);
4070      $crisp.push(["on", "message:received", suppress]);
4071      $crisp.push(["on", "message:sent",     suppress]);
4072    } catch (e) {}
4073    setTimeout(showBubble, delay);
4074  });
4075})();
4076</script>
4076
4077<style>
4078  .kwick-uname-status{margin-top:6px;font-size:13px;font-weight:600;min-height:18px;
4079    display:flex;align-items:center;gap:6px;}
4080  .kwick-uname-status .ic{font-weight:700;}
4081  .kwick-uname-status.kw-checking{color:#6b7280;font-weight:500;}
4082  .kwick-uname-status.kw-ok{color:#16a34a;}
4083  .kwick-uname-status.kw-bad{color:#dc2626;}
4084  .kwick-uname-input.kw-ok{border:2px solid #22c55e!important;
4085    box-shadow:0 0 0 3px rgba(34,197,94,.12)!important;}
4086  .kwick-uname-input.kw-bad{border:2px solid #ef4444!important;
4087    box-shadow:0 0 0 3px rgba(239,68,68,.12)!important;}
4088  @keyframes kwspin{to{transform:rotate(360deg)}}
4089  .kwick-uname-status .spin{display:inline-block;animation:kwspin 1s linear infinite;}
4090</style>
4091<script>
4092(function(){
4093  var MAP = {"379":56,"381":57,"383":58,"385":59,"387":61};
4094  var ENDPOINT = "https:\/\/kwickflix.shop\/modules\/servers\/kwicknxtiptv\/checkusername.php";
4095  var RE = /^[A-Za-z0-9_]{3,32}$/;
4096  var registry = []; // {input, form, ok:function}
4097
4098  function setState(input, status, cls, icon, text){
4099    input.classList.remove('kw-ok','kw-bad');
4100    status.className = 'kwick-uname-status ' + cls;
4101    if(input.classList){
4102      if(cls==='kw-ok') input.classList.add('kw-ok');
4103      else if(cls==='kw-bad') input.classList.add('kw-bad');
4104    }
4105    status.innerHTML = text ? ('<span class="ic">'+icon+'</span><span>'+text+'</span>') : '';
4106  }
4107
4108  function gateForm(form){
4109    var allOk = true;
4110    registry.forEach(function(e){
4111      if(e.form === form && !e.ok()) allOk = false;
4112    });
4113    // toggle obvious submit controls for this form
4114    var btns = form.querySelectorAll('button[type=submit], input[type=submit], button.btn-primary, button.checkout');
4115    btns.forEach(function(b){
4116      if(!allOk){ b.dataset.kwBlocked='1'; b.disabled = true;
4116 b.style.opacity='.55'; b.style.cursor='not-allowed'; }
4117      else if(b.dataset.kwBlocked){ delete b.dataset.kwBlocked; b.disabled = false; b.style.opacity=''; b.style.cursor=''; }
4118    });
4119    return allOk;
4120  }
4121
4122  Object.keys(MAP).forEach(function(fid){
4123    var input = document.getElementById('customfield'+fid);
4124    if(!input || input.dataset.kwickUname) return;
4125    input.dataset.kwickUname = '1';
4126    input.classList.add('kwick-uname-input');
4127    var pid  = MAP[fid];
4128    var form = input.closest('form') || input.form;
4129
4130    // Status line under the input
4131    var status = document.createElement('div');
4132    status.className = 'kwick-uname-status';
4133    input.insertAdjacentElement('afterend', status);
4134
4135    var state = 'empty';        // empty | checking | ok | bad
4136    var seq = 0, timer = null;
4137
4138    function ok(){ return state === 'ok'; } // empty/bad/checking all block
4139
4140    function evaluate(){
4141      var v = (input.value || '').trim();
4142      if(v === ''){ state='empty'; setState(input,status,'', '', ''); gateForm(form); return; }
4143      if(!RE.test(v)){
4144        state='bad';
4145        setState(input,status,'kw-bad','✗','Username must be 3-32 characters: letters, numbers, underscores only');
4146        gateForm(form); return;
4147      }
4148      state='checking';
4149      setState(input,status,'kw-checking','<span class="spin">⌛</span>','Checking availability… please wait, this can take a moment!');
4150      gateForm(form);
4151      var mine = ++seq;
4152      fetch(ENDPOINT, {
4153        method:'POST',
4154        headers:{'Content-Type':'application/x-www-form-urlencoded'},
4155        body:'pid='+encodeURIComponent(pid)+'&username='+encodeURIComponent(v)
4156      })
4157      .then(function(r){ return r.json(); })
4158      .then(function(d){
4159        if(mine !== seq) return; // a newer keystroke superseded this
4160        if(d && d.available){
4161          state='ok';
4162          setState(input,status,'kw-ok','✓', d.unverified ? 'Username looks available' : 'Username Available');
4163        } else {
4164          state='bad';
4165          setState(input,status,'kw-bad','✗', (d && d.error) ? d.error : 'Username Unavailable — please choose another');
4166        }
4167        gateForm(form);
4168      })
4169      .catch(function(){
4170        if(mine !== seq) return;
4171        // Network hiccup — don't trap the customer; checkout hook still guards.
4172        state='ok';
4173        setState(input,status,'kw-ok','✓','Could not verify — you may continue');
4174        gateForm(form);
4175      });
4176    }
4177
4178    input.addEventListener('input', function(){
4179      clearTimeout(timer);
4180      state='checking';
4181      setState(input,status,'kw-checking','<span class="spin">⌛</span>','Checking availability… please wait, this can take a moment!');
4182      gateForm(form);
4183      timer = setTimeout(evaluate, 500);
4184    });
4185    input.addEventListener('blur', function(){ clearTimeout(timer); evaluate(); });
4186
4187    if(form){
4188      registry.push({input:input, form:form, ok:ok});
4189      if(!form.dataset.kwickGate){
4190        form.dataset.kwickGate = '1';
4191        form.addEventListener('submit', function(ev){
4192          if(!gateForm(form)){
4193            ev.preventDefault();
4194            ev.stopPropagation();
4195            var bad = registry.filter(function(e){ return e.form===form && !e.ok(); })[0];
4196            if(bad && bad.input){ bad.input.focus(); bad.input.scrollIntoView({block:'center', behavior:'smooth'}); }
4197          }
4198        }, true); // capture
4199      }
4200    }
4201
4202    if(input.value && input.value.trim() !== '') evaluate();
4203  });
4204})();
4205</script>
4205
4206
4207
4208        <style id="kf-dynamic-css">body .dropdown-menu:not(.show){display:none !important;}body .modal:not(.show):not(.in){display:none !important;}:root{--ca-accent:#22a04a;--ca-accent-dark:#1c833d;--ca-accent-bg:rgba(34,160,74,.07);--ca-accent-border:rgba(34,160,74,.18);--ca-shadow-green:0 6px 24px rgba(34,160,74,.22),0 2px 8px rgba(34,160,74,.10);}html[data-kf-theme="dark"]{--ca-accent:#25ad50;--ca-accent-dark:#2ccd5f;--ca-accent-bg:rgba(34,160,74,.16);--ca-accent-border:rgba(34,160,74,.38);}html[data-kf-theme="dark"] a:not(.btn):hover,html[data-kf-theme="dark"] a:not(.btn):focus,html[data-kf-theme="dark"] .panel-sidebar a:not(.btn):hover,html[data-kf-theme="dark"] .client-home-panels a:not(.btn):hover,html[data-kf-theme="dark"] .sidebar a:not(.btn):hover,html[data-kf-theme="dark"] .tag-cloud a:hover,html[data-kf-theme="dark"] .kb-tags a:hover,html[data-kf-theme="dark"] .knowledgebase-article a:hover{color:#2ccd5f;}.btn-primary,.btn.btn-primary,.btn-success,.btn.btn-success{background-color:var(--ca-surface3,#ede9e2) !important;border:2px solid var(--ca-ink-border,#13110e) !important;color:#22a04a !important;border-radius:4px !important;box-shadow:2px 2px 0 var(--ca-ink-shadow,#13110e) !important;font-weight:800 !important;transition:.1s ease !important;}.btn-primary:hover,.btn-primary:focus,.btn.btn-primary:hover,.btn.btn-primary:focus,.btn-success:hover,.btn-success:focus,.btn.btn-success:hover,.btn.btn-success:focus{background-color:var(--ca-surface2,#f7f5f0) !important;border-color:var(--ca-ink-border,#13110e) !important;color:#22a04a !important;transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ca-ink-shadow,#13110e) !important;}.btn-primary:active,.btn.btn-primary:active,.btn-success:active,.btn.btn-success:active{background-color:var(--ca-surface2,#f7f5f0) !important;border-color:var(--ca-ink-border,#13110e) !important;color:#22a04a !important;transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ca-ink-shadow,#13110e) !important;}a:not(.btn),a:not(.btn):link{color:#22a04a;}a:not(.btn):hover,a:not(.btn):focus{color:#1c833d;}.btn-danger,.btn-danger *,.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-warning,.btn-warning *,.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-info,.btn-info *,.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-dark,.btn-dark *,.btn-dark:hover,.btn-dark:focus,.btn-dark:active{color:var(--ca-on-accent,#fff) !important;}.btn-primary,.btn-primary *,.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-success,.btn-success *,.btn-success:hover,.btn-success:focus,.btn-success:active{color:#22a04a !important;}a.btn-danger,a.btn-warning,a.btn-info,a.btn-dark,a.btn-danger:link,a.btn-warning:link,a.btn-info:link,a.btn-dark:link,a.btn-danger:visited,a.btn-warning:visited,a.btn-info:visited,a.btn-dark:visited{color:var(--ca-on-accent,#fff) !important;}a.btn-primary,a.btn-success,a.btn-primary:link,a.btn-success:link,a.btn-primary:visited,a.btn-success:visited{color:#22a04a !important;}.text-primary,.text-info{color:#22a04a !important;}.bg-primary{background-color:#22a04a !important;}.form-control:focus,input.form-control:focus,textarea.form-control:focus,select.form-control:focus{border-color:#22a04a !important;box-shadow:0 0 0 3px rgba(34,160,74,.15) !important;outline:none;}.panel-primary>.panel-heading,.panel.panel-primary>.panel-heading{background-color:#22a04a !important;border-color:#22a04a !important;}.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover{background-color:#22a04a !important;border-color:#22a04a !important;}.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{background-color:#22a04a !important;border-color:#22a04a !important;color:var(--ca-on-accent,#fff) !important;}.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{background-color:#22a04a !important;color:var(--ca-on-accent,#fff) !important;}.badge-primary,.label-primary{background-color:#22a04a !important;color:var(--ca-on-accent,#fff) !important;}.progress-bar,.progress-bar-info,.progress-bar-success{background-color:#22a04a !important;}.kb-article a:not(.btn),.announcement-title a:not(.btn),.client-home-shortcuts a:not(.btn):hover{color:#22a04a !important;}.panel-sidebar a:not(.btn),.client-home-panels a:not(.btn),.sidebar a:not(.btn){color:#22a04a;}.panel-sidebar a:not(.btn):hover,.client-home-panels a:not(.btn):hover,.sidebar a:not(.btn):hover{color:#1c833d;}.list-group-item:not(.active):hover{background-color:rgba(34,160,74,.06) !important;}.list-group a.list-group-item:not(.active):hover{color:#22a04a !important;}.sidebar .card,.sidebar .panel,.sidebar .panel-sidebar,.sidebar .sidebar-card{border-radius:6px !important;box-shadow:3px 3px 0 var(--ca-ink-shadow,#13110e) !important;overflow:hidden !important;}.sidebar .card .card-header,.sidebar .card .card-body,.sidebar .card .card-footer,.sidebar .panel .panel-heading,.sidebar .panel .panel-body,.sidebar .panel .panel-footer,.sidebar .sidebar-card .card-header,.sidebar .sidebar-card .card-body{border-radius:0 !important;}.sidebar .list-group,.sidebar .nav,.sidebar ul{border-radius:0 !important;margin:0 !important;}.panel-sidebar .list-group-item,.sidebar .list-group-item,.sidebar .card .list-group-item,.sidebar .panel .list-group-item,.sidebar-card .list-group-item,.sidebar-card-body .list-group-item,.list-group-flush > .list-group-item{border-radius:0 !important;border-top-left-radius:0 !important;border-top-right-radius:0 !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;margin:0 !important;border:0 !important;border-top:0 !important;border-bottom:0 !important;border-left:0 !important;border-right:0 !important;border-width:0 !important;}.panel-sidebar .list-group:first-child > .list-group-item:first-child,.sidebar .card .list-group:first-child > .list-group-item:first-child,.sidebar .panel .list-group:first-child > .list-group-item:first-child,.sidebar-card .list-group:first-child > .list-group-item:first-child{border-top:0 !important;}.panel-sidebar .list-group:last-child > .list-group-item:last-child,.sidebar .card .list-group:last-child > .list-group-item:last-child,.sidebar .panel .list-group:last-child > .list-group-item:last-child,.sidebar-card .list-group:last-child > .list-group-item:last-child{border-bottom:0 !important;}.panel-sidebar .nav-pills .nav-link,.sidebar .nav-pills .nav-link,.sidebar .card .nav-pills .nav-link,.sidebar .panel .nav-pills .nav-link{border-radius:0 !important;margin:0 !important;}.panel-sidebar .nav-pills .nav-link.active,.sidebar .nav-pills .nav-link.active,.sidebar .card .nav-pills .nav-link.active,.sidebar .panel .nav-pills .nav-link.active{background-color:#22a04a !important;color:var(--ca-on-accent,#fff) !important;border-radius:0 !important;}.panel-sidebar .btn-block + .btn-block,.sidebar .card .btn-block + .btn-block,.sidebar .panel .btn-block + .btn-block,.sidebar-card-body .btn-block + .btn-block,.client-home-shortcuts .btn-block + .btn-block{border-radius:0 !important;border-left:0 !important;border-right:0 !important;border-top:0 !important;margin-top:0 !important;text-align:left !important;}.panel-sidebar .card-body:has(.btn-block + .btn-block) > .btn-block:first-child,.sidebar .card-body:has(.btn-block + .btn-block) > .btn-block:first-child,.client-home-shortcuts:has(.btn-block + .btn-block) > .btn-block:first-child{border-radius:0 !important;border-left:0 !important;border-right:0 !important;text-align:left !important;}.tag-cloud a,.kb-tags a,.knowledgebase-article a{color:#22a04a;}.tag-cloud a:hover,.kb-tags a:hover,.knowledgebase-article a:hover{color:#1c833d;}.btn-default:hover,.btn-secondary:hover,.btn.btn-default:hover{border-color:#22a04a !important;color:#22a04a !important;background-color:rgba(34,160,74,.04) !important;}.btn-outline-primary{border-color:#22a04a !important;color:#22a04a !important;}.btn-outline-primary:hover,.btn-outline-primary:focus{background-color:#22a04a !important;border-color:#22a04a !important;color:var(--ca-on-accent,#fff) !important;}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.dropdown-item.active,.dropdown-item:active{background-color:#22a04a !important;color:var(--ca-on-accent,#fff) !important;}.dropdown-menu .dropdown-item:hover,.dropdown-menu>li>a:hover{color:#22a04a !important;background-color:rgba(34,160,74,.06) !important;}.panel-default>.panel-heading[aria-expanded="true"],.card-header[aria-expanded="true"]{color:#22a04a !important;}.alert-info{border-left:3px solid #22a04a;}.article-icon,.kb-article-list .fa,.kb-article-list .fas{color:#22a04a !important;}.border-primary{border-color:#22a04a !important;}.panel-heading[role="tab"] .caret,.panel-heading.collapsible .caret,.panel-title[aria-expanded] .caret{color:#22a04a;}:root{--ca-glow:rgba(22,122,54,.65);}#mainNavbar ul#nav > li > a,#mainNavbar ul.kf-nav-row2 > li > a,#mainNavbar ul.navbar-nav.ml-auto > li > a{--kf-glow:rgba(22,122,54,.65) !important;}.kf-bg-image,.kf-bg-video{filter:grayscale(80%) brightness(1.68) contrast(0.48) !important;-webkit-filter:grayscale(80%) brightness(1.68) contrast(0.48) !important;opacity:0.68 !important;}.kf-hp-logos-track{animation-duration:40s !important;}.kf-tilebar-0{background:#008000 !important;}.kf-tilebar-1{background:#d97706 !important;}.kf-tilebar-2{background:#1a6fff !important;}.kf-tilebar-3{background:#cc2828 !important;}.kf-info-card[data-kf-info-idx="1"]{border-top:3px solid #8840ff !important;}.kf-info-card[data-kf-info-idx="2"]{border-top:3px solid #faba00 !important;}.kf-info-card[data-kf-info-idx="3"]{border-top:3px solid #c59745 !important;}.client-home-cards .card[menuItemName="Active Products/Services"]{border-top:3px solid #1a6fff !important;}.client-home-cards .card[menuItemName="Recent Support Tickets"]{border-top:3px solid #cc2828 !important;}.client-home-cards .card[menuItemName="Recent News"]{border-top:3px solid #d97706 !important;}.client-home-cards .card[menuItemName="Affiliate Program"]{border-top:3px solid #22a04a !important;}.client-home-cards .card[menuItemName="Recent Support Tickets"]{display:none !important;}#main-body .col-lg-4.col-xl-3:has(> .sidebar),#main-body .col-lg-4.col-xl-3:has(>
4208 .d-none.d-lg-block.sidebar){display:none !important;}#main-body .sidebar,#main-body .d-lg-none.sidebar-secondary{display:none !important;}#main-body > .container > .row > .col-lg-4.col-xl-3{display:none !important;}#main-body .col-lg-8.col-xl-9.primary-content{flex:0 0 100% !important;max-width:100% !important;}#mainNavbar ul#nav #Primary_Navbar-Home i,#mainNavbar ul.kf-bn-buts #Primary_Navbar-Home i{color:#a65b35 !important;}#mainNavbar #Primary_Navbar-Home > a{--kf-item-c:#a65b35;}#mainNavbar ul#nav #Primary_Navbar-Home > a{--kf-glow:rgba(166,91,53,.65) !important;}#mainNavbar ul#nav #Primary_Navbar-Client_Area i,#mainNavbar ul.kf-bn-buts #Primary_Navbar-Client_Area i{color:#ff8000 !important;}#mainNavbar #Primary_Navbar-Client_Area > a{--kf-item-c:#ff8000;}#mainNavbar ul#nav #Primary_Navbar-Client_Area > a{--kf-glow:rgba(255,128,0,.65) !important;}#mainNavbar ul#nav #Primary_Navbar-Server_Status i,#mainNavbar ul.kf-bn-buts #Primary_Navbar-Server_Status i{color:#22a04a !important;}#mainNavbar #Primary_Navbar-Server_Status > a{--kf-item-c:#22a04a;}#mainNavbar ul#nav #Primary_Navbar-Server_Status > a{--kf-glow:rgba(34,160,74,.65) !important;}#mainNavbar ul#nav #Primary_Navbar-Announcements i,#mainNavbar ul.kf-bn-buts #Primary_Navbar-Announcements i{color:#8c48fd !important;}#mainNavbar #Primary_Navbar-Announcements > a{--kf-item-c:#8c48fd;}#mainNavbar ul#nav #Primary_Navbar-Announcements > a{--kf-glow:rgba(140,72,253,.65) !important;}#Primary_Navbar-Store{display:none !important;}#Primary_Navbar-Network_Status{display:none !important;}#Primary_Navbar-Affiliates{display:none !important;}#Primary_Navbar-Contact_Us{display:none !important;}#Primary_Navbar-Account{display:none !important;}#Primary_Navbar-Services{display:none !important;}#Primary_Navbar-Billing{display:none !important;}#Primary_Navbar-Support{display:none !important;}#Primary_Navbar-Open_Ticket{display:none !important;}#mainNavbar ul#nav #Primary_Navbar-Media_Library i,#mainNavbar ul.kf-bn-buts #Primary_Navbar-Media_Library i{color:#0000ff !important;}#mainNavbar #Primary_Navbar-Media_Library > a{--kf-item-c:#0000ff;}#mainNavbar ul#nav #Primary_Navbar-Media_Library > a{--kf-glow:rgba(0,0,255,.65) !important;}#mainNavbar ul#nav #Primary_Navbar-IPTV_Channels i,#mainNavbar ul.kf-bn-buts #Primary_Navbar-IPTV_Channels i{color:#0047ab !important;}#mainNavbar #Primary_Navbar-IPTV_Channels > a{--kf-item-c:#0047ab;}#mainNavbar ul#nav #Primary_Navbar-IPTV_Channels > a{--kf-glow:rgba(0,71,171,.65) !important;}#Primary_Navbar-Kwick_Player{display:none !important;}#Primary_Navbar-Knowledgebase{display:none !important;}#mainNavbar ul.kf-nav-row2 > li:nth-child(1) > a{--kf-glow:rgba(191,0,191,.65) !important;}#mainNavbar ul.kf-nav-row2 > li:nth-child(1) > a i{color:#ca0065 !important;}#mainNavbar ul.kf-nav-row2 > li:nth-child(2) > a{--kf-glow:rgba(192,57,43,.65) !important;}#mainNavbar ul.kf-nav-row2 > li:nth-child(2) > a i{color:#c0392b !important;}#mainNavbar ul.kf-nav-row2 > li:nth-child(3) > a{--kf-glow:rgba(243,156,18,.65) !important;}#mainNavbar ul.kf-nav-row2 > li:nth-child(3) > a i{color:#f39c12 !important;}#mainNavbar ul.kf-nav-row2 > li:nth-child(4) > a{--kf-glow:rgba(34,160,74,.65) !important;}#mainNavbar ul.kf-nav-row2 > li:nth-child(4) > a i{color:#22a04a !important;}#mainNavbar a.cart-btn,#mainNavbar a.cart-btn:hover,#mainNavbar a.cart-btn i{color:#000000 !important;}#mainNavbar a.cart-btn .badge,#mainNavbar a.cart-btn .badge-info,.navbar-nav.toolbar a.cart-btn .badge-info{background-color:#1a8ee6 !important;border-color:#1a8ee6 !important;color:var(--ca-on-accent,#fff) !important;}#mainNavbar a.cart-btn{--kf-glow:rgba(26,142,230,.65) !important;}#mainNavbar a.cart-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,.12),0 0 18px rgba(26,142,230,.65) !important;}#mainNavbar ul.navbar-nav.ml-auto > li.dropdown > a.dropdown-toggle,#mainNavbar ul.navbar-nav.ms-auto > li.dropdown > a.dropdown-toggle,#mainNavbar .kf-user-dropdown > a{--kf-glow:rgba(26,142,230,.65) !important;}#mainNavbar ul.navbar-nav.ml-auto > li.dropdown > a.dropdown-toggle:hover,#mainNavbar ul.navbar-nav.ms-auto > li.dropdown > a.dropdown-toggle:hover{box-shadow:0 4px 14px rgba(0,0,0,.12),0 0 18px rgba(26,142,230,.65) !important;}#mainNavbar a.notif-btn,#mainNavbar a.notif-btn:hover,#mainNavbar a.notif-btn i,.navbar-nav.toolbar a.notif-btn,.navbar-nav.toolbar a.notif-btn i{color:#1f1a14 !important;}#mainNavbar a.notif-btn .badge,#mainNavbar a.notif-btn .badge-info,.navbar-nav.toolbar a.notif-btn .badge-info{background-color:#e96a0b !important;border-color:#e96a0b !important;color:var(--ca-on-accent,#fff) !important;}#mainNavbar a.notif-btn{--kf-glow:rgba(233,106,11,.65) !important;}#mainNavbar a.notif-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,.12),0 0 18px rgba(233,106,11,.65) !important;}html[data-kf-theme="dark"] #mainNavbar a.cart-btn,html[data-kf-theme="dark"] #mainNavbar a.cart-btn:hover,html[data-kf-theme="dark"] #mainNavbar a.cart-btn i,html[data-kf-theme="dark"] .navbar-nav.toolbar a.cart-btn,html[data-kf-theme="dark"] .navbar-nav.toolbar a.cart-btn i{color:var(--ca-text) !important;}html[data-kf-theme="dark"] #mainNavbar a.notif-btn,html[data-kf-theme="dark"] #mainNavbar a.notif-btn:hover,html[data-kf-theme="dark"] #mainNavbar a.notif-btn i,html[data-kf-theme="dark"] .navbar-nav.toolbar a.notif-btn,html[data-kf-theme="dark"] .navbar-nav.toolbar a.notif-btn i{color:#d3a369 !important;}html[data-kf-theme="dark"] #mainNavbar ul#nav #Primary_Navbar-Store i,html[data-kf-theme="dark"] #mainNavbar ul.kf-bn-buts #Primary_Navbar-Store i{color:#dc6c61 !important;}html[data-kf-theme="dark"] #mainNavbar #Primary_Navbar-Store > a{--kf-item-c:#dc6c61;}html[data-kf-theme="dark"] #mainNavbar ul#nav #Primary_Navbar-Network_Status i,html[data-kf-theme="dark"] #mainNavbar ul.kf-bn-buts #Primary_Navbar-Network_Status i{color:#d3a969 !important;}html[data-kf-theme="dark"] #mainNavbar #Primary_Navbar-Network_Status > a{--kf-item-c:#d3a969;}html[data-kf-theme="dark"] #mainNavbar ul#nav #Primary_Navbar-Affiliates i,html[data-kf-theme="dark"] #mainNavbar ul.kf-bn-buts #Primary_Navbar-Affiliates i{color:#d3a969 !important;}html[data-kf-theme="dark"] #mainNavbar #Primary_Navbar-Affiliates > a{--kf-item-c:#d3a969;}html[data-kf-theme="dark"] #mainNavbar ul#nav #Primary_Navbar-Contact_Us i,html[data-kf-theme="dark"] #mainNavbar ul.kf-bn-buts #Primary_Navbar-Contact_Us i{color:#d3a969 !important;}html[data-kf-theme="dark"] #mainNavbar #Primary_Navbar-Contact_Us > a{--kf-item-c:#d3a969;}html[data-kf-theme="dark"] #mainNavbar ul#nav #Primary_Navbar-Account i,html[data-kf-theme="dark"] #mainNavbar ul.kf-bn-buts #Primary_Navbar-Account i{color:#d3a969 !important;}html[data-kf-theme="dark"] #mainNavbar #Primary_Navbar-Account > a{--kf-item-c:#d3a969;}html[data-kf-theme="dark"] #mainNavbar ul#nav #Primary_Navbar-Services i,html[data-kf-theme="dark"] #mainNavbar ul.kf-bn-buts #Primary_Navbar-Services i{color:#d3a969 !important;}html[data-kf-theme="dark"] #mainNavbar #Primary_Navbar-Services > a{--kf-item-c:#d3a969;}html[data-kf-theme="dark"] #mainNavbar ul#nav #Primary_Navbar-Billing i,html[data-kf-theme="dark"] #mainNavbar ul.kf-bn-buts #Primary_Navbar-Billing i{color:#d3a969 !important;}html[data-kf-theme="dark"] #mainNavbar #Primary_Navbar-Billing > a{--kf-item-c:#d3a969;}html[data-kf-theme="dark"] #mainNavbar ul#nav #Primary_Navbar-Support i,html[data-kf-theme="dark"] #mainNavbar ul.kf-bn-buts #Primary_Navbar-Support i{color:#d3a969 !important;}html[data-kf-theme="dark"] #mainNavbar #Primary_Navbar-Support > a{--kf-item-c:#d3a969;}html[data-kf-theme="dark"] #mainNavbar ul#nav #Primary_Navbar-Open_Ticket i,html[data-kf-theme="dark"] #mainNavbar ul.kf-bn-buts #Primary_Navbar-Open_Ticket i{color:#d3a969 !important;}html[data-kf-theme="dark"] #mainNavbar #Primary_Navbar-Open_Ticket > a{--kf-item-c:#d3a969;}html[data-kf-theme="dark"] #mainNavbar ul#nav #Primary_Navbar-Media_Library i,html[data-kf-theme="dark"] #mainNavbar ul.kf-bn-buts #Primary_Navbar-Media_Library i{color:#3d3dff !important;}html[data-kf-theme="dark"] #mainNavbar #Primary_Navbar-Media_Library > a{--kf-item-c:#3d3dff;}html[data-kf-theme="dark"] #mainNavbar ul#nav #Primary_Navbar-IPTV_Channels i,html[data-kf-theme="dark"] #mainNavbar ul.kf-bn-buts #Primary_Navbar-IPTV_Channels i{color:#3d8eff !important;}html[data-kf-theme="dark"] #mainNavbar #Primary_Navbar-IPTV_Channels > a{--kf-item-c:#3d8eff;}html[data-kf-theme="dark"] #mainNavbar ul.kf-nav-row2 > li:nth-child(1) > a i{color:#ff3d9e !important;}html[data-kf-theme="dark"] #mainNavbar ul.kf-nav-row2 > li:nth-child(2) > a i{color:#dc6c61 !important;}div[menuitemname="Active Products/Services"] .list-group-item:has(.div-service-item[data-pid="97"]){display:none !important;}div[menuitemname="Active Products/Services"] .list-group-item:has(.div-service-item[data-pid="98"]){display:none !important;}div[menuitemname="Active Products/Services"] .list-group-item:has(.div-service-item[data-pid="99"]){display:none !important;}div[menuitemname="Active Products/Services"] .list-group-item:has(.div-service-item[data-pid="95"]){display:none !important;}div[menuitemname="Active Products/Services"] .list-group-item:has(.div-service-item[data-pid="100"]){display:none !important;}div[menuitemname="Active Products/Services"] .list-group-item:has(.div-service-item[data-pid="101"]){display:none !important;}div[menuitemname="Active Products/Services"] .list-group-item:has(.div-service-item[data-pid="102"]){display:none !important;}div[menuitemname="Active Products/Services"] .list-group-item:has(.div-service-item[data-pid="104"]){display:none !important;}div[menuitemname="Active Products/Services"] .div-service-status{width:auto !important;}div[menuitemname="Active Products/Services"] .div-service-status .label:not(.label-placeholder){width:auto !important;white-space:nowrap;}</style>
4209<script id="kf-strict-nav">(function(){var allowed=["Home","Client Area","Server Status","Announcements","Media Library","IPTV Channels"];var allowedSet=Object.create(null);allowed.forEach(function(l){allowedSet[l.toLowerCase()]=true;});function labelOf(a){if(!a)return '';var direct='';for(var i=0;i<a.childNodes.length;i++){var n=a.childNodes[i];if(n.nodeType===3){direct+=n.nodeValue;}else if(n.nodeType===1&&n.tagName!=='I'&&!(n.className||'').match(/badge|sr-only|caret/i)){direct+=(n.textContent||'');}}return direct.replace(/\s+/g,' ').trim();}function sweep(){var bar=document.getElementById('mainNavbar');if(!bar)return;var items=bar.querySelectorAll('ul#nav > li, ul.navbar-nav > li');items.forEach(function(li){if(li.querySelector('.dropdown-menu')||li.classList.contains('dropdown'))return;if(li.closest&&li.closest('.kf-bn-stats'))return;var a=li.querySelector('a,button');if(!a)return;var txt=labelOf(a);if(!txt||txt.length<2)return;if(!allowedSet[txt.toLowerCase()]){li.style.display='none';}});}if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',sweep);}else{sweep();}if(window.MutationObserver){var mo=new MutationObserver(sweep);var t=document.getElementById('mainNavbar');if(t){mo.observe(t,{childList:true,subtree:true});}setTimeout(function(){mo.disconnect();},8000);}})();</script>
4209
4210
4211            
4211<script>window.kfHidePids=[97,98,99,95,100,101,102,104];</script>
4211
4212    
4213    
4213<script>
4214    (function(){
4215        var pids = window.kfHidePids || [];
4216        if (!pids.length) return;
4217        function prune(){
4218            var items = document.querySelectorAll('div[menuitemname="Active Products/Services"] .div-service-item[data-pid]');
4219            for (var i = 0; i < items.length; i++){
4220                var pid = parseInt(items[i].getAttribute('data-pid'), 10);
4221                if (pids.indexOf(pid) === -1) continue;
4222                var row = items[i].closest('.list-group-item') || items[i].closest('li') || items[i].parentElement;
4223                if (row && row.parentNode) row.parentNode.removeChild(row);
4224            }
4225        }
4226        if (document.readyState !== 'loading') prune();
4227        else document.addEventListener('DOMContentLoaded', prune);
4228    })();
4229    </script>
4229
4230    
4231    
4232                
4233    <style>
4234    .kf-visitor-popup{
4235        position:fixed;
4236        z-index:99999;
4237        max-width:340px;
4238        width:calc(100vw - 32px);
4239        padding:18px 20px 18px 16px;
4240        background:var(--ca-surface, #fefdfb);
4241        /* terminal treatment: hard border + offset block shadow, same
4242           frame as the homepage boxes */
4243        border:2px solid var(--ca-ink-border,#13110e);
4244        border-radius:6px;
4245        /* overflow:hidden clips the bg blur-layer's -12px inset, plus any
4246           overflowing custom HTML banner content, neatly to the
4247           border. Critical for the image+blur effect to look polished. */
4248        overflow:hidden;
4249        box-shadow:4px 4px 0 var(--ca-ink-shadow, #13110e);
4250        font-family:'Outfit', system-ui, -apple-system, sans-serif;
4251        opacity:0;
4252        pointer-events:none;
4253        transform:translateY(20px);
4254        transition:opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
4255    }
4256    .kf-visitor-popup.kf-vp-visible{
4257        opacity:1;
4258        pointer-events:auto;
4259        transform:translateY(0);
4260    }
4261    .kf-visitor-popup.kf-vp-leaving{
4262        opacity:0;
4263        transform:translateY(10px);
4264        pointer-events:none;
4265    }
4266
4267    /* ─── Background system ──────────────────────────────────────
4268       Five mutually-exclusive style classes on the popup root, all
4269       driven by CSS variables set inline by the template:
4270
4271         .kf-vp-bg-none      → cream surface (default)
4272         .kf-vp-bg-solid     → --kf-vp-bg-c1
4273         .kf-vp-bg-gradient  → linear-gradient(--kf-vp-bg-dir, c1, c2)
4274         .kf-vp-bg-image     → --kf-vp-bg (url), with optional layered
4275                               blur (.kf-vp-bg-blur-layer) + dim
4276                               (.kf-vp-bg-dim-layer) child divs
4277         .kf-vp-bg-pattern   → CSS-only patterns using c1 over c2
4278
4279       The .kf-vp-greyscale modifier desaturates the image or pattern
4280       background only (text stays full-color). */
4281
4282    .kf-vp-bg-none{ background:var(--ca-surface, #fefdfb); }
4283    .kf-vp-bg-solid{ background:var(--kf-vp-bg-c1, #5865F2); }
4284    .kf-vp-bg-gradient{
4285        background:linear-gradient(var(--kf-vp-bg-dir, 135deg), var(--kf-vp-bg-c1, #5865F2), var(--kf-vp-bg-c2, #9333ea));
4286    }
4287
4288    /* ── Image background ─────────────────────────────────────────
4289       The popup root carries the image as its background. When dim
4290       or blur effects are needed, dedicated layer divs are rendered
4291       inside the popup (absolute positioned, overflowing edges hidden
4292       by the popup's border-radius + overflow:hidden combination). */
4293    .kf-vp-bg-image{
4294        background:var(--kf-vp-bg, none) center / cover no-repeat;
4295        overflow:hidden;
4296    }
4297    .kf-vp-bg-image > *{ position:relative; z-index:1; }
4298    /* "none" effect — raw image, no overlays */
4299    /* "dim" effect — solid black overlay */
4300    .kf-vp-bg-dim-layer{
4301        position:absolute;
4302        inset:0;
4303        background:rgba(0, 0, 0, var(--kf-vp-dim, .4));
4304        z-index:0;
4305        pointer-events:none;
4306    }
4307    /* "blur" effect — duplicate image w/ filter:blur. Inset:-12 + scale
4308       prevents the blur from showing soft edges along the popup's
4309       rounded border. The popup's overflow:hidden clips it cleanly. */
4310    .kf-vp-bg-blur-layer{
4311        position:absolute;
4312        inset:-12px;
4313        background:var(--kf-vp-bg, none) center / cover no-repeat;
4314        filter:blur(var(--kf-vp-blur, 10px));
4315        z-index:0;
4316        pointer-events:none;
4317    }
4318    /* When blur is active, hide the original (sharp) image on the root —
4319       otherwise we'd see a sharp version peeking through the blur layer's
4320       12px overflow. */
4321    .kf-vp-bg-image.kf-vp-bg-img-fx-blur,
4322    .kf-vp-bg-image.kf-vp-bg-img-fx-both{ background-image:none; }
4323
4324    /* ── Pattern backgrounds ───────────────────────────────────────
4325       CSS-only patterns built from gradients. c1 is the pattern, c2
4326       the base. Tiles vary by preset for the best visual density at
4327       popup scale (340px wide). */
4328    .kf-vp-bg-pattern.kf-vp-pat-dots{
4329        background:
4330            radial-gradient(circle at center, var(--kf-vp-bg-c1, #5865F2) 1.6px, transparent 1.8px) 0 0 / 16px 16px,
4331            var(--kf-vp-bg-c2, #fefdfb);
4332    }
4333    .kf-vp-bg-pattern.kf-vp-pat-grid{
4334        background:
4335            linear-gradient(to right,  var(--kf-vp-bg-c1, #5865F2) 1px, transparent 1px) 0 0 / 22px 22px,
4336            linear-gradient(to bottom, var(--kf-vp-bg-c1, #5865F2) 1px, transparent 1px) 0 0 / 22px 22px,
4337            var(--kf-vp-bg-c2, #fefdfb);
4338    }
4339    .kf-vp-bg-pattern.kf-vp-pat-diagonal{
4340        background:
4341            repeating-linear-gradient(45deg,
4342                var(--kf-vp-bg-c1, #5865F2) 0 8px,
4343                var(--kf-vp-bg-c2, #fefdfb) 8px 16px);
4344    }
4345    .kf-vp-bg-pattern.kf-vp-pat-crosshatch{
4346        background:
4347            repeating-linear-gradient(45deg,  var(--kf-vp-bg-c1, #5865F2) 0 1px, transparent 1px 8px),
4348            repeating-linear-gradient(-45deg, var(--kf-vp-bg-c1, #5865F2) 0 1px, transparent 1px 8px),
4349            var(--kf-vp-bg-c2, #fefdfb);
4350    }
4351
4352    /* ── Greyscale modifier ────────────────────────────────────────
4353       Image: apply filter:grayscale to the bg image OR the blur layer.
4354       Pattern: filter:grayscale on the popup root works because the
4355       patterns use specific c1/c2 colors that can be desaturated. We
4356       restrict the filter to BG layers (not the text/banner/button)
4357       by isolating it on the bg layers themselves. For patterns we
4358       use a saturate(0) on the bg-image of the popup root; the inner
4359       elements are unaffected because they don't inherit
4360       background filtering. */
4361    .kf-vp-bg-image.kf-vp-greyscale{ filter:grayscale(1); }
4362    .kf-vp-bg-image.kf-vp-greyscale .kf-vp-bg-blur-layer{ filter:blur(var(--kf-vp-blur, 
436210px)) grayscale(1); }
4363    /* But filter:grayscale on the root would also desaturate the text!
4364       Counter it by restoring saturation on the content layer. */
4365    .kf-vp-bg-image.kf-vp-greyscale > *{ filter:saturate(1.0); /* no-op fallback */ }
4366    .kf-vp-bg-image.kf-vp-greyscale .kf-vp-title,
4367    .kf-vp-bg-image.kf-vp-greyscale .kf-vp-msg,
4368    .kf-vp-bg-image.kf-vp-greyscale .kf-vp-cta{ filter:none; }
4369    .kf-vp-bg-pattern.kf-vp-greyscale{ filter:grayscale(1); }
4370    .kf-vp-bg-pattern.kf-vp-greyscale .kf-vp-cta{ filter:none; }
4371
4372    /* Position variants. Bottom-* slides up. Top-* slides down. */
4373    .kf-vp-bl{ bottom:24px; left:24px; }
4374    .kf-vp-br{ bottom:24px; right:24px; }
4375    .kf-vp-bc{ bottom:24px; left:50%; transform:translate(-50%, 20px); }
4376    .kf-vp-bc.kf-vp-visible{ transform:translate(-50%, 0); }
4377    .kf-vp-bc.kf-vp-leaving{ transform:translate(-50%, 10px); }
4378    .kf-vp-tl{ top:24px;    left:24px;  transform:translateY(-20px); }
4379    .kf-vp-tl.kf-vp-visible{ transform:translateY(0); }
4380    .kf-vp-tl.kf-vp-leaving{ transform:translateY(-10px); }
4381    .kf-vp-tr{ top:24px;    right:24px; transform:translateY(-20px); }
4382    .kf-vp-tr.kf-vp-visible{ transform:translateY(0); }
4383    .kf-vp-tr.kf-vp-leaving{ transform:translateY(-10px); }
4384
4385    .kf-vp-close{
4386        position:absolute;
4387        top:6px;
4388        right:8px;
4389        background:transparent;
4390        border:none;
4391        font-size:22px;
4392        line-height:1;
4393        color:var(--ca-muted, #7a7268);
4394        cursor:pointer;
4395        padding:4px 8px;
4396        border-radius:6px;
4397        transition:background .15s, color .15s;
4398        z-index:1;
4399    }
4400    .kf-vp-close:hover{
4401        background:rgba(var(--ca-ink-rgb),.06);
4402        color:var(--ca-text, #1f1c18);
4403    }
4404
4405    /* ─── Custom HTML banner ─────────────────────────────────────
4406       When admin sets the Custom HTML Block field, the popup adds
4407       .kf-vp-has-banner and renders a <div class="kf-vp-banner"> above
4408       the body. This is where pixel art, animated SVG, video loops,
4409       and other rich visuals live. Sized to ~300px to match the
4410       popup's content width (340 - 2*18 padding = 304). The container
4411       has `overflow: hidden` so animations with negative offsets stay
4412       clipped neatly. */
4413    .kf-vp-banner{
4414        width:100%;
4415        margin:0 auto 8px;
4416        display:flex;
4417        justify-content:center;
4418        align-items:center;
4419        overflow:hidden;
4420        /* Default min-height — content controls actual height */
4421        min-height:0;
4422    }
4423    /* When banner is present, the icon column is hidden via the
4424       template's conditional render. The body becomes text-only,
4425       centered. (text-align:center on .kf-vp-text already handles
4426       horizontal centering for title/body/button.) */
4427
4428    /* Layout: icon left (vertically centered relative to text), text right
4429       (center-aligned). align-items:center on the flex parent vertically
4430       centers the icon column against the text column regardless of how
4431       many lines of body copy there are. */
4432    .kf-vp-body{
4433        display:flex;
4434        align-items:center;
4435        gap:14px;
4436    }
4437    .kf-vp-icon{
4438        flex:0 0 44px;
4439        height:44px;
4440        display:flex;
4441        align-items:center;
4442        justify-content:center;
4443        font-size:28px;
4444        line-height:1;
4445    }
4446    .kf-vp-icon img{ max-width:44px; max-height:44px; }
4447    .kf-vp-icon i{ font-size:28px; }
4448
4449    .kf-vp-text{
4450        flex:1;
4451        min-width:0;
4452        text-align:center;
4453    }
4454    .kf-vp-title{
4455        font-family:'Barlow Condensed', sans-serif;
4456        font-size:18px;
4457        font-weight:800;
4458        line-height:1.15;
4459        letter-spacing:.02em;
4460        /* Admin-controlled. Default matches the cream-surface theme so
4461           existing configs look the same after this upgrade. */
4462        color:var(--kf-vp-title-color, var(--ca-text, #1f1c18));
4463        margin:0 0 4px;
4464        padding:0 18px; /* breathing room around the close X */
4465        text-transform:uppercase;
4466    }
4467    .kf-vp-msg{
4468        font-size:13px;
4469        line-height:1.5;
4470        /* Admin-controlled body color. */
4471        color:var(--kf-vp-body-color, var(--ca-muted, #5a5249));
4472        margin:0;
4473    }
4474    .kf-vp-msg a{ color:inherit; text-decoration:underline; font-weight:600; }
4475    .kf-vp-cta{
4476        display:inline-block;
4477        margin-top:12px;
4478        padding:8px 16px;
4479        background:var(--kf-vp-cta, #5865F2);
4480        /* Admin-controlled button text color. */
4481        color:var(--kf-vp-cta-text, #fff) !important;
4482        font-family:'Outfit', sans-serif;
4483        font-size:13px;
4484        font-weight:700;
4485        text-transform:uppercase;
4486        letter-spacing:.06em;
4487        text-decoration:none !important;
4488        border:2px solid var(--ca-ink-border,#13110e);
4489        border-radius:4px;
4490        box-shadow:2px 2px 0 var(--ca-ink-shadow, #13110e);
4491        transition:filter .1s, transform .1s, box-shadow .1s;
4492        /* The pulse animation is wired below via .kf-vp-pulse on the
4493           popup root, so the button doesn't pulse if admin turned it off.
4494           Admin-set CTA fill/text colors keep working — only the frame
4495           is terminal-styled. */
4496    }
4497    .kf-vp-cta:hover{
4498        filter:brightness(1.10);
4499        transform:translate(-1px,-1px);
4500        box-shadow:3px 3px 0 var(--ca-ink-shadow, #13110e);
4501        /* Pause the pulse on hover so the user can click without the
4502           button moving under their cursor. */
4503        animation-play-state:paused;
4504    }
4505
4506    /* ─── Button pulse animation ──────────────────────────────────
4507       Subtle scale (1.0 ↔ 1.04) + an expanding-and-fading colored ring
4508       (box-shadow with the CTA color, mixed to ~50% then to 0% via
4509       color-mix). 2.4s loop. Activated when the root has .kf-vp-pulse. */
4510    @keyframes kf-vp-cta-pulse{
4511        0%, 100%{
4512            transform:scale(1);
4513            box-shadow:
4514                0 2px 8px rgba(0,0,0,.10),
4515                0 0 0 0 color-mix(in srgb, var(--kf-vp-cta, #5865F2) 55%, transparent);
4516        }
4517        50%{
4518            transform:scale(1.04);
4519            box-shadow:
4520                0 4px 14px rgba(0,0,0,.18),
4521                0 0 0 10px color-mix(in srgb, var(--kf-vp-cta, #5865F2) 0%,  transparent);
4522        }
4523    }
4524    .kf-vp-pulse .kf-vp-cta{
4525        animation:kf-vp-cta-pulse 2.4s ease-in-out infinite;
4526    }
4527
4528    /* Reduced motion: instant show/hide, no transforms, no pulse */
4529    @media (prefers-reduced-motion: reduce){
4530        .kf-visitor-popup, .kf-visitor-popup.kf-vp-visible, .kf-visitor-popup.kf-vp-leaving{
4531            transition:opacity .15s;
4532            transform:none !important;
4533        }
4534        .kf-vp-bc, .kf-vp-bc.kf-vp-visible, .kf-vp-bc.kf-vp-leaving{ transform:translateX(-50%) !important; }
4535        .kf-vp-pulse .kf-vp-cta{ animation:none; }
4536    }
4537    /* Mobile: pull from edges by 12px instead of 24px so it fits comfortably */
4538    @media (max-width: 480px){
4539        .kf-vp-bl, .kf-vp-tl{ left:12px; }
4540        .kf-vp-br, .kf-vp-tr{ right:12px; }
4541        .kf-vp-bl, .kf-vp-br, .kf-vp-bc{ bottom:12px; }
4542        .kf-vp-tl, .kf-vp-tr{ top:12px; }
4543    }
4544    </style>
4545    
4546
4547    <div id="kf-visitor-popup"
4548         class="kf-visitor-popup kf-vp-bl kf-vp-bg-none kf-vp-pulse kf-vp-has-banner"
4549         role="dialog"
4550         aria-labelledby="kf-vp-title"
4551         aria-describedby="kf-vp-msg"
4552         data-delay="2"
4553         data-persist="hours"
4554         data-persist-hours="48"
4555         style="--kf-vp-cta:#5865f2; --kf-vp-title-color:var(--ca-text); --kf-vp-body-color:var(--ca-muted2); --kf-vp-cta-text:#ffffff;">
4556                                <button type="button" class="kf-vp-close" aria-label="Dismiss">&times;</button>
4557                <div class="kf-vp-banner">
4558            <div class="kf-pixel-popcorn-v2" aria-label="Pixel animation of two people on a couch watching TV and tossing popcorn">
4559    <div class="tv-wrap">
4560        <div class="tv"></div>
4561        <div class="tv-foot"></div>
4562        <div class="tv-base"></div>
4563    </div>
4564    <div class="click-spark"></div>
4565
4566    <div class="person one">
4567        <div class="hair"></div>
4568        <div class="head">
4569            <div class="eye"></div>
4570            <div class="mouth"></div>
4571        </div>
4572        <div class="shirt"></div>
4573        <div class="arm"></div>
4574        <div class="leg a"></div>
4575        <div class="leg b"></div>
4576    </div>
4577
4578    <div class="person two">
4579        <div class="hair"></div>
4580        <div class="head">
4581            <div class="eye"></div>
4582            <div class="mouth"></div>
4583        </div>
4584        <div class="shirt"></div>
4585        <div class="arm"></div>
4586        <div class="leg a"></div>
4587        <div class="leg b"></div>
4588    </div>
4589
4590    <div class="couch"></div>
4591    <div class="couch-line"></div>
4592    <div class="popcorn-bucket"></div>
4593    <div class="popcorn-one"></div>
4594    <div class="popcorn-two"></div>
4595</div>
4596
4597<style>
4598.kf-pixel-popcorn-v2 {
4599    width: 300px;
4600    height: 300px;
4601    position: relative;
4602    overflow: hidden;
4603    background: transparent;
4604    image-rendering: pixelated;
4605    transform: translateZ(0);
4606}
4607
4608.kf-pixel-popcorn-v2 .tv-wrap {
4609    position: absolute;
4610    width: 104px;
4611    height: 86px;
4612    left: 98px;
4613    top: 38px;
4614    animation: tvBounce 4.8s infinite steps(1, end);
4615}
4616
4617.kf-pixel-popcorn-v2 .tv {
4618    position: absolute;
4619    width: 104px;
4620    height: 68px;
4621    left: 0;
4622    top: 0;
4623    background: #16192b;
4624    border: 6px solid #090b14;
4625    border-radius: 6px;
4626    box-shadow: inset 0 0 0 4px #2a3152, 0 6px 0 rgba(0, 0, 0, .22);
4627}
4628
4629.kf-pixel-popcorn-v2 .tv::before {
4630    content: "KwickFlix";
4631    position: absolute;
4632    width: 72px;
4633    height: 38px;
4634    left: 10px;
4635    top: 9px;
4636    background:
4637        linear-gradient(90deg, rgba(255,255,255,.24), transparent 42%),
4638        linear-gradient(180deg, #8bf0ff 0%, #9e83ff 58%, #ff7ac8 100%);
4639    opacity: 0;
4640    animation: tvScreen 4.8s infinite steps(1, end);
4641    box-shadow: 0 0 18px rgba(139, 240, 255, .65);
4642    color: #ffffff;
4643    font-family: Arial, sans-serif;
4644    font-size: 9px;
4645    font-weight: 900;
4646    line-height: 38px;
4647    text-align: center;
4648    text-shadow: 2px 2px 0 #16192b;
4649    letter-spacing: -0.5px;
4650}
4651
4652.kf-pixel-popcorn-v2 .tv::after {
4653    content: "";
4654    position: absolute;
4655    width: 10px;
4656    height: 10px;
4657    right: 8px;
4658    bottom: 6px;
4659    background: #59617f;
4660    box-shadow: 0 0 0 2px #090b14;
4661    animation: powerDot 4.8s infinite steps(1, end);
4662}
4663
4664.kf-pixel-popcorn-v2 .tv-foot {
4665    position: absolute;
4666    width: 20px;
4667    height: 14px;
4668    left: 42px;
4669    top: 64px;
4670    background: #090b14;
4671}
4672
4673.kf-pixel-popcorn-v2 .tv-base {
4674    position: absolute;
4675    width: 72px;
4676    height: 10px;
4677    left: 16px;
4678    top: 76px;
4679    background: #090b14;
4680    border-radius: 2px;
4681}
4682
4683.kf-pixel-popcorn-v2 .couch {
4684    position: absolute;
4685    width: 220px;
4686    height: 76px;
4687    left: 40px;
4688    top: 184px;
4689    background: #8f3b38;
4690    border: 6px solid #3a1818;
4691    border-radius: 14px 14px 8px 8px;
4692    box-shadow:
4693        inset 0 -14px #6f2928,
4694        inset 0 8px #a94a45,
4695        0 12px 0 rgba(0, 0, 0, .18);
4696}
4697
4698.kf-pixel-popcorn-v2 .couch::before,
4699.kf-pixel-popcorn-v2 .couch::after {
4700    content: "";
4701    position: absolute;
4702    width: 36px;
4703    height: 52px;
4704    top: -4px;
4705    background: #9c423e;
4706    border: 6px solid #3a1818;
4707    border-radius: 10px;
4708    box-shadow:
4709        inset 0 -10px #732927,
4710        inset 0 6px #b6554d;
4711}
4712
4713.kf-pixel-popcorn-v2 .couch::before {
4714    left: -20px;
4715}
4716
4717.kf-pixel-popcorn-v2 .couch::after {
4718    right: -20px;
4719}
4720
4721.kf-pixel-popcorn-v2 .couch-line {
4722    position: absolute;
4723    width: 6px;
4724    height: 54px;
4725    left: 147px;
4726    top: 199px;
4727    background: #3a1818;
4728    opacity: .85;
4729    z-index: 2;
4730}
4731
4732.kf-pixel-popcorn-v2 .couch-line::before {
4733    content: "";
4734    position: absolute;
4735    width: 18px;
4736    height: 6px;
4737    left: -70px;
4738    top: -10px;
4739    background: #c07a65;
4740    box-shadow:
4741        24px 18px #57201f,
4742        88px -5px #c07a65,
4743        104px 24px #57201f,
4744        40px 42px #b15a4e,
4745        -10px 28px #57201f;
4746}
4747
4748.kf-pixel-popcorn-v2 .person {
4749    position: absolute;
4750    width: 52px;
4751    height: 90px;
4752    top: 130px;
4753    z-index: 4;
4754}
4755
4756.kf-pixel-popcorn-v2 .person.one {
4757    left: 78px;
4758}
4759
4760.kf-pixel-popcorn-v2 .person.two {
4761    left: 170px;
4762    transform: scaleX(-1);
4763}
4764
4765.kf-pixel-popcorn-v2 .head {
4766    position: absolute;
4767    width: 32px;
4768    height: 32px;
4769    left: 10px;
4770    top: 0;
4771    background: #f0bb86;
4772    border: 4px solid #191120;
4773    border-radius: 5px;
4774    animation: chompHead 4.8s infinite steps(1, end);
4775}
4776
4777.kf-pixel-popcorn-v2 .person.two .head {
4778    background: #d99a67;
4779}
4780
4781.kf-pixel-popcorn-v2 .hair {
4782    position: absolute;
4783    width: 34px;
4784    height: 13px;
4785    left: 9px;
4786    top: -2px;
4787    background: #866459;
4788    border-radius: 5px 5px 0 0;
4789    z-index: 5;
4790}
4791
4792.kf-pixel-popcorn-v2 .person.two .hair {
4793    background: #DD9C1B;
4794    box-shadow: inset 0 -4px #b67712;
4795}
4796
4797.kf-pixel-popcorn-v2 .eye {
4798    position: absolute;
4799    width: 4px;
4800    height: 4px;
4801    left: 9px;
4802    top: 14px;
4803    background: #11131f;
4804    box-shadow: 12px 0 #11131f;
4805}
4806
4807.kf-pixel-popcorn-v2 .mouth {
4808    position: absolute;
4809    width: 12px;
4810    height: 4px;
4811    left: 10px;
4812    top: 24px;
4813    background: #7a2e3e;
4814    animation: chompMouth 4.8s infinite steps(1, end);
4815}
4816
4817.kf-pixel-popcorn-v2 .shirt {
4818    position: absolute;
4819    width: 44px;
4820    height: 48px;
4821    left: 4px;
4822    top: 34px;
4823    background: #41403E;
4824    border: 4px solid #1f1e1d;
4825    border-radius: 7px 7px 3px 3px;
4826    box-shadow: inset 0 -10px rgba(0, 0, 0, .15);
4827}
4828
4829.kf-pixel-popcorn-v2 .person.two .shirt {
4830    background: #598CA1;
4831    border-color: #254452;
4832}
4833
4834.kf-pixel-popcorn-v2 .arm {
4835    position: absolute;
4836    width: 12px;
4837    height: 36px;
4838    left: 38px;
4839    top: 39px;
4840    background: #f0bb86;
4841    border: 3px solid #191120;
4842    transform-origin: top center;
4843    animation: snackToss 4.8s infinite steps(1, end);
4844}
4845
4846.kf-pixel-popcorn-v2 .person.two .arm {
4847    background: #d99a67;
4848}
4849
4850.kf-pixel-popcorn-v2 .leg {
4851    position: absolute;
4852    width: 18px;
4853    height: 18px;
4854    top: 76px;
4855    background: #910D00;
4856    border: 3px solid #3d0701;
4857}
4858
4859.kf-pixel-popcorn-v2 .person.two .leg {
4860    background: #5C656B;
4861    border-color: #252b2f;
4862}
4863
4864.kf-pixel-popcorn-v2 .leg.a {
4865    left: 6px;
4866}
4867
4868.kf-pixel-popcorn-v2 .leg.b {
4869    left: 28px;
4870}
4871
4872.kf-pixel-popcorn-v2 .popcorn-bucket {
4873    position: absolute;
4874    width: 46px;
4875    height: 34px;
4876    left: 127px;
4877    top: 191px;
4878    z-index: 6;
4879    background: repeating-linear-gradient(90deg, #fff4cf 0 8px, #ff3d5f 8px 16px);
4880    border: 4px solid #611b2c;
4881    border-radius: 3px 3px 14px 14px;
4882    box-shadow: inset 0 -7px rgba(0, 0, 0, .16);
4883    animation: bucketWiggle 4.8s infinite steps(1, end);
4884}
4885
4886.kf-pixel-popcorn-v2 .popcorn-bucket::before {
4887    content: "";
4888    position: absolute;
4889    width: 8px;
4890    height: 8px;
4891    left: 0;
4892    top: -12px;
4893    background: #fff0a8;
4894    box-shadow: 8px -4px #ffe186, 16px -1px #fff0a8, 24px -5px #ffe186, 33px -1px #fff0a8;
4895    border-radius: 2px;
4896}
4897
4898.kf-pixel-popcorn-v2 .popcorn-one,
4899.kf-pixel-popcorn-v2 .popcorn-two {
4900    position: absolute;
4901    width: 8px;
4902    height: 8px;
4903    z-index: 7;
4904    background: #fff0a8;
4905    border: 2px solid #d59435;
4906    border-radius: 2px;
4907    opacity: 0;
4908}
4909
4910.kf-pixel-popcorn-v2 .popcorn-one {
4911    left: 149px;
4912    top: 185px;
4913    animation: popcornLeft 4.8s infinite steps(1, end);
4914}
4915
4916.kf-pixel-popcorn-v2 .popcorn-two {
4917    left: 151px;
4918    top: 185px;
4919    animation: popcornRight 4.8s infinite steps(1, end);
4920}
4921
4922.kf-pixel-popcorn-v2 .click-spark {
4923    position: absolute;
4924    width: 6px;
4925    height: 6px;
4926    left: 204px;
4927    top: 86px;
4928    background: #fff0a8;
4929    opacity: 0;
4930    z-index: 8;
4931    box-shadow: 10px 4px #8bf0ff, -9px 8px #ff7ac8;
4932    animation: spark 4.8s infinite steps(1, end);
4933}
4934
4935@keyframes tvScreen {
4936    0%, 12% { opacity: 0; }
4937    13%, 100% { opacity: 1; }
4938}
4939
4940@keyframes powerDot {
4941    0%, 12% { background: #59617f; }
4942    13%, 100% { background: #8bf0ff; }
4943}
4944
4945@keyframes tvBounce {
4946    0%, 12% { transform: translateY(0); }
4947    13%, 16% { transform: translateY(-3px); }
4948    17%, 100% { transform: translateY(0); }
4949}
4950
4951@keyframes spark {
4952    0%, 12% { opacity: 0; transform: scale(1); }
4953    13%, 17% { opacity: 1; transform: scale(1.35); }
4954    18%, 100% { opacity: 0; transform: scale(1); }
4955}
4956
4957@keyframes snackToss {
4958    0%, 39% { transform: rotate(22deg); }
4959    40%, 48% { transform: rotate(-72deg); }
4960    49%, 100% { transform: rotate(22deg); }
4961}
4962
4963@keyframes chompHead {
4964    0%, 55% { transform: translateY(0); }
4965    56%, 64% { transform: translateY(-5px) rotate(-5deg); }
4966    65%, 72% { transform: translateY(2px); }
4967    73%, 100% { transform: translateY(0); }
4968}
4969
4970@keyframes chompMouth {
4971    0%, 58% { height: 4px; top: 24px; }
4972    59%, 68% { height: 9px; top: 21px; }
4973    69%, 100% { height: 4px; top: 24px; }
4974}
4975
4976@keyframes bucketWiggle {
4977    0%, 39% { transform: rotate(0); }
4978    40%, 44% { transform: rotate(-4deg); }
4979    45%, 49% { transform: rotate(4deg); }
4980    50%, 100% { transform: rotate(0); }
4981}
4982
4983@keyframes popcornLeft {
4984    0%, 39% { opacity: 0; transform: translate(0, 0); }
4985    40% { opacity: 1; transform: translate(0, 0); }
4986    47% { opacity: 1; transform: translate(-28px, -42px); }
4987    54% { opacity: 1; transform: translate(-54px, -58px); }
4988    61% { opacity: 1; transform: translate(-67px, -34px); }
4989    68% { opacity: 1; transform: translate(-63px, -13px); }
4990    69%, 100% { opacity: 0; transform: translate(-63px, -13px); }
4991}
4992
4993@keyframes popcornRight {
4994    0%, 47% { opacity: 0; transform: translate(0, 0); }
4995    48% { opacity: 1; transform: translate(0, 0); }
4996    54% { opacity: 1; transform: translate(27px, -35px); }
4997    60% { opacity: 1; transform: translate(52px, -49px); }
4998    66% { opacity: 1; transform: translate(65px, -26px); }
4999    72% { opacity: 1; transform: translate(61px, -9px); }
5000    73%, 100% { opacity: 0; transform: translate(61px, -9px); }
5001}
5002</style>
5003        </div>
5004                <div class="kf-vp-body">
5005                        <div class="kf-vp-text">
5006                <h3 id="kf-vp-title" class="kf-vp-title">Hey dude, discord?</h3>                <p id="kf-vp-msg" class="kf-vp-msg">Hop in discord and chat about IPTV, Plex, Jellyfin & more — get setup help and early-access drops.</p>                                    <a class="kf-vp-cta" href="https://discord.gg/ruGAfxUmZ3" target="_blank" rel="noopener noreferrer">Hop in the discord</a>
5007                            </div>
5008        </div>
5009    </div>
5010
5011    
5012    
5012<script>
5013    (function(){
5014        var popup = document.getElementById('kf-visitor-popup');
5015        if (!popup) return;
5016        var delay        = parseInt(popup.dataset.delay, 10) || 0;
5017        var persist      = popup.dataset.persist || 'forever';
5018        var persistHours = parseInt(popup.dataset.persistHours, 10) || 6;
5019        var storageKey   = 'kf-visitor-popup-dismissed';
5020
5021        function getStorage(){
5022            try {
5023                return (persist === 'session') ? window.sessionStorage : window.localStorage;
5024            } catch (e) {
5025                // Storage may throw in private/incognito modes on some browsers.
5026                return null;
5027            }
5028        }
5029
5030        function shouldShow(){
5031            if (persist === 'pageview') return true;
5032            var s = getStorage();
5033            if (!s) return true; // can't track → fail-open
5034            var dismissed = s.getItem(storageKey);
5035            if (!dismissed) return true;
5036            if (persist === 'hours') {
5037                var when = parseInt(dismissed, 10);
5038                if (isNaN(when)) return true;
5039                var hoursPassed = (Date.now() - when) / 36e5; // ms in an hour
5040                return hoursPassed >= persistHours;
5041            }
5042            // forever / session — presence of any dismissal value blocks show
5043            return false;
5044        }
5045
5046        function show(){
5047            popup.classList.add('kf-vp-visible');
5048        }
5049        function dismiss(){
5050            popup.classList.remove('kf-vp-visible');
5051            popup.classList.add('kf-vp-leaving');
5052            // Persist the dismissal timestamp (except in pageview mode)
5053            if (persist !== 'pageview') {
5054                var s = getStorage();
5055                if (s) {
5056                    try { s.setItem(storageKey, Date.now().toString()); } catch (e) {}
5057                }
5058            }
5059            // Fully hide after transition for AT and tab order
5060            setTimeout(function(){
5061                popup.style.display = 'none';
5062            }, 400);
5063        }
5064
5065        if (!shouldShow()) {
5066            popup.style.display = 'none';
5067            return;
5068        }
5069
5070        // Schedule the entrance
5071        setTimeout(show, delay * 1000);
5072
5073        // Close button
5074        popup.querySelector('.kf-vp-close').addEventListener('click', dismiss);
5075
5076        // Escape key
5077        document.addEventListener('keydown', function(e){
5078            if (e.key === 'Escape' && popup.classList.contains('kf-vp-visible')) {
5079                dismiss();
5080            }
5081        });
5082    })();
5083    </script>
5083
5084    
5085    
5086    
5087    
5088    
5089    
5090    
5091<script>
5092window.kfDiscord = {
5093    linked:    false,
5094    username:  "",
5095    linkUrl:   "https://kwickflix.shop/modules/addons/kwickflixstyle/discordlink.php",
5096    unlinkUrl: "https://kwickflix.shop/modules/addons/kwickflixstyle/discordlink.php?action=unlink"
5097};
5098</script>
5098
5099
5100<script>
5101(function(){
5102    if (!/action=details/.test(location.search)) return;
5103    var d = window.kfDiscord; if (!d) return;
5104
5105    // Dark pages get lightened flash text / tinted fills; light keeps its hexes.
5106    var dk = document.documentElement.getAttribute('data-kf-theme') === 'dark';
5107    var card = document.createElement('div');
5108    card.style.cssText = 'background:var(--ca-surface);border:1px solid var(--ca-border);border-radius:14px;padding:22px 26px;margin:0 0 22px;box-shadow:0 10px 30px rgba(19,17,14,.05);font-family:inherit;';
5109
5110    var flashHtml = '';
5111    var m = location.search.match(/[?&]kfdiscord=([a-z]+)/);
5112    if (m) {
5113        var map = {
5114            linked:      [dk ? '#3fc86a' : '#1d6b3a', dk ? 'rgba(34,160,74,.16)' : '#e9f7ef', 'Discord linked — your roles will sync with your services.'],
5115            unlinked:    ['var(--ca-muted)', 'var(--ca-surface3)', 'Discord unlinked. Your managed roles were removed.'],
5116            error:       [dk ? '#f06060' : '#a12828', dk ? 'rgba(240,96,96,.14)' : '#fdecec', "Couldn't link Discord. Please try again."],
5117            badstate:    [dk ? '#f06060' : '#a12828', dk ? 'rgba(240,96,96,.14)' : '#fdecec', "Couldn't verify the request. Please try again."],
5118            unavailable: [dk ? '#f0b445' : '#8a6d1a', dk ? 'rgba(240,180,69,.14)' : '#fff8e6', 'Discord linking is not available right now.']
5119        };
5120        var f = map[m[1]];
5121        if (f) flashHtml = '<div style="margin-bottom:12px;padding:9px 12px;border-radius:8px;font-size:13px;color:'+f[0]+';background:'+f[1]+';">'+f[2]+'</div>';
5122    }
5123
5124    var discordIcon = '<i class="fab fa-discord" style="margin-right:8px;"></i>';
5125    var body, btn;
5126    if (d.linked) {
5127        body = '<div style="color:var(--ca-muted);font-size:14px;line-height:1.55;flex:1;min-width:0;">Linked'+(d.username ? ' as <strong>
5127'+d.username+'</strong>' : '')+' — your server roles update automatically with your services.</div>';
5128        btn  = '<a href="'+d.unlinkUrl+'" style="flex:0 0 auto;display:inline-flex;align-items:center;background:var(--ca-surface2);border:1.5px solid var(--ca-border);color:var(--ca-text);font-weight:700;font-size:14px;border-radius:8px;padding:9px 18px;text-decoration:none;white-space:nowrap;">Unlink Discord</a>';
5129    } else {
5130        body = '<div style="color:var(--ca-muted);font-size:14px;line-height:1.55;flex:1;min-width:0;">Link your Discord and we\u2019ll automatically give you the member roles for the services you own.</div>';
5131        btn  = '<a href="'+d.linkUrl+'" style="flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:#5865F2;border:1.5px solid #5865F2;color:var(--ca-on-accent);font-weight:700;font-size:14px;border-radius:8px;padding:9px 18px;text-decoration:none;white-space:nowrap;">'+discordIcon+'Link Discord</a>';
5132    }
5133
5134    var firstName = document.querySelector('input[name="firstname"]');
5135    var form = firstName ? firstName.closest('form') : null;
5136    var target = form
5137        || document.querySelector('.primary-content')
5138        || document.querySelector('#main-body')
5139        || document.querySelector('main');
5140    if (!target) return;
5141
5142    // Build card using createElement so the heading can copy computed styles
5143    // directly from the "Account Details" heading already in the DOM.
5144    var heading = document.createElement('h2');
5145    heading.textContent = 'Discord';
5146    heading.style.margin = '0 0 12px 0';
5147    var refEl = (form ? form.querySelector('h1,h2,h3') : null)
5148             || document.querySelector('.primary-content h1,.primary-content h2,main h1,main h2');
5149    if (refEl) {
5150        var cs = window.getComputedStyle(refEl);
5151        ['fontFamily','fontSize','fontWeight','fontStyle','letterSpacing','color','lineHeight'].forEach(function(p){
5152            heading.style[p] = cs[p];
5153        });
5154        heading.style.margin = '0 0 12px 0';
5155    }
5156
5157    var row = document.createElement('div');
5158    row.style.cssText = 'display:flex;align-items:center;gap:20px;';
5159    row.innerHTML = body + btn;
5160
5161    if (flashHtml) {
5162        var flashEl = document.createElement('div');
5163        flashEl.innerHTML = flashHtml;
5164        card.appendChild(flashEl.firstChild);
5165    }
5166    card.appendChild(heading);
5167    card.appendChild(row);
5168
5169    if (form && form.parentNode) {
5170        form.parentNode.insertBefore(card, form);
5171    } else {
5172        target.insertBefore(card, target.firstChild);
5173    }
5174})();
5175</script>
5175
5176
5177
5178
5179<script>
5180jQuery(function ($) {
5181    var MAP = {
5182        tableInvoicesList: 'my_invoices --list-all',
5183        tableServicesList: 'my_services --list-all',
5184        tableDomainsList:  'my_domains --list-all',
5185        tableTicketsList:  'support_tickets --list-all',
5186        tableQuotesList:   'my_quotes --list-all',
5187        tableEmailsList:   'my_emails --list-all'
5188    };
5189    $('.table-container').each(function () {
5190        var $c = $(this);
5191        if ($c.find('.kf-list-head').length) return;
5192        var $tbl = $c.find('table[id^="table"]').first();
5193        var id = $tbl.attr('id') || '';
5194        var cmd = MAP[id];
5195        if (!cmd) {
5196            var slug = id.replace(/^table/, '').replace(/List$/, '');
5197            if (!slug) return;
5198            cmd = slug.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase() + ' --list';
5199        }
5200        $c.addClass('kf-list-shell').prepend(
5201            '<div class="kf-list-head">' +
5202            '<span><span class="kf-lh-sym">❯</span>' + cmd +
5203            '<span class="kf-lh-cursor"></span></span>' +
5204            '<span class="kf-lh-cmd" data-kf-count></span></div>'
5205        );
5206    });
5207    // DataTables finishes init in each page's own ready handler, so
5208    // read the counts (and set the search placeholder) a beat later.
5209    setTimeout(function () {
5210        $('.dataTables_filter input').attr('placeholder', 'Search…');
5211        $('.kf-list-shell').each(function () {
5212            var $c = $(this);
5213            var m = ($c.find('.dataTables_info').text() || '').match(/of\s+([\d,]+)/);
5214            if (m) $c.find('[data-kf-count]').text(m[1] + ' found');
5215        });
5216    }, 450);
5217});
5218</script>
5218
5219
5220
5221<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"7fe3d5d726c947fe9e285be6cff337f3","r":1,"spa":2}' crossorigin="anonymous"></script>
5221
5222</body>
5223</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.