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>❯</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> 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> 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> 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> 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> 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> 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> 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 & Addons" href="/index.php?rp=/store/whmcs-modules-and-addons" class="list-group-item list-group-item-action" id="Secondary_Sidebar-Categories-WHMCS_Modules_&_Addons"> 2914 2915 WHMCS Modules & 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> 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> 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">×</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">×</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">×</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> </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> 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 © 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">×</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">×</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">×</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">×</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.