@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/* =========================================
   1. GLOBAL RESET & FONTS
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
}

body {
  font-family: 'Quicksand', sans-serif;
  background-color: #050505; /* Deep Black */
  color: #ddd;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: flex-start;
  align-items: center;
  overflow-x: hidden;
}

p { line-height: 1.5; }
h1, h2 { text-align: center; margin: 10px 0; color: #fff; }
a { text-decoration: none; }
ul { list-style: none; }

/* =========================================
   2. HEADER & RED LINE
   ========================================= */
html { scroll-behavior: smooth; }
#store { scroll-margin-top: 120px; }

header {
  width: 100%;
  padding: 0;
  background: #050505;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 50/* High z-index to stay above content */
}

.brand-header {
    width: 100%;
    padding: 50px 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    z-index: 50
}

.logo-container {
    width: 500px; 
    height: auto;
    max-width: 100%;
}

.logo {
    width: 100%;
    height: auto;
    display: block;
}
/* =========================================
   2b. HEADER HOVER MENU (2 ICONS -> 2 BULLETED LISTS)
   - No borders (collapsed or expanded)
   - On hover: icons split horizontally, text appears to the RIGHT of each icon
   ========================================= */


.menu-trigger-container{
    margin-left: auto;            /* pushes the menu to the far right */
    position: relative;
    width: 100px;
    height: 100px;
    flex: 0 0 auto;
    outline: none;
}

/* The hover/click hitbox + expandable container */
.menu-hover-box{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    gap: 10px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 100%;                  /* collapsed width (just the 2 icons) */
    overflow: hidden;

    border: 0;                    /* <-- no border */
    background: transparent;      /* keep it clean; on hover we add a subtle bg */
    border-radius: 10px;

    z-index: 2000;
    transition: width 0.25s ease, background 0.25s ease, gap 0.25s ease, box-shadow 0.25s ease;
}

.menu-group{
    display: flex;
    align-items: center;
    gap: 0;                     /* stays tight until hover */
    flex: 0 0 auto;
}

.menu-icon-box{
    width: auto;
    height: 100px;
    display: grid;
    place-items: center;

    border: 0;                    /* <-- no border */
    background: transparent;      /* <-- no background box */
    color: #bbb;
    flex: 0 0 auto;
}

.menu-icon-box svg,
.menu-icon-box img,
.menu-icon{
    width: 18px;
    height: 60px;
    display: block;
}

/* Lists hidden by default (but animatable) */
.menu-links-list{
    list-style: disc !important;         /* override global ul reset */
    list-style-position: inside;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;

    max-width: 0;                        /* collapsed */
    opacity: 0;
    transform: translateX(-6px);
    overflow: hidden;
    white-space: nowrap;

    pointer-events: none;
    transition: max-width 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
}

.menu-links-list li{ margin: 0; text-align: left;}

.menu-links-list a{
    color: #bbb;
    font-weight: 600;
    transition: 0.2s;
}

.menu-links-list a:hover{
    color: #fff;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
}

/* Hover / keyboard focus behavior */
.menu-trigger-container:hover .menu-hover-box,
.menu-trigger-container:focus-within .menu-hover-box{
    width: 420px;                 /* expanded width to fit text */
    gap: 32px;                    /* <-- “split horizontally” between the 2 icon groups */
    background: rgba(10, 10, 10, 0);
    box-shadow: 0 0 25px rgba(0,0,0,0);
}

/* On hover: add space between each icon and its list */
.menu-trigger-container:hover .menu-group,
.menu-trigger-container:focus-within .menu-group{
    gap: 10px;
}

/* Reveal lists to the RIGHT of each icon */
.menu-trigger-container:hover .menu-links-list,
.menu-trigger-container:focus-within .menu-links-list{
    max-width: 160px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}


/* --- THE RED LINE (Fixed: Glows Up, Fades Up) --- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/* =========================================
   1. GLOBAL RESET & FONTS
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
}

body {
  font-family: 'Quicksand', sans-serif;
  background-color: #050505; /* Deep Black */
  color: #ddd;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: flex-start;
  align-items: center;
  overflow-x: hidden;
}

p { line-height: 1.5; }
h1, h2 { text-align: center; margin: 10px 0; color: #fff; }
a { text-decoration: none; }
ul { list-style: none; }

/* =========================================
   2. HEADER & RED LINE
   ========================================= */
html { scroll-behavior: smooth; }
#store { scroll-margin-top: 120px; }

header {
  width: 100%;
  padding: 0;
  background: #050505;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 50/* High z-index to stay above content */
}

.brand-header {
    width: 100%;
    padding: 50px 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    z-index: 50
}

.logo-container {
    width: 500px; 
    height: auto;
    max-width: 100%;
}

.logo {
    width: 100%;
    height: auto;
    display: block;
}
/* =========================================
   2b. HEADER HOVER MENU (2 ICONS -> 2 BULLETED LISTS)
   - No borders (collapsed or expanded)
   - On hover: icons split horizontally, text appears to the RIGHT of each icon
   ========================================= */


.menu-trigger-container{
    margin-left: auto;            /* pushes the menu to the far right */
    position: relative;
    width: 100px;
    height: 100px;
    flex: 0 0 auto;
    outline: none;
}

/* The hover/click hitbox + expandable container */
.menu-hover-box{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    gap: 10px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 100%;                  /* collapsed width (just the 2 icons) */
    overflow: hidden;

    border: 0;                    /* <-- no border */
    background: transparent;      /* keep it clean; on hover we add a subtle bg */
    border-radius: 10px;

    z-index: 2000;
    transition: width 0.25s ease, background 0.25s ease, gap 0.25s ease, box-shadow 0.25s ease;
}

.menu-group{
    display: flex;
    align-items: center;
    gap: 0;                     /* stays tight until hover */
    flex: 0 0 auto;
}

.menu-icon-box{
    width: auto;
    height: 100px;
    display: grid;
    place-items: center;

    border: 0;                    /* <-- no border */
    background: transparent;      /* <-- no background box */
    color: #bbb;
    flex: 0 0 auto;
}

.menu-icon-box svg,
.menu-icon-box img,
.menu-icon{
    width: 18px;
    height: 60px;
    display: block;
}

/* Lists hidden by default (but animatable) */
.menu-links-list{
    list-style: disc !important;         /* override global ul reset */
    list-style-position: inside;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;

    max-width: 0;                        /* collapsed */
    opacity: 0;
    transform: translateX(-6px);
    overflow: hidden;
    white-space: nowrap;

    pointer-events: none;
    transition: max-width 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
}

.menu-links-list li{ margin: 0; text-align: left;}

.menu-links-list a{
    color: #bbb;
    font-weight: 600;
    transition: 0.2s;
}

.menu-links-list a:hover{
    color: #fff;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
}

/* Hover / keyboard focus behavior */
.menu-trigger-container:hover .menu-hover-box,
.menu-trigger-container:focus-within .menu-hover-box{
    width: 420px;                 /* expanded width to fit text */
    gap: 32px;                    /* <-- “split horizontally” between the 2 icon groups */
    background: rgba(10, 10, 10, 0);
    box-shadow: 0 0 25px rgba(0,0,0,0);
}

/* On hover: add space between each icon and its list */
.menu-trigger-container:hover .menu-group,
.menu-trigger-container:focus-within .menu-group{
    gap: 10px;
}

/* Reveal lists to the RIGHT of each icon */
.menu-trigger-container:hover .menu-links-list,
.menu-trigger-container:focus-within .menu-links-list{
    max-width: 160px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}


/* --- THE RED LINE (Fixed: Glows Up, Fades Up) --- */
/* --- THE RED LINE (Advanced Glitch System) --- */
.separator-line {
    height: 3px; 
    width: 100%; 
    background-color: #ff0000;
    position: relative;
    z-index: 50;
    
    /* Luce di base: Calda e diffusa */
    box-shadow: 
        0 -2px 15px rgba(255, 60, 60, 1),
        0 -10px 40px rgba(255, 0, 0, 0.8),
        0 -20px 80px rgba(255, 0, 0, 0.4);

    /* Taglio netto sotto */
    clip-path: inset(-150px 0px 0px 0px);

    /* Animazione 1: Il "respiro" generale della tensione (Lento) */
    animation: main-voltage-hum 10s infinite;
}

/* --- PSEUDO-ELEMENTO 1: I "BUCHI" (Segmenti che si spengono) --- */
.separator-line::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 52;
    
    /* Crea strisce nere che coprono il rosso. 
       Questo simula tratti di linea che muoiono. */
    background: linear-gradient(90deg, 
        transparent 0%, transparent 20%, 
        #c9111b 20%, #ff0000 35%,   /* Buco 1 */
        transparent 35%, transparent 60%,
        #480303 60%, #961414 65%,   /* Buco 2 */
        transparent 65%);
    
    opacity: 0; /* Invisibile di default */
    mix-blend-mode: multiply; /* Il nero "mangia" il rosso */
    
    /* Animazione glitch irregolare */
    animation: segment-failure 7s infinite linear; 
}

/* --- THE RED LINE (Industrial Voltage Instability) --- */
.separator-line {
    height: 3px; 
    width: 100%; 
    background-color: #ff0000;
    position: relative;
    z-index: 50;
    
    /* Luce base: Rosso profondo e saturo */
    box-shadow: 
        0 -2px 10px rgba(255, 40, 40, 1),   /* Nucleo caldo */
        0 -10px 30px rgba(255, 0, 0, 0.9),  /* Alone principale intenso */
        0 -25px 70px rgba(255, 0, 0, 0.5);  /* Alone ambientale */

    clip-path: inset(-150px 0px 0px 0px);

    /* Animazione base: Un tremolio nervoso e costante dell'intera linea */
    animation: nervous-hum 0.2s infinite alternate;
}

/* --- PSEUDO-ELEMENTO 1: LOCALIZED FAILURES (Segmenti che muoiono) --- */
.separator-line::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 52;
    /* Segmenti neri irregolari per "tagliare" la luce */
    background: linear-gradient(90deg, transparent 10%, #330e0e 15%, #5b1313 25%, transparent 30%, transparent 70%, #990606 75%, #670000 80%, transparent 85%);
    mix-blend-mode: multiply; /* Il nero spegne il rosso */
    opacity: 0;
    /* Animazione caotica per i blackout */
    animation: chaotic-failures 8s infinite linear; 
}

/* --- PSEUDO-ELEMENTO 2: HOT SPOTS (Sovraccarichi Roventi) --- */
.separator-line::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 53;
    
    /* NON BIANCO. Usiamo un arancione/giallo rovente per il sovraccarico */
    background: linear-gradient(90deg, 
        transparent 0%, transparent 40%, 
        #ff8a00 48%, #ff8000 50%, #ff8a00 52%, /* Punto rovente centrale */
        transparent 60%);
        
    opacity: 0;
    /* Mix blend mode per far "bruciare" il colore sopra il rosso */
    mix-blend-mode: hard-light; 
    
    /* Alone aggiuntivo arancione fuoco per il picco */
    filter: drop-shadow(0 -5px 15px #ff4d00); 
    
    /* Animazione violenta per i picchi */
    animation: violent-surge 13s infinite linear; 
}


/* --- DEFINIZIONE ANIMAZIONI (KEYFRAMES CAOTICI) --- */

/* 1. Nervous Hum: Il tremolio di base costante ad alta frequenza (0.2s) */
@keyframes nervous-hum {
    0% { opacity: 1; filter: brightness(1) contrast(1); }
    100% { opacity: 0.95; filter: brightness(1.1) contrast(1.2); } /* Leggera variazione rapida */
}

/* 2. Chaotic Failures: Buchi neri che appaiono e scompaiono a scatti */
@keyframes chaotic-failures {
    0%, 20%, 100% { opacity: 0; }
    /* Una serie di blackout rapidissimi */
    21% { opacity: 1; }
    21.1% { opacity: 0.2; }
    21.3% { opacity: 1; }
    21.5% { opacity: 0; }
    
    /* Un altro blackout più lungo dopo un po' */
    65% { opacity: 0; }
    65.2% { opacity: 0.8; }
    65.7% { opacity: 1; }
    66% { opacity: 0; }
}

/* 3. Violent Surge: I picchi roventi (arancioni) */
@keyframes violent-surge {
    0%, 50%, 100% { opacity: 0; }
    
    /* Un picco improvviso e violentissimo */
    51% { opacity: 0; }
    51.1% { opacity: 1; filter: brightness(1.5); } /* BOOM: Luminosità estrema */
    51.2% { opacity: 0.5; }
    51.3% { opacity: 1; filter: brightness(1.3); }
    51.5% { opacity: 0; }
    
    /* Un picco minore più avanti */
    88% { opacity: 0; }
    88.2% { opacity: 0.7; }
    88.4% { opacity: 0; }
}
/* =========================================
   3. NAVIGATION
   ========================================= */

nav {
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 80px;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 40px;
  padding: 0;
  margin: 0;
}

.nav-menu.left-menu { flex: 1; }
.nav-menu.right-menu { gap: 10px; }

.nav-menu li { position: relative; z-index: 10; }

.nav-menu a {
  color: #aaa;
  text-decoration: none;
  padding: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.3s;
}

.nav-menu a:hover {
  color: #fff;
  text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
}

/* Dropdown Menus */
.nav-menu .dropdown:hover .dropdown-menu { display: block; z-index: 2000; }

.nav-menu .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    min-width: 160px;
    border: 1px solid #333;
    padding: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    text-align: center;
}

.nav-menu .dropdown-menu li a {
  padding: 12px 15px;
  display: block;
  color: #bbb;
  text-transform: none;
  border-bottom: 1px solid #222;
}

.nav-menu .dropdown-menu li a:hover {
    background: #222;
    color: #fff;
    border-left: none; 
}

/* Original CSS for other elements */
section {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  overflow: hidden;
}

section::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#000, #ff0000, #000);
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

section span {
  position: relative;
  display: block;
  width: calc(6.25vw - 2px);
  height: calc(6.25vw - 2px);
  background: #181818;
  z-index: 2;
  transition: 1.5s;
}

section span:hover {
  background: #ff0000;
  transition: 0s;
}

section .signin {
  position: absolute;
  width: 400px;
  background: #222;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 9);
}

section .signin .content {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 40px;
}

section .signin .content h2 {
  font-size: 2em;
  color: #ff0000;
  text-transform: uppercase;
}

section .signin .content .form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

section .signin .content .form .inputBox {
  position: relative;
  width: 100%;
  padding-top: 0;
  padding-bottom: 30px;
}

section .signin .content .form .inputBox input {
  position: relative;
  width: 100%;
  background: #333;
  border: none;
  outline: none;
  padding: 25px 10px 7.5px;
  border-radius: 4px;
  color: #fff;
  font-weight: 500;
  font-size: 1em;
}

section .signin .content .form .inputBox i {
  position: absolute;
  left: 0;
  padding: 15px 10px;
  font-style: normal;
  color: #aaa;
  transition: 0.5s;
  pointer-events: none;
}

.signin .content .form .inputBox input:focus ~ i,
.signin .content .form .inputBox input:valid ~ i {
  transform: translateY(-7.5px);
  font-size: 0.8em;
  color: #fff;
}

.signin .content .form .links {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.signin .content .form .links a {
  color: #fff;
  text-decoration: none;
  margin-bottom: 10px;
}

.signin .content .form .links a:nth-child(2) {
  color: #ff0000;
  font-weight: 600;
}

.signin .content .form .inputBox input[type="submit"] {
  padding: 10px;
  background: #ff0000;
  color: #000;
  font-weight: 600;
  font-size: 1.35em;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.terms-container{
    margin-bottom: 10px;
}

input[type="submit"]:active {
  opacity: 0.6;
}

@media (max-width: 900px) {
  section span {
    width: calc(10vw - 2px);
    height: calc(10vw - 2px);
  }
}

@media (max-width: 600px) {
  section span {
    width: calc(20vw - 2px);
    height: calc(20vw - 2px);
  }
}

/* =========================================
   5. STORE / GENERAL CONTAINERS
   ========================================= */
.home-container {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px;
  z-index: 1001;
}

.video-section {
    width: 100%; max-width: 900px; margin-bottom: 60px;
    position: relative; z-index: 1;
}
.video-container iframe {
    border: 1px solid #222; border-radius: 8px;
}

.welcome-section { text-align: center; max-width: 800px; color: #fff; }
.welcome-section h2 span { color: #cc0000; }
.welcome-section p { color: #999; font-size: 1.1rem; }

.store-container, .forum-container, .page-container {
  flex: 1; padding: 20px; max-width: 1200px; margin: auto; position: relative; z-index: 1;
}
.store-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.store-item { background-color: #222; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; position: relative; }
.store-item:hover { transform: scale(1.05); }
.store-item img { width: 100%; height: auto; display: block; }

/* =========================================
   6. FOOTER
   ========================================= */
footer {
  margin-top: auto;
  background-color: #020202;
  width: 100%;
  position: relative;
  z-index: 100;
}

.footer-content {
  display: flex; justify-content: space-between;
  max-width: 1200px; margin: 150px auto 150px auto; gap: 40px; flex-wrap: wrap;
}

.footer-section {
    flex: 1; min-width: 250px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 15px;
}

.footer-section h4 {
    color: #fff; margin: 0; text-transform: uppercase;
    border-left: 3px solid #f00; line-height: 1; display: inline-block; padding-left: 10px;
}

.footer-section ul li a { color: #666; font-size: 14px; transition: 0.3s; }
.footer-section ul li a:hover { color: #fff; padding-left: 5px; }

.discord-btn {
    background-color: #5865F2; color: #fff !important; padding: 12px 24px;
    border-radius: 4px; font-weight: 600; display: inline-block;
}
.discord-btn:hover { background-color: #4752C4; box-shadow: 0 4px 20px rgba(88, 101, 242, 0.6); }
.instagram-btn {
    background-image: 
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url("instagram.jpeg");
  background-size: cover;
  background-position: center;; color: #fff !important; padding: 12px 24px;
    border-radius: 4px; font-weight: 600; display: inline-block;
}
.instagram-btn:hover { background-color: #4752C4; box-shadow: 0 4px 20px rgba(88, 101, 242, 0.6); }
.tiktok-btn {
    background-color: #5865F2; color: #fff !important; padding: 12px 24px;
    border-radius: 4px; font-weight: 600; display: inline-block;
}
.tiktok-btn:hover { background-color: #4752C4; box-shadow: 0 4px 20px rgba(88, 101, 242, 0.6); }

footer > p {
    text-align: center; color: #444; font-size: 12px;
    margin-top: 40px; border-top: 1px solid #111; padding-top: 20px;
}


/* =========================================
   7. STORE GRID LAYOUT (Boxes with Grey Borders)
   ========================================= */
.store-page-wrapper {
    width: 100%; max-width: 1200px; margin: 50px auto;
    display: flex; flex-direction: column; align-items: center;
    min-height: 60vh;
}

.store-title-area { margin-bottom: 50px; position: relative; z-index: 2; }
.store-svg-title {
    height: 60px; width: auto; display: block; min-width: 200px;
}

.store-grid-system {
    display: flex; justify-content: center; align-items: stretch;
    position: relative; width: 100%; max-width: 1000px;
}

.vertical-red-line {
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, #cc0000 20%, #cc0000 80%, transparent 100%);
    margin: 0 50px; align-self: stretch;
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.5); position: relative;
}
.verticalred-line {
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, #cc0000 20%, #cc0000 80%, transparent 100%);
    margin: 0 50px; align-self: center;
    height: 290px;
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.5); position: relative;
}

.store-box-container {
    flex: 1; display: flex; justify-content: center; align-items: center;
    position: relative; padding: 20px;
}

.store-box-link {
    display: block; width: 100%; max-width: 400px; height: 250px;
    border: 1px solid #333; background: #080808;
    display: flex; justify-content: center; align-items: center;
    transition: 0.3s ease; position: relative; overflow: hidden;
}

.store-svg-product { max-width: 80%; max-height: 80%; width: auto; height: auto; }

.store-box-container:not(.disabled) .store-box-link:hover {
    border-color: #cc0000; box-shadow: 0 0 20px rgba(204, 0, 0, 0.2); transform: scale(1.02);
}
.store-box-container.disabled { opacity: 0.6; pointer-events: none; }


/* =========================================
   8. CS2 PRODUCT PAGE LAYOUT
   ========================================= */
.cs-page-wrapper {
    width: 100%;  margin-bottom: 40px ;
    display: flex; flex-direction: column; align-items: center;
}

.cs-brand-section { margin: 80px 120px; text-align: center; }
.cs-brand-svg { height: 175px; width: auto; display: block; margin: 0 auto; }

.cs-content-grid {
    display: flex; justify-content: center; align-items: flex-start;
    width: 100%;  position: relative; padding: 0 20px;
}

.cs-video-container { flex: 1; display: flex; justify-content: center; padding-top: 100px; ; }

.video-frame {
    width: 100%; max-width: 650px; border: 1px solid #333;
    background: #080808; box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.video-frame video { width: 100%; height: auto; display: block; background: #000; }

.cs-vertical-line {
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, #cc0000 20%, #cc0000 80%, transparent 100%);
    margin: 0 100px; align-self: stretch; min-height: 400px;
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}

.cs-info-container {
    flex: 1; display: flex; flex-direction: column; justify-content: center; 
}

.cs-description p {
    color: #888; font-size: 1.1rem; line-height: 1.8; margin-bottom: 40px; font-style: italic;
}

.cs-pricing-section h3 {
    text-align: left; color: #fff; border-bottom: 1px solid #333;
    padding-bottom: 10px; margin-bottom: 20px; text-transform: uppercase;
    font-size: 1rem; letter-spacing: 2px;
}

.pricing-card {
    display: flex; justify-content: space-between; align-items: center;
    background: #111; border: 1px solid #222; padding: 15px 20px;
    margin-bottom: 15px; border-radius: 4px; transition: 0.3s;
}
.pricing-card:hover { border-color: #cc0000; background: #151515; }

.price-info { display: flex; flex-direction: column; }
.p-name { color: #fff; font-weight: 600; font-size: 14px; }
.p-cost { color: #cc0000; font-size: 14px; margin-top: 2px; }

.btn-purchase {
    background: transparent; color: #fff; border: 1px solid #444;
    padding: 8px 16px; cursor: pointer; text-transform: uppercase;
    font-size: 12px; font-weight: 700; transition: 0.3s; border-radius: 2px;
}
.btn-purchase:hover {
    background: #cc0000; border-color: #cc0000; box-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}

/* =========================================
   10. ACCOUNT SETTINGS PAGE
   ========================================= */

.settings-wrapper {
    width: 100%;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center; /* Centers the box vertically */
    padding: 50px 20px;
    background: #050505; /* Seamless background */
}

/* The Glass Card Container */
.settings-card {
    width: 500px;
    max-width: 100%;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Header Styling */
.settings-card h2 {
    font-size: 2em;
    color: #cc0000;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 50px;
    text-shadow: 0 0 15px rgba(204, 0, 0, 0.3);
}
.inputBox {
    margin: 15px 15px 0px 0px;
    text-align: center;
}
.btnsave-card {
    justify-content: space-between; align-items: center;
    background: #111; border: 1px solid #222; padding: 15px 20px;
    margin-bottom: 15px; border-radius: 4px; transition: 0.3s;
}
.btnsave-card:hover { border-color: #cc0000; background: #151515; }
.btn-savechanges {
    background: transparent; color: #fff; border: 1px solid #444;
    padding: 8px 16px; cursor: pointer; text-transform: uppercase;
    font-size: 15px; font-weight: 700; transition: 0.3s; border-radius: 2px;
    align-items: center;
}
.btn-savechanges:hover {
    background: #cc0000; border-color: #cc0000; box-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}


/* Messages (Success/Error) */
.msg-box {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9em;
}
.msg-box.success {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid #00cc00;
    color: #00cc00;
}
.msg-box.error {
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid #cc0000;
    color: #cc0000;
}

/* Divider Text */
.divider-text {
    text-align: center;
    color: #555;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 30px 0 20px;
    position: relative;
}
.divider-text::before, .divider-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: #333;
}
.divider-text::before { left: 0; }
.divider-text::after { right: 0; }

/* --- Settings Form Inputs (Reusing Login Style) --- */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Spacing between fields */
}

.settings-card .inputBox {
    position: relative;
    width: 100%;
}

.settings-card .inputBox input {
    width: 100%;
    padding: 12px 10px;
    background: #1a1a1a;
    border: 1px solid #333;
    outline: none;
    border-radius: 4px;
    color: #fff;
    font-size: 1em;
    transition: 0.3s;
}

/* Input Focus */
.settings-card .inputBox input:focus {
    border-color: #cc0000;
    background: #222;
    box-shadow: 0 0 8px rgba(204, 0, 0, 0.2);
}

/* Readonly Input (Username) */
.settings-card .inputBox input[readonly] {
    background: #111;
    color: #777;
    cursor: not-allowed;
    border-color: #222;
}

/* Floating Label Logic */
.settings-card .inputBox i {
    position: absolute;
    left: 0;
    padding: 12px 10px;
    font-style: normal;
    color: #888;
    transition: 0.3s;
    pointer-events: none;
    font-size: 0.9em;
}

/* Label floats up if focused OR has value (valid) */
.settings-card .inputBox input:focus ~ i,
.settings-card .inputBox input:valid ~ i,
.settings-card .inputBox input[readonly] ~ i {
    transform: translateY(-22px) translateX(5px);
    font-size: 0.75em;
    padding: 0 5px;
    background: #141414; /* Covers border line */
    color: #cc0000;
    border-left: 1px solid #cc0000;
    border-right: 1px solid #cc0000;
}

/* Grey out label for readonly fields */
.settings-card .inputBox input[readonly] ~ i {
    color: #555;
    border-color: #555;
}

/* Submit Button */
.settings-card .inputBox input[type="submit"] {
    background: linear-gradient(90deg, #aa0000, #cc0000);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
    border: none;
}

.settings-card .inputBox input[type="submit"]:hover {
    background: linear-gradient(90deg, #cc0000, #ff0000);
    box-shadow: 0 0 15px rgba(204, 0, 0, 0.4);
    transform: translateY(-2px);
}
/* =========================================
   11. INFO PAGE (Computer Vision)
   ========================================= */

.info-page-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between cards */
}

.info-main-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.info-main-title span {
    color: #cc0000;
}

/* Reusing the dark glass card style */
.info-card {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.info-card h2 {
    color: #cc0000;
    font-size: 1.8em;
    margin-bottom: 15px;
    text-align: left; /* Left align inside cards usually reads better */
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.info-card p {
    color: #bbb;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* Styled Lists */
.info-list, .info-list-ordered {
    margin-left: 20px;
    color: #ccc;
    line-height: 1.8;
}

.info-list li, .info-list-ordered li {
    margin-bottom: 10px;
}

.info-list li strong, .info-list-ordered li strong {
    color: #fff;
}

/* Diagram Section */
.diagram-section {
    margin-top: 30px;
    background: #111;
    padding: 20px;
    border-radius: 6px;
    border: 1px dashed #444;
}

.diagram-section h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.diagram-box {
    text-align: center;
    margin: 20px 0;
    background: #000;
    padding: 10px;
    border: 1px solid #333;
}

.diagram-box img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.caption {
    font-size: 0.85em;
    color: #777;
    margin-top: 10px;
    font-style: italic;
}
/* =========================================
   12. CART PAGE STYLING
   ========================================= */

.cart-page-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}

.cart-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.cart-title span {
    color: #cc0000;
}

/* Glass Card Container for Cart */
.cart-container {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Table Styling */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    color: #ddd;
}

.cart-table th {
    text-align: left;
    padding: 15px;
    border-bottom: 2px solid #cc0000; /* Red underline for header */
    text-transform: uppercase;
    font-size: 0.9em;
    color: #fff;
}

.cart-table td {
    padding: 15px;
    border-bottom: 1px solid #333;
}

.cart-table tr:last-child td {
    border-bottom: none;
}
/* =========================================
   ADD TO CART ANIMATIONS
   ========================================= */

/* 1. Green Success Button State */
.btn-purchase.success {
    background-color: #00cc00 !important;
    border-color: #00cc00 !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(0, 204, 0, 0.5);
    cursor: default;
    pointer-events: none; /* Prevent double clicking */
    transition: all 0.3s ease;
}

/* 2. Force Menu Open (Programmatic Hover) */
/* We copy the exact styles from your .menu-trigger-container:hover */
.menu-trigger-container.force-open .menu-hover-box {
    width: 420px;
    gap: 32px;
    background: rgba(10, 10, 10, 0); /* Slight background to make text readable */
}

.menu-trigger-container.force-open .menu-group {
    gap: 10px;
}

.menu-trigger-container.force-open .menu-links-list {
    max-width: 160px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* 3. Red Glow for the Cart Link */
@keyframes cartPulse {
    0% { text-shadow: 0 0 5px #ff0000; color: #fff; }
    50% { text-shadow: 0 0 20px #ff0000, 0 0 30px #ff0000; color: #ffcccc; transform: scale(1.1); }
    100% { text-shadow: 0 0 5px #ff0000; color: #fff; }
}

.cart-highlight {
    animation: cartPulse 1s ease infinite;
    font-weight: 700 !important;
    color: #fff !important;
}

/* Remove Button */
.remove-btn {
    background: transparent;
    border: 1px solid #555;
    color: #aaa;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: 0.3s;
}

.remove-btn:hover {
    background: #cc0000;
    color: #fff;
    border-color: #cc0000;
}

/* Footer (Total + PayPal) */
.cart-footer {
    border-top: 1px solid #444;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center !important; /* Forces items to center */
    text-align: center;
    gap: 20px;
}

.cart-total {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        font-size: 1.8em; /* Make it pop */
}

#cart-total-price {
    color: #cc0000;
    margin-left: 10px;
}

/* PayPal Button Box */
.paypal-wrapper {
        margin: 0 auto; /* Centers the div horizontally */
        width: 100%;
        max-width: 350px; /* Slightly wider for better look */
}

/* Empty State */
.cart-empty-msg {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 1.2em;
}

.cart-empty-msg a {
    color: #cc0000;
    text-decoration: underline;
}

/* Mobile Responsive Cart */
@media (max-width: 600px) {
    .cart-table th, .cart-table td {
        padding: 10px 5px;
        font-size: 0.9em;
    }
    .cart-footer {
        align-items: center;
    }
}
/* =========================================
   13. PAYMENT SUCCESS PAGE
   ========================================= */

.key-display-box {
    background: #111;
    border: 1px dashed #444;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0;
    text-align: left;
}

.key-display-box label {
    display: block;
    color: #cc0000;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.9em;
}

.key-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.key-row input {
    flex: 1;
    background: #080808;
    border: 1px solid #333;
    color: #fff;
    padding: 10px;
    font-family: monospace;
    font-size: 1.1em;
    border-radius: 4px;
    text-align: center;
}

.btn-copy {
    background: #333;
    color: #fff;
    border: 1px solid #555;
    padding: 0 20px;
    cursor: pointer;
    font-weight: 700;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-copy:hover {
    background: #cc0000;
    border-color: #cc0000;
}

.validity-info {
    font-size: 0.85em;
    color: #888;
    text-align: center;
}
/* =========================================
   9. MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
    /* Matrix Grid */
    section span { width: calc(10vw - 2px); height: calc(10vw - 2px); }
    
    /* Store Grid */
    .store-grid-system { flex-direction: column; align-items: center; gap: 30px; }
    .vertical-red-line { width: 100px; height: 1px; background: linear-gradient(to right, transparent, #cc0000, transparent); margin: 20px 0; }
    
    /* CS2 Grid */
    .cs-content-grid { flex-direction: column; align-items: center; }
    .cs-vertical-line { width: 100px; height: 1px; min-height: 1px; background: linear-gradient(to right, transparent, #cc0000, transparent); margin: 40px 0; }
    .cs-info-container { text-align: center; padding-top: 0; }
    .cs-pricing-section h3 { text-align: center; }
}

@media (max-width: 600px) {
    section span { width: calc(20vw - 2px); height: calc(20vw - 2px); }
    .signin { width: 90%; }
}

/* =========================================
   3. NAVIGATION
   ========================================= */

nav {
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 80px;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 40px;
  padding: 0;
  margin: 0;
}

.nav-menu.left-menu { flex: 1; }
.nav-menu.right-menu { gap: 10px; }

.nav-menu li { position: relative; z-index: 10; }

.nav-menu a {
  color: #aaa;
  text-decoration: none;
  padding: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.3s;
}

.nav-menu a:hover {
  color: #fff;
  text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
}

/* Dropdown Menus */
.nav-menu .dropdown:hover .dropdown-menu { display: block; z-index: 2000; }

.nav-menu .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    min-width: 160px;
    border: 1px solid #333;
    padding: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    text-align: center;
}

.nav-menu .dropdown-menu li a {
  padding: 12px 15px;
  display: block;
  color: #bbb;
  text-transform: none;
  border-bottom: 1px solid #222;
}

.nav-menu .dropdown-menu li a:hover {
    background: #222;
    color: #fff;
    border-left: none; 
}

/* Original CSS for other elements */
section {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  overflow: hidden;
}

section::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#000, #ff0000, #000);
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

section span {
  position: relative;
  display: block;
  width: calc(6.25vw - 2px);
  height: calc(6.25vw - 2px);
  background: #181818;
  z-index: 2;
  transition: 1.5s;
}

section span:hover {
  background: #ff0000;
  transition: 0s;
}

section .signin {
  position: absolute;
  width: 400px;
  background: #222;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 9);
}

section .signin .content {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 40px;
}

section .signin .content h2 {
  font-size: 2em;
  color: #ff0000;
  text-transform: uppercase;
}

section .signin .content .form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

section .signin .content .form .inputBox {
  position: relative;
  width: 100%;
  padding-top: 0;
  padding-bottom: 30px;
}

section .signin .content .form .inputBox input {
  position: relative;
  width: 100%;
  background: #333;
  border: none;
  outline: none;
  padding: 25px 10px 7.5px;
  border-radius: 4px;
  color: #fff;
  font-weight: 500;
  font-size: 1em;
}

section .signin .content .form .inputBox i {
  position: absolute;
  left: 0;
  padding: 15px 10px;
  font-style: normal;
  color: #aaa;
  transition: 0.5s;
  pointer-events: none;
}

.signin .content .form .inputBox input:focus ~ i,
.signin .content .form .inputBox input:valid ~ i {
  transform: translateY(-7.5px);
  font-size: 0.8em;
  color: #fff;
}

.signin .content .form .links {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.signin .content .form .links a {
  color: #fff;
  text-decoration: none;
  margin-bottom: 10px;
}

.signin .content .form .links a:nth-child(2) {
  color: #ff0000;
  font-weight: 600;
}

.signin .content .form .inputBox input[type="submit"] {
  padding: 10px;
  background: #ff0000;
  color: #000;
  font-weight: 600;
  font-size: 1.35em;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.terms-container{
    margin-bottom: 10px;
}

input[type="submit"]:active {
  opacity: 0.6;
}

@media (max-width: 900px) {
  section span {
    width: calc(10vw - 2px);
    height: calc(10vw - 2px);
  }
}

@media (max-width: 600px) {
  section span {
    width: calc(20vw - 2px);
    height: calc(20vw - 2px);
  }
}

/* =========================================
   5. STORE / GENERAL CONTAINERS
   ========================================= */
.home-container {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px;
  z-index: 1001;
}

.video-section {
    width: 100%; max-width: 900px; margin-bottom: 60px;
    position: relative; z-index: 1;
}
.video-container iframe {
    border: 1px solid #222; border-radius: 8px;
}

.welcome-section { text-align: center; max-width: 800px; color: #fff; }
.welcome-section h2 span { color: #cc0000; }
.welcome-section p { color: #999; font-size: 1.1rem; }

.store-container, .forum-container, .page-container {
  flex: 1; padding: 20px; max-width: 1200px; margin: auto; position: relative; z-index: 1;
}
.store-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.store-item { background-color: #222; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; position: relative; }
.store-item:hover { transform: scale(1.05); }
.store-item img { width: 100%; height: auto; display: block; }

/* =========================================
   6. FOOTER
   ========================================= */
footer {
  margin-top: auto;
  background-color: #020202;
  width: 100%;
  position: relative;
  z-index: 100;
}

.footer-content {
  display: flex; justify-content: space-between;
  max-width: 1200px; margin: 150px auto 150px auto; gap: 40px; flex-wrap: wrap;
}

.footer-section {
    flex: 1; min-width: 250px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 15px;
}

.footer-section h4 {
    color: #fff; margin: 0; text-transform: uppercase;
    border-left: 3px solid #f00; line-height: 1; display: inline-block; padding-left: 10px;
}

.footer-section ul li a { color: #666; font-size: 14px; transition: 0.3s; }
.footer-section ul li a:hover { color: #fff; padding-left: 5px; }

.discord-btn {
    background-color: #5865F2; color: #fff !important; padding: 12px 24px;
    border-radius: 4px; font-weight: 600; display: inline-block;
}
.discord-btn:hover { background-color: #4752C4; box-shadow: 0 4px 20px rgba(88, 101, 242, 0.6); }
.instagram-btn {
    background-image: 
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url("instagram.jpeg");
  background-size: cover;
  background-position: center;; color: #fff !important; padding: 12px 24px;
    border-radius: 4px; font-weight: 600; display: inline-block;
}
.instagram-btn:hover { background-color: #4752C4; box-shadow: 0 4px 20px rgba(88, 101, 242, 0.6); }
.tiktok-btn {
    background-color: #5865F2; color: #fff !important; padding: 12px 24px;
    border-radius: 4px; font-weight: 600; display: inline-block;
}
.tiktok-btn:hover { background-color: #4752C4; box-shadow: 0 4px 20px rgba(88, 101, 242, 0.6); }

footer > p {
    text-align: center; color: #444; font-size: 12px;
    margin-top: 40px; border-top: 1px solid #111; padding-top: 20px;
}


/* =========================================
   7. STORE GRID LAYOUT (Boxes with Grey Borders)
   ========================================= */
.store-page-wrapper {
    width: 100%; max-width: 1200px; margin: 50px auto;
    display: flex; flex-direction: column; align-items: center;
    min-height: 60vh;
}

.store-title-area { margin-bottom: 50px; position: relative; z-index: 2; }
.store-svg-title {
    height: 60px; width: auto; display: block; min-width: 200px;
}

.store-grid-system {
    display: flex; justify-content: center; align-items: stretch;
    position: relative; width: 100%; max-width: 1000px;
}

.vertical-red-line {
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, #cc0000 20%, #cc0000 80%, transparent 100%);
    margin: 0 50px; align-self: stretch;
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.5); position: relative;
}
.verticalred-line {
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, #cc0000 20%, #cc0000 80%, transparent 100%);
    margin: 0 50px; align-self: center;
    height: 290px;
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.5); position: relative;
}

.store-box-container {
    flex: 1; display: flex; justify-content: center; align-items: center;
    position: relative; padding: 20px;
}

.store-box-link {
    display: block; width: 100%; max-width: 400px; height: 250px;
    border: 1px solid #333; background: #080808;
    display: flex; justify-content: center; align-items: center;
    transition: 0.3s ease; position: relative; overflow: hidden;
}

.store-svg-product { max-width: 80%; max-height: 80%; width: auto; height: auto; }

.store-box-container:not(.disabled) .store-box-link:hover {
    border-color: #cc0000; box-shadow: 0 0 20px rgba(204, 0, 0, 0.2); transform: scale(1.02);
}
.store-box-container.disabled { opacity: 0.6; pointer-events: none; }


/* =========================================
   8. CS2 PRODUCT PAGE LAYOUT
   ========================================= */
.cs-page-wrapper {
    width: 100%;  margin-bottom: 40px ;
    display: flex; flex-direction: column; align-items: center;
}

.cs-brand-section { margin: 80px 120px; text-align: center; }
.cs-brand-svg { height: 175px; width: auto; display: block; margin: 0 auto; }

.cs-content-grid {
    display: flex; justify-content: center; align-items: flex-start;
    width: 100%;  position: relative; padding: 0 20px;
}

.cs-video-container { flex: 1; display: flex; justify-content: center; }

.video-frame {
    width: 100%; max-width: 650px; border: 1px solid #333;
    background: #080808; box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.video-frame video { width: 100%; height: auto; display: block; background: #000; }

.cs-vertical-line {
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, #cc0000 20%, #cc0000 80%, transparent 100%);
    margin: 0 100px; align-self: stretch; min-height: 400px;
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}

.cs-info-container {
    flex: 1; display: flex; flex-direction: column; justify-content: center; 
}

.cs-description p {
    color: #888; font-size: 1.1rem; line-height: 1.8; margin-bottom: 40px; font-style: italic;
}

.cs-pricing-section h3 {
    text-align: left; color: #fff; border-bottom: 1px solid #333;
    padding-bottom: 10px; margin-bottom: 20px; text-transform: uppercase;
    font-size: 1rem; letter-spacing: 2px;
}

.pricing-card {
    display: flex; justify-content: space-between; align-items: center;
    background: #111; border: 1px solid #222; padding: 15px 20px;
    margin-bottom: 15px; border-radius: 4px; transition: 0.3s;
}
.pricing-card:hover { border-color: #cc0000; background: #151515; }

.price-info { display: flex; flex-direction: column; }
.p-name { color: #fff; font-weight: 600; font-size: 14px; }
.p-cost { color: #cc0000; font-size: 14px; margin-top: 2px; }

.btn-purchase {
    background: transparent; color: #fff; border: 1px solid #444;
    padding: 8px 16px; cursor: pointer; text-transform: uppercase;
    font-size: 12px; font-weight: 700; transition: 0.3s; border-radius: 2px;
}
.btn-purchase:hover {
    background: #cc0000; border-color: #cc0000; box-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}

/* =========================================
   10. ACCOUNT SETTINGS PAGE
   ========================================= */

.settings-wrapper {
    width: 100%;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center; /* Centers the box vertically */
    padding: 50px 20px;
    background: #050505; /* Seamless background */
}

/* The Glass Card Container */
.settings-card {
    width: 500px;
    max-width: 100%;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Header Styling */
.settings-card h2 {
    font-size: 2em;
    color: #cc0000;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 50px;
    text-shadow: 0 0 15px rgba(204, 0, 0, 0.3);
}
.inputBox {
    margin: 15px 15px 0px 0px;
    text-align: center;
}
.btnsave-card {
    justify-content: space-between; align-items: center;
    background: #111; border: 1px solid #222; padding: 15px 20px;
    margin-bottom: 15px; border-radius: 4px; transition: 0.3s;
}
.btnsave-card:hover { border-color: #cc0000; background: #151515; }
.btn-savechanges {
    background: transparent; color: #fff; border: 1px solid #444;
    padding: 8px 16px; cursor: pointer; text-transform: uppercase;
    font-size: 15px; font-weight: 700; transition: 0.3s; border-radius: 2px;
    align-items: center;
}
.btn-savechanges:hover {
    background: #cc0000; border-color: #cc0000; box-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}


/* Messages (Success/Error) */
.msg-box {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9em;
}
.msg-box.success {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid #00cc00;
    color: #00cc00;
}
.msg-box.error {
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid #cc0000;
    color: #cc0000;
}

/* Divider Text */
.divider-text {
    text-align: center;
    color: #555;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 30px 0 20px;
    position: relative;
}
.divider-text::before, .divider-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: #333;
}
.divider-text::before { left: 0; }
.divider-text::after { right: 0; }

/* --- Settings Form Inputs (Reusing Login Style) --- */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Spacing between fields */
}

.settings-card .inputBox {
    position: relative;
    width: 100%;
}

.settings-card .inputBox input {
    width: 100%;
    padding: 12px 10px;
    background: #1a1a1a;
    border: 1px solid #333;
    outline: none;
    border-radius: 4px;
    color: #fff;
    font-size: 1em;
    transition: 0.3s;
}

/* Input Focus */
.settings-card .inputBox input:focus {
    border-color: #cc0000;
    background: #222;
    box-shadow: 0 0 8px rgba(204, 0, 0, 0.2);
}

/* Readonly Input (Username) */
.settings-card .inputBox input[readonly] {
    background: #111;
    color: #777;
    cursor: not-allowed;
    border-color: #222;
}

/* Floating Label Logic */
.settings-card .inputBox i {
    position: absolute;
    left: 0;
    padding: 12px 10px;
    font-style: normal;
    color: #888;
    transition: 0.3s;
    pointer-events: none;
    font-size: 0.9em;
}

/* Label floats up if focused OR has value (valid) */
.settings-card .inputBox input:focus ~ i,
.settings-card .inputBox input:valid ~ i,
.settings-card .inputBox input[readonly] ~ i {
    transform: translateY(-22px) translateX(5px);
    font-size: 0.75em;
    padding: 0 5px;
    background: #141414; /* Covers border line */
    color: #cc0000;
    border-left: 1px solid #cc0000;
    border-right: 1px solid #cc0000;
}

/* Grey out label for readonly fields */
.settings-card .inputBox input[readonly] ~ i {
    color: #555;
    border-color: #555;
}

/* Submit Button */
.settings-card .inputBox input[type="submit"] {
    background: linear-gradient(90deg, #aa0000, #cc0000);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
    border: none;
}

.settings-card .inputBox input[type="submit"]:hover {
    background: linear-gradient(90deg, #cc0000, #ff0000);
    box-shadow: 0 0 15px rgba(204, 0, 0, 0.4);
    transform: translateY(-2px);
}
/* =========================================
   11. INFO PAGE (Computer Vision)
   ========================================= */

.info-page-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between cards */
}

.info-main-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.info-main-title span {
    color: #cc0000;
}

/* Reusing the dark glass card style */
.info-card {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.info-card h2 {
    color: #cc0000;
    font-size: 1.8em;
    margin-bottom: 15px;
    text-align: left; /* Left align inside cards usually reads better */
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.info-card p {
    color: #bbb;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* Styled Lists */
.info-list, .info-list-ordered {
    margin-left: 20px;
    color: #ccc;
    line-height: 1.8;
}

.info-list li, .info-list-ordered li {
    margin-bottom: 10px;
}

.info-list li strong, .info-list-ordered li strong {
    color: #fff;
}

/* Diagram Section */
.diagram-section {
    margin-top: 30px;
    background: #111;
    padding: 20px;
    border-radius: 6px;
    border: 1px dashed #444;
}

.diagram-section h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.diagram-box {
    text-align: center;
    margin: 20px 0;
    background: #000;
    padding: 10px;
    border: 1px solid #333;
}

.diagram-box img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.caption {
    font-size: 0.85em;
    color: #777;
    margin-top: 10px;
    font-style: italic;
}
/* =========================================
   12. CART PAGE STYLING
   ========================================= */

.cart-page-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}

.cart-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.cart-title span {
    color: #cc0000;
}

/* Glass Card Container for Cart */
.cart-container {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Table Styling */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    color: #ddd;
}

.cart-table th {
    text-align: left;
    padding: 15px;
    border-bottom: 2px solid #cc0000; /* Red underline for header */
    text-transform: uppercase;
    font-size: 0.9em;
    color: #fff;
}

.cart-table td {
    padding: 15px;
    border-bottom: 1px solid #333;
}

.cart-table tr:last-child td {
    border-bottom: none;
}

/* Remove Button */
.remove-btn {
    background: transparent;
    border: 1px solid #555;
    color: #aaa;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: 0.3s;
}

.remove-btn:hover {
    background: #cc0000;
    color: #fff;
    border-color: #cc0000;
}

/* Footer (Total + PayPal) */
.cart-footer {
    border-top: 1px solid #444;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center !important; /* Forces items to center */
    text-align: center;
    gap: 20px;
}

.cart-total {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        font-size: 1.8em; /* Make it pop */
}

#cart-total-price {
    color: #cc0000;
    margin-left: 10px;
}

/* PayPal Button Box */
.paypal-wrapper {
        margin: 0 auto; /* Centers the div horizontally */
        width: 100%;
        max-width: 350px; /* Slightly wider for better look */
}

/* Empty State */
.cart-empty-msg {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 1.2em;
}

.cart-empty-msg a {
    color: #cc0000;
    text-decoration: underline;
}

/* Mobile Responsive Cart */
@media (max-width: 600px) {
    .cart-table th, .cart-table td {
        padding: 10px 5px;
        font-size: 0.9em;
    }
    .cart-footer {
        align-items: center;
    }
}
/* =========================================
   13. PAYMENT SUCCESS PAGE
   ========================================= */

.key-display-box {
    background: #111;
    border: 1px dashed #444;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0;
    text-align: left;
}

.key-display-box label {
    display: block;
    color: #cc0000;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.9em;
}

.key-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.key-row input {
    flex: 1;
    background: #080808;
    border: 1px solid #333;
    color: #fff;
    padding: 10px;
    font-family: monospace;
    font-size: 1.1em;
    border-radius: 4px;
    text-align: center;
}

.btn-copy {
    background: #333;
    color: #fff;
    border: 1px solid #555;
    padding: 0 20px;
    cursor: pointer;
    font-weight: 700;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-copy:hover {
    background: #cc0000;
    border-color: #cc0000;
}

.validity-info {
    font-size: 0.85em;
    color: #888;
    text-align: center;
}
/* ---------- Add-to-cart feedback ---------- */

.btn-purchase.is-loading{
  opacity: 0.85;
  cursor: progress;
}

.btn-purchase.is-added{
  background: #00cc00;
  border-color: #00cc00;
  color: #000;
  box-shadow: 0 0 10px rgba(0, 204, 0, 0.35);
  transform: none;
}

.btn-purchase.is-added:hover{
  background: #00cc00;
  border-color: #00cc00;
  box-shadow: 0 0 10px rgba(0, 204, 0, 0.35);
  transform: none;
}

/* Toast under the menu */
.menu-trigger-container{
  position: relative; /* ensure toast anchors correctly */
}

.menu-cart-toast{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;

  padding: 10px 12px;
  border-radius: 10px;

  background: rgba(10, 10, 10, 0.92);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;

  transition: opacity 0.2s ease, transform 0.2s ease;
}

.menu-cart-toast.success{
  box-shadow: 0 0 18px rgba(0, 204, 0, 0.22);
}

.menu-cart-toast.error{
  box-shadow: 0 0 18px rgba(204, 0, 0, 0.22);
}

.menu-cart-toast.show{
  opacity: 1;
  transform: translateY(0);
}

/* Pop-open menu state (same effect as hover) */
.menu-trigger-container.menu-alert .menu-hover-box{
  width: 420px;                 /* match your expanded width */
  gap: 32px;                    /* match your “split horizontally” spacing */
  background: rgba(10, 10, 10, 0.92);
  box-shadow: 0 0 25px rgba(0,0,0,0.55);
}

.menu-trigger-container.menu-alert .menu-group{
  gap: 10px;
}

.menu-trigger-container.menu-alert .menu-links-list{
  max-width: 160px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* =========================================
   9. MOBILE RESPONSIVE
   ========================================= */
.header-list{
    display: none;
}
.log-out-btn{
    display: none;
}   
.footer-sections{
    display: none;
}
@media (max-width: 900px) {
    /* Header */
    .menu-trigger-container {
        display: none;
    }
    .logo-container {
        margin: 0 auto;
        align-items: center;
        width: 100%;
    }
    .header-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        gap: 10px;
    }

    .header-list li {
        display: block;
        justify-content: center;
        align-items: center;
    }

    .header-list a {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        background: #111;
        border: 1px solid #333;
        border-radius: 6px;
        color: #aaa;
        text-align: center;
        transition: 0.3s ease;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 10px;
        height: 60px;
    }

    .header-list a:hover {
        border-color: #cc0000;
        background: #151515;
        color: #fff;
        box-shadow: 0 0 15px rgba(204, 0, 0, 0.3);
    }
    /* Matrix Grid */
    section span { width: calc(10vw - 2px); height: calc(10vw - 2px); }
    
    /* Store Grid */
    .store-grid-system { flex-direction: column; gap: 30px; }
    .vertical-red-line { width: 100%; height: 1px; background: linear-gradient(to right, transparent, #cc0000, transparent); margin: 20px 0; }
    .store-box-link { max-width: 200px; height: 200px; }
    /* CS2 Grid */
    .cs-brand-section { margin: 40px 20px; }
    .cs-brand-svg { height: 100px; }    
    .cs-content-grid { flex-direction: column; align-items: center; }
    .cs-vertical-line { width: 100%; height: 1px; min-height: 1px; background: linear-gradient(to right, transparent, #cc0000, transparent); margin: 40px 0; }
    .cs-info-container { text-align: center; padding-top: 0; }
    .cs-pricing-section h3 { text-align: center; }
    /* Setting Wrapper */
    .settings-wrapper {
        width: 100%;
    }
    /* Footer */
    .footer-section p {
        flex-direction: column;
        margin-left: 10px;
        margin-right: 10px;
    }
    .footer-sections {
    flex: 1; min-width: 250px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 15px;
    }

    .log-out-btn{
        display: flex;
        margin-top: 20px;
        background: #cc0000;
        color: #fff !important;
        padding: 10px 20px;
        border-radius: 4px;
        font-weight: 600;
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 600px) {
    section span { width: calc(20vw - 2px); height: calc(20vw - 2px); }
    .signin { width: 90%; }
}

/* carousel */
.carousel-21-9 {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 21/9;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide img,
.carousel-slide video {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.carousel-16-9 {
    position: relative;
    width: 480px;
    overflow: hidden;
    aspect-ratio: 16/9;
    margin-top: 100px;
}