/* ================================================================
   NRPLY Gaming Header & Footer Skin — V11 Apex Edition
   Blocksy-compatible — targets ct-header / ct-footer selectors
   Paste as a CSS snippet in WPCode, location: Site Wide Header

   V11 design fully merged:
   - Animated power rail on header (CSS-only, ::before)
   - Animated footer topline + grid + radial bg (CSS-only, ::before / ::after)
   - All V11 layout fixes for updated Blocksy HTML output
     (ct-container-fluid rows, [data-row="bottom"] copyright bar)
   ================================================================ */

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

/* ----------------------------------------------------------------
   DESIGN TOKENS
---------------------------------------------------------------- */
:root {
  --np-black:         #020408;
  --np-surface:       #060A11;
  --np-surface-2:     #0A1020;
  --np-glass:         #080E1A;
  --np-glass-border:  rgba(0,229,255,0.14);
  --np-cyan:          #00E5FF;
  --np-cyan-dim:      rgba(0,229,255,0.09);
  --np-cyan-glow:     rgba(0,229,255,0.35);
  --np-cyan-soft:     rgba(0,229,255,0.05);
  --np-purple:        #7B2FFF;
  --np-muted:         #3D4F65;
  --np-muted-lt:      #6A84A0;
  --np-border:        rgba(0,229,255,0.10);
  --np-border-md:     rgba(0,229,255,0.20);
  --np-r-sm:          5px;
  --np-r-md:          10px;
  --np-r-lg:          16px;
  --np-ease:          cubic-bezier(0.16,1,0.3,1);
  --np-fast:          0.16s;
  --np-mid:           0.30s;
  --np-font-hud:      'Orbitron', sans-serif;
  --np-font-body:     'Rajdhani', sans-serif;
}

#header *, footer#footer *, .ct-footer * { box-sizing: border-box; }

body {
  background-color: var(--np-black) !important;
  color:            var(--np-muted-lt) !important;
}

/* ================================================================
   ██ HEADER
================================================================ */
#header,
#header.ct-header {
  background:    var(--np-black) !important;
  border-bottom: 1px solid var(--np-border) !important;
  box-shadow:    0 2px 30px rgba(0,0,0,0.85),
                 inset 0 -1px 0 var(--np-border) !important;
  z-index:       1000 !important;
  overflow:      visible !important;
}

/* ── ANIMATED POWER RAIL (CSS-only, replaces JS injection) ── */
#header::before,
#header.ct-header::before {
  content:    '' !important;
  position:   absolute !important;
  top:        0 !important;
  left:       0 !important;
  right:      0 !important;
  height:     2px !important;
  background: linear-gradient(
    90deg,
    transparent 0%, var(--np-purple) 25%,
    var(--np-cyan) 50%, var(--np-purple) 75%, transparent 100%
  ) !important;
  animation:  np-rail 5s ease-in-out infinite !important;
  z-index:    10 !important;
  pointer-events: none !important;
}
@keyframes np-rail {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1.0; }
}

/* ── HEADER ROWS ── */
#header [data-row="top"],
#header [data-row-id="top"] {
  background: transparent !important;
  border:     none !important;
  padding:    0 24px !important;
}
#header [data-row="middle"],
#header [data-row-id="middle"] {
  background:    transparent !important;
  border:        none !important;
  border-radius: 0 !important;
  margin:        0 auto !important;
  width:         100% !important;
  max-width:     1400px !important;
  min-height:    68px !important;
  box-shadow:    none !important;
  padding:       8px 24px !important;
  display:       flex !important;
  align-items:   center !important;
}

/* ── HEADER COLUMNS ── */
#header [data-column="start"] {
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-start !important;
  flex:            1 !important;
  gap:             10px !important;
}
#header [data-column="middle"] {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex:            0 1 auto !important;
}
#header [data-column="end"] {
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-end !important;
  flex:            1 !important;
  gap:             10px !important;
}

/* ── LOGO ── */
#header .site-logo-container,
#header .ct-header-logo,
#header .site-branding {
  display:     flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
#header .site-logo-container img,
#header .ct-header-logo img,
#header .site-branding img,
#header .site-logo-container img.default-logo {
  display:    block !important;
  height:     auto !important;
  width:      auto !important;
  max-height: 52px !important;
  max-width:  160px !important;
  object-fit: contain !important;
  filter:     drop-shadow(0 0 8px var(--np-cyan-glow)) brightness(1.05) !important;
  transition: filter var(--np-mid) var(--np-ease),
              transform var(--np-mid) var(--np-ease) !important;
}
#header .site-logo-container:hover img,
#header .ct-header-logo:hover img {
  filter:    drop-shadow(0 0 16px var(--np-cyan))
             drop-shadow(0 0 4px rgba(0,229,255,0.5))
             brightness(1.15) !important;
  transform: scale(1.04) !important;
}

/* ── NAVIGATION ── */
#header .ct-header-navigation,
.ct-header-navigation {
  display:     flex !important;
  align-items: center !important;
}
#header .ct-header-navigation nav > ul,
#header .ct-header-navigation .menu,
#header .menu-container .menu {
  display:     flex !important;
  align-items: center !important;
  gap:         2px !important;
  list-style:  none !important;
  margin:      0 !important;
  padding:     0 !important;
}
#header .ct-header-navigation .ct-menu-link,
#header .menu-container .menu .ct-menu-link {
  position:        relative !important;
  display:         flex !important;
  align-items:     center !important;
  padding:         7px 12px !important;
  font-family:     var(--np-font-hud) !important;
  font-size:       11px !important;
  font-weight:     700 !important;
  letter-spacing:  0.13em !important;
  text-transform:  uppercase !important;
  color:           var(--np-muted-lt) !important;
  border:          1px solid transparent !important;
  border-radius:   var(--np-r-sm) !important;
  white-space:     nowrap !important;
  text-decoration: none !important;
  transition:      color var(--np-fast) var(--np-ease),
                   background var(--np-fast) var(--np-ease),
                   border-color var(--np-fast) var(--np-ease),
                   text-shadow var(--np-fast) var(--np-ease) !important;
}
#header .ct-header-navigation .current-menu-item > .ct-menu-link,
#header .ct-header-navigation .current-menu-ancestor > .ct-menu-link,
#header .menu-container .menu .current-menu-item > .ct-menu-link {
  color:        var(--np-cyan) !important;
  background:   var(--np-cyan-dim) !important;
  border-color: var(--np-border) !important;
  text-shadow:  0 0 12px var(--np-cyan-glow) !important;
}
#header .ct-header-navigation .ct-menu-link:hover,
#header .menu-container .menu .ct-menu-link:hover {
  color:        var(--np-cyan) !important;
  background:   var(--np-cyan-soft) !important;
  border-color: var(--np-border) !important;
  text-shadow:  0 0 10px var(--np-cyan-glow) !important;
}

/* Underline accent on top-level links */
#header .ct-header-navigation > div > ul > li > .ct-menu-link::before,
#header .menu-container > nav > ul > li > .ct-menu-link::before {
  content:          '' !important;
  position:         absolute !important;
  bottom:           2px;
  left:             12px;
  right:            12px;
  height:           1px !important;
  background:       var(--np-cyan) !important;
  box-shadow:       0 0 5px var(--np-cyan-glow) !important;
  transform:        scaleX(0) !important;
  transform-origin: left !important;
  transition:       transform var(--np-fast) var(--np-ease) !important;
}
#header .ct-header-navigation > div > ul > li > .ct-menu-link:hover::before,
#header .ct-header-navigation .current-menu-item > .ct-menu-link::before,
#header .menu-container > nav > ul > li > .ct-menu-link:hover::before {
  transform: scaleX(1) !important;
}

/* ── DROPDOWN / SUB-MENU ── */
#header .ct-header-navigation .sub-menu,
#header .menu-container .sub-menu {
  background:    var(--np-surface) !important;
  border:        1px solid var(--np-border-md) !important;
  border-radius: var(--np-r-md) !important;
  box-shadow:    0 20px 60px rgba(0,0,0,0.95),
                 inset 0 1px 0 rgba(255,255,255,0.03),
                 0 0 16px rgba(0,229,255,0.06) !important;
  padding:       8px !important;
  min-width:     180px !important;
  backdrop-filter: blur(12px) !important;
}
#header .menu-container .sub-menu .ct-menu-link {
  font-family: var(--np-font-body) !important;
  font-size:   13px !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
}

/* ── SEARCH ICON ── */
#header .ct-header-search .ct-icon {
  fill:       var(--np-muted-lt) !important;
  transition: fill var(--np-fast) var(--np-ease),
              filter var(--np-fast) var(--np-ease) !important;
}
#header .ct-header-search:hover .ct-icon {
  fill:   var(--np-cyan) !important;
  filter: drop-shadow(0 0 5px var(--np-cyan-glow)) !important;
}

/* ── SOCIAL ICONS (HEADER) ── */
#header .ct-header-socials a,
#header .ct-social-box a {
  color:      var(--np-muted-lt) !important;
  transition: color var(--np-fast) var(--np-ease),
              transform var(--np-fast) var(--np-ease),
              filter var(--np-fast) var(--np-ease) !important;
}
#header .ct-header-socials a:hover,
#header .ct-social-box a:hover {
  color:     var(--np-cyan) !important;
  transform: scale(1.18) !important;
  filter:    drop-shadow(0 0 4px var(--np-cyan-glow)) !important;
}
#header .ct-social-box svg path {
  fill: currentColor !important;
}

/* ── CART BADGE ── */
.ct-cart-count {
  background:      var(--np-cyan) !important;
  color:           #000 !important;
  font-family:     var(--np-font-hud) !important;
  font-size:       0.48rem !important;
  font-weight:     700 !important;
  border-radius:   50% !important;
  min-width:       16px !important;
  height:          16px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  box-shadow:      0 0 8px var(--np-cyan-glow) !important;
}

/* ── CTA BUTTON ── */
.ct-button, a.ct-button {
  background:     linear-gradient(135deg, var(--np-cyan) 0%, #009DBB 100%) !important;
  color:          #000 !important;
  font-family:    var(--np-font-hud) !important;
  font-size:      0.58rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding:        9px 20px !important;
  border:         none !important;
  border-radius:  var(--np-r-sm) !important;
  box-shadow:     0 0 20px rgba(0,229,255,0.25),
                  inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition:     box-shadow var(--np-fast) var(--np-ease),
                  transform var(--np-fast) var(--np-ease),
                  filter var(--np-fast) var(--np-ease) !important;
  white-space:    nowrap !important;
  clip-path:      polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%) !important;
}
.ct-button:hover, a.ct-button:hover {
  box-shadow: 0 0 32px rgba(0,229,255,0.48),
              0 4px 16px rgba(0,0,0,0.5) !important;
  transform:  translateY(-1px) !important;
  filter:     brightness(1.1) !important;
}

/* ── HAMBURGER TRIGGER ── */
.ct-toggle-dropdown-mobile,
.ct-mobile-menu-toggle,
#header .ct-header-trigger,
[data-id="mobile-trigger"] button {
  color:         var(--np-cyan) !important;
  border:        1px solid var(--np-border-md) !important;
  border-radius: var(--np-r-sm) !important;
  padding:       7px 10px !important;
  background:    var(--np-cyan-soft) !important;
  transition:    all var(--np-fast) var(--np-ease) !important;
}
.ct-toggle-dropdown-mobile:hover,
.ct-mobile-menu-toggle:hover,
#header .ct-header-trigger:hover {
  border-color: var(--np-cyan) !important;
  background:   var(--np-cyan-dim) !important;
}
#header .ct-header-trigger rect {
  fill:       var(--np-muted-lt) !important;
  transition: fill var(--np-fast) var(--np-ease) !important;
}
#header .ct-header-trigger:hover rect {
  fill: var(--np-cyan) !important;
}

/* ── MOBILE OFFCANVAS DRAWER ── */
#offcanvas,
.ct-drawer-canvas {
  background:   var(--np-surface) !important;
  border-right: 1px solid var(--np-border-md) !important;
  box-shadow:   8px 0 32px rgba(0,0,0,0.7) !important;
}
#offcanvas .menu .ct-menu-link,
.ct-drawer-canvas .ct-menu-link {
  font-family:     var(--np-font-hud) !important;
  font-size:       0.62rem !important;
  font-weight:     700 !important;
  letter-spacing:  0.1em !important;
  text-transform:  uppercase !important;
  color:           var(--np-muted-lt) !important;
  padding:         14px 22px !important;
  border-bottom:   1px solid var(--np-border) !important;
  transition:      color var(--np-fast) var(--np-ease),
                   background var(--np-fast) var(--np-ease),
                   padding-left var(--np-fast) var(--np-ease) !important;
  display:         block !important;
}
#offcanvas .menu .ct-menu-link:hover,
.ct-drawer-canvas .ct-menu-link:hover {
  color:        var(--np-cyan) !important;
  background:   var(--np-cyan-soft) !important;
  padding-left: 30px !important;
}

/* ── SEARCH MODAL ── */
#search-modal {
  background:      rgba(2,4,8,0.97) !important;
  backdrop-filter: blur(24px) !important;
}
#search-modal .ct-search-form input {
  background:    rgba(0,229,255,0.04) !important;
  border:        1px solid var(--np-border) !important;
  color:         var(--np-muted-lt) !important;
  font-family:   var(--np-font-body) !important;
  border-radius: var(--np-r-sm) !important;
}
#search-modal .ct-search-form input:focus {
  border-color: var(--np-cyan) !important;
  box-shadow:   0 0 0 2px var(--np-cyan-dim) !important;
  outline:      none !important;
}

/* ================================================================
   ██ FOOTER SHELL
================================================================ */
footer#footer,
footer#footer.ct-footer,
#footer.ct-footer {
  position:   relative !important;
  overflow:   hidden !important;
  padding:    0 !important;
  background: var(--np-black) !important;
  border-top: none !important;
  isolation:  isolate !important;
  font-family: var(--np-font-body) !important;
  color:       var(--np-muted-lt) !important;
}

/* ── FOOTER ANIMATED TOPLINE (::before) ── */
footer#footer::before,
footer#footer.ct-footer::before,
#footer.ct-footer::before {
  content:    '' !important;
  position:   absolute !important;
  top:        0 !important;
  left:       0 !important;
  right:      0 !important;
  height:     2px !important;
  background: linear-gradient(
    90deg,
    transparent 0%, var(--np-purple) 28%,
    var(--np-cyan) 50%, var(--np-purple) 72%, transparent 100%
  ) !important;
  box-shadow:      0 0 12px var(--np-cyan-glow) !important;
  animation:       np-topglow 6s ease-in-out infinite !important;
  z-index:         1 !important;
  pointer-events:  none !important;
}
@keyframes np-topglow {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1.00; }
}

/* ── FOOTER ANIMATED GRID + RADIAL BG (::after) ── */
footer#footer::after,
footer#footer.ct-footer::after,
#footer.ct-footer::after {
  content:    '' !important;
  position:   absolute !important;
  inset:      0 !important;
  z-index:    -1 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 110%, rgba(0,229,255,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 55% 65% at -8% 55%, rgba(123,47,255,0.065) 0%, transparent 60%),
    linear-gradient(rgba(0,229,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.025) 1px, transparent 1px),
    linear-gradient(175deg, #070C14 0%, #040810 40%, #020508 100%) !important;
  background-size:
    100% 100%,
    100% 100%,
    44px 44px,
    44px 44px,
    100% 100% !important;
  animation: np-grid-drift 40s linear infinite !important;
}
@keyframes np-grid-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 0 0, 44px 44px, 44px 44px, 0 0; }
}

footer#footer [data-row] {
  position: relative !important;
  z-index:  1 !important;
}

/* ================================================================
   FOOTER TOP ROW — logo + tagline
   Blocksy outputs ct-container-fluid here
================================================================ */
footer#footer [data-row="top"],
#footer [data-row="top"] {
  padding-top:    36px !important;
  padding-bottom: 8px !important;
}
footer#footer [data-row="top"] > .ct-container-fluid,
footer#footer [data-row="top"] > .ct-container,
#footer [data-row="top"] > .ct-container-fluid,
#footer [data-row="top"] > .ct-container {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         0 32px !important;
  width:           100% !important;
}
footer#footer [data-column="widget-area-5"],
#footer [data-column="widget-area-5"] {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             8px !important;
  width:           100% !important;
  text-align:      center !important;
}

/* ── Footer logo image ── */
footer#footer .wp-block-image img,
footer#footer [class*="logo"] img,
footer#footer img.custom-logo,
footer#footer img.wp-image-10116,
#footer .wp-block-image img {
  filter:     drop-shadow(0 0 8px var(--np-cyan-glow)) brightness(1.05) !important;
  max-height: 60px !important;
  max-width:  160px !important;
  width:      auto !important;
  height:     auto !important;
  display:    block !important;
  margin:     0 auto 6px !important;
  object-fit: contain !important;
}
@media (max-width: 600px) {
  footer#footer .wp-block-image img,
  #footer .wp-block-image img {
    max-height: 48px !important;
  }
}

/* ── #toram-footer-text ── */
#toram-footer-text {
  font-family:    var(--np-font-body) !important;
  font-size:      0.82rem !important;
  font-weight:    600 !important;
  letter-spacing: 0.07em !important;
  color:          var(--np-muted-lt) !important;
  text-transform: uppercase !important;
  text-align:     center !important;
  line-height:    1.75 !important;
  border-left:    2px solid var(--np-cyan) !important;
  padding-left:   10px !important;
  margin-top:     8px !important;
}

/* Hide the empty spacer paragraph widget */
#block-34 { display: none !important; }

/* ================================================================
   FOOTER MIDDLE ROW — inline nav menu
   Blocksy outputs ct-container-fluid here
================================================================ */
footer#footer [data-row="middle"],
#footer [data-row="middle"] {
  padding-top:    16px !important;
  padding-bottom: 16px !important;
}
footer#footer [data-row="middle"] > .ct-container-fluid,
footer#footer [data-row="middle"] > .ct-container,
#footer [data-row="middle"] > .ct-container-fluid,
#footer [data-row="middle"] > .ct-container {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         0 32px !important;
  width:           100% !important;
  max-width:       1280px !important;
  margin:          0 auto !important;
}

/* Inline footer nav */
footer#footer .footer-menu-inline .menu,
#footer .footer-menu-inline .menu,
footer#footer [data-column="menu"] .menu,
#footer [data-column="menu"] .menu {
  display:         flex !important;
  flex-direction:  row !important;
  flex-wrap:       wrap !important;
  justify-content: center !important;
  gap:             6px 10px !important;
  list-style:      none !important;
  padding:         0 !important;
  margin:          0 !important;
}
footer#footer .footer-menu-inline .ct-menu-link,
#footer .footer-menu-inline .ct-menu-link,
footer#footer [data-column="menu"] .ct-menu-link,
#footer [data-column="menu"] .ct-menu-link {
  font-family:     var(--np-font-hud) !important;
  font-size:       10px !important;
  font-weight:     700 !important;
  letter-spacing:  0.12em !important;
  text-transform:  uppercase !important;
  color:           var(--np-muted) !important;
  padding:         5px 14px !important;
  border:          1px solid rgba(0,229,255,0.12) !important;
  border-radius:   var(--np-r-sm) !important;
  display:         inline-block !important;
  text-decoration: none !important;
  transition:      color var(--np-fast) var(--np-ease),
                   border-color var(--np-fast) var(--np-ease),
                   background var(--np-fast) var(--np-ease),
                   text-shadow var(--np-fast) var(--np-ease) !important;
}
footer#footer .footer-menu-inline .ct-menu-link:hover,
#footer .footer-menu-inline .ct-menu-link:hover,
footer#footer [data-column="menu"] .ct-menu-link:hover,
#footer [data-column="menu"] .ct-menu-link:hover {
  color:        var(--np-cyan) !important;
  border-color: var(--np-border-md) !important;
  background:   var(--np-cyan-dim) !important;
  text-shadow:  0 0 8px var(--np-cyan-glow) !important;
}

/* ── General footer links ── */
footer#footer a,
#footer.ct-footer a {
  font-family:     var(--np-font-body) !important;
  font-size:       0.94rem !important;
  font-weight:     500 !important;
  color:           var(--np-muted-lt) !important;
  text-decoration: none !important;
  transition:      color var(--np-fast) var(--np-ease) !important;
}
footer#footer a:hover,
#footer.ct-footer a:hover {
  color:       var(--np-cyan) !important;
  text-shadow: 0 0 8px var(--np-cyan-glow) !important;
}

/* ── Footer body text ── */
footer#footer p,
#footer.ct-footer p {
  font-family: var(--np-font-body) !important;
  font-size:   0.97rem !important;
  line-height: 1.7 !important;
  color:       var(--np-muted-lt) !important;
  margin:      0 0 6px 0 !important;
}

/* ================================================================
   ██ COPYRIGHT BAR — [data-row="bottom"]
   Blocksy update: no longer carries the ct-bottom-bar class.
================================================================ */
footer#footer [data-row="bottom"],
#footer [data-row="bottom"] {
  position:   relative !important;
  z-index:    1 !important;
  background: rgba(2,4,8,0.92) !important;
  border-top: 1px solid rgba(0,229,255,0.08) !important;
  padding:    15px 32px !important;
}

footer#footer [data-row="bottom"] > .ct-container-fluid,
footer#footer [data-row="bottom"] > .ct-container,
#footer [data-row="bottom"] > .ct-container-fluid,
#footer [data-row="bottom"] > .ct-container {
  display:         flex !important;
  flex-direction:  row !important;
  align-items:     center !important;
  justify-content: center !important;
  max-width:       1280px !important;
  margin:          0 auto !important;
  padding:         0 !important;
  gap:             12px !important;
}

/* Copyright text */
footer#footer [data-row="bottom"],
footer#footer [data-row="bottom"] p,
footer#footer [data-row="bottom"] span,
footer#footer [data-row="bottom"] div,
#footer [data-row="bottom"] p,
.ct-footer-copyright p,
#footer .ct-footer-copyright p {
  font-family:    var(--np-font-hud) !important;
  font-size:      10px !important;
  font-weight:    500 !important;
  letter-spacing: 0.1em !important;
  color:          var(--np-muted-lt) !important;
  text-transform: uppercase !important;
  text-align:     center !important;
  margin:         0 !important;
  line-height:    1.5 !important;
}

/* Hide ghost columns */
footer#footer [data-column="ghost"],
#footer [data-column="ghost"] {
  display: none !important;
}

@media (max-width: 600px) {
  footer#footer [data-row="bottom"],
  #footer [data-row="bottom"] {
    padding: 12px 16px !important;
  }
  footer#footer [data-row="bottom"] > .ct-container-fluid,
  footer#footer [data-row="bottom"] > .ct-container {
    flex-direction: column !important;
    gap:            5px !important;
  }
}

/* ================================================================
   REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
  #header::before,
  #header.ct-header::before,
  footer#footer::before,
  footer#footer.ct-footer::before,
  footer#footer::after,
  footer#footer.ct-footer::after {
    animation: none !important;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}