/* =====================================================================
   FERAL RUST — PayNow "Summit" theme override v2  (neon-synthwave)
   Selectors taken from Summit source: github.com/paynow-gg/summit-template
   Load AFTER app.css (see README_store.md). Summit uses Tailwind v4
   browser runtime, so some overrides need !important.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --feral-rust:#ff5a36; --feral-amber:#ffb000; --feral-cyan:#22e4ff;
  --feral-bg0:#07060b; --feral-bg1:#110c18; --feral-bg2:#1a1020;
  --feral-glass:rgba(22,16,30,.62); --feral-glass-hi:rgba(34,24,44,.72);
  --feral-line:rgba(255,120,70,.22);
  --feral-text:#f4eee9; --feral-muted:#b9adb0;
  --feral-grad:linear-gradient(135deg,#ff5a36 0%,#ff7a2a 45%,#ffb000 100%);
  --feral-glow:0 0 18px rgba(255,90,54,.45),0 0 42px rgba(255,176,0,.18);
  --feral-ease:cubic-bezier(.22,.8,.24,1);
  /* re-point Summit vars so built-in utilities follow the palette */
  --primary-color:#ff5a36 !important; --secondary-color:#ffb000 !important;
  --hover-color:#ffb000 !important; --button:#ff5a36 !important;
  --background-color:#0a0810 !important; --content-color:rgba(22,16,30,.62) !important;
  --content-light-color:rgba(48,34,58,.7) !important;
  --text-muted:#b9adb0 !important;
}

/* ---------- Base / background ---------- */
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif !important; color:var(--feral-text);
  background:
    radial-gradient(1200px 600px at 15% -10%,rgba(255,90,54,.18),transparent 60%),
    radial-gradient(900px 500px at 100% 10%,rgba(255,176,0,.10),transparent 60%),
    radial-gradient(800px 600px at 50% 120%,rgba(34,228,255,.07),transparent 60%),
    linear-gradient(180deg,var(--feral-bg1),var(--feral-bg0) 70%) !important;
  background-attachment:fixed !important;
  -webkit-font-smoothing:antialiased;
}
/* subtle synthwave grid floor */
body::before{
  content:"";position:fixed;inset:auto 0 0 0;height:45vh;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,90,54,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,90,54,.10) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.55),transparent);
          mask-image:linear-gradient(to top,rgba(0,0,0,.55),transparent);
  transform:perspective(500px) rotateX(55deg);transform-origin:bottom;
}
#storeApp{position:relative;z-index:5}
h1,h2,h3,.text-3xl,.text-2xl.font-black{font-family:'Orbitron','Inter',sans-serif !important;letter-spacing:.02em}
.text-muted{color:var(--feral-muted) !important}
.text-neutral-300{color:#ddd3d0 !important}
a,button,.btn{transition:color .25s var(--feral-ease),background .25s var(--feral-ease),box-shadow .25s var(--feral-ease),transform .25s var(--feral-ease),border-color .25s var(--feral-ease)}
::selection{background:var(--feral-rust);color:#fff}

/* ---------- Hero banner + logo ---------- */
#appBg{max-height:520px !important;opacity:.55 !important}
#appBg img{filter:saturate(1.15) contrast(1.05)}
#appBg .fade{background:linear-gradient(0deg,var(--feral-bg0) 0%,rgba(10,8,16,.55) 55%,rgba(10,8,16,.2) 100%) !important}
#hero .logo img{
  max-width:min(70vw,360px);height:auto;
  filter:drop-shadow(0 0 14px rgba(255,90,54,.65)) drop-shadow(0 0 36px rgba(255,176,0,.30));
  animation:feral-pulse 4s ease-in-out infinite;
}
#hero .logo a:hover img{filter:drop-shadow(0 0 20px rgba(255,90,54,.9)) drop-shadow(0 0 50px rgba(255,176,0,.45))}
#hero .player-wrap .icon{background:var(--feral-grad) !important;box-shadow:var(--feral-glow) !important;border-radius:18px !important}
#hero .player-wrap h1{font-size:1.35rem !important}
#hero .player-wrap:hover{opacity:1 !important}
#hero .player-wrap:hover .icon{box-shadow:0 0 26px rgba(255,90,54,.75),0 0 60px rgba(255,176,0,.3) !important}
#hero .count{color:var(--feral-rust) !important}
.mobile-player-wrapper .inner-wrapper{background:var(--feral-glass) !important;border-color:var(--feral-line) !important;backdrop-filter:blur(12px)}
@keyframes feral-pulse{0%,100%{filter:drop-shadow(0 0 12px rgba(255,90,54,.55)) drop-shadow(0 0 30px rgba(255,176,0,.22))}50%{filter:drop-shadow(0 0 20px rgba(255,90,54,.85)) drop-shadow(0 0 48px rgba(255,176,0,.38))}}

/* ---------- Glass surfaces ---------- */
.bg-content,.content-header,#mobile-secondary,.sidebar > div:not(.store-menu-toggle){
  background:linear-gradient(160deg,var(--feral-glass-hi),var(--feral-glass)) !important;
  border:1px solid var(--feral-line);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 10px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.bg-content-light{background:rgba(48,34,58,.7) !important}
.border-content-light{border-color:var(--feral-line) !important}

/* ---------- Primary nav: "Store Menu" button (big + obvious) ---------- */
.store-menu-toggle{
  background:var(--feral-grad) !important;border-radius:18px !important;
  box-shadow:var(--feral-glow),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.store-menu-toggle h2{font-size:1.85rem !important;color:#160a05 !important;text-shadow:none !important;font-weight:900}
.store-menu-toggle p{color:#2a1208 !important;text-shadow:none !important;font-size:.95rem !important;text-transform:uppercase;letter-spacing:.12em}
.store-menu-toggle:hover{transform:translateY(-4px) !important;box-shadow:0 0 28px rgba(255,90,54,.7),0 0 70px rgba(255,176,0,.3) !important}

/* header home/social squares */
.category-meta > a,#category-socials > a{background:rgba(48,34,58,.7) !important;border:1px solid var(--feral-line)}
.category-meta > a:hover,#category-socials > a:hover{color:var(--feral-amber) !important;box-shadow:0 0 16px rgba(255,176,0,.35)}
.category-meta h2{background:var(--feral-grad);-webkit-background-clip:text;background-clip:text;color:transparent !important}

/* user/login block (links to /auth/sign-in — only restyled, not altered) */
.user-block h2{font-family:'Orbitron',sans-serif !important}
.user-block .custom-avatar{box-shadow:0 0 0 2px var(--feral-rust),0 0 14px rgba(255,90,54,.5)}
.user-block:hover .custom-avatar{box-shadow:0 0 0 2px var(--feral-amber),0 0 22px rgba(255,176,0,.6)}

/* ---------- Store menu modal (category links Ranks / Gems / Shop Points) ---------- */
.modal-nav a.block,.modal-nav .blocks{
  font-size:1.05rem;font-weight:700;border:1px solid var(--feral-line);
  background:rgba(48,34,58,.7) !important;
}
.modal-nav a.block:hover,.modal-nav a.block.active{
  background:var(--feral-grad) !important;color:#160a05 !important;box-shadow:var(--feral-glow);
}
.modal-nav a.block:hover *,.modal-nav a.block.active *{color:#160a05 !important}
.modal-nav::-webkit-scrollbar-thumb{background:var(--feral-rust) !important}

/* ---------- Product cards ---------- */
.category-packages{gap:1.75rem !important}
.category-packages > div{
  position:relative;border-radius:20px !important;
  transition:transform .35s var(--feral-ease),box-shadow .35s var(--feral-ease),border-color .35s var(--feral-ease) !important;
}
.category-packages > div:hover{
  transform:translateY(-8px) !important;border-color:rgba(255,120,70,.6);
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 28px rgba(255,90,54,.35) !important;
}
/* image area: keep dark (Summit flips it to solid primary on hover) */
.category-packages > div > div.h-48{height:13rem !important;background:radial-gradient(circle at 50% 40%,rgba(255,90,54,.18),rgba(10,8,16,.9)) !important}
.category-packages > div:hover > div.h-48{background:radial-gradient(circle at 50% 40%,rgba(255,176,0,.25),rgba(10,8,16,.9)) !important}
.category-packages > div > div.h-48 img{object-fit:contain !important;padding:.75rem}
.category-packages h3{font-size:1.3rem !important;color:#fff !important}
.category-packages h3:hover{color:var(--feral-amber) !important}
/* price: large, high-contrast amber */
.category-packages .text-2xl.text-primary,.text-4xl.text-primary,.text-2xl.font-bold.text-primary{
  font-family:'Orbitron',sans-serif !important;font-size:1.65rem !important;font-weight:800 !important;
  color:var(--feral-amber) !important;text-shadow:0 0 14px rgba(255,176,0,.35);
}
.line-through{color:#8f8488 !important}
/* card "View" (opens product modal → Buy) — make it a real CTA */
.category-packages button{
  background:var(--feral-grad) !important;color:#160a05 !important;font-weight:800 !important;
  font-size:1rem !important;text-transform:uppercase;letter-spacing:.08em;min-height:48px;
  border-radius:14px !important;box-shadow:0 6px 20px rgba(255,90,54,.35);
}
.category-packages button:hover{transform:translateY(-2px);box-shadow:0 0 22px rgba(255,90,54,.65),0 0 44px rgba(255,176,0,.25)}
.category-packages button:focus-visible{outline:3px solid var(--feral-cyan);outline-offset:3px}
/* keep tier-state colours (Current Plan / Pending) legible */
.category-packages button[class*="emerald"]{background:rgba(16,185,129,.18) !important;color:#34d399 !important;box-shadow:none}
.category-packages button[class*="yellow"]{background:rgba(234,179,8,.18) !important;color:#facc15 !important;box-shadow:none}
/* SALE pill */
.category-packages .bg-red-500{background:var(--feral-cyan) !important;color:#041318 !important;box-shadow:0 0 14px rgba(34,228,255,.6)}

/* ---------- Generic primary buttons (modal Buy / Add to cart / cart Checkout) ---------- */
.bg-primary,button.bg-primary,a.bg-primary{background:var(--feral-grad) !important;color:#160a05 !important}
button.bg-primary,a.bg-primary,.btn-shine.bg-primary{font-weight:800 !important;box-shadow:0 6px 22px rgba(255,90,54,.4)}
button.bg-primary:hover,a.bg-primary:hover{opacity:1 !important;box-shadow:0 0 26px rgba(255,90,54,.7),0 0 50px rgba(255,176,0,.3);transform:translateY(-2px)}
button.bg-primary *,a.bg-primary *{color:#160a05 !important}
.hover\:bg-primary:hover{background:var(--feral-grad) !important;color:#160a05 !important}
.text-primary{color:var(--feral-amber) !important}
.hover\:text-primary:hover{color:var(--feral-amber) !important}
.focus\:ring-primary:focus,.focus\:border-primary:focus{border-color:var(--feral-rust) !important;box-shadow:0 0 0 3px rgba(255,90,54,.35) !important}
button:disabled,.bg-primary[disabled]{filter:grayscale(.6);opacity:.55 !important;transform:none !important}
:where(a,button,select,input,[tabindex]):focus-visible{outline:3px solid var(--feral-cyan);outline-offset:2px}

/* inputs (gift ID, server dropdown, qty) */
select,input[type="text"],input[type="number"],input[type="email"],#idInput,#gameServerDropdown{
  background:rgba(10,8,16,.75) !important;border:1px solid var(--feral-line) !important;color:#fff !important;
}

/* ---------- Footer ---------- */
footer,#storeApp > footer{border-top:1px solid var(--feral-line)}
footer .bg-primary{box-shadow:0 0 12px rgba(255,90,54,.45)}

/* loader + notification */
.loader{border-color:var(--feral-rust) !important;border-bottom-color:transparent !important}
.card-loading{background:var(--feral-bg0) !important}

/* ---------- Mobile ---------- */
@media (max-width:1023px){
  .store-menu-toggle{height:96px !important}
  .store-menu-toggle h2{font-size:1.5rem !important}
}
@media (max-width:768px){
  body::before{display:none}
  body{background-attachment:scroll !important}
  #hero .logo img{max-width:72vw}
  .category-packages > div:hover{transform:none !important}
  .category-packages button{min-height:52px;font-size:1.05rem !important}
  .bg-content,.content-header,#mobile-secondary{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(22,16,30,.92) !important}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .category-packages > div:hover,.store-menu-toggle:hover,button.bg-primary:hover,a.bg-primary:hover,
  .category-packages > div:hover img{transform:none !important}
  .btn-shine:hover:before{display:none !important}
}

/* ---------- v2.1 research additions: badges, trust row, compare table ---------- */
.feral-badge{display:inline-block;padding:.2rem .6rem;border-radius:999px;font:800 .7rem/1.2 'Orbitron',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#120a06;background:var(--feral-grad);box-shadow:var(--feral-glow)}
.feral-badge.value{background:linear-gradient(135deg,#22e4ff,#7af0ff);box-shadow:0 0 14px rgba(34,228,255,.45)}
.feral-value{display:block;font-size:.8rem;color:var(--feral-amber);font-weight:600;margin-top:.15rem}
.feral-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.25rem;margin:1rem auto;padding:0;list-style:none;font-weight:600;color:var(--feral-text)}
.feral-trust li::before{content:"✓ ";color:var(--feral-amber)}
.feral-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--feral-line);border-radius:14px;background:var(--feral-glass)}
.feral-compare{width:100%;border-collapse:collapse;min-width:560px;font-size:.92rem}
.feral-compare th,.feral-compare td{padding:.7rem .9rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.06)}
.feral-compare thead th{font-family:'Orbitron',sans-serif;color:var(--feral-amber)}
.feral-compare th:first-child,.feral-compare td:first-child{text-align:left;position:sticky;left:0;background:#140e1b;z-index:1}
.feral-compare .is-popular{background:rgba(255,90,54,.10);box-shadow:inset 1px 0 0 var(--feral-rust),inset -1px 0 0 var(--feral-rust)}
.feral-faq details{border:1px solid var(--feral-line);border-radius:10px;padding:.6rem .9rem;margin:.5rem 0;background:var(--feral-glass)}
.feral-faq summary{cursor:pointer;font-weight:700}

/* ---------- Icon font protection (Summit uses Font Awesome 6.6.0) ---------- */
.fa,.fas,.fa-solid,.far,.fa-regular{font-family:'Font Awesome 6 Free' !important;font-style:normal !important;letter-spacing:normal !important}
.fa-solid,.fas,.fa{font-weight:900 !important}
.fa-regular,.far{font-weight:400 !important}
.fa-brands,.fab{font-family:'Font Awesome 6 Brands' !important;font-weight:400 !important;font-style:normal !important;letter-spacing:normal !important}

/* Discord logo on support button (CSS override; root index.html can't be replaced) */
a[href*="discord.gg"] i.fa-arrow-up-right-from-square::before{content:"\f392";font-family:"Font Awesome 6 Brands";font-weight:400}
a[href*="discord.gg"] i.fa-arrow-up-right-from-square{font-family:"Font Awesome 6 Brands";font-weight:400;font-size:1.25rem}