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

:root{
  --bg:#070A0D;
  --surface:#0C1118;
  --surface2:#101826;
  --text:#E7EEF8;
  --muted:#9FB0C3;
  --border:#1B2A3B;
  --accent:#39FF6A;
  --accent-soft:#7CFF9C;
}

body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
}

h1,h2,h3,h4,h5{
  font-family:'Orbitron',sans-serif;
  letter-spacing:1px;
}

a{ color:var(--accent); }
a:hover{ color:var(--accent-soft); }

.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#031207;
  font-weight:600;
  border-radius:10px;
  padding:12px 20px;
}
.btn-primary:hover{
  background:var(--accent-soft);
  border-color:var(--accent-soft);
  box-shadow:0 0 14px rgba(57,255,106,.3);
}

.card,.product-miniature,.modal-content,.dropdown-menu{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
}

.product-miniature{
  border-radius:14px;
  transition:.2s ease;
}
.product-miniature:hover{
  transform:translateY(-4px);
  box-shadow:0 0 18px rgba(0,0,0,.4);
}

#header{
  background:#05080c;
  border-bottom:1px solid var(--border);
}
#header .header-nav{ 
	background:#05080c;
    border-bottom: #39ff6a 2px solid !important;
}
#header a{ color:var(--text); }
#header a:hover{ color:var(--accent); }

input,select,textarea{
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(57,255,106,.6);
  box-shadow:0 0 0 3px rgba(57,255,106,.12);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.05;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05) 0px,
    rgba(255,255,255,.05) 1px,
    transparent 3px,
    transparent 6px
  );
  z-index:9999;
}

/* === PhantomCore: Classic Dark Fix Pack === */

/* Main containers */
#wrapper, #content, .page-content, .card, .modal-content {
  background: var(--bg);
  color: var(--text);
}

/* Sections that remain light in Classic */
#footer, .footer-container, .block_newsletter, .block-contact, .links {
  background: #05080c;
  color: var(--text);
  border-top: 1px solid var(--border);
}

/* Common text + headings */
p, span, small, label, .h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .block-title, .facet-title, .category-name {
  color: var(--text);
}

/* Muted/help text */
.text-muted, .sub-title, .product-description, .breadcrumb,
.block-categories, .facet-label, .product-information {
  color: var(--muted) !important;
}

/* Links inside dark areas */
#footer a, .footer-container a, .page-content a, .product-description a {
  color: var(--accent);
}
#footer a:hover, .footer-container a:hover, .page-content a:hover {
  color: var(--accent-soft);
}

/* Product titles + prices */
.product-title a, .h3.product-title a {
  color: var(--text) !important;
}
.product-price-and-shipping, .current-price, .price, .product-price {
  color: var(--accent) !important;
}
.regular-price {
  color: var(--muted) !important;
}

/* Breadcrumb & separators */
.breadcrumb {
  background: transparent !important;
}
hr, .separator, .card-block, .block-categories, .facet, .product-features {
  border-color: var(--border) !important;
}

/* Menus / dropdowns (often unreadable after dark swap) */
.dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
.dropdown-menu a, .dropdown-menu .dropdown-item {
  color: var(--text) !important;
}
.dropdown-menu a:hover, .dropdown-menu .dropdown-item:hover {
  background: rgba(57,255,106,.08) !important;
  color: var(--accent) !important;
}

/* Tables (order history, cart summary etc.) */
table, .table {
  color: var(--text) !important;
}
.table thead th {
  border-color: var(--border) !important;
}
.table td, .table th {
  border-color: var(--border) !important;
}

/* Checkout / Cart blocks */
.cart-grid, .cart-summary, .checkout-step, .order-confirmation-table {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
}

/* Alerts */
.alert {
  border-radius: 12px;
}
.alert-success { background: rgba(57,255,106,.10) !important; color: var(--text) !important; border-color: rgba(57,255,106,.35) !important; }
.alert-warning { background: rgba(255,176,32,.10) !important; color: var(--text) !important; border-color: rgba(255,176,32,.35) !important; }
.alert-danger  { background: rgba(255,59,59,.10) !important; color: var(--text) !important; border-color: rgba(255,59,59,.35) !important; }

/* Buttons that can inherit bad colors in dark mode */
.btn, .btn-secondary, .btn-outline-secondary {
  border-radius: 10px;
}
.btn-secondary, .btn-outline-secondary {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  border-color: rgba(57,255,106,.35) !important;
  background: rgba(57,255,106,.06) !important;
}

/* =========================
   PhantomCore: Fix nav + leftovers
   ========================= */

/* Top menu alignment / spacing */
#header .header-top {
  background: #05080c;
  border-bottom: 1px solid var(--border);
}
#header .header-top .container {
  display: flex;
  align-items: center;
}

/* Main menu items */
#header .menu, 
#header .top-menu, 
#header .top-menu a.dropdown-item,
#header .top-menu a {
  color: var(--text) !important;
}

#header .top-menu a:hover,
#header .top-menu a:focus {
  color: var(--accent) !important;
}

/* Dropdowns */
#header .dropdown-menu,
#header .popover {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
#header .dropdown-menu .dropdown-item {
  color: var(--text) !important;
}
#header .dropdown-menu .dropdown-item:hover {
  background: rgba(57,255,106,.08) !important;
  color: var(--accent) !important;
}

/* Search bar (Classic often looks wrong on dark) */
#search_widget input[type="text"],
#header .search-widget input[type="text"] {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
#search_widget button,
#header .search-widget button {
  color: #031207 !important;
}

/* Breadcrumb (often stays light) */
.breadcrumb {
  background: transparent !important;
}
.breadcrumb li a,
.breadcrumb li {
  color: var(--muted) !important;
}
.breadcrumb li a:hover {
  color: var(--accent) !important;
}

/* Footer + newsletter blocks (usually still light) */
#footer,
.footer-container,
.block_newsletter,
.block-contact,
.links {
  background: #05080c !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border) !important;
}
#footer a, .footer-container a {
  color: var(--accent) !important;
}
#footer a:hover, .footer-container a:hover {
  color: var(--accent-soft) !important;
}

/* Buttons that look “washed out” on dark */
.btn-secondary,
.btn-outline-secondary {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: rgba(57,255,106,.06) !important;
  border-color: rgba(57,255,106,.35) !important;
}

/* Forms + labels (Classic has lots of gray) */
label, .form-control-label {
  color: var(--text) !important;
}
.help-block, .form-text, small, .text-muted {
  color: var(--muted) !important;
}

/* Cards / panels used in checkout + account pages */
.cart-summary,
.checkout-step,
.order-confirmation-table,
.account-links,
.page-customer-account #content {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
}

/* Tables */
.table, table { color: var(--text) !important; }
.table th, .table td { border-color: var(--border) !important; }

/* Product list: title + price consistency */
.product-title a, .h3.product-title a { color: var(--text) !important; }
.price, .product-price, .current-price, .product-price-and-shipping { color: var(--accent) !important; }
.regular-price { color: var(--muted) !important; }

/* === PhantomCore: Alerts (Bootstrap + module overrides) === */
.alert{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
}

/* Specific alert types that stay light */
.alert-info,
.alert.alert-info,
.wk_subscription_alert,
.alert.wk_subscription_alert{
  background: rgba(57,255,106,.10) !important;   /* green-tinted info */
  border-color: rgba(57,255,106,.35) !important;
  color: var(--text) !important;
}

/* Links inside alerts */
.alert a{
  color: var(--accent) !important;
  text-decoration: underline;
}
.alert a:hover{
  color: var(--accent-soft) !important;
}

/* Close button visibility */
.alert .close, .alert .btn-close{
  filter: invert(1);
  opacity: .85;
}

/* Generic module blocks that often ship with white backgrounds */
.block, .module, .box, .panel, .well,
[class*="wk_"], [class*="wk-"]{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* =========================
   PhantomCore: Tabs Fix
   ========================= */

/* Tab container */
.tabs,
.nav-tabs,
.tab-content{
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Tab navigation */
.nav-tabs .nav-link{
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.nav-tabs .nav-link:hover{
  background: rgba(57,255,106,.06) !important;
  color: var(--accent) !important;
}

/* Active tab */
.nav-tabs .nav-link.active{
  background: var(--surface2) !important;
  color: var(--accent) !important;
  border-color: var(--border) !important;
}

/* Tab panels */
.tab-pane{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border);
  padding: 20px;
}


/* =========================
   PhantomCore: Product Comments
   ========================= */

.product-comment-list-item{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  color: var(--text) !important;
  padding: 16px;
  margin-bottom: 12px;
}

.product-comment-list-item .comment-date,
.product-comment-list-item .comment-author,
.product-comment-list-item small{
  color: var(--muted) !important;
}

.product-comment-list-item .comment-content,
.product-comment-list-item p{
  color: var(--text) !important;
}

/* rating stars visibility */
.product-comment-list-item .star,
.product-comment-list-item .star i{
  color: var(--accent) !important;
}

/* =========================
   PhantomCore: Top nav dropdown alignment (Classic)
   ========================= */

/* Ensure menu can position dropdowns correctly */
#header .header-top,
#header .header-top .container,
#header .menu,
#header .top-menu {
  overflow: visible !important;
}

/* Make each top-level item the positioning anchor */
#header .top-menu > li {
  position: relative !important;
}

/* Dropdown positioning: align to the left edge of the parent item */
#header .top-menu .dropdown-menu {
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  min-width: 240px;
  border-radius: 12px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  z-index: 9999;
}

/* If Classic is centering dropdowns, this neutralizes it */
#header .top-menu .dropdown-menu[data-popper-placement],
#header .top-menu .dropdown-menu.show {
  inset: auto !important;
}

/* Fix “too far right/off-screen” on last items */
#header .top-menu > li:last-child .dropdown-menu,
#header .top-menu > li:nth-last-child(2) .dropdown-menu {
  left: auto !important;
  right: 0 !important;
}

/* Dropdown items spacing */
#header .top-menu .dropdown-item {
  padding: 10px 14px !important;
  white-space: nowrap;
}

/* PhantomCore: dropdown text indent fix */
#header .top-menu .dropdown-menu{
  padding: 6px 0 !important;   /* reduce inner padding */
}

#header .top-menu .dropdown-menu ul{
  margin: 0 !important;
  padding-left: 0 !important;  /* kill UL indent */
  list-style: none !important;
}

#header .top-menu .dropdown-menu li{
  margin: 0 !important;
  padding: 0 !important;
}

#header .top-menu .dropdown-menu .dropdown-item,
#header .top-menu .dropdown-menu a{
  padding: 10px 14px !important;  /* control left padding */
  text-indent: 0 !important;
}

#header .top-menu .dropdown-menu a::before,
#header .top-menu .dropdown-menu .dropdown-item::before{
  content: none !important;
}

/* PhantomCore: FORCE center submenu text */
#header .top-menu .dropdown-menu{
  text-align: center !important;
}

#header .top-menu .dropdown-menu .dropdown-item,
#header .top-menu .dropdown-menu a{
  display: block !important;
  width: 100% !important;
  text-align: center !important;

  /* kill any left bias */
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin: 0 !important;
}

/* If items are inside list elements that are flexed */
#header .top-menu .dropdown-menu li{
  display: block !important;
  width: 100% !important;
}

/* Remove any icon/chevron spacing that can push text */
#header .top-menu .dropdown-menu a::before,
#header .top-menu .dropdown-menu a::after,
#header .top-menu .dropdown-menu .dropdown-item::before,
#header .top-menu .dropdown-menu .dropdown-item::after{
  content: none !important;
}

/* PhantomCore: submenu alignment fix */

#header .top-menu[data-depth="1"]{
  padding: 0 !important;
  margin: 0 !important;
}

#header .top-menu[data-depth="1"] li.category{
  padding: 0 !important;
  margin: 0 !important;
}

#header .top-menu[data-depth="1"] a.dropdown-item{
  display: block !important;
  width: 100% !important;
  text-align: center !important;

  padding: 10px 0 !important;   /* remove left bias */
  margin: 0 !important;
}

#header .top-menu[data-depth="1"] a.dropdown-item:hover{
  background: rgba(57,255,106,.08) !important;
  color: var(--accent) !important;
}

/* PhantomCore: dropdown spacing */
#header .top-menu .dropdown-menu{
  top: calc(100% + 12px) !important;  /* pushes it below menu */
  left: 0 !important;
  border-radius: 12px;
}

#_desktop_top_menu .top-menu[data-depth="0"] li:hover .sub-menu, .top-menu .sub-menu.collapse.in{
	top: 32px !important;
}

/* Dropdown container */
#header .top-menu .dropdown-menu{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  padding: 8px 0 !important;
  box-shadow: 0 8px 25px rgba(0,0,0,.45);
}

/* Dropdown items */
#header .top-menu[data-depth="1"] a.dropdown-item{
  display:block;
  width:100%;
  text-align:center;
  padding:12px 0 !important;

  color:var(--text) !important;
  font-weight:500;
  letter-spacing:.5px;

  transition:all .15s ease;
}

/* Neon hover effect */
#header .top-menu[data-depth="1"] a.dropdown-item:hover{
  background:rgba(57,255,106,.08) !important;
  color:var(--accent) !important;
  text-shadow:0 0 6px rgba(57,255,106,.35);
}

#header .top-menu[data-depth="1"] li.category{
  border-bottom:1px solid rgba(255,255,255,.05);
}

#header .top-menu[data-depth="1"] li.category:last-child{
  border-bottom:none;
}

/* PhantomCore: submenu popover width + positioning (Classic) */
#header .top-menu > li{
  position: relative !important; /* anchor */
}

/* This is the real submenu container in Classic */
#header .sub-menu.popover{
  top: calc(100% + 12px) !important;   /* below the menu item */
  left: 0 !important;
  right: auto !important;

  width: max-content !important;       /* expand to fit children */
  min-width: 260px !important;         /* sensible minimum */
  max-width: 90vw !important;          /* prevent overflow */
}

/* Ensure inner UL doesn't impose a narrow width */
#header .sub-menu.popover > .top-menu[data-depth="1"]{
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Make each item not wrap (so width grows properly) */
#header .sub-menu.popover a.dropdown-item{
  white-space: nowrap !important;
  width: 100% !important;
}

/* PhantomCore: stack submenu items vertically */
#header .sub-menu.popover .top-menu[data-depth="1"]{
  display: block !important;
}

#header .sub-menu.popover .top-menu[data-depth="1"] li.category{
  display: block !important;
  width: 100% !important;
}

/* Each item gets its own row */
#header .sub-menu.popover a.dropdown-item{
  display: block !important;
  width: 100% !important;
  padding: 12px 0 !important;
  text-align: center;
}

#header .sub-menu.popover li.category{
  border-bottom: 1px solid rgba(255,255,255,.05);
}

#header .sub-menu.popover li.category:last-child{
  border-bottom: none;
}