/* ============================================
   THE VISITOR'S GUIDE - Feature SVG Fix
   ============================================ */

/* Ensure SVGs are visible */
.feature-card {
  position: relative !important;
  min-height: 200px;
  padding: 3rem !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 107, 107, 0.1);
}

[data-theme="dark"] .feature-card {
  background: rgba(20, 20, 20, 0.95) !important;
  border: 1px solid rgba(255, 183, 0, 0.1);
}

.feature-bg-icon {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

/* Force SVG elements to be visible */
.feature-bg-icon * {
  stroke: rgba(255, 107, 107, 0.2) !important;
  stroke-width: 1px !important;
  fill: none !important;
  vector-effect: non-scaling-stroke;
}

.feature-bg-icon path {
  stroke: rgba(255, 107, 107, 0.25) !important;
  stroke-width: 0.8px !important;
}

.feature-bg-icon circle {
  stroke: rgba(255, 183, 0, 0.2) !important;
  stroke-width: 0.8px !important;
}

.feature-bg-icon rect {
  stroke: rgba(255, 107, 107, 0.15) !important;
  stroke-width: 0.8px !important;
}

.feature-bg-icon ellipse {
  stroke: rgba(255, 183, 0, 0.15) !important;
  stroke-width: 0.8px !important;
}

/* Dark mode SVGs */
[data-theme="dark"] .feature-bg-icon * {
  stroke: rgba(255, 183, 0, 0.25) !important;
}

[data-theme="dark"] .feature-bg-icon path {
  stroke: rgba(255, 183, 0, 0.3) !important;
}

[data-theme="dark"] .feature-bg-icon circle {
  stroke: rgba(255, 107, 107, 0.25) !important;
}

/* Ensure text is above SVG */
.feature-card h3,
.feature-card p {
  position: relative !important;
  z-index: 10 !important;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 255, 255, 0.9) 50%, 
    rgba(255, 255, 255, 0.85) 100%);
  padding: 0.5rem;
  border-radius: 4px;
}

[data-theme="dark"] .feature-card h3,
[data-theme="dark"] .feature-card p {
  background: linear-gradient(to bottom, 
    rgba(15, 15, 15, 0.95) 0%, 
    rgba(15, 15, 15, 0.9) 50%, 
    rgba(15, 15, 15, 0.85) 100%);
}