/*
Theme Name: KHaLOWiN
Theme URI: https://your-site.com
Author: KHaLOWiN
Description: A spooky Halloween-themed WordPress theme with Pakistani money rain background, video slider, app/game download layout inspired by APKSure.
Version: 2.0.0
Requires at least: 5.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: khalowin
Tags: dark, halloween, apps, games, download, orange, purple, responsive-layout
*/

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --orange:       #FF6B00;
  --orange-light: #FF9A3C;
  --purple:       #3D0066;
  --purple-mid:   #6B0FAC;
  --purple-light: #9B30D0;
  --black:        #0D0008;
  --dark:         #180A22;
  --card-bg:      #1E0A2E;
  --card-border:  #3A1055;
  --text:         #F0E6FF;
  --muted:        #A080C0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--text);
  font-family: 'Nunito', 'Segoe UI', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── MONEY RAIN CANVAS ── */
#moneyCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(0,60,20,0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(255,107,0,0.07) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

a { color:var(--orange); text-decoration:none; transition:color .2s; }
a:hover { color:var(--orange-light); }
img { max-width:100%; height:auto; display:block; }

.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ── FLOATING DECO ── */
.halloween-deco {
  position:fixed; pointer-events:none; z-index:0;
  opacity:.05; font-size:80px;
  animation:floatUp 8s ease-in-out infinite;
}
.halloween-deco:nth-child(1){bottom:15%;right:5%;animation-delay:0s;}
.halloween-deco:nth-child(2){bottom:40%;left:3%;animation-delay:3s;font-size:50px;}
.halloween-deco:nth-child(3){top:20%;right:8%;animation-delay:5s;font-size:40px;}
@keyframes floatUp{0%,100%{transform:translateY(0) rotate(-5deg);}50%{transform:translateY(-20px) rotate(5deg);}}

/* ── HEADER ── */
#site-header {
  position:sticky; top:0; z-index:200;
  background:rgba(13,0,8,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--card-border);
  height:65px; display:flex; align-items:center;
}
#site-header .container { width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }

.site-title a {
  font-family:'Creepster','Georgia',cursive;
  font-size:28px; letter-spacing:2px; color:var(--orange);
  text-shadow:0 0 20px rgba(255,107,0,.6),0 0 40px rgba(255,107,0,.3);
  display:flex; align-items:center; gap:8px;
}

#primary-navigation ul { list-style:none; display:flex; gap:24px; align-items:center; }
#primary-navigation ul li a {
  color:var(--muted); font-size:14px; font-weight:700;
  border-bottom:2px solid transparent; padding:4px 0; transition:all .2s;
}
#primary-navigation ul li a:hover,
#primary-navigation ul li.current-menu-item a { color:var(--orange); border-bottom-color:var(--orange); }

.header-search-toggle {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:20px; padding:6px 14px; color:var(--muted);
  font-size:14px; cursor:pointer; display:flex; align-items:center; gap:8px;
  transition:border-color .2s;
}
.header-search-toggle:hover { border-color:var(--orange); color:var(--text); }

.menu-toggle {
  display:none; background:none; border:1px solid var(--card-border);
  color:var(--text); padding:6px 10px; border-radius:8px;
  font-size:18px; cursor:pointer;
}

/* ── VIDEO SLIDE ── */
.video-slide {
  width:25%; height:100%; position:relative;
  flex-shrink:0; background:#000; overflow:hidden;
}
.video-slide video { width:100%; height:100%; object-fit:cover; display:block; }

.video-upload-zone {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg,#0a0015,#1a0030);
  cursor:pointer; transition:background .2s;
}
.video-upload-zone:hover { background:linear-gradient(135deg,#120020,#250045); }

.upload-icon {
  width:60px; height:60px; border-radius:50%;
  background:rgba(255,107,0,.15); border:2px dashed var(--orange);
  display:flex; align-items:center; justify-content:center; font-size:26px;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,0,.4);}50%{box-shadow:0 0 0 12px rgba(255,107,0,0);}}

.upload-label { font-size:13px; font-weight:700; color:var(--text); }
.upload-sub   { font-size:11px; color:var(--muted); }
.upload-pick-btn {
  background:var(--orange); color:#fff; border:none;
  padding:8px 20px; border-radius:8px; font-size:12px; font-weight:800;
  cursor:pointer; margin-top:4px; transition:transform .15s;
}
.upload-pick-btn:hover { transform:scale(1.05); }

.video-overlay {
  position:absolute; inset:0; display:none; flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%);
  padding:12px 16px; z-index:5;
}
.video-slide:hover .video-overlay { display:flex; }

.video-controls { display:flex; align-items:center; gap:10px; }

.v-btn {
  background:rgba(255,255,255,.15); border:none; color:#fff;
  width:32px; height:32px; border-radius:50%; font-size:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:background .2s; flex-shrink:0;
}
.v-btn:hover { background:rgba(255,107,0,.5); }

.v-progress {
  flex:1; height:4px; background:rgba(255,255,255,.25);
  border-radius:2px; cursor:pointer; position:relative;
}
.v-progress-fill { height:100%; background:var(--orange); border-radius:2px; width:0%; transition:width .3s linear; }
.v-time { font-size:10px; color:rgba(255,255,255,.7); font-weight:700; white-space:nowrap; }

.video-badge {
  position:absolute; top:10px; left:10px;
  background:rgba(255,0,0,.85); color:#fff;
  font-size:10px; font-weight:800; padding:3px 8px;
  border-radius:4px; letter-spacing:.5px; z-index:6; display:none;
}
.change-video-btn {
  position:absolute; top:10px; right:10px;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:11px; font-weight:700; padding:5px 10px;
  border-radius:6px; cursor:pointer; z-index:6; display:none; backdrop-filter:blur(4px);
}
.change-video-btn:hover { background:rgba(255,107,0,.5); }

/* ── SLIDER ── */
.slider-wrap { position:relative; width:100%; height:240px; overflow:hidden; background:#0D0008; }

.slides-track {
  display:flex; width:400%; height:100%;
  transition:transform .55s cubic-bezier(.77,0,.18,1);
}

.slide {
  width:25%; height:100%; position:relative; flex-shrink:0;
  display:flex; align-items:center; padding:0 28px; overflow:hidden;
}
.slide-2 { background:linear-gradient(135deg,#1a0800,#4A1800,#0a0005); }
.slide-3 { background:linear-gradient(135deg,#001010,#003030,#001a00); }
.slide-4 { background:linear-gradient(135deg,#10000a,#3a0030,#0a0010); }

.slide-bg-emoji {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:90px; opacity:.15; letter-spacing:-6px; pointer-events:none; line-height:1;
}
.slide-content { position:relative; z-index:3; max-width:60%; }
.slide-badge {
  display:inline-block; background:var(--orange); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  padding:3px 10px; border-radius:4px; margin-bottom:10px;
}
.slide-2 .slide-badge { background:#c44a00; }
.slide-3 .slide-badge { background:#007755; }
.slide-4 .slide-badge { background:#7700aa; }
.slide h2 {
  font-family:'Creepster','Georgia',cursive; font-size:30px; line-height:1.1;
  color:#fff; text-shadow:0 0 24px rgba(255,107,0,.5); margin-bottom:6px;
}
.slide p { color:var(--muted); font-size:12px; margin-bottom:14px; line-height:1.4; }
.slide-btn {
  display:inline-block; background:linear-gradient(135deg,var(--orange),var(--orange-light));
  color:#fff; border:none; padding:9px 20px; border-radius:8px;
  font-size:12px; font-weight:800; cursor:pointer;
  box-shadow:0 4px 18px rgba(255,107,0,.4); transition:transform .15s;
}
.slide-btn:hover { transform:scale(1.05); }
.slide-2 .slide-btn { background:linear-gradient(135deg,#c44a00,#ff7a30); }
.slide-3 .slide-btn { background:linear-gradient(135deg,#007755,#00bb88); }
.slide-4 .slide-btn { background:linear-gradient(135deg,#7700aa,#aa30dd); }

.slider-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.15);
  color:#fff; width:34px; height:34px; border-radius:50%; font-size:16px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:background .2s;
}
.slider-arrow:hover { background:rgba(255,107,0,.5); }
.slider-arrow.prev { left:10px; }
.slider-arrow.next { right:10px; }

.slider-dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:10; }
.slider-dots button {
  width:8px; height:8px; border-radius:50%; border:none;
  background:rgba(255,255,255,.3); cursor:pointer; padding:0; transition:all .3s;
}
.slider-dots button.active { background:var(--orange); width:22px; border-radius:4px; box-shadow:0 0 8px rgba(255,107,0,.6); }

.slide-counter {
  position:absolute; top:12px; right:14px; z-index:10;
  background:rgba(0,0,0,.4); color:rgba(255,255,255,.7);
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:10px; backdrop-filter:blur(4px);
}

/* ── MAIN ── */
main { position:relative; z-index:1; padding:0 16px 40px; max-width:1200px; margin:0 auto; }

/* ── TABS ── */
.category-tabs { display:flex; gap:10px; padding:20px 0 10px; overflow-x:auto; scrollbar-width:none; }
.category-tabs::-webkit-scrollbar { display:none; }
.cat-tab {
  flex-shrink:0; padding:9px 20px; border-radius:20px; font-size:13px; font-weight:700;
  cursor:pointer; border:1.5px solid var(--card-border); background:var(--card-bg);
  color:var(--muted); display:flex; align-items:center; gap:6px; transition:all .2s; text-decoration:none;
}
.cat-tab:hover, .cat-tab.active {
  background:var(--orange); border-color:var(--orange); color:#fff;
  box-shadow:0 4px 15px rgba(255,107,0,.3);
}

/* ── SECTION ── */
.section-wrap { margin-top:36px; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.section-heading {
  font-size:18px; font-weight:800; color:var(--text);
  display:flex; align-items:center; gap:10px;
}
.section-heading::before {
  content:''; display:inline-block; width:4px; height:20px;
  background:var(--orange); border-radius:2px;
}
.see-all-link { font-size:13px; font-weight:700; color:var(--orange); }
.see-all-link:hover { color:var(--orange-light); }

/* ── APP GRID ── */
.app-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.app-item { display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; text-decoration:none; }
.app-icon-wrap {
  width:72px; height:72px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:34px;
  border:1px solid var(--card-border); background:var(--card-bg);
  transition:transform .2s,box-shadow .2s; overflow:hidden;
}
.app-item:hover .app-icon-wrap { transform:translateY(-4px); box-shadow:0 10px 28px rgba(255,107,0,.3); border-color:var(--orange); }
.app-icon-wrap img { width:100%; height:100%; object-fit:cover; border-radius:15px; }
.app-label { font-size:11px; font-weight:700; text-align:center; color:var(--text); line-height:1.3; max-width:76px; }

/* ── POPULAR SCROLL ── */
.popular-scroll { display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; }
.popular-scroll::-webkit-scrollbar { display:none; }
.popular-card { flex-shrink:0; width:120px; cursor:pointer; text-decoration:none; }
.popular-thumb {
  width:120px; height:100px; border-radius:14px;
  border:1px solid var(--card-border); background:var(--card-bg);
  display:flex; align-items:center; justify-content:center; font-size:44px;
  position:relative; transition:transform .2s,border-color .2s; overflow:hidden;
}
.popular-card:hover .popular-thumb { transform:scale(1.04); border-color:var(--orange); }
.popular-thumb img { width:100%; height:100%; object-fit:cover; }
.rank-badge {
  position:absolute; top:7px; left:7px; width:22px; height:22px;
  border-radius:6px; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.rank-1{background:#FF6B00;color:#fff;} .rank-2{background:#9B30D0;color:#fff;}
.rank-3{background:#2D6A4F;color:#fff;} .rank-4{background:#555;color:#fff;} .rank-5{background:#444;color:#fff;}
.popular-name { font-size:12px; font-weight:700; color:var(--text); margin-top:8px; line-height:1.3; }

/* ── POST LIST ── */
.post-list { display:flex; flex-direction:column; gap:12px; }
.post-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:16px; padding:16px; display:flex; align-items:center; gap:16px;
  cursor:pointer; transition:border-color .2s,transform .2s; text-decoration:none;
}
.post-card:hover { border-color:var(--orange); transform:translateX(5px); }
.post-thumb {
  width:58px; height:58px; border-radius:13px; flex-shrink:0;
  background:var(--dark); border:1px solid var(--card-border);
  display:flex; align-items:center; justify-content:center; font-size:28px; overflow:hidden;
}
.post-thumb img { width:100%; height:100%; object-fit:cover; }
.post-info { flex:1; min-width:0; }
.post-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.post-meta { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.post-tag { font-size:10px; font-weight:800; padding:3px 9px; border-radius:6px; letter-spacing:.5px; text-transform:uppercase; }
.tag-game { background:rgba(255,107,0,.2); color:var(--orange); }
.tag-app  { background:rgba(155,48,208,.2); color:var(--purple-light); }
.dot-sep  { width:3px; height:3px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.dl-btn {
  background:linear-gradient(135deg,var(--purple-mid),var(--purple-light));
  border:none; color:#fff; width:38px; height:38px; border-radius:11px;
  font-size:18px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(107,15,172,.4); transition:transform .15s; text-decoration:none;
}
.dl-btn:hover { transform:scale(1.12); color:#fff; }

/* ── PROMO ── */
.promo-bar {
  background:linear-gradient(135deg,var(--purple),#1A0030);
  border:1px solid var(--purple-mid); border-radius:16px;
  padding:18px 24px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:28px 0;
}
.promo-logo { font-family:'Creepster',cursive; font-size:15px; color:var(--orange); margin-bottom:4px; }
.promo-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:2px; }
.promo-sub   { font-size:12px; color:var(--muted); }
.promo-download-btn {
  background:var(--orange); color:#fff; border:none;
  padding:11px 22px; border-radius:10px; font-size:13px; font-weight:800;
  cursor:pointer; white-space:nowrap; box-shadow:0 4px 15px rgba(255,107,0,.4);
  transition:transform .15s; flex-shrink:0;
}
.promo-download-btn:hover { transform:scale(1.05); color:#fff; }

/* ── BOTTOM NAV ── */
.mobile-bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; height:62px;
  background:rgba(13,0,8,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--card-border); z-index:300;
  align-items:center; justify-content:space-around;
}
.mob-nav-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--muted); font-size:10px; font-weight:700; cursor:pointer;
  padding:4px 14px; text-decoration:none; transition:color .2s;
}
.mob-nav-item span { font-size:20px; }
.mob-nav-item.active, .mob-nav-item:hover { color:var(--orange); }
.mobile-spacer { display:none; height:70px; }

/* ── FOOTER ── */
#site-footer { background:var(--dark); border-top:1px solid var(--card-border); padding:40px 0 20px; margin-top:60px; position:relative; z-index:1; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px; }
.footer-brand .site-title-foot { font-family:'Creepster',cursive; font-size:26px; color:var(--orange); text-shadow:0 0 15px rgba(255,107,0,.5); margin-bottom:10px; }
.footer-desc { font-size:13px; color:var(--muted); line-height:1.7; }
.footer-col-title { font-size:13px; font-weight:800; color:var(--text); letter-spacing:.8px; text-transform:uppercase; margin-bottom:14px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:8px; }
.footer-col ul li a { font-size:13px; color:var(--muted); }
.footer-col ul li a:hover { color:var(--orange); }
.footer-bottom { border-top:1px solid var(--card-border); padding-top:20px; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); }

/* ── ICON HELPERS ── */
.bg-purple-1{background:linear-gradient(135deg,#2D0040,#6B0FAC);}
.bg-purple-2{background:linear-gradient(135deg,#1A0025,#3D0060);}
.bg-orange-1{background:linear-gradient(135deg,#3A1800,#6A2E00);}
.bg-orange-2{background:linear-gradient(135deg,#1A0A00,#3A1800);}
.bg-green-1{background:linear-gradient(135deg,#001A00,#0A3A00);}
.bg-green-2{background:linear-gradient(135deg,#0A1A00,#1A3A00);}
.bg-red-1{background:linear-gradient(135deg,#1A0000,#4A0000);}
.bg-blue-1{background:linear-gradient(135deg,#000D1A,#001F3A);}

/* ── SEARCH ── */
.search-form { display:flex; gap:8px; }
.search-field { flex:1; background:var(--dark); border:1px solid var(--card-border); border-radius:10px; padding:10px 14px; color:var(--text); font-size:14px; outline:none; transition:border-color .2s; }
.search-field:focus { border-color:var(--orange); }
.search-submit { background:var(--orange); border:none; color:#fff; padding:10px 18px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; }

/* ── SINGLE ── */
.entry-title { font-family:'Creepster',cursive; font-size:36px; color:var(--text); line-height:1.2; margin-bottom:10px; }
.entry-meta  { font-size:13px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; }
.entry-content { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:28px; line-height:1.8; }
.entry-content h2,.entry-content h3 { color:var(--orange); margin:24px 0 12px; }
.entry-content p { margin-bottom:16px; color:var(--text); }

.hero-btn {
  display:inline-block; background:linear-gradient(135deg,var(--orange),var(--orange-light));
  color:#fff; border:none; padding:12px 28px; border-radius:10px; font-size:15px; font-weight:800;
  cursor:pointer; box-shadow:0 4px 20px rgba(255,107,0,.4); transition:transform .2s;
}
.hero-btn:hover { transform:translateY(-2px); color:#fff; }

.content-sidebar-wrap { display:grid; grid-template-columns:1fr 300px; gap:32px; align-items:start; }
.widget { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:20px; margin-bottom:24px; }
.widget-title { font-size:15px; font-weight:800; color:var(--text); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--card-border); }

.pagination { display:flex; justify-content:center; gap:8px; margin:36px 0; }
.page-numbers { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; background:var(--card-bg); border:1px solid var(--card-border); color:var(--muted); text-decoration:none; transition:all .2s; }
.page-numbers:hover,.page-numbers.current { background:var(--orange); border-color:var(--orange); color:#fff; }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .content-sidebar-wrap{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  #primary-navigation{display:none;}
  #primary-navigation.open{display:block;position:absolute;top:65px;left:0;right:0;background:rgba(13,0,8,.98);border-bottom:1px solid var(--card-border);padding:16px 20px;}
  #primary-navigation.open ul{flex-direction:column;gap:12px;}
  .menu-toggle{display:flex;}
  .app-grid{grid-template-columns:repeat(4,1fr);gap:10px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;}
  .mobile-bottom-nav{display:flex;}
  .mobile-spacer{display:block;}
}