/* LINK TEXT SECTION STYLING WITH PULSATING GLOW */
#link_text_section {
  background: #000 !important;
  padding: 16px 0 !important;
  /* Removed gold borders */
}

/* Enhanced specificity for pulse_title link styling */
#pulse_title .link-text-styling,
.link-text-styling {
  color: #ffd700 !important; /* Gold color */
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  letter-spacing: 1px !important;
  transition: all 0.3s ease !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 215, 0, 0.1) 100%) !important;
  /* Removed gold border */
  position: relative !important;
  
  /* Pulsating glow effect */
  animation: linkPulsateGlow 3s ease-in-out infinite !important;
  box-shadow: 
    0 0 5px rgba(255, 215, 0, 0.3),
    0 0 10px rgba(255, 215, 0, 0.2),
    0 0 15px rgba(255, 215, 0, 0.1) !important;
}

/* Pulsating glow keyframes */
@keyframes linkPulsateGlow {
  0% {
    box-shadow: 
      0 0 5px rgba(255, 215, 0, 0.3),
      0 0 10px rgba(255, 215, 0, 0.2),
      0 0 15px rgba(255, 215, 0, 0.1);
    /* Removed border-color animation */
  }
  50% {
    box-shadow: 
      0 0 10px rgba(255, 215, 0, 0.5),
      0 0 20px rgba(255, 215, 0, 0.4),
      0 0 30px rgba(255, 215, 0, 0.3),
      0 0 40px rgba(255, 215, 0, 0.2);
    /* Removed border-color animation */
  }
  100% {
    box-shadow: 
      0 0 5px rgba(255, 215, 0, 0.3),
      0 0 10px rgba(255, 215, 0, 0.2),
      0 0 15px rgba(255, 215, 0, 0.1);
    /* Removed border-color animation */
  }
}

/* Enhanced hover effects with higher specificity */
#pulse_title .link-text-styling:hover,
.link-text-styling:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.25) 100%) !important;
  /* Removed border-color on hover */
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  
  /* Enhanced glow on hover - stops animation and applies stronger glow */
  animation: none !important;
  box-shadow: 
    0 4px 12px rgba(255, 215, 0, 0.4),
    0 0 15px rgba(255, 215, 0, 0.6),
    0 0 25px rgba(255, 215, 0, 0.4),
    0 0 35px rgba(255, 215, 0, 0.3) !important;
}

#pulse_title .link-text-styling:active,
.link-text-styling:active {
  transform: translateY(0) !important;
  animation: none !important;
  box-shadow: 
    0 2px 6px rgba(255, 215, 0, 0.5),
    0 0 10px rgba(255, 215, 0, 0.4) !important;
}

/* Mobile responsive styling for link text */
@media (max-width: 768px) {
  #pulse_title .link-text-styling,
  .link-text-styling {
    font-size: 1rem !important;
    padding: 6px 12px !important;
    letter-spacing: 0.5px !important;
  }
  
  /* Slightly reduced glow effect on mobile for performance */
  @keyframes linkPulsateGlow {
    0% {
      box-shadow: 
        0 0 3px rgba(255, 215, 0, 0.3),
        0 0 8px rgba(255, 215, 0, 0.2);
      /* Removed border-color animation */
    }
    50% {
      box-shadow: 
        0 0 8px rgba(255, 215, 0, 0.5),
        0 0 15px rgba(255, 215, 0, 0.4),
        0 0 25px rgba(255, 215, 0, 0.2);
      /* Removed border-color animation */
    }
    100% {
      box-shadow: 
        0 0 3px rgba(255, 215, 0, 0.3),
        0 0 8px rgba(255, 215, 0, 0.2);
      /* Removed border-color animation */
    }
  }
}

@media (max-width: 480px) {
  #pulse_title .link-text-styling,
  .link-text-styling {
    font-size: 0.9rem !important;
    padding: 5px 10px !important;
    letter-spacing: 0.3px !important;
  }
  
  #link_text_section {
    padding: 12px 0 !important;
  }
  
  /* Further reduced glow effect on very small screens */
  @keyframes linkPulsateGlow {
    0% {
      box-shadow: 
        0 0 2px rgba(255, 215, 0, 0.3),
        0 0 6px rgba(255, 215, 0, 0.2);
      /* Removed border-color animation */
    }
    50% {
      box-shadow: 
        0 0 6px rgba(255, 215, 0, 0.4),
        0 0 12px rgba(255, 215, 0, 0.3);
      /* Removed border-color animation */
    }
    100% {
      box-shadow: 
        0 0 2px rgba(255, 215, 0, 0.3),
        0 0 6px rgba(255, 215, 0, 0.2);
      /* Removed border-color animation */
    }
  }
}

/* ==================================================
   FIXED TOPBAR STYLING
   ================================================== */

/* Make the topbar fixed at the top of the page */
#topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1030 !important; /* Higher than Bootstrap modals (1050) but below most fixed elements */
  background-color: #000000 !important;
  border-bottom: 2px solid #333 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  margin: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Ensure topbar content doesn't overflow */
#topbar .container {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Adjust body padding to account for fixed topbar */
body {
  padding-top: 120px !important; /* Adjust this value based on topbar height */
}

/* Mobile adjustments for fixed topbar - MODERATE SPACING REDUCTION */
@media (max-width: 768px) {
  body {
    padding-top: 90px !important; /* Reduced from 140px to 90px (about 35% reduction) */
  }
  
  #topbar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  
  #topbar .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* Make table text smaller on mobile to fit better */
  #topbar table h4 {
    font-size: 1.1rem !important;
  }
}

@media (max-width: 480px) {
  body {
    padding-top: 100px !important; /* Reduced from 160px to 100px (about 37% reduction) */
  }
  
  #topbar table h4 {
    font-size: 1rem !important;
  }
}

/* Ensure topbar tables look good when fixed */
#topbar table {
  margin-bottom: 0 !important;
}

#topbar .table {
  background-color: transparent !important;
}

#topbar .table td {
  border: none !important;
  padding: 4px 8px !important;
  vertical-align: middle !important;
}

/* ==================================================
   BANNER SECTION - COMPLETE BACKGROUND FIX
   ================================================== */

/* CRITICAL: Fix white background issue around banner */
#banner_section {
  background: #000000 !important; /* Force black background */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Force black background on all banner elements */
#banner_section,
#banner_section .container-fluid,
#banner_section .container,
#banner_section .row,
#banner_section .col,
#banner_section #smp_banner {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* Override any Bootstrap classes that might add white background */
#banner_section .style2,
#banner_section .style1,
#banner_section .bg-dark {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* Reset container to normal Bootstrap behavior with black background */
#banner_section .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 15px !important;
  margin: 0 auto !important;
  background: #000000 !important;
}

/* Reset row to normal Bootstrap behavior with black background */
#banner_section .row {
  margin: 0 -15px !important;
  width: calc(100% + 30px) !important;
  background: #000000 !important;
}

/* Reset column styling with black background */
#banner_section .col {
  padding: 0 15px !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  background: #000000 !important;
}

/* Banner content container styling */
#smp_banner {
  background: #000000 !important;
  overflow: hidden !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Banner image styling - make sure it doesn't add white space */
#smp_banner img {
  background: transparent !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border: none !important;
  outline: none !important;
}

/* Mobile-specific banner fixes */
@media (max-width: 768px) {
  #banner_section {
    background: #000000 !important;
    padding: 0 !important;
  }
  
  #banner_section .container {
    background: #000000 !important;
    padding: 0 10px !important;
  }
  
  #banner_section .row {
    background: #000000 !important;
    margin: 0 -10px !important;
    width: calc(100% + 20px) !important;
  }
  
  #banner_section .col {
    background: #000000 !important;
    padding: 0 10px !important;
  }
  
  #smp_banner {
    background: #000000 !important;
  }
  
  #smp_banner img {
    background: transparent !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 200px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 480px) {
  #banner_section {
    background: #000000 !important;
    padding: 0 !important;
  }
  
  #banner_section .container {
    background: #000000 !important;
    padding: 0 5px !important;
  }
  
  #banner_section .row {
    background: #000000 !important;
    margin: 0 -5px !important;
    width: calc(100% + 10px) !important;
  }
  
  #banner_section .col {
    background: #000000 !important;
    padding: 0 5px !important;
  }
  
  #smp_banner {
    background: #000000 !important;
  }
  
  #smp_banner img {
    background: transparent !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 150px !important;
    object-fit: contain !important;
  }
}

/* ==================================================
   GOLD AND SILVER CARD SPACING FIX FOR LARGE DISPLAYS
   ================================================== */

/* Reduce gap between gold and silver cards on large screens */
#spotmetalprice .spot-price-hero .row.g-4 {
  --bs-gutter-x: 1.5rem !important; /* Default Bootstrap g-4 uses 1.5rem */
  --bs-gutter-y: 1.5rem !important;
}

/* For large screens (lg and above), reduce the gap significantly */
@media (min-width: 992px) {
  #spotmetalprice .spot-price-hero .row.g-4 {
    --bs-gutter-x: 0.75rem !important; /* Reduce horizontal gap from 1.5rem to 0.75rem */
    --bs-gutter-y: 1.5rem !important; /* Keep vertical gap for mobile stacking */
  }
}

/* For extra large screens, reduce even more */
@media (min-width: 1200px) {
  #spotmetalprice .spot-price-hero .row.g-4 {
    --bs-gutter-x: 0.5rem !important; /* Further reduce horizontal gap to 0.5rem */
    --bs-gutter-y: 1.5rem !important;
  }
}

/* For XXL screens, make cards even closer */
@media (min-width: 1400px) {
  #spotmetalprice .spot-price-hero .row.g-4 {
    --bs-gutter-x: 0.25rem !important; /* Minimal gap on very large screens */
    --bs-gutter-y: 1.5rem !important;
  }
}

/* Optional: Add max-width to the card container to prevent cards from becoming too wide on very large screens */
@media (min-width: 1400px) {
  #spotmetalprice .spot-price-hero {
    max-width: 1200px !important;
    margin: 0 auto !important;
  }
}

/* ==================================================
   DATE DISPLAY SPACING FIX
   ================================================== */

/* Remove top margin from date display to eliminate space above it */
#date_display {
  margin-top: 0 !important;
}

/* Additional safety measures to prevent any white backgrounds */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  background: #000000 !important;
}

/* Ensure no elements break out of their containers or add white backgrounds */
* {
  box-sizing: border-box !important;
}

.container-fluid {
  overflow: hidden !important;
}

/* Force all sections to have black background if not specified */
section {
  background: inherit !important;
}

/* Special override for any Bootstrap utility classes that might interfere */
.bg-white {
  background: #000000 !important;
}

.bg-light {
  background: #000000 !important;
}