html.halloween-mode{
  --vabe-accent:#ff7a00!important;
  --vabe-accent2:#c2410c!important;
  --vabe-soft:#fed7aa!important;
  --vabe-rgb:255,122,0!important;
  --vabe-glow:rgba(255,122,0,.28)!important;
  --accent:#ff7a00!important;
  --accent-2:#c2410c!important;
  --primary:#ff7a00!important;
  --primary-2:#c2410c!important;
  --brand:#ff7a00!important;
  --brand-2:#c2410c!important;
}
html.halloween-mode body{
  background-image:
    radial-gradient(circle at 15% 0%,rgba(255,122,0,.10),transparent 26%),
    radial-gradient(circle at 86% 9%,rgba(255,91,0,.08),transparent 24%)!important;
}
html.halloween-mode .topbtn,
html.halloween-mode .download,
html.halloween-mode .side a.on,
html.halloween-mode .primary,
html.halloween-mode button.primary,
html.halloween-mode .submit-review,
html.halloween-mode .redeem-btn,
html.halloween-mode #sgSubmit.ready,
html.halloween-mode #bfSubmit.ready{
  background:linear-gradient(135deg,#ff8a00,#e85d04)!important;
  border-color:#ff8a00!important;
  box-shadow:0 8px 28px rgba(255,122,0,.24)!important;
}
html.halloween-mode .topbtn{color:#100900!important}









.halloween-web:before,.halloween-web:after{content:"";position:absolute;inset:0;border:1px solid #fff;border-radius:0 0 100% 0}


.halloween-web i{position:absolute;left:0;top:0;width:100%;height:1px;background:#fff;transform-origin:left center}
.halloween-web i:nth-child(1){transform:rotate(22deg)}
.halloween-web i:nth-child(2){transform:rotate(45deg)}
.halloween-web i:nth-child(3){transform:rotate(68deg)}
@keyframes hBat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-10px) rotate(7deg)}}
@media(max-width:700px){
  .halloween-bat.b3,
  
  
}
@media(prefers-reduced-motion:reduce){}

/* Halloween decorations are attached to the shop UI, never the page background. */
html.halloween-mode .halloween-decor{display:none!important}
html.halloween-mode .vabe-webbed-buy{position:relative!important;isolation:isolate;overflow:hidden!important}
html.halloween-mode .vabe-button-web{position:absolute;left:0;top:0;width:53px;height:53px;pointer-events:none;color:#f6e9da;opacity:.72;z-index:1}
html.halloween-mode .vabe-button-web svg{display:block;width:100%;height:100%}
html.halloween-mode .vabe-halloween-pricing-icon{position:absolute;top:18px;right:22px;width:29px;height:29px;opacity:.66;pointer-events:none;filter:invert(64%) sepia(76%) saturate(1408%) hue-rotate(350deg)}
html.halloween-mode .vabe-halloween-pricing-icon img{display:block;width:100%;height:100%}
@media(max-width:600px){html.halloween-mode .vabe-halloween-pricing-icon{width:22px;height:22px;right:12px}}


/* 2026-10-09 visual repair:
   keep the original dark site, no floating emoji/background decorations. */
html.halloween-mode body{
  background-color:#080d13!important;
  background-image:none!important;
}
html.halloween-mode .halloween-decor,
html.halloween-mode .halloween-bat,
html.halloween-mode .halloween-pumpkin,
html.halloween-mode .floating-pumpkin,
html.halloween-mode .floating-bat{
  display:none!important;
}

/* Dashboard pill: match the compact reference instead of the oversized version. */
html.halloween-mode .topbtn{
  min-width:245px!important;
  width:auto!important;
  height:74px!important;
  padding:0 32px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:900!important;
  color:#100900!important;
}

/* Proper VABE Client logo in the upper-left navigation. */
.vabe-header-logo{
  display:block!important;
  width:178px!important;
  max-width:22vw!important;
  height:52px!important;
  object-fit:contain!important;
  object-position:left center!important;
  background:transparent!important;
}
.brand.vabe-logo-brand{
  display:flex!important;
  align-items:center!important;
  min-width:178px!important;
  margin-right:auto!important;
}
@media(max-width:700px){
  html.halloween-mode .topbtn{
    min-width:0!important;
    width:auto!important;
    height:48px!important;
    padding:0 20px!important;
    font-size:18px!important;
  }
  .vabe-header-logo{width:132px!important;height:42px!important}
  .brand.vabe-logo-brand{min-width:132px!important}
}

/* Restore the orange October theme */
html.halloween-mode body{
  background:
    radial-gradient(circle at 50% 18%,rgba(255,122,0,.09),transparent 36%),
    linear-gradient(180deg,#1a0d08 0%,#100b0a 38%,#080b10 100%)!important;
  color:#eef3fb;
}
html.halloween-mode header,
html.halloween-mode .topbar,
html.halloween-mode .navbar{
  background:rgba(17,11,10,.92)!important;
  border-color:rgba(255,122,0,.25)!important;
}
html.halloween-mode .module-view,
html.halloween-mode #modulesView{
  background:linear-gradient(180deg,rgba(40,18,10,.96),rgba(10,12,17,.98))!important;
}
html.halloween-mode .halloween-decor,
html.halloween-mode .halloween-bat,
html.halloween-mode .halloween-pumpkin,
html.halloween-mode .floating-pumpkin,
html.halloween-mode .floating-bat{display:none!important}

/* Cobwebs on purchase/checkout buttons, no emoji */
html.halloween-mode .buy-btn,
html.halloween-mode .pricing button,
html.halloween-mode .pricing a[class*="btn"],
html.halloween-mode [data-plan]{
  position:relative!important;
  overflow:visible!important;
}
html.halloween-mode .buy-btn:after,
html.halloween-mode .pricing button:after,
html.halloween-mode .pricing a[class*="btn"]:after,
html.halloween-mode [data-plan]:after{
  content:""!important;
  position:absolute!important;
  right:-3px!important;top:-3px!important;
  width:38px!important;height:38px!important;
  pointer-events:none!important;
  opacity:.68!important;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d9dee7' stroke-width='1.5' opacity='.8'%3E%3Cpath d='M64 0 27 37M64 0 45 48M64 0 12 18M64 0 0 0M64 0v64'/%3E%3Cpath d='M50 14c8 7 12 15 14 24M39 25c8 7 14 16 17 27M28 36c7 5 13 12 17 20'/%3E%3C/g%3E%3C/svg%3E")!important;
}

/* Pricing card layout repair */
html.halloween-mode .price-card{
  padding-bottom:118px!important;
}
html.halloween-mode .price-card ul{
  margin-bottom:22px!important;
}
html.halloween-mode .price-card .buy-btn{
  bottom:34px!important;
  z-index:3!important;
}
html.halloween-mode .price-card li:last-child{
  margin-bottom:0!important;
}
html.halloween-mode .vabe-button-web{
  width:46px!important;
  height:46px!important;
  opacity:.58!important;
}
html.halloween-mode .buy-btn:after{
  width:30px!important;
  height:30px!important;
  right:4px!important;
  top:3px!important;
  opacity:.48!important;
}

/* Colored Halloween SVG decorations — no emojis */
.vabe-halloween-icon{
 position:absolute;z-index:2;pointer-events:none;
 background-repeat:no-repeat;background-position:center;background-size:contain;
 filter:drop-shadow(0 8px 12px rgba(0,0,0,.34));
}
.vabe-halloween-icon.pumpkin{
 width:54px;height:54px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%236b8e23' d='M29 12c1-7 5-9 10-9-2 4-2 7 0 10z'/%3E%3Cellipse cx='32' cy='37' rx='25' ry='20' fill='%23ff7a00'/%3E%3Cellipse cx='23' cy='37' rx='10' ry='19' fill='%23f05b00' opacity='.7'/%3E%3Cellipse cx='41' cy='37' rx='10' ry='19' fill='%23ff9a16' opacity='.7'/%3E%3Cpath fill='%23150b08' d='m17 31 8-5 3 8zm30 0-8-5-3 8zM19 43c9 7 18 7 27 0-3 10-23 12-27 0z'/%3E%3C/svg%3E");
}
.vabe-halloween-icon.candy{
 width:48px;height:48px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%239333ea' d='m5 22 13 4v12L5 42l5-10zM59 22l-13 4v12l13 4-5-10z'/%3E%3Crect x='17' y='19' width='30' height='26' rx='12' fill='%23ff7a00'/%3E%3Cpath stroke='%23ffd166' stroke-width='5' d='m23 22 15 20M33 20l11 15'/%3E%3C/svg%3E");
}
.vabe-halloween-icon.ghost{
 width:48px;height:54px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 72'%3E%3Cpath fill='%23e8edf5' d='M9 62V30C9 14 19 5 32 5s23 9 23 25v32l-8-7-7 7-8-7-8 7-7-7z'/%3E%3Cellipse fill='%236b4ce6' cx='24' cy='30' rx='4' ry='6'/%3E%3Cellipse fill='%236b4ce6' cx='40' cy='30' rx='4' ry='6'/%3E%3C/svg%3E");
}
.vabe-halloween-icon.bat-svg{
 width:58px;height:38px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 48'%3E%3Cpath fill='%237c3aed' d='M39 21c-8-8-16-12-28-13l6 10-13 3c8 4 13 10 17 20 5-7 10-10 18-9 8-1 13 2 18 9 4-10 9-16 17-20l-13-3 6-10c-12 1-20 5-28 13z'/%3E%3Ccircle fill='%23ff7a00' cx='35' cy='24' r='2'/%3E%3Ccircle fill='%23ff7a00' cx='45' cy='24' r='2'/%3E%3C/svg%3E");
}
.vabe-halloween-icon.web{
 width:78px;height:78px;filter:none;opacity:.72;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23d9dee7' stroke-width='1.5'%3E%3Cpath d='M0 0h80M0 0v80M0 0l80 80M0 0l80 38M0 0l38 80'/%3E%3Cpath d='M14 0c0 8-6 14-14 14M29 0C29 16 16 29 0 29M47 0C47 26 26 47 0 47M67 0C67 37 37 67 0 67'/%3E%3C/g%3E%3C/svg%3E");
}
.vabe-halloween-icon.web.flip{transform:scaleX(-1)}
@media(max-width:700px){
 .vabe-halloween-icon.pumpkin,.vabe-halloween-icon.candy,.vabe-halloween-icon.ghost{transform:scale(.78)}
 .vabe-halloween-icon.bat-svg{transform:scale(.78)}
}

/* Keep Halloween decoration clean: corner webs only, no scattered characters/icons. */
#vabeColoredHalloweenIcons{display:none!important}

/* Dashboard top button: same compact size as starter-page header. */
html.halloween-mode .topbtn,
.dashboard-page .topbtn,
body.dashboard .topbtn{
  min-width:0!important;
  width:auto!important;
  height:48px!important;
  padding:0 24px!important;
  border-radius:999px!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:900!important;
}