/* 2026-11-07 (LOCAL): "Колко метра плат ми трябва?" (prototype of Rey). EVERY rule is scoped to #cp2, so nothing else on the page changes.
   The old cm stepper (#samoplat_plus_minus) is hidden only after the script started (body.cp2-on); without JS it stays. */
body.cp2-on #samoplat_plus_minus { display: none !important; }
#cp2, #cp2 * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
#cp2 { --ink:#2b2b2b; --btn:#4a4a4a; --mute:#6f6f6f; --line:#e2e2e2; --acc:#1f7a6d; color: var(--ink); max-width: 440px; margin: 10px auto 6px; padding: 0 10px; font-family: inherit; text-align: left; }
#cp2 .cp2-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px; }
#cp2 .cp2-ribbon { display:block; text-align:center; font-size:15px; font-weight:900; letter-spacing:.3px; text-transform:uppercase; color:var(--acc); border:2px solid var(--acc); border-radius:12px; padding:9px 12px; }
#cp2 .cp2-h1 { font-size:20px; margin:12px 0 4px; text-align:center; color:var(--ink); font-weight:700; }
#cp2 .cp2-lead { font-size:13.5px; color:var(--mute); text-align:center; margin:0 0 8px; line-height:1.4; }
#cp2 .cp2-pic { width:100%; height:auto; display:block; }
#cp2 .cp2-lbl { display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:700; margin:14px 0 8px; }
#cp2 .cp2-lbl small { display:block; font-size:12px; font-weight:500; color:var(--mute); }
#cp2 .cp2-info { border:0; background:none; font-size:12.5px; font-weight:600; text-decoration:underline; padding:0; color:#4a4a4a; white-space:nowrap; cursor:pointer; }
#cp2 .cp2-opts { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
#cp2 .cp2-opt { border:1px solid #d4d4d4; background:#fff; border-radius:12px; padding:9px 2px; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; }
#cp2 .cp2-opt small { display:block; font-size:11px; font-weight:500; color:var(--mute); }
#cp2 .cp2-opt.on { border:2px solid var(--btn); padding:8px 1px; }
#cp2 .cp2-sl { padding:2px 16px 0; }
#cp2 .cp2-srow { display:flex; justify-content:space-between; font-size:12.5px; color:var(--mute); margin:10px 0 0; }
#cp2 .cp2-srow b { color:var(--ink); font-size:14px; }
#cp2 input[type=range] { width:100%; height:36px; -webkit-appearance:none; appearance:none; background:none; margin:0; padding:0; border:0; }
#cp2 input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:#e2e2e2; }
#cp2 input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:30px; height:30px; border-radius:50%; background:#fff; border:3px solid var(--btn); margin-top:-12px; box-shadow:0 1px 4px rgba(0,0,0,.2); }
#cp2 input[type=range]::-moz-range-thumb { width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid var(--btn); }
#cp2 .cp2-track { position:relative; }
#cp2 .cp2-track span { position:absolute; top:13px; width:3px; height:10px; margin-left:-1.5px; background:#9a9a9a; border-radius:2px; pointer-events:none; }
#cp2 .cp2-ticks { position:relative; height:38px; font-size:13px; font-weight:600; color:#4a4a4a; line-height:1.2; }
#cp2 .cp2-ticks i { position:absolute; transform:translateX(-50%); font-style:normal; text-align:center; }
#cp2 .cp2-step { display:flex; align-items:center; justify-content:space-between; border:1px solid #cfcfcf; border-radius:999px; padding:5px; }
#cp2 .cp2-step button { width:50px; height:50px; border-radius:50%; border:0; background:#ededed; font-size:26px; line-height:1; color:var(--ink); cursor:pointer; padding:0; }
#cp2 .cp2-sv { text-align:center; }
#cp2 .cp2-sv input { width:100px; height:auto; border:0; text-align:center; font-size:26px; font-weight:700; outline:none; background:none; color:var(--ink); padding:0; -moz-appearance:textfield; }
#cp2 .cp2-sv small { display:block; font-size:12px; color:var(--mute); margin-top:-2px; }
#cp2 .cp2-fixed { display:flex; gap:10px; align-items:center; background:#f5f5f5; border-radius:12px; padding:10px 12px; font-size:13.5px; margin-top:12px; }
#cp2 .cp2-fixed span { color:var(--mute); font-size:12px; }
#cp2 .cp2-res { margin-top:16px; border-radius:14px; padding:14px; text-align:center; background:#f5f5f5; border:1px solid #e2e2e2; }
#cp2 .cp2-big { font-size:25px; font-weight:800; line-height:1.2; }
#cp2 .cp2-big em { font-style:normal; color:var(--ink); text-decoration:underline; text-decoration-color:var(--acc); text-decoration-thickness:3px; text-underline-offset:4px; }
#cp2 .cp2-how { font-size:12.5px; color:var(--mute); margin-top:6px; line-height:1.45; }
#cp2 .cp2-warn { display:none; margin-top:8px; font-size:12.5px; color:#9a4b12; background:#fff4ea; border-radius:10px; padding:8px 10px; }
#cp2 .cp2-modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:flex-end; justify-content:center; z-index:100000; }
#cp2 .cp2-modal.on { display:flex; }
#cp2 .cp2-sheet { background:#fff; border-radius:18px 18px 0 0; max-width:440px; width:100%; padding:16px 16px 22px; max-height:85vh; overflow:auto; }
#cp2 .cp2-sheet h3 { margin:0 0 8px; font-size:18px; color:var(--ink); }
#cp2 .cp2-sheet p { font-size:14px; line-height:1.5; margin:8px 0; color:var(--ink); }
#cp2 .cp2-sheet button.cp2-close { width:100%; margin-top:10px; border:0; border-radius:999px; background:var(--btn); color:#fff; padding:13px; font-size:15px; cursor:pointer; }