/* Halloween theme for Thaifactorymart. Sent only while the theme is on (see _Layout.cshtml); every rule is scoped to
   body.theme-halloween, so with the theme off nothing here applies. Same palette as KUPLUS: pumpkin orange, witch purple, midnight. */
body.theme-halloween {
  --hw-orange: #ff7a1a; --hw-orange-dark: #d85f00; --hw-orange-soft: #fff0e1;
  --hw-purple: #6d28d9; --hw-night: #130a1f; --hw-night-soft: #1f1233;
  --brand: var(--hw-purple);
  --accent: var(--hw-orange-dark);
  --bg: #fbf4ec;
  --line: #f0dcc6;
}
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 #pageBar { background: linear-gradient(90deg, var(--hw-orange), var(--hw-purple)); }

/* ---- Header: midnight black with an orange rule, cobwebs in the corners ---- */
body.theme-halloween .topbar { background: var(--hw-night); border-bottom-color: #2d1b45; color: #ffc58f; }
body.theme-halloween .topbar a { color: #ffd9b3; }
body.theme-halloween .topbar a:hover { color: #fff; }
body.theme-halloween .topbar .fas, body.theme-halloween .topbar .far, body.theme-halloween .topbar .fab { color: var(--hw-orange); }
body.theme-halloween .topbar .lang-switch a { color: #9f93b3; }
body.theme-halloween .topbar .lang-switch a.active { color: var(--hw-orange); }
body.theme-halloween .topbar .lang-switch > span { color: #6b5d80; }

body.theme-halloween .main-nav {
  background: linear-gradient(180deg, #0c0712, #150c20) !important;
  box-shadow: 0 3px 0 var(--hw-orange), 0 8px 18px rgba(0, 0, 0, .35) !important;
  overflow: visible;
}
body.theme-halloween .main-nav::before, body.theme-halloween .main-nav::after {
  content: ""; position: absolute; top: 0; width: 92px; height: 92px; pointer-events: none; opacity: .5; filter: invert(1) brightness(1.15);
  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 .main-nav::before { left: 0; }
body.theme-halloween .main-nav::after { right: 0; transform: scaleX(-1); }
body.theme-halloween .main-nav .container { position: relative; z-index: 1; }
body.theme-halloween .main-nav .cart-link, body.theme-halloween .main-nav .mobile-category-toggle { color: #f3e9ff; }
body.theme-halloween .main-nav .cart-link:hover { color: var(--hw-orange); }
body.theme-halloween .cart-link .badge.bg-danger { background-color: var(--hw-orange) !important; color: #130a1f; }
body.theme-halloween .tfm-search-form .input-group { background: #f6f0fb; border-radius: 8px; }
body.theme-halloween .tfm-search-form .form-control:focus { border-color: var(--hw-orange); box-shadow: 0 0 0 .2rem rgba(255, 122, 26, .2); }

/* ghost + name replace the logo */
body.theme-halloween .navbar-brand .hw-ghost { height: 84px; 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.6rem; letter-spacing: .01em; 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: 66px; margin: -12px 0; }
  body.theme-halloween .navbar-brand .hw-brand-name { font-size: 1.2rem; }
  body.theme-halloween .main-nav::before, body.theme-halloween .main-nav::after { width: 50px; height: 50px; opacity: .35; }
}

/* menu row */
body.theme-halloween .sub-nav { background: #1a0f29 !important; border-bottom: 1px solid #2d1b45 !important; }
body.theme-halloween .sub-nav .nav-link { color: #eadcff; }
body.theme-halloween .sub-nav .nav-link:hover { color: var(--hw-orange); }

/* ---- Content ---- */
body.theme-halloween .section-title { border-left-color: var(--hw-orange); color: #24143a; }
body.theme-halloween .section-title::before { content: "\1F987  "; }
body.theme-halloween .pcard:hover { border-color: var(--hw-orange); box-shadow: 0 .5rem 1.25rem rgba(255, 122, 26, .22); }
body.theme-halloween .pcard .price b { color: var(--hw-orange-dark); }

/* product page: a glowing pumpkin sits in the bottom-right corner of the photo */
body.theme-halloween .pd-main::after {
  content: ""; position: absolute; right: .5rem; bottom: .35rem; width: 92px; height: 86px; z-index: 5; pointer-events: none;
  background: url("/images/halloween/pumpkin.svg") no-repeat center / contain;
}
@media (max-width: 575.98px) { body.theme-halloween .pd-main::after { width: 72px; height: 68px; } }

/* ---- Footer ---- */
body.theme-halloween .site-footer { background: linear-gradient(180deg, var(--hw-night-soft), var(--hw-night)); border-top: 4px solid var(--hw-orange); color: #eadcff; }
body.theme-halloween .site-footer a { color: #ffb066; }
body.theme-halloween .site-footer a:hover { color: var(--hw-orange); }
body.theme-halloween .site-footer .text-muted { color: #b9a9d4 !important; }
body.theme-halloween .site-footer .footer-name { color: #fff; }
body.theme-halloween .site-footer .footer-info::after { content: "\1F383  Happy Halloween  \1F47B"; display: block; margin-top: .8rem; font-size: .85rem; color: #ffb066; }

/* ---- A bat flies across the top now and then ---- */
@media (prefers-reduced-motion: no-preference) {
  body.theme-halloween::before { content: "\1F987"; position: fixed; top: 76px; 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); }
}