/*
 * GAMECAMS.CO.UK - PREMIER THEME STYLESHEET
 * Designed for High Conversion, Modern UX & Optimal SEO
 */

/* =========================================================
   1. GLOBAL TYPOGRAPHY & BRAND ACCENTS
   ========================================================= */
:root {
  --gc-forest: #1b4332;
  --gc-forest-dark: #0f281e;
  --gc-forest-light: #2d6a4f;
  --gc-slate: #0f172a;
  --gc-amber: #d97706;
  --gc-blue: #0284c7;
  --gc-emerald: #059669;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  color: #1e293b;
  background-color: #ffffff;
}

a {
  transition: color 0.18s ease, opacity 0.18s ease;
}

/* =========================================================
   2. HEADER & TOP REASSURANCE BAR
   ========================================================= */
#header .header-nav {
  background-color: #0f172a !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}

#header .header-nav a,
#header .header-nav span,
#header .header-nav p {
  color: #e2e8f0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}

#header .header-nav a:hover {
  color: #38bdf8 !important;
}

#header .header-logo .logo {
  max-height: 65px !important;
  width: auto !important;
}

/* =========================================================
   3. SUPER MEGA MENU (FULL WIDTH & CSS GRID)
   ========================================================= */
@media (min-width: 992px) {
  #amegamenu {
    position: relative !important;
    width: 100% !important;
    background: #ffffff !important;
    border-bottom: 2px solid #e2e8f0 !important;
  }
  
  #amegamenu .anav-top {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #amegamenu .anav-top > .amenu-item {
    position: static !important;
    flex: 0 0 auto !important;
  }

  #amegamenu .anav-top > .amenu-item > .amenu-link {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    padding: 14px 15px !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.18s ease !important;
  }

  #amegamenu .anav-top > .amenu-item:hover > .amenu-link,
  #amegamenu .anav-top > .amenu-item.hover > .amenu-link {
    color: #1b4332 !important;
    background-color: #f8fafc !important;
  }

  #amegamenu .anav-top > .amenu-item > .amenu-link sup {
    color: #ffffff !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    margin-left: 6px !important;
    top: -8px !important;
    letter-spacing: 0.5px !important;
  }
  
  /* Menu item specific badge backgrounds */
  #amegamenu .anav-top > .amenu-item[data-id-menu="12"] > .amenu-link sup { background: #1b4332 !important; }
  #amegamenu .anav-top > .amenu-item[data-id-menu="13"] > .amenu-link sup { background: #0284c7 !important; }
  #amegamenu .anav-top > .amenu-item[data-id-menu="14"] > .amenu-link sup { background: #d97706 !important; }
  #amegamenu .anav-top > .amenu-item[data-id-menu="15"] > .amenu-link sup { background: #0f172a !important; }
  #amegamenu .anav-top > .amenu-item[data-id-menu="16"] > .amenu-link sup { background: #7c3aed !important; }
  #amegamenu .anav-top > .amenu-item[data-id-menu="18"] > .amenu-link sup { background: #059669 !important; }
  
  /* Full-width dropdown container */
  #amegamenu .anav-top .adropdown,
  #amegamenu .anav-top .amenu-item:hover .adropdown,
  #amegamenu .anav-top .amenu-item.hover .adropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  
  #amegamenu .anav-top .adropdown .dropdown-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid #1b4332 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #amegamenu .anav-top .adropdown .dropdown-content,
  #amegamenu .anav-top .adropdown .ahtml-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   4. HOMEPAGE REASSURANCE & HERO CARDS
   ========================================================= */
.store-features-wrapper > div > div:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
}

.featured-universes-banner a:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18) !important;
}

.promo-banner-middle a:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(27,67,50,0.5) !important;
}

/* =========================================================
   5. DYNAMIC PRODUCT TABS & MINIATURE CARDS
   ========================================================= */
.zhometab .nav-tabs {
  border-bottom: 2px solid #e2e8f0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 25px !important;
}

.zhometab .nav-tabs .nav-link {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  border: none !important;
  padding: 10px 18px !important;
  border-radius: 8px 8px 0 0 !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

.zhometab .nav-tabs .nav-link:hover {
  color: #1b4332 !important;
  background-color: #f8fafc !important;
}

.zhometab .nav-tabs .nav-link.active {
  color: #1b4332 !important;
  background: transparent !important;
  border-bottom: 3px solid #1b4332 !important;
}

/* Product miniature elevation */
.product-miniature {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  border-radius: 10px !important;
}

.product-miniature:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important;
}

.product-price {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* =========================================================
   6. VECTOR SVG STARS (NO CLIPPING, PERFECT RATINGS)
   ========================================================= */
.grade-stars .star-on,
.product-comments-list .star-on,
.comments-note .star-on,
.star.star_on {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center/contain !important;
}

.grade-stars .star-off,
.product-comments-list .star-off,
.comments-note .star-off,
.star.star_off {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cbd5e1'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center/contain !important;
}

/* =========================================================
   7. FOOTER STYLING & ACCORDIONS (MOBILE & DESKTOP)
   ========================================================= */
#footer {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

#footer .footer-bottom {
  background-color: #f1f5f9 !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 18px 0 !important;
}

.footer-links-list li a:hover {
  color: #1b4332 !important;
  padding-left: 4px;
}

/* Mobile Footer Accordions */
@media (max-width: 991px) {
  #footer {
    padding-top: 25px !important;
    padding-bottom: 50px !important;
  }
  
  .footer-left {
    margin-bottom: 25px !important;
    text-align: center !important;
  }
  
  .footer-menu .linklist {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
  }
  
  .footer-menu .toggle-linklist-title {
    margin: 0 !important;
    padding: 14px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    background: #ffffff !important;
  }
  
  .footer-menu .toggle-linklist-title::after {
    content: '\f107' !important; /* FontAwesome chevron down */
    font-family: 'FontAwesome' !important;
    font-size: 18px !important;
    color: #1b4332 !important;
    transition: transform 0.25s ease !important;
  }
  
  .footer-menu .toggle-linklist-title.active::after {
    transform: rotate(180deg) !important;
  }
  
  .footer-menu .linklist ul {
    padding: 10px 18px 16px 18px !important;
    border-top: 1px solid #f1f5f9 !important;
    background: #fafaf9 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  
  .footer-menu .linklist ul li {
    padding: 6px 0 !important;
    margin-bottom: 0 !important;
  }
  
  .footer-menu .linklist ul li a {
    font-size: 0.90rem !important;
    color: #475569 !important;
    text-decoration: none !important;
    display: block !important;
  }
}

/* =========================================================
   8. FAQ ACCORDION INTERACTIVITY
   ========================================================= */
.faq-question .faq-icon.rotate {
  transform: rotate(180deg) !important;
}

.faq-answer {
  display: none;
}

.faq-answer.active {
  display: block !important;
}

/* =========================================================
   9. PREVENT LAYOUT SHIFTS (CLS)
   ========================================================= */
.st-menu, .st-menu-right {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  height: 100% !important;
  z-index: 9999 !important;
  visibility: hidden !important;
  display: none !important;
}

.st-menu.st-menu-open {
  visibility: visible !important;
  display: block !important;
}


/* =========================================================
   CRO & PRODUCT PAGE HIGH-CONVERSION ENHANCEMENTS
   ========================================================= */
@keyframes pulseGlow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.product-buybox-reassurance {
  transition: all 0.2s ease;
}

.product-buybox-reassurance > div > div:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  transform: translateY(-1px);
}

.mobile-sticky-cart {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.product-social-proof {
  font-family: inherit;
}