/* =========================================================
   DALA ELECTRO — Pinout & Replacement Finder styles
   ========================================================= */

.pin-search-row{
  display:flex; align-items:center; gap:10px; background:var(--white);
  border:1.5px solid var(--slate-200); border-radius:50px; padding:10px 18px;
  margin-bottom:6px; box-shadow:var(--shadow-card);
}
.pin-search-row i{ color:var(--blue-500); }
.pin-search-row .rc-input{ border:none; background:transparent; flex:1; padding:4px; }
.pin-search-row .rc-input:focus{ border:none; }

.pin-count{ font-size:12.5px; color:var(--slate-600); margin:0 4px 18px; }
.pin-empty{ font-size:13.5px; color:var(--slate-600); text-align:center; padding:30px 0; }
.pin-empty a{ color:var(--blue-600); font-weight:700; }

.pin-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }

.pin-card{
  background:var(--white); border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  padding:20px; box-shadow:var(--shadow-card);
}
.pin-card-head h4{ margin:0 0 4px; font-size:15.5px; color:var(--navy-900); font-weight:800; }
.pin-type-badge{
  font-size:11.5px; font-weight:700; color:var(--blue-600); background:var(--slate-100);
  border-radius:50px; padding:3px 10px; display:inline-block;
}

.pin-diagram{
  background:linear-gradient(180deg,var(--slate-50),var(--slate-100));
  border:1px dashed var(--slate-200); border-radius:var(--radius-md);
  padding:16px 10px 10px; margin:14px 0 4px; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.pin-body{
  display:flex; align-items:center; gap:8px; background:var(--navy-950); color:#fff;
  border-radius:8px; padding:8px 16px; font-size:12.5px; font-weight:700;
}
.pin-body i{ color:var(--amber-300); }
.pin-legs{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.pin-leg{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.pin-num{
  width:22px; height:22px; border-radius:50%; background:var(--blue-600); color:#fff;
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.pin-line{ width:2px; height:14px; background:var(--slate-300,#c7d4ea); }
.pin-name{ font-size:12px; font-weight:700; color:var(--navy-900); font-family:var(--font-mono); direction:ltr; }

.pin-view-note{ font-size:11.5px; color:var(--slate-600); text-align:center; margin:0 0 4px; }
.pin-view-note i{ color:var(--amber-400); margin-inline-end:4px; }

.pin-section{ margin-top:14px; }
.pin-section h5{
  font-size:13px; color:var(--navy-900); font-weight:800; margin:0 0 8px;
  display:flex; align-items:center; gap:6px;
}
.pin-section h5 i{ color:var(--blue-500); }

.pin-repl-row{
  display:flex; flex-direction:column; gap:2px; background:var(--slate-50);
  border-radius:var(--radius-sm); padding:8px 12px; margin-bottom:6px;
}
.pin-repl-name{ font-size:13px; font-weight:700; color:var(--navy-900); font-family:var(--font-mono); direction:ltr; text-align:right; }
.pin-repl-note{ font-size:12px; color:var(--slate-600); }

.pin-notes{ margin:0; padding-inline-start:18px; }
.pin-notes li{ font-size:12.5px; color:var(--slate-600); line-height:1.8; margin-bottom:4px; }

@media (max-width:640px){
  .pin-grid{ grid-template-columns:1fr; }
}