/* ============================================================================================
   Halloween theme. Loaded only while the theme is on (see _Layout.cshtml), and every rule is scoped to
   body.theme-halloween, so with the theme off nothing here applies. It re-colours the site through the same
   variables site.css uses (--kp-*), then adds a few decorations. Plain CSS, no images (the cobweb is an inline SVG).
   Palette: pumpkin orange, witch purple, midnight black, a touch of slime green.
   ============================================================================================ */
body.theme-halloween {
  --hw-orange: #ff7a1a;
  --hw-orange-dark: #d85f00;
  --hw-orange-soft: #fff0e1;
  --hw-purple: #6d28d9;
  --hw-purple-dark: #4c1d95;
  --hw-night: #130a1f;
  --hw-night-soft: #1f1233;
  --hw-slime: #a3e635;

  --kp-green: var(--hw-orange);
  --kp-green-dark: var(--hw-orange-dark);
  --kp-green-soft: var(--hw-orange-soft);
  --kp-green-text: var(--hw-orange-dark);
  --kp-blue: var(--hw-purple);
  --kp-blue-light: #ffa24d;
  --kp-navy: var(--hw-night);
  --kp-navy-soft: var(--hw-night-soft);
  --kp-bg: #fbf4ec;               /* warm candle-light cream instead of the cool grey-blue */
  --bs-primary: var(--hw-orange);
}

/* ---- Top strip + header ---- */
body.theme-halloween .topbar-kuplus { background: var(--hw-night); color: #ffc58f; }
body.theme-halloween .topbar-kuplus a,
body.theme-halloween .topbar-kuplus a.text-reset { color: #ffd9b3 !important; }
body.theme-halloween .topbar-kuplus a:hover { color: #fff !important; }
body.theme-halloween .topbar-kuplus .bi { color: var(--hw-orange); }
body.theme-halloween .topbar-kuplus .container > span:first-child::before { content: "\1F383  "; }   /* 🎃 */

body.theme-halloween .navbar-kuplus {
  position: sticky;
  box-shadow: 0 3px 0 var(--hw-orange), 0 6px 14px rgba(19, 10, 31, .18);   /* an orange rule under the header */
  overflow: visible;
}
/* cobwebs in both top corners of the header (inline SVG, drawn in a soft grey) */
body.theme-halloween .navbar-kuplus::before,
body.theme-halloween .navbar-kuplus::after {
  content: "";
  position: absolute;
  top: 0;
  width: 92px;
  height: 92px;
  pointer-events: none;
  opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23554a66' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 0 L100 0 M0 0 L0 100 M0 0 L88 62 M0 0 L62 88 M0 0 L100 30 M0 0 L30 100'/%3E%3Cpath d='M22 0 Q14 14 0 22 M46 0 Q30 30 0 46 M70 0 Q46 46 0 70 M94 0 Q62 62 0 94'/%3E%3Ccircle cx='30' cy='20' r='1.6' fill='%23554a66'/%3E%3C/svg%3E") no-repeat top left / contain;
}
body.theme-halloween .navbar-kuplus::before { left: 0; }
body.theme-halloween .navbar-kuplus::after { right: 0; transform: scaleX(-1); }
body.theme-halloween .navbar-kuplus .container { position: relative; z-index: 1; }

/* search: orange button, orange focus ring */
body.theme-halloween .kp-search-form .input-group:focus-within { border-color: var(--hw-orange); box-shadow: 0 0 0 .2rem rgba(255, 122, 26, .18); }
body.theme-halloween .cart-badge.bg-danger { background-color: var(--hw-purple) !important; }

/* menu row under the header */
body.theme-halloween .category-trigger-bar { border-bottom: 1px solid #f0dcc6; background: #fffaf4; }
body.theme-halloween .category-trigger-bar .category-bar-link.active { color: var(--hw-orange-dark); border-bottom-color: var(--hw-orange); }

/* page progress bar: pumpkin -> witch purple */
body.theme-halloween #pageBar { background: linear-gradient(90deg, var(--hw-orange), var(--hw-purple)); box-shadow: 0 0 8px rgba(255, 122, 26, .6); }

/* ---- Buttons, links, badges ---- */
body.theme-halloween .btn-primary {
  background: linear-gradient(135deg, var(--hw-orange), var(--hw-orange-dark));
  border-color: var(--hw-orange-dark);
  color: #fff;
}
body.theme-halloween .btn-primary:hover,
body.theme-halloween .btn-primary:focus { background: linear-gradient(135deg, #ff8d3a, var(--hw-orange)); border-color: var(--hw-orange); color: #fff; }
body.theme-halloween .btn-outline-primary { color: var(--hw-purple); border-color: var(--hw-purple); }
body.theme-halloween .btn-outline-primary:hover { background: var(--hw-purple); border-color: var(--hw-purple); color: #fff; }
body.theme-halloween .btn-dark { background: var(--hw-night); border-color: var(--hw-night); }
body.theme-halloween :where(a:not([class]), .breadcrumb a, .link-secondary) { color: var(--hw-purple); }
body.theme-halloween :where(a:not([class]), .breadcrumb a):hover { color: var(--hw-orange-dark); }
body.theme-halloween .badge.bg-danger { background-color: var(--hw-purple) !important; }
body.theme-halloween .text-danger { color: #c2410c !important; }

/* ---- Headings / sections ---- */
body.theme-halloween .section-eyebrow { color: var(--hw-orange-dark); letter-spacing: .14em; }
body.theme-halloween .section-eyebrow::before { content: "\1F987  "; letter-spacing: 0; }   /* 🦇 */
body.theme-halloween h1, body.theme-halloween h2, body.theme-halloween h3 { color: #24143a; }
body.theme-halloween .product-gallery-main .owl-nav button:hover { color: var(--hw-orange); }

/* ---- Cards ---- */
body.theme-halloween .product-card { border: 1px solid #f1e2d0; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
body.theme-halloween .product-card:hover {
  border-color: var(--hw-orange);
  box-shadow: 0 .5rem 1.25rem rgba(255, 122, 26, .22) !important;
  transform: translateY(-3px);
}
body.theme-halloween .category-list-scroll { border-color: #f0dcc6; }
body.theme-halloween .category-list-item:hover { background: var(--hw-orange-soft); }
body.theme-halloween .category-list-icon { background: var(--hw-orange-soft); color: var(--hw-orange-dark); }
body.theme-halloween .filter-card { border-color: #f0dcc6; }
body.theme-halloween .pd-chip:hover { background: var(--hw-orange-soft); border-color: var(--hw-orange); }

/* hero tiles on the home page: witch purple fading to midnight */
body.theme-halloween .action-tile { background: linear-gradient(160deg, var(--hw-purple), var(--hw-night) 120%); }

/* ---- Footer ---- */
body.theme-halloween .footer-kuplus { background: linear-gradient(180deg, var(--hw-night-soft), var(--hw-night)); border-top: 4px solid var(--hw-orange); }
body.theme-halloween .footer-kuplus .footer-toggle,
body.theme-halloween .footer-kuplus .fw-semibold { color: #ffb066; }
body.theme-halloween .footer-kuplus a:hover { color: var(--hw-orange); }
body.theme-halloween .footer-kuplus .footer-brand::after {
  content: "\1F383  Happy Halloween  \1F47B";
  display: block;
  margin-top: .9rem;
  font-size: .85rem;
  color: #ffb066;
}

/* ---- Chat button ---- */
body.theme-halloween .kp-chat-fab { background: var(--hw-orange); box-shadow: 0 6px 18px rgba(255, 122, 26, .45); }
body.theme-halloween .kp-chat-header { background: linear-gradient(135deg, var(--hw-purple), var(--hw-night)); }

/* ---- A little life: a bat flies across the top of the page now and then ---- */
@media (prefers-reduced-motion: no-preference) {
  body.theme-halloween::before {
    content: "\1F987";
    position: fixed;
    top: 72px;
    left: -60px;
    z-index: 1039;
    font-size: 1.6rem;
    pointer-events: none;
    animation: hw-bat 22s linear infinite;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
  }
}
@keyframes hw-bat {
  0%   { transform: translate(0, 0) rotate(-6deg); }
  18%  { transform: translate(28vw, 22px) rotate(8deg); }
  36%  { transform: translate(55vw, -6px) rotate(-8deg); }
  54%  { transform: translate(82vw, 26px) rotate(6deg); }
  72%, 100% { transform: translate(112vw, 4px) rotate(-4deg); }
}
@media (max-width: 991.98px) {
  body.theme-halloween .navbar-kuplus::before,
  body.theme-halloween .navbar-kuplus::after { width: 50px; height: 50px; opacity: .4; }   /* smaller on phones so the icons stay clear */
}

/* ============================================================================================
   Black header: the whole top block (strip, navbar, menu row) goes midnight black with light text,
   and the logo is replaced by the KU ghost (the markup swap is in _Layout.cshtml).
   ============================================================================================ */
body.theme-halloween .navbar-kuplus {
  background: linear-gradient(180deg, #0c0712, #150c20);
  box-shadow: 0 3px 0 var(--hw-orange), 0 8px 18px rgba(0, 0, 0, .35);
}
body.theme-halloween .navbar-kuplus::before,
body.theme-halloween .navbar-kuplus::after {
  opacity: .5;
  filter: invert(1) brightness(1.15);   /* the cobweb was drawn dark; flip it to light grey on the black header */
}
body.theme-halloween .navbar-kuplus .nav-icon-link { color: #f3e9ff; }
body.theme-halloween .navbar-kuplus .nav-icon-link:hover { background: rgba(255, 122, 26, .18); color: var(--hw-orange); }
body.theme-halloween .navbar-kuplus .navbar-toggler,
body.theme-halloween .navbar-kuplus .navbar-toggler i { color: #f3e9ff; }
body.theme-halloween .navbar-kuplus .lang-switch-btn { color: #9f93b3; }
body.theme-halloween .navbar-kuplus .lang-switch-btn.active { color: var(--hw-orange); }
body.theme-halloween .lang-switch-btn + .lang-switch-btn::before { color: #6b5d80; }
body.theme-halloween .kp-search-form .input-group { background: #f6f0fb; }
body.theme-halloween .cart-badge.bg-danger { background-color: var(--hw-orange) !important; color: #130a1f; }

/* ghost + name */
body.theme-halloween .navbar-brand .hw-ghost { height: 86px; width: auto; margin: -16px 0; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
body.theme-halloween .navbar-brand .hw-brand-name {
  margin-left: .35rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: .02em;
  line-height: 1;
}
body.theme-halloween .navbar-brand .hw-brand-name::first-letter { color: var(--hw-orange); }
@media (max-width: 575.98px) {
  body.theme-halloween .navbar-brand .hw-ghost { height: 74px; margin: -14px 0; }
  body.theme-halloween .navbar-brand .hw-brand-name { font-size: 1.45rem; }
}

/* menu row under the header */
body.theme-halloween .category-trigger-bar { background: #1a0f29; border-bottom: 1px solid #2d1b45; }
body.theme-halloween .category-trigger-bar .category-trigger-btn,
body.theme-halloween .category-trigger-bar .category-bar-link { color: #eadcff; }
body.theme-halloween .category-trigger-bar .bi { color: #b79bdc; }
body.theme-halloween .category-trigger-bar .category-bar-link:hover,
body.theme-halloween .category-trigger-bar .category-trigger-btn:hover { color: var(--hw-orange); }
body.theme-halloween .category-trigger-bar .category-bar-link.active { color: var(--hw-orange); border-bottom-color: var(--hw-orange); }
body.theme-halloween .category-trigger-bar .category-bar-link.active .bi,
body.theme-halloween .category-trigger-bar .category-bar-link:hover .bi,
body.theme-halloween .category-trigger-bar .category-trigger-btn:hover .bi { color: var(--hw-orange); }

/* ---- Product page: a glowing pumpkin sitting in the bottom-right corner of the product photo ---- */
body.theme-halloween .product-gallery::after {
  content: "";
  position: absolute;
  right: .5rem;
  bottom: .35rem;
  width: 96px;
  height: 90px;
  background: url("/images/halloween/pumpkin.svg") no-repeat center / contain;
  pointer-events: none;   /* never blocks clicks/swipes on the photo */
  z-index: 3;
}
@media (max-width: 575.98px) {
  body.theme-halloween .product-gallery::after { width: 78px; height: 74px; }
}