/* =========================================================
   DALA ELECTRO — Resistor Color Code Tool styles
   ========================================================= */

.rc-tool{
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:22px;
  border:1px solid var(--slate-200);
}

.rc-tabs{
  display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;
  border-bottom:1px solid var(--slate-200); padding-bottom:14px;
}
.rc-tab{
  border:none; background:var(--slate-100); color:var(--navy-900);
  font-family:inherit; font-weight:700; font-size:13.5px;
  padding:10px 16px; border-radius:50px; display:flex; align-items:center; gap:7px;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.rc-tab i{ color:var(--blue-500); }
.rc-tab:hover{ transform:translateY(-1px); }
.rc-tab.active{
  background:linear-gradient(135deg,var(--blue-600),var(--blue-400));
  color:#fff;
}
.rc-tab.active i{ color:#fff; }

.rc-panel{ display:none; animation:rcFade .25s ease; }
.rc-panel.active{ display:block; }
@keyframes rcFade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.rc-row{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.rc-row-wrap{ gap:10px; }
.rc-row label{ font-weight:700; font-size:13.5px; color:var(--navy-900); flex-shrink:0; }

.rc-select, .rc-input{
  font-family:inherit; font-size:13.5px; color:var(--slate-900);
  border:1.5px solid var(--slate-200); border-radius:var(--radius-sm);
  padding:9px 12px; background:var(--slate-50); outline:none;
  transition:border-color .18s ease;
}
.rc-select:focus, .rc-input:focus{ border-color:var(--blue-500); }
.rc-input{ width:150px; }

.rc-preview{
  display:flex; justify-content:center; align-items:center;
  background:linear-gradient(180deg,var(--slate-50),var(--slate-100));
  border-radius:var(--radius-md); padding:18px 10px; margin-bottom:18px;
  border:1px dashed var(--slate-200);
}
.rc-svg{ width:100%; max-width:420px; height:auto; }
.rc-preview-clickable .rc-band{ cursor:pointer; transition:opacity .15s ease; }
.rc-preview-clickable .rc-band:hover{ opacity:.75; }

.rc-selects{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px; margin-bottom:20px;
}
.rc-field{ display:flex; flex-direction:column; gap:6px; }
.rc-field span{ font-size:12px; font-weight:700; color:var(--slate-600); }
.rc-field .rc-select{ width:100%; }

.rc-result{
  text-align:center; background:var(--navy-950); border-radius:var(--radius-md);
  padding:20px 14px; color:#fff;
}
.rc-result-value{
  font-family:var(--font-mono); font-size:32px; font-weight:700;
  color:var(--amber-300); letter-spacing:.5px;
}
.rc-result-tol{ font-size:12.5px; color:#b9c8ea; margin-top:6px; }

.rc-bandlist{ margin-top:4px; }
.rc-bandchips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:12px; }
.rc-chip{
  display:flex; align-items:center; gap:7px; background:var(--slate-100);
  border-radius:50px; padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--navy-900);
}
.rc-chip i{ width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.15); }

.rc-palette{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  background:var(--slate-50); border-radius:var(--radius-md); padding:14px; margin-bottom:16px;
}
.rc-swatch{
  width:34px; height:34px; border-radius:50%; border:2px solid transparent;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.35); transition:transform .15s ease, border-color .15s ease;
}
.rc-swatch:hover{ transform:scale(1.1); }
.rc-swatch.active{ border-color:var(--amber-400); transform:scale(1.12); }

.rc-hint{ font-size:12.5px; color:var(--slate-600); text-align:center; margin:14px 0 0; }
.rc-hint i{ color:var(--amber-400); margin-inline-end:5px; }

@media (max-width:640px){
  .rc-tool{ padding:16px; }
  .rc-input{ width:100%; }
  .rc-row-wrap .rc-select, .rc-row-wrap .rc-input{ flex:1 1 140px; }
  .rc-result-value{ font-size:26px; }
}

/* ---- series / parallel resistance tool ---- */
.sp-diagram{
  display:flex; justify-content:center; align-items:center; overflow-x:auto;
  background:linear-gradient(180deg,var(--slate-50),var(--slate-100));
  border-radius:var(--radius-md); padding:18px 10px; margin-bottom:18px;
  border:1px dashed var(--slate-200);
}
.sp-svg{ width:100%; max-width:560px; height:auto; }

.sp-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.sp-row{
  display:flex; align-items:center; gap:10px;
  background:var(--slate-50); border:1px solid var(--slate-200);
  border-radius:var(--radius-sm); padding:8px 10px;
}
.sp-row-num{ font-weight:800; font-size:13px; color:var(--navy-900); width:32px; flex-shrink:0; }
.sp-row .sp-value{ flex:1; min-width:80px; width:auto; }
.sp-row .sp-unit{ flex-shrink:0; }
.sp-remove{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; border:none;
  background:var(--slate-200); color:var(--slate-600); font-family:inherit;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.sp-remove:hover{ background:#fde2e2; color:#c0392b; }

.sp-add{
  width:100%; border:1.5px dashed var(--blue-400); background:var(--slate-50);
  color:var(--blue-600); font-family:inherit; font-weight:700; font-size:13.5px;
  padding:12px; border-radius:var(--radius-sm); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s ease;
}
.sp-add:hover{ background:var(--slate-100); }

@media (max-width:640px){
  .sp-row{ flex-wrap:wrap; }
  .sp-row .sp-value{ min-width:100px; }
}

/* ---- promo card on homepage (links to the full page) ---- */
.rc-promo{
  background:linear-gradient(135deg,var(--navy-950),var(--navy-800));
  border-radius:var(--radius-lg); padding:26px 24px; margin-top:18px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.rc-promo-text h4{ color:#fff; margin:0 0 6px; font-size:16.5px; font-weight:800; }
.rc-promo-text p{ color:#b9c8ea; margin:0; font-size:13px; }
.rc-promo-link{
  flex-shrink:0; background:linear-gradient(135deg,var(--amber-400),var(--amber-300));
  color:var(--navy-950); font-weight:800; font-size:13.5px; padding:12px 22px;
  border-radius:50px; display:flex; align-items:center; gap:8px; transition:transform .18s ease;
}
.rc-promo-link:hover{ transform:translateY(-2px); }