/* Vasectomy reversal page styles.
   Success-rate estimator. The card chrome (quiz-card, quiz-top, quiz-opt,
   quiz-cta) is shared with the male infertility quiz in
   page-male-infertility.css; only the estimator-specific parts live here. */

.est-body{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.est-field{border:0;margin:0 0 22px;padding:0;min-width:0}
.est-field:last-child{margin-bottom:0}
.est-label{display:block;margin:0 0 12px;padding:0;font-family:var(--font-display);font-size:20px;line-height:1.3;color:var(--c-text)}
.est-label strong{color:var(--qc-brown);white-space:nowrap}
.est-body .quiz-opts{grid-template-columns:repeat(3,1fr)}
.est-body .est-opts-2{grid-template-columns:repeat(2,1fr)}

/* Range slider */
.est-range{width:100%;height:6px;margin:6px 0 0;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--qc-brown) var(--fill,20%),var(--c-line) var(--fill,20%));border-radius:3px;outline:none;cursor:pointer}
.est-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--qc-brown);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.est-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--qc-brown);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.est-range:focus-visible{outline:2px solid var(--qc-brown);outline-offset:6px}
.est-scale{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--c-text-muted)}

/* Results */
.est-results{background:var(--qc-cream);border:1px solid var(--c-line);border-radius:10px;padding:22px 24px}
.est-meter{margin-bottom:18px}
.est-meter-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:15px;color:var(--c-text-soft)}
.est-meter-head strong{font-family:var(--font-display);font-size:30px;line-height:1;color:var(--qc-dark)}
.est-bar{height:10px;border-radius:5px;background:rgba(0,0,0,.08);overflow:hidden}
.est-bar span{display:block;height:100%;border-radius:5px;background:var(--qc-brown);transition:width .35s ease}
.est-bar--preg span{background:var(--qc-tan)}
.est-note{margin:4px 0 20px;font-size:15px;line-height:1.65;color:var(--c-text-soft)}
.est-results .quiz-result-actions{margin-bottom:0}

@media (max-width:860px){.est-body{grid-template-columns:1fr;gap:28px}}
@media (max-width:700px){.est-body .quiz-opts,.est-body .est-opts-2{grid-template-columns:1fr}.est-results{padding:20px}.est-label{font-size:18px}}

/* Overview photo: on desktop it fills the text column's height (cropped),
   so the portrait image never runs past the copy beside it. */
.vr-overview .svc-two-col{align-items:stretch}
.vr-overview .svc-image{position:relative;align-self:stretch;min-height:360px}
.vr-overview .svc-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;border-radius:10px}
@media (max-width:760px){
  .vr-overview .svc-image{min-height:0}
  .vr-overview .svc-image img{position:static;aspect-ratio:4 / 3;height:auto}
}

/* Technique diagrams: show the whole illustration (labels sit near the edges),
   so contain instead of the default cover crop. */
.itype-panel-img--diagram{background:#fff}
.itype-panel-img--diagram img{object-fit:contain}

/* Success Estimator: square corners on every box */
#reversal-estimator .quiz-card,#reversal-estimator .quiz-card *{border-radius:0}