/*:::::::::::make the electro reviews hidden and stay with only photo reviews::::::::*/

.wcpr-overall-rating-and-rating-count {
    display: none !important;
}

/*;;;;;;;;;;;;;;;;;;;;;;;;;;hide one gallery on product page to show featured video;;;;;;;;*/
.electro-wc-product-gallery .ywcfav_thumbnails_video_container {
    display: none;
}


/*;;;;;;;;;;;;;;hide optimole icon on left of pages;;; we just enabled inorder to get the 20,000 pictures optimized for free;;;;;;;;;;;;;;;*/
/* Hide that specific 20x20 SVG with the same viewBox */
svg[width="20"][height="20"][viewBox="0 0 251 250"]{
  display: none !important;
}

/* (Alternative, if the inline style is unique) */
svg[style*="margin-right:6px"]{
  display: none !important;
}
/* Additional CSS */
a[href*="optimole.com/wordpress"][href*="from=badgeOn"]{
  display: none !important;
}

/*;;;;;;;;;;hiding elements on the my accounts view order page;;;;;;;;;;;;;*/
.wooconvo-admin-wrapper {
    display: none !important;
}

a.wps_track_order {
    display: none !important;
}

/* Only target the SPECIFIC note form, not all multipart forms */
form:has(textarea[name="wcfm_cus_add_note"]) {
    display: none !important;
}

/* Only hide h2 that comes before the SPECIFIC note form */
h2:has(+ form:has(textarea[name="wcfm_cus_add_note"])) {
    display: none !important;
}


/*;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; Hide site chrome only for app WebViews;;;;;;;;;;;;;;; */
/* Only affect pages opened from the app (gvapp=1) */
.webview-mode .top-bar,
.webview-mode .site-header,
.webview-mode header#masthead,
.webview-mode .elementor-location-header,
.webview-mode nav.woocommerce-breadcrumb,
.webview-mode .site-footer,
.webview-mode footer#colophon,
.webview-mode .elementor-location-footer,
.webview-mode .elementor-menu-toggle {
  display: none !important;
}

/* Don't touch generic "off-canvas" containers — some themes use them to wrap content .*/
.webview-mode #off-canvas,
.webview-mode [id^="off-canvas-"] {
  /* keep visible to avoid blank page */
}

/* Tighten spacing after hiding header/footer */
.webview-mode #content,
.webview-mode .site-content,
.webview-mode .content-area,
.webview-mode .container,
.webview-mode .elementor-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Prevent layout collapse if theme relies on min-heights */
.webview-mode body,
.webview-mode html {
  min-height: 100% !important;
}
/* App WebView only */
.webview-mode .entry-header,
.webview-mode .entry-title,
.webview-mode .entry-subtitle {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;*/
/* === GamersValhalla Black Friday – force header + left sidebar (page 9227) === */


/* Make sure days block in Electro countdown is visible */
.deal-countdown-timer .deal-countdown .days {
    display: inline-flex !important;
    align-items: center;
}

/* Optional: add a little spacing if it looks cramped */
.deal-countdown-timer .deal-countdown span {
    margin: 0 2px;
}


/*;;;;;;;;;;;;;;;;;;;;count downtimer add days to counter;;;;;;;;;;;*/
/* Make sure days block in Electro countdown is visible */
.deal-countdown-timer .deal-countdown .days {
    display: inline-flex !important;
    align-items: center;
}

/* Optional: add a little spacing if it looks cramped */
.deal-countdown-timer .deal-countdown span {
    margin: 0 2px;
}

/* ================================
   GamersValhalla Hero Video
   Mobile + Desktop versions
   ================================ */

.gv-hero-video {
  position: relative;
  width: 100%;
  min-height: 60vh;
  max-height: 80vh;
  border-radius: 18px;
  overflow: hidden;
  background: #000; /* fallback if video not loaded */
}

/* Shared styling for both videos */
.gv-hero-video__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Default (mobile-first): show mobile video only */
.gv-hero-video__video--mobile {
  display: block;
}

.gv-hero-video__video--desktop {
  display: none;
}

/* Tablet & Desktop: use the desktop video instead */
@media (min-width: 768px) {
  .gv-hero-video {
    min-height: 60vh;
  }

  .gv-hero-video__video--mobile {
    display: none;
  }

  .gv-hero-video__video--desktop {
    display: block;
  }
}

/* Slightly smaller hero on very small screens */
@media (max-width: 480px) {
  .gv-hero-video {
    min-height: 50vh;
  }
}

/* ================================
   Overlay content (title + text + button)
   ================================ */

/* Overlay: positions content, no full-width dark block */
.gv-hero-video__overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 3.5rem;
  color: #fff;
  background: none;
}

/* Floating gradient card for text */
.gv-hero-video__content {
  max-width: 520px;
  padding: 2rem 2.25rem 2.25rem;
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.55)
  );
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
}

/* Typography */
.gv-hero-video__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  opacity: 0.8;
  margin: 0 0 0.5rem;
}

.gv-hero-video__title {
  font-size: 2.5rem;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.gv-hero-video__text {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 32rem;
  margin: 0 0 1.8rem;
}

/* Button */
.gv-hero-video__btn {
  display: inline-block;
  padding: 0.8rem 1.9rem;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.gv-hero-video__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  background: #111827;
  color: #ffffff;
}

/* ================================
   Mobile layout tweaks
   ================================ */

/* Base hero video container */
.gv-hero-video {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Default for desktop */
  height: 100vh;
  max-height: 900px;
}

/* Video elements */
.gv-hero-video__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Show/hide videos based on device */
.gv-hero-video__video--mobile {
  display: block;
}
.gv-hero-video__video--desktop {
  display: none;
}

/* Overlay - More Transparent Version */
.gv-hero-video__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Lighter gradient - more transparent */
  background: linear-gradient(
    180deg,
    rgba(6, 5, 24, 0.15) 0%,        /* Very transparent at top */
    rgba(6, 5, 24, 0.3) 30%,        /* Slight tint in middle */
    rgba(6, 5, 24, 0.5) 65%,        /* Medium tint */
    rgba(6, 5, 24, 0.75) 95%        /* Darker at very bottom */
  );
  padding: 2rem;
  box-sizing: border-box;
}

/* Content container - Semi-transparent */
.gv-hero-video__content {
  max-width: 600px;
  text-align: center;
  color: white;
  background: rgba(3, 3, 10, 0.75);  /* 75% opacity */
  backdrop-filter: blur(8px);         /* Frosted glass effect */
  -webkit-backdrop-filter: blur(8px); /* For Safari */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Typography */
.gv-hero-video__eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.9;
  font-weight: 600;
}

.gv-hero-video__title {
  margin: 0 0 1rem;
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 800;
}

.gv-hero-video__text {
  margin: 0 0 2rem;
  font-size: 1.1rem;
  line-height: 1.5;
  opacity: 0.95;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Button */
.gv-hero-video__btn {
  display: inline-block;
  background: #0070cc;
  color: white;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: 2px solid #0070cc;
}
.gv-hero-video__btn:hover {
  background: transparent;
  color: white;
  border-color: white;
  transform: translateY(-2px);
}

/* ----- Mobile (max-width: 768px) ----- */
@media (max-width: 768px) {
  /* CRITICAL FIX: Override height and make it taller */
  .gv-hero-video {
    height: 80vh;
    min-height: 80vh;
    max-height: none;
  }

  /* Ensure videos fill the container */
  .gv-hero-video__video {
    height: 100%;
  }

  /* Push overlay content to the bottom with 2-3px margin */
  .gv-hero-video__overlay {
    align-items: flex-end; /* This pushes content to bottom */
    justify-content: center;
    /* 2-3px bottom margin: We'll use padding-bottom to create space */
    padding: 0 1.5rem 0.2rem; /* 0.2rem ≈ 3px at bottom, adjust as needed */
    /* Even more transparent gradient for mobile */
    background: linear-gradient(
      180deg,
      rgba(6, 5, 24, 0) 0%,           /* Completely transparent at top */
      rgba(6, 5, 24, 0.1) 30%,        /* Very light tint */
      rgba(6, 5, 24, 0.25) 60%,       /* Light tint */
      rgba(6, 5, 24, 0.5) 85%,        /* Medium tint */
      rgba(6, 5, 24, 0.7) 97%         /* Darker at bottom but with 3px gap */
    );
  }

  /* Content styling for bottom placement */
  .gv-hero-video__content {
    max-width: 100%;
    width: 100%;
    margin: 0 auto 0.2rem; /* 0.2rem ≈ 3px bottom margin */
    padding: 1.4rem 1.3rem 1.7rem;
    border-radius: 20px;
    background: rgba(3, 3, 10, 0.7); /* 70% opacity for mobile */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /* Optional: add a subtle border for definition */
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Typography adjustments for mobile */
  .gv-hero-video__title {
    font-size: 1.8rem;
  }

  .gv-hero-video__text {
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
  }

  .gv-hero-video__btn {
    width: auto;
    padding: 0.8rem 1.8rem;
    font-size: 0.95rem;
  }
}

/* ----- Desktop / tablet (min-width: 769px) ----- */
@media (min-width: 769px) {
  .gv-hero-video__video--mobile {
    display: none;
  }
  .gv-hero-video__video--desktop {
    display: block;
  }
  
  .gv-hero-video__content {
    text-align: left;
    margin-right: auto;
    background: rgba(3, 3, 10, 0.7); /* Same transparency as mobile */
    padding: 2rem;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Fallback for slow connections or video errors */
.gv-hero-video.has-video-error .gv-hero-video__video {
  display: none;
}
.gv-hero-video.has-video-error {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* ================================
   GamersValhalla PC Games Hero
   Background image in CSS so Optimole
   can't crop it.
   ================================ */
/* ===== PC Games hero section ===== */

.gv-pc-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.gv-pc-hero__image {
  display: block;
  width: 100%;
}

.gv-pc-hero__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.gv-pc-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 2.5rem 2rem;
  box-sizing: border-box;
  color: #fff;
  /* no full-screen dark background here anymore */
}

.gv-pc-hero__content {
  max-width: 580px;
  padding: 1.8rem 1.6rem;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(6, 5, 24, 0.45),
    rgba(90, 80, 180, 0.30)
  );
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
}

.gv-pc-hero__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.9;
}

.gv-pc-hero__title {
  margin: 0 0 0.9rem;
  font-size: 2.4rem;
  line-height: 1.2;
}

.gv-pc-hero__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.96;
}

@media (max-width: 767px) {
  .gv-pc-hero__image img {
    min-height: 100vh;
    object-fit: cover;
    object-position: top center;
  }

  .gv-pc-hero__overlay {
    align-items: flex-end;
    justify-content: center;
    padding: 2rem 1.4rem 2.6rem;
    text-align: center;
  }

  .gv-pc-hero__content {
    width: 100%;
  }

  .gv-pc-hero__title {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  .gv-pc-hero {
    min-height: 55vh;
  }

  .gv-pc-hero__overlay {
    align-items: center;
    justify-content: flex-start;
    padding: 3rem 3rem;
    text-align: left;
  }

  .gv-pc-hero__content {
    margin-left: 0;
  }
}

/* ================================
  Removing black box bo wishlist in the pc games  category products displayed om the home page. 
   ================================ */
/* Remove black background from wishlist/compare area for PC Games products */
.product_cat-pc-games .product-inner .hover-area,
.product_cat-pc-games .product-inner .hover-area .action-buttons,
.product_cat-pc-games .product-inner .hover-area .action-buttons a {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove all hover states for PC Games products */
.product_cat-pc-games .product-inner .hover-area:hover,
.product_cat-pc-games .product-inner .hover-area .action-buttons:hover,
.product_cat-pc-games .product-inner .hover-area .action-buttons a:hover {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure text and icons remain visible */
.product_cat-pc-games .product-inner .hover-area .yith-wcwl-add-to-wishlist-button__label,
.product_cat-pc-games .product-inner .hover-area .label,
.product_cat-pc-games .product-inner .hover-area svg {
    color: inherit !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* PC Games – use the same colors in light & dark
   (only affects the Elementor section with ID afe41db)  */

/* 1. Base price color (non-discounted, including UShs0) */
.elementor-element-afe41db .products .product-outer .price,
.elementor-element-afe41db .products .product-outer .price .woocommerce-Price-amount,
.elementor-element-afe41db .products .product-outer .price .woocommerce-Price-amount * {
    color: #22d3ee !important;      /* cyan – adjust to match your exact dark color */
    opacity: 1 !important;
}

/* 2. Discounted price (sale) – red */
.elementor-element-afe41db .products .product-outer .price ins,
.elementor-element-afe41db .products .product-outer .price ins .woocommerce-Price-amount,
.elementor-element-afe41db .products .product-outer .price ins .woocommerce-Price-amount * {
    color: #ef4444 !important;      /* bright red sale price */
    opacity: 1 !important;
}

/* 3. Old price (crossed-out) – soft grey */
.elementor-element-afe41db .products .product-outer .price del,
.elementor-element-afe41db .products .product-outer .price del .woocommerce-Price-amount,
.elementor-element-afe41db .products .product-outer .price del .woocommerce-Price-amount * {
    color: #9ca3af !important;      /* muted grey */
    opacity: 0.85 !important;
}


/* Stop theme from fading that footer area on hover */
.elementor-element-afe41db .products .product-outer .price,
.elementor-element-afe41db .products .product-outer .loop-add-to-cart {
    transition: none !important;
}

/* === PC Games section (Elementor ID afe41db) === */
/* 1. Product titles – make them white */
.elementor-element-afe41db .products .product .woocommerce-loop-product__title,
.elementor-element-afe41db .products .product .woocommerce-loop-product__title a {
    color: #ffffff !important;
}


/* 3. Cart circle background – solid (tweak color if needed) */
.elementor-element-afe41db .products .product-outer .loop-add-to-cart a {
    background-color: #000000 !important; /* use your dark-theme value if different */
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* 4. Remove vertical divider lines between products */
.elementor-element-afe41db .products .product,
.elementor-element-afe41db .products .product:before,
.elementor-element-afe41db .products .product:after,
.elementor-element-afe41db .products .product-outer,
.elementor-element-afe41db .products .product-inner,
.elementor-element-afe41db .products .product-outer:hover .product-inner {
    border: none !important;
    box-shadow: none !important;
}

/* PC Games – force "Buy now" text to pure white */
.elementor-element-afe41db .products .product-outer .loop-add-to-cart a,
.elementor-element-afe41db .products .product-outer .loop-add-to-cart a * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* in case theme uses fancy text styles */
}

/* (Optional) make sure the button itself isn't setting a faded color */
.elementor-element-afe41db .products .product-outer .loop-add-to-cart a.button,
.elementor-element-afe41db .products .product-outer .loop-add-to-cart a.add_to_cart_button {
    color: #ffffff !important;
}

/* PC Games – fix stubborn "Buy now" (wpcbn-btn) */
.elementor-element-afe41db .products .product .product-loop-footer .wpcbn-btn,
.elementor-element-afe41db .products .product .product-loop-footer .wpcbn-btn:visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important; /* tweak or remove if you don't want a border */
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Hover state – still white text, slight bg if you like */
.elementor-element-afe41db .products .product .product-loop-footer .wpcbn-btn:hover,
.elementor-element-afe41db .products .product .product-loop-footer .wpcbn-btn:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: rgba(148, 163, 184, 0.18) !important; /* or transparent */
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
}

/* === PC Games header (title + "view all") – force solid white === */

/* Title: "PC Games" */
.elementor-element-afe41db .two-row-products .section-header .h1,
.elementor-element-afe41db .two-row-products .section-header h2,
.elementor-element-afe41db .two-row-products .section-header h2 a {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
}

/* "view all" link */
.elementor-element-afe41db .two-row-products .section-header .action-text {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    text-decoration: none !important;
}

/* Optional: hover state for "view all" */
.elementor-element-afe41db .two-row-products .section-header .action-text:hover {
    color: #e5e7eb !important;  /* slightly softer white on hover */
    opacity: 1 !important;
    filter: none !important;
}



/*;;;;;;;;;;;;;;;; hero banner to Prevent “flash / not full width for a second ;;;;;;*/
/* ✅ Prevent Elementor stretched-section "flash" on load */
#gvx-hero.elementor-section.elementor-section-stretched{
  width: 100vw !important;
  left: 50% !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
}

/* Make sure inner container doesn't re-limit width */
#gvx-hero > .elementor-container{
  width: 100% !important;
  max-width: 100% !important;
}

/* Safety: stop tiny horizontal scroll while it calculates */
html, body{
  overflow-x: hidden;
}






body .electro-mode-switcher{
  left: auto !important;
  right: 16px !important;
  z-index: 9999 !important;
}



/*off canvas nested menu forced to open next level*/
@media (max-width: 991px) {
  .off-canvas-navigation .dropdown-submenu.open > .dropdown-menu,
  .off-canvas-nav .handheld .dropdown-submenu.open > .dropdown-menu {
    display: block !important;
  }

  .off-canvas-navigation .dropdown-submenu > .dropdown-menu,
  .off-canvas-nav .handheld .dropdown-submenu > .dropdown-menu {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* ===========================
   GV Polished Off-Canvas Menu
   Works on mobile + desktop
   =========================== */

/* Panel base */
.off-canvas-navigation,
.off-canvas-nav .handheld {
  border-right: 1px solid rgba(255,255,255,0.08);
}

/* Main links */
.off-canvas-navigation ul li a,
.off-canvas-navigation .yamm .yamm-content li a,
.off-canvas-nav .handheld ul li a,
.off-canvas-nav .handheld .yamm .yamm-content li a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 1.25rem !important;
  padding-right: 3rem !important;
  line-height: 3.25rem;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Top level a little stronger */
.off-canvas-navigation > ul > li > a,
.off-canvas-nav .handheld > ul > li > a,
.off-canvas-navigation > .nav > li > a,
.off-canvas-nav .handheld > .nav > li > a {
  font-weight: 600;
}

/* Submenu spacing */
.off-canvas-navigation .dropdown-menu,
.off-canvas-nav .handheld .dropdown-menu {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.off-canvas-navigation .dropdown-menu > li > a,
.off-canvas-nav .handheld .dropdown-menu > li > a {
  padding-left: 2rem !important;
  font-size: 13.5px;
}

.off-canvas-navigation .dropdown-menu .dropdown-menu > li > a,
.off-canvas-nav .handheld .dropdown-menu .dropdown-menu > li > a {
  padding-left: 2.75rem !important;
  font-size: 13px;
}

/* Keep working nested open state */
.off-canvas-navigation .dropdown-submenu.open > .dropdown-menu,
.off-canvas-nav .handheld .dropdown-submenu.open > .dropdown-menu {
  display: block !important;
}

.off-canvas-navigation .dropdown-submenu > .dropdown-menu,
.off-canvas-nav .handheld .dropdown-submenu > .dropdown-menu {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  transform: none !important;
}

/* Plus / minus indicators */
.off-canvas-navigation ul li.menu-item-has-children > a::after,
.off-canvas-navigation .yamm .yamm-content li.menu-item-has-children > a::after,
.off-canvas-nav .handheld ul li.menu-item-has-children > a::after,
.off-canvas-nav .handheld .yamm .yamm-content li.menu-item-has-children > a::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin-left: 0 !important;
  transition: all 0.18s ease;
}

/* Open states: top level and deeper level */
.off-canvas-navigation ul li > a[aria-expanded="true"]::after,
.off-canvas-nav .handheld ul li > a[aria-expanded="true"]::after,
.off-canvas-navigation .dropdown-submenu.open > a::after,
.off-canvas-nav .handheld .dropdown-submenu.open > a::after,
.off-canvas-navigation .menu-item-has-children.open > a::after,
.off-canvas-nav .handheld .menu-item-has-children.open > a::after {
  content: "−";
}

/* ---------- DARK / DEFAULT PANEL ---------- */
.off-canvas-navigation:not(.light),
.off-canvas-nav .handheld {
  background: linear-gradient(180deg, #2b2b2b 0%, #232323 100%);
}

.off-canvas-navigation:not(.light) ul li a,
.off-canvas-navigation:not(.light) .yamm .yamm-content li a,
.off-canvas-nav .handheld ul li a,
.off-canvas-nav .handheld .yamm .yamm-content li a {
  color: rgba(255,255,255,0.88) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Nested menus in dark mode */
.off-canvas-navigation:not(.light) .dropdown-menu,
.off-canvas-nav .handheld .dropdown-menu {
  background: rgba(255,255,255,0.03) !important;
}

.off-canvas-navigation:not(.light) .dropdown-menu > li > a,
.off-canvas-nav .handheld .dropdown-menu > li > a {
  color: rgba(255,255,255,0.82) !important;
}

/* Hover / focus in dark mode */
.off-canvas-navigation:not(.light) ul li a:hover,
.off-canvas-navigation:not(.light) ul li a:focus,
.off-canvas-navigation:not(.light) .yamm .yamm-content li a:hover,
.off-canvas-navigation:not(.light) .yamm .yamm-content li a:focus,
.off-canvas-nav .handheld ul li a:hover,
.off-canvas-nav .handheld ul li a:focus,
.off-canvas-nav .handheld .yamm .yamm-content li a:hover,
.off-canvas-nav .handheld .yamm .yamm-content li a:focus {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--e-global-color-accent, #f9b800) !important;
}

/* Indicator in dark mode */
.off-canvas-navigation:not(.light) ul li.menu-item-has-children > a::after,
.off-canvas-nav .handheld ul li.menu-item-has-children > a::after {
  color: rgba(255,255,255,0.92) !important;
  background: rgba(255,255,255,0.08);
}

.off-canvas-navigation:not(.light) ul li a:hover::after,
.off-canvas-navigation:not(.light) ul li a:focus::after,
.off-canvas-nav .handheld ul li a:hover::after,
.off-canvas-nav .handheld ul li a:focus::after {
  background: rgba(255,255,255,0.14);
  color: #fff !important;
}

/* Active/open parent in dark mode */
.off-canvas-navigation:not(.light) .menu-item-has-children.open > a,
.off-canvas-navigation:not(.light) .dropdown-submenu.open > a,
.off-canvas-nav .handheld .menu-item-has-children.open > a,
.off-canvas-nav .handheld .dropdown-submenu.open > a {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}

/* Better readability when Electro dark mode is active */
body.electro-dark .off-canvas-navigation:not(.light) ul li a,
body.electro-dark .off-canvas-nav .handheld ul li a {
  color: rgba(255,255,255,0.9) !important;
}

body.electro-dark .off-canvas-navigation:not(.light) .dropdown-menu > li > a,
body.electro-dark .off-canvas-nav .handheld .dropdown-menu > li > a {
  color: rgba(255,255,255,0.84) !important;
}

/* ---------- LIGHT PANEL ---------- */
.off-canvas-navigation.light {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
  border-right: 1px solid #e6ebf2 !important;
}

.off-canvas-navigation.light ul li a,
.off-canvas-navigation.light .yamm .yamm-content li a,
.off-canvas-navigation.light ul li.nav-title a {
  color: #334155 !important;
  border-bottom: 1px solid #e8edf3 !important;
}

.off-canvas-navigation.light .dropdown-menu {
  background: #f8fafc !important;
}

.off-canvas-navigation.light .dropdown-menu > li > a {
  color: #475569 !important;
}

/* Hover / focus in light mode */
.off-canvas-navigation.light ul li a:hover,
.off-canvas-navigation.light ul li a:focus,
.off-canvas-navigation.light .yamm .yamm-content li a:hover,
.off-canvas-navigation.light .yamm .yamm-content li a:focus,
.off-canvas-navigation.light ul li.nav-title a:hover,
.off-canvas-navigation.light ul li.nav-title a:focus {
  background: #eef4ff !important;
  color: #0f172a !important;
  box-shadow: inset 3px 0 0 var(--e-global-color-accent, #f9b800) !important;
}

/* Indicator in light mode */
.off-canvas-navigation.light ul li.menu-item-has-children > a::after {
  color: #475569 !important;
  background: #e9eef5;
}

.off-canvas-navigation.light ul li a:hover::after,
.off-canvas-navigation.light ul li a:focus::after {
  background: #dbe7fb;
  color: #0f172a !important;
}

/* Open parent in light mode */
.off-canvas-navigation.light .menu-item-has-children.open > a,
.off-canvas-navigation.light .dropdown-submenu.open > a {
  background: #f2f6fb !important;
  color: #0f172a !important;
}

/* Submenu separators softer */
.off-canvas-navigation .dropdown-menu li:last-child > a,
.off-canvas-nav .handheld .dropdown-menu li:last-child > a {
  border-bottom-width: 0 !important;
}

/* =========================================
   Dark mode off-canvas readability fix
   ========================================= */

/* Stronger text for submenu items in dark mode */
body.electro-dark .off-canvas-navigation:not(.light) .dropdown-menu > li > a,
body.electro-dark .off-canvas-nav .handheld .dropdown-menu > li > a,
body.dark .off-canvas-navigation:not(.light) .dropdown-menu > li > a,
body.dark .off-canvas-nav .handheld .dropdown-menu > li > a {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Even deeper submenu items */
body.electro-dark .off-canvas-navigation:not(.light) .dropdown-menu .dropdown-menu > li > a,
body.electro-dark .off-canvas-nav .handheld .dropdown-menu .dropdown-menu > li > a,
body.dark .off-canvas-navigation:not(.light) .dropdown-menu .dropdown-menu > li > a,
body.dark .off-canvas-nav .handheld .dropdown-menu .dropdown-menu > li > a {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Open parent row in dark mode */
body.electro-dark .off-canvas-navigation:not(.light) .menu-item-has-children.open > a,
body.electro-dark .off-canvas-navigation:not(.light) .dropdown-submenu.open > a,
body.electro-dark .off-canvas-nav .handheld .menu-item-has-children.open > a,
body.electro-dark .off-canvas-nav .handheld .dropdown-submenu.open > a,
body.dark .off-canvas-navigation:not(.light) .menu-item-has-children.open > a,
body.dark .off-canvas-navigation:not(.light) .dropdown-submenu.open > a,
body.dark .off-canvas-nav .handheld .menu-item-has-children.open > a,
body.dark .off-canvas-nav .handheld .dropdown-submenu.open > a {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

/* Hover/focus for dark mode */
body.electro-dark .off-canvas-navigation:not(.light) ul li > a:hover,
body.electro-dark .off-canvas-navigation:not(.light) ul li > a:focus,
body.electro-dark .off-canvas-nav .handheld ul li > a:hover,
body.electro-dark .off-canvas-nav .handheld ul li > a:focus,
body.dark .off-canvas-navigation:not(.light) ul li > a:hover,
body.dark .off-canvas-navigation:not(.light) ul li > a:focus,
body.dark .off-canvas-nav .handheld ul li > a:hover,
body.dark .off-canvas-nav .handheld ul li > a:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Cleaner separators in dark mode */
body.electro-dark .off-canvas-navigation:not(.light) ul li > a,
body.electro-dark .off-canvas-nav .handheld ul li > a,
body.dark .off-canvas-navigation:not(.light) ul li > a,
body.dark .off-canvas-nav .handheld ul li > a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Plus/minus button in dark mode */
body.electro-dark .off-canvas-navigation:not(.light) ul li.menu-item-has-children > a::after,
body.electro-dark .off-canvas-nav .handheld ul li.menu-item-has-children > a::after,
body.dark .off-canvas-navigation:not(.light) ul li.menu-item-has-children > a::after,
body.dark .off-canvas-nav .handheld ul li.menu-item-has-children > a::after {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Slightly brighter submenu background blocks */
body.electro-dark .off-canvas-navigation:not(.light) .dropdown-menu,
body.electro-dark .off-canvas-nav .handheld .dropdown-menu,
body.dark .off-canvas-navigation:not(.light) .dropdown-menu,
body.dark .off-canvas-nav .handheld .dropdown-menu {
  background: rgba(255, 255, 255, 0.035) !important;
}

/* Optional: active/current item stronger */
body.electro-dark .off-canvas-navigation:not(.light) .current-menu-item > a,
body.electro-dark .off-canvas-nav .handheld .current-menu-item > a,
body.dark .off-canvas-navigation:not(.light) .current-menu-item > a,
body.dark .off-canvas-nav .handheld .current-menu-item > a {
  color: #ffffff !important;
  font-weight: 600;
}

/* Small readability patch for submenu text */
.off-canvas-navigation.light .dropdown-menu > li > a,
.off-canvas-nav .handheld .dropdown-menu > li > a {
  color: #475569 !important;
}

.off-canvas-navigation.light .dropdown-menu .dropdown-menu > li > a,
.off-canvas-nav .handheld .dropdown-menu .dropdown-menu > li > a {
  color: #526173 !important;
}

.off-canvas-navigation.light .dropdown-menu > li > a:hover,
.off-canvas-navigation.light .dropdown-menu > li > a:focus,
.off-canvas-nav .handheld .dropdown-menu > li > a:hover,
.off-canvas-nav .handheld .dropdown-menu > li > a:focus {
  color: #0f172a !important;
  background: #eaf2ff !important;
}

/* Fix second-level parent row inside off-canvas menu */
.off-canvas-navigation.light .dropdown-menu > li.menu-item-has-children.open > a,
.off-canvas-nav .handheld .dropdown-menu > li.menu-item-has-children.open > a,
.off-canvas-navigation.light .dropdown-menu > li.dropdown-submenu.open > a,
.off-canvas-nav .handheld .dropdown-menu > li.dropdown-submenu.open > a {
  background: #e8eef7 !important;
  color: #1e293b !important;
  box-shadow: inset 3px 0 0 var(--e-global-color-accent, #f9b800) !important;
}

/* Make second-level submenu parent text stronger */
.off-canvas-navigation.light .dropdown-menu > li.menu-item-has-children > a,
.off-canvas-nav .handheld .dropdown-menu > li.menu-item-has-children > a,
.off-canvas-navigation.light .dropdown-menu > li.dropdown-submenu > a,
.off-canvas-nav .handheld .dropdown-menu > li.dropdown-submenu > a {
  color: #334155 !important;
  font-weight: 500 !important;
}

/* Stronger icon on second-level parent rows */
.off-canvas-navigation.light .dropdown-menu > li.menu-item-has-children > a::after,
.off-canvas-nav .handheld .dropdown-menu > li.menu-item-has-children > a::after,
.off-canvas-navigation.light .dropdown-menu > li.dropdown-submenu > a::after,
.off-canvas-nav .handheld .dropdown-menu > li.dropdown-submenu > a::after {
  color: #334155 !important;
  background: #dfe7f2 !important;
  border: 1px solid #d2dbe7 !important;
}

/* Hover for second-level parent rows */
.off-canvas-navigation.light .dropdown-menu > li.menu-item-has-children > a:hover,
.off-canvas-nav .handheld .dropdown-menu > li.menu-item-has-children > a:hover,
.off-canvas-navigation.light .dropdown-menu > li.dropdown-submenu > a:hover,
.off-canvas-nav .handheld .dropdown-menu > li.dropdown-submenu > a:hover {
  background: #edf3fb !important;
  color: #0f172a !important;
}