:root{
  --brand-bg:#E8D9C4; --brand-gold:#C89B3C; --brand-accent:#B1453F; --text:#2F2F2F; --muted:#6B6B6B; --white:#fff;
  --radius-lg:16px; --radius-md:12px; --radius-sm:10px;
}
.zrn-runner-wrapper{ direction:rtl; text-align:right; margin:16px 0; padding:16px; background:var(--brand-bg);
  border:1px solid var(--brand-gold); border-radius:var(--radius-lg); box-shadow:0 6px 16px rgba(0,0,0,.06); }
.zrn-hidden{ display:none; }

/* width blocks (minimal) */
.zrn-width-label{ display:block; margin-bottom:10px; font-weight:800; color:var(--text); font-size:clamp(14px,2.5vw,16px) }
.zrn-width-cards{ display:flex; flex-wrap:wrap; gap:10px; }
.zrn-width-card{ position:relative; display:inline-flex; align-items:center;
  padding:10px 14px; min-width:30px; border:1px solid var(--brand-gold); border-radius:10px; background:var(--white);
  cursor:pointer; user-select:none; }
.zrn-width-card input{ position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.zrn-width-card:has(input:checked){ border-color:var(--brand-accent); background:rgba(177,69,63,.06); }
.zrn-width-card__text{ color:var(--text); font-weight:700; font-size:14px; line-height:1; }

/* length UI (slider only) */
.zrn-runner-wrapper label{ display:block; margin:14px 0 6px; font-weight:800; color:var(--text); }
.zrn-range-input-row{ display:flex; gap:12px; align-items:center; }
.zrn-range-input-row .zrn-number-input{ width:90px; }
.zrn-number-input input[type="number"], .zrn-number-input input[type="text"]{ width:100%; padding:8px 10px; border:1px solid rgba(0,0,0,.06); border-radius:8px; background:var(--white); }
button.zrn-step.zrn-step-incr {  border-radius: 0 20px 20px 0; }
.zrn-runner-length-block.mt-3 label :is(.btn, .button, button, [type=submit] , [type=button]),
.zrn-runner-length-block.mt-3 label .zrn-number-input input[type="text"] { min-height: 30px;  height: 30px; }

/* compact length control inserted next to the length label */
.zrn-length-control{ display:inline-flex; align-items:center; gap:12px; margin-left:10px; padding:4px; background:#fff; border:1px solid #e5e7eb; border-radius:999px; height:36px; }
.zrn-length-control .zrn-number-input{ width:72px; }
.zrn-length-control .zrn-number-input input{ text-align:center; border:none; outline:none; box-shadow:none; font-weight:700; }
.zrn-length-control .zrn-length-unit{ font-weight:600; color:#6b7280; font-size:.9em; margin:0 6px 0 2px; }

/* minimal circular step buttons */
.zrn-step{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background:#fff; border:1px solid #e5e7eb; font-size:16px; line-height:1; color:#6b7280; cursor:pointer; user-select:none; }
.zrn-step:hover{ background:#f9fafb; }
.zrn-step:active{ transform:translateY(1px); }
.zrn-ns-slider {    width: 100%;    margin: 50px 0;    position: relative;}
.zrn-ns-slider .noUi-connect{ background:var(--brand-gold) !important; }
.zrn-ns-slider .noUi-tooltip{ background:var(--white); border:1px solid rgba(0,0,0,.06); color:var(--text); padding:4px 8px; border-radius:6px; font-weight:700; }

/* summary (Serdoz first) */
.zrn-runner-summary{ margin-top:16px; display:grid; grid-template-columns:1fr; gap:10px; }
.zrn-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:rgba(255,255,255,.8);
  border:1px solid rgba(200,155,60,.35); border-radius:var(--radius-md); }
.zrn-row span{ color:var(--muted); font-size:.95em; font-weight:600; }
.zrn-row strong{ color:var(--brand-gold); font-weight:800; }
.zrn-row.total{ background:var(--white); border-color:var(--brand-gold); }
.zrn-row.total strong{ color:var(--brand-accent); font-size:1.22em; }
#zrn_runner_total.zrn-flash{ animation:zrnFlash .22s ease-in-out; }
@keyframes zrnFlash{ 0%{transform:scale(1);} 50%{transform:scale(1.02);} 100%{transform:scale(1);} }

/* CTA disable state */
.zrn-disabled{ opacity:.55 !important; cursor:not-allowed !important; }

/* hide native range input, keep accessible for fallback */
#zrn_runner_length.zrn-ns-hidden{position:absolute!important;left:-9999px!important}

/* noUiSlider minimal theme */
.zrn-ns-slider{margin:2.5rem 0;}
.noUi-tooltip{border:none;background:#111827;color:#fff;border-radius:6px;padding:.15rem .4rem;font-size:12px}

/* gentle pulse when total changes */
#zrn_runner_total.zrn-flash{animation:zrnPulse .22s ease-in-out}
@keyframes zrnPulse{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}

/* width cards small polish */
.zrn-width-card{transition:box-shadow .12s ease;border-color:#e5e7eb}
.zrn-width-card:has(input:checked){box-shadow:0 0 0 2px #2563eb22}


/* desktop */
@media (min-width:768px){
  .zrn-runner-wrapper{ padding:20px; }
  .zrn-runner-summary{ grid-template-columns:5fr 7fr; }
  .zrn-row.total{ grid-column:1 / -1; }
}

.zrn-length-control { margin-top: 8px !important; }