/* ==========================================================================
   CYBER HEXAGON - Electric Cyan & Metallic Platinum Aesthetic
   Tailored precisely to match the official geometric cyan & silver emblem logo
   ========================================================================== */

/* 1. Global Selection & Scrollbar */
::selection {
    background: #00d2ff !important;
    color: #030f18 !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #030f18;
}

::-webkit-scrollbar-thumb {
    background: #00d2ff;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
}

/* 2. Header, Navbar, Login & Cart */
header a[href*="login"], 
header button[class*="login"], 
.login-btn,
header a[href*="cart"], 
header button:has(svg), 
header a:has(svg) {
    background: linear-gradient(135deg, #0284c7 0%, #00d2ff 100%) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

header a[href*="login"]:hover, 
header button[class*="login"]:hover, 
.login-btn:hover,
header a[href*="cart"]:hover, 
header button:has(svg):hover, 
header a:has(svg):hover {
    transform: translateY(-1px) scale(1.04) !important;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.8) !important;
}

.sa-navbar-link:hover {
    color: #00d2ff !important;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

/* 3. Hero CTA & Action Buttons */
.landing-page a[href*="discord"], 
section.relative a:first-of-type,
.btn-primary,
button[type="submit"]:not([class*="close"]) {
    background: linear-gradient(135deg, #0077b6 0%, #00b4d8 50%, #00d2ff 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 20px rgba(0, 210, 255, 0.45) !important;
    transition: all 0.25s ease !important;
}

.landing-page a[href*="discord"]:hover, 
section.relative a:first-of-type:hover,
.btn-primary:hover,
button[type="submit"]:not([class*="close"]):hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 28px rgba(0, 210, 255, 0.75) !important;
}

.landing-page a:nth-of-type(2), 
section.relative a:nth-of-type(2),
.btn-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease !important;
}

.landing-page a:nth-of-type(2):hover, 
section.relative a:nth-of-type(2):hover,
.btn-secondary:hover {
    border-color: rgba(0, 210, 255, 0.8) !important;
    background: rgba(0, 210, 255, 0.12) !important;
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.35) !important;
}

/* 4. Hero Section Title & Eyebrow Highlight */
.sa-hero-eyebrow {
    border-color: rgba(0, 210, 255, 0.3) !important;
    background: rgba(0, 210, 255, 0.06) !important;
}

.sa-hero-eyebrow span:first-child {
    background: linear-gradient(135deg, #0284c7, #00d2ff) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

.hl-accent, .sa-hero-title mark, .sa-hero-title em {
    background: linear-gradient(135deg, #ffffff 10%, #7dd3fc 50%, #00d2ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 25px rgba(0, 210, 255, 0.45);
    font-style: normal;
}

/* 5. Product Cards (Glassmorphism Dark Cyan-Navy with Electric Cyan Neon Border) */
div[class*="grid"] > div, 
.product-card,
.group-products-container > div, 
[class*="group"] div[class*="card"] {
    background-color: rgba(7, 26, 38, 0.72) !important;
    border: 1px solid rgba(0, 210, 255, 0.2) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

div[class*="grid"] > div:hover, 
.product-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    border-color: rgba(0, 210, 255, 0.85) !important;
    box-shadow: 0 10px 30px rgba(0, 210, 255, 0.28), 0 0 20px rgba(0, 210, 255, 0.2) !important;
    background-color: rgba(11, 37, 53, 0.85) !important;
}

/* Card Titles in Diamond Pure White */
div[class*="grid"] > div h1,
div[class*="grid"] > div h2,
div[class*="grid"] > div h3,
div[class*="grid"] > div h4,
.product-card h1, .product-card h2, .product-card h3, .product-card h4 {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
}

/* Card Buttons / Action Buttons */
div[class*="grid"] a, 
div[class*="grid"] button,
.product-card button,
.product-card a {
    border-radius: 8px !important;
}

/* 6. Form Inputs & Search Fields Focus */
input:focus, 
select:focus, 
textarea:focus {
    border-color: #00d2ff !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.25) !important;
    outline: none !important;
}

/* 7. Modal & Drawer Backdrops */
div[role="dialog"], 
.cart-drawer, 
.modal-content {
    background: #071924 !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 210, 255, 0.2) !important;
}

/* 8. Badge Styling */
span[class*="badge"], 
.product-badge {
    background: rgba(0, 210, 255, 0.16) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(0, 210, 255, 0.35) !important;
    font-weight: 600 !important;
}