/* ==== RP Options Calculator (refined) ==== */
#rp-optcalc{
  --rp-blue:#0b63f6; --rp-bg:#f7f9fc; --rp-text:#0f172a; --rp-muted:#475569;
  --rp-border:#e2e8f0; --rp-card:#ffffff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  color:var(--rp-text); background:var(--rp-bg);
  padding:22px; border:1px solid var(--rp-border); border-radius:16px;
  box-shadow:0 6px 22px rgba(15,23,42,.06),0 1px 2px rgba(0,0,0,.03);
  max-width:1100px; margin:0 auto 28px;
}
#rp-optcalc h2{font-size:1.35rem;font-weight:800;letter-spacing:.2px;margin:0 0 14px;color:var(--rp-blue)}

#rp-optcalc .rp-layout{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap:16px;
  align-items:start;
}

/* inputs column (unchanged) */
#rp-optcalc .rp-inputs .grid.cols{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}

/* >>> REPLACE this block <<< */
#rp-optcalc .rp-inputs .grid.cols-3{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

#rp-optcalc .rp-inputs,
#rp-optcalc .rp-results { min-width: 0; }

/* results sidebar (keep sticky, safer) */
#rp-optcalc .rp-results{
  position:sticky;
  top: calc(12px + var(--wp-admin-bar-offset, 0px));
  align-self:start;
  z-index:0;
}

body.admin-bar #rp-optcalc .rp-results{
  --wp-admin-bar-offset: 32px;
}

/* optional: disable sticky when the column stacks */
@media (max-width:820px){
  #rp-optcalc .rp-results{ position:static; top:auto; }
}


/* cards feel connected; lighter, cohesive shadow */
#rp-optcalc .card{
  background:linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid var(--rp-border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 4px 14px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.7);
}

#rp-optcalc .field{ display:flex; flex-direction:column }
#rp-optcalc .field label{ font-size:.9rem; color:var(--rp-muted); font-weight:600; margin-bottom:6px }
#rp-optcalc .field input, #rp-optcalc .field select{
  border:1px solid var(--rp-border); border-radius:10px; padding:10px 12px; background:#fff; font-size:.95rem;
  transition:border-color .15s ease, box-shadow .15s ease
}
#rp-optcalc .field input:focus, #rp-optcalc .field select:focus{
  outline:0; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(11,99,246,.18)
}
#rp-optcalc input[type=number]::-webkit-outer-spin-button,
#rp-optcalc input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#rp-optcalc input[type=number]{-moz-appearance:textfield}

#rp-optcalc .row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px }
#rp-optcalc .btn{
  border:1px solid transparent; border-radius:12px; padding:10px 16px; cursor:pointer; font-weight:700;
  background:linear-gradient(180deg,#0b63f6,#0950c6); color:#fff; box-shadow:0 6px 14px rgba(11,99,246,.18)
}
#rp-optcalc .btn.secondary{ background:#fff; color:var(--rp-text); border-color:var(--rp-border); box-shadow:0 2px 6px rgba(0,0,0,.04) }
#rp-optcalc .hint{ font-size:.86rem; color:#64748b; margin-top:6px }
#rp-optcalc #rp-msg{ color:#b91c1c }  /* validation line */


#rp-optcalc .results{
  display:grid; grid-template-columns:repeat(2, minmax(170px, 1fr)); gap:12px;
}
@media (min-width:1160px){
  #rp-optcalc .results{ grid-template-columns:repeat(2, minmax(200px,1fr)); }
}
#rp-optcalc .metric{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid var(--rp-border);
  border-radius:12px; padding:12px;
}
#rp-optcalc .metric b{ display:block; font-size:.8rem; color:#64748b; margin-bottom:6px }
#rp-optcalc .metric .val{ font-size:1.2rem; font-weight:800; letter-spacing:.1px; color:var(--rp-blue) }

/* payoff */
#rp-optcalc .payoff-card{ margin-top:18px }
#rp-optcalc canvas{
  display:block; width:100%; height:280px;
  background:#fff; border:1px solid var(--rp-border); border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}

/* responsive */
@media (max-width:1024px){
  #rp-optcalc .rp-layout{ grid-template-columns:1fr }
  #rp-optcalc .rp-results{ position:static; top:auto }
}
@media (max-width:900px){
  #rp-optcalc .rp-inputs .grid.cols-3{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:640px){
  #rp-optcalc .rp-inputs .grid.cols{ grid-template-columns:1fr }
  #rp-optcalc .rp-inputs .grid.cols-3{ grid-template-columns:1fr }
  #rp-optcalc canvas{ height:240px }
}