/* =========================================================
   DALA ELECTRO — LED Resistor Calculator styles
   ========================================================= */

.led-swatch{
  width:18px; height:18px; border-radius:50%; display:inline-block;
  border:1.5px solid rgba(0,0,0,.15); margin-inline-end:8px; vertical-align:-3px;
  box-shadow:0 0 6px -1px rgba(0,0,0,.25);
}

.led-config{
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
  background:var(--slate-50); border:1px solid var(--slate-200);
  border-radius:var(--radius-md); padding:16px;
}
.led-config-icon{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #fff, var(--led-color,#e0433a) 70%);
  box-shadow:0 0 16px 2px var(--led-color,#e0433a);
  border:2px solid rgba(0,0,0,.1);
}
.led-config-text{ font-size:12.5px; color:var(--slate-600); }
.led-config-text b{ color:var(--navy-900); }

.led-count-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.led-count-row label{ font-weight:700; font-size:13px; color:var(--navy-900); flex:1; }
.led-stepper{ display:flex; align-items:center; gap:8px; }
.led-stepper button{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--slate-200);
  background:#fff; color:var(--blue-600); font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease;
}
.led-stepper button:hover{ background:var(--slate-100); }
.led-stepper span{ min-width:26px; text-align:center; font-weight:800; font-size:14px; color:var(--navy-900); font-family:var(--font-mono); }

.led-result-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:14px;
}
.led-result-card{
  background:var(--slate-50); border:1px solid var(--slate-200); border-radius:var(--radius-sm);
  padding:12px 14px; text-align:center;
}
.led-result-card span{ display:block; font-size:11.5px; color:var(--slate-600); margin-bottom:4px; }
.led-result-card b{ font-family:var(--font-mono); font-size:15px; color:var(--navy-900); }

.led-warning{
  background:#fdecea; border:1px solid #f5c2bd; color:#a8332a;
  border-radius:var(--radius-sm); padding:10px 14px; font-size:12.5px; margin-top:14px;
  display:flex; align-items:center; gap:8px;
}

@media (max-width:640px){
  .led-config{ flex-direction:column; align-items:flex-start; }
}