/* Scope all rules under the container so nothing leaks */
#data-mirage-container, 
#data-mirage-container * { box-sizing: border-box; }

#data-mirage-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  padding: 20px;
}

#data-mirage-container .container {
  max-width: 1200px;
  margin: 0 auto;
}

#data-mirage-container .card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
  padding: 40px;
  margin-bottom: 20px;
}

#data-mirage-container h1 {
  color: #2D0064;
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-align: center;
}

#data-mirage-container h2 {
  color: #2D0064;
  font-size: 2rem;
  margin-bottom: 15px;
}

#data-mirage-container h3 {
  color: #2D0064;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

#data-mirage-container .description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: center;
}

#data-mirage-container .info-box {
  background: #e3f2fd;
  border-left: 4px solid #2196F3;
  padding: 15px;
  margin: 20px 0;
  border-radius: 4px;
}

#data-mirage-container .info-box p { margin: 5px 0; font-size: .9rem; }

#data-mirage-container .form-group { margin-bottom: 20px; }
#data-mirage-container label { display:block; margin-bottom:8px; font-weight:600; color:#333; }

#data-mirage-container input[type="number"],
#data-mirage-container input[type="text"],
#data-mirage-container input[type="email"],
#data-mirage-container select{
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color .3s;
}

#data-mirage-container input:focus { outline: none; border-color: #2D0064; }
#data-mirage-container input::placeholder { color: #999; }

#data-mirage-container .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

#data-mirage-container .btn {
  padding: 15px 30px;
  font-size: 1.1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all .3s;
  font-weight: 600;
}

#data-mirage-container .btn-primary { background:#2D0064; color:#fff; }
#data-mirage-container .btn-primary:hover {
  background:#1a003a; transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(45,0,100,.3);
}

#data-mirage-container .btn-secondary {
  background: #fff; color:#2D0064; border:2px solid #2D0064;
}
#data-mirage-container .btn-secondary:hover { background:#f5f5f5; }
#data-mirage-container .btn:disabled { opacity:.5; cursor:not-allowed; }

#data-mirage-container .btn-group { display:flex; gap:15px; margin-top:30px; }
#data-mirage-container .btn-group .btn { flex:1; }

#data-mirage-container .progress-dots {
  display:flex; justify-content:center; gap:10px; margin-top:50px;
}
#data-mirage-container .dot { width:12px; height:12px; border-radius:50%; background:#ddd; transition: all .3s; }
#data-mirage-container .dot.active { background:#2D0064; width:30px; border-radius:6px; }
#data-mirage-container .dot.completed { background:#9c27b0; }

#data-mirage-container .hidden { display:none !important; }

#data-mirage-container .metric-card {
  background:#fff; border:2px solid #2D0064; border-radius:8px; padding:20px; text-align:center;
}

#data-mirage-container .metric-label { font-size:.9rem; color:#666; margin-bottom:10px; }
#data-mirage-container .metric-value { font-size:2.5rem; font-weight:700; color:#2D0064; }
#data-mirage-container .metric-value.waste { color:#d32f2f; }
#data-mirage-container .metric-value.teal  { color:#17B5A3; }

#data-mirage-container .metrics-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin:30px 0;
}

#data-mirage-container .slider-container { margin:25px 0; }
#data-mirage-container .slider-header { display:flex; justify-content:space-between; margin-bottom:10px; }
#data-mirage-container .slider-value { font-size:1.3rem; font-weight:700; color:#2D0064; }

#data-mirage-container input[type="range"] {
  width:100%; height:8px; border-radius:5px; background:#ddd; outline:none; -webkit-appearance:none;
}
#data-mirage-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#2D0064; cursor:pointer;
}
#data-mirage-container input[type="range"]::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%; background:#2D0064; cursor:pointer; border:none;
}

#data-mirage-container .validation-message {
  padding:15px; border-radius:6px; margin:20px 0; font-weight:600;
}
#data-mirage-container .validation-message.success { background:#d4edda; border:2px solid #28a745; color:#155724; }
#data-mirage-container .validation-message.error   { background:#f8d7da; border:2px solid #dc3545; color:#721c24; }

#data-mirage-container .chart-container { position:relative; height:400px; margin:20px 0; }
#data-mirage-container .chart-placeholder {
  height:400px; display:flex; align-items:center; justify-content:center; background:#f5f5f5;
  border-radius:8px; color:#999; text-align:center; padding:40px;
}

#data-mirage-container .breakdown-item { display:flex; justify-content:space-between; padding:15px; margin:10px 0; border-radius:6px; }
#data-mirage-container .breakdown-item.red    { background:#ffebee; }
#data-mirage-container .breakdown-item.orange { background:#fff3e0; }
#data-mirage-container .breakdown-value { font-weight:700; }

#data-mirage-container .cta-section {
  background: linear-gradient(135deg, #e1bee7 0%, #b2dfdb 100%);
  padding:40px; border-radius:12px; margin:30px 0; text-align:center;
}

#data-mirage-container .sticky-cta {
  position:sticky; bottom:0; background:#fff; padding:15px 0;
  margin:20px -40px -40px -40px; border-top:2px solid #e5e7eb; z-index:100;
}
#data-mirage-container .sticky-cta .btn { margin:0 40px; }

@media (max-width: 768px) {
  #data-mirage-container .grid-2 { grid-template-columns:1fr;}
  #data-mirage-container .metrics-grid { grid-template-columns:1fr; }
  #data-mirage-container h1 { font-size:1.8rem; }
  #data-mirage-container .card { padding:25px; }
  #data-mirage-container .sticky-cta .btn { margin:0 25px; }
}


/* Tablet (≤1024px): allow wrapping and keep two-per-row feel */
@media (max-width: 1024px) {
  #data-mirage-container .btn-group {
    flex-wrap: wrap;
    gap: 12px; /* slightly tighter gap on tablet */
  }
  #data-mirage-container .btn-group .btn {
    flex: 1 1 calc(50% - 12px);
  }

  /* Nudge sticky CTA spacing a bit on tablet */
  #data-mirage-container .sticky-cta .btn {
    flex: 1 1 auto;
    margin: 8px 12px;
  }
}

/* Mobile (≤768px): stack buttons vertically */
@media (max-width: 768px) {
  /* You already have some rules at this breakpoint; these only add/override for buttons */
  #data-mirage-container .btn-group {
    flex-direction: column;   /* << requested behavior */
    flex-wrap: nowrap;
    gap: 10px;
  }
  #data-mirage-container .btn-group .btn {
    flex: 1 1 auto;
    width: 100%;              /* full-width buttons on mobile */
	line-height: normal;
  }

  /* Make sticky CTA buttons full-width and neatly stacked */
  #data-mirage-container .sticky-cta {
    padding: 15px;
    margin: 20px -25px -25px -25px; /* align with your existing mobile card padding */
  }
  #data-mirage-container .sticky-cta .btn {
    display: block;
    width: 100%;
    margin: 8px 0;
  }
}