/* L1 INTERACTIVE COMPONENTS — споделени стилове за калкулатори, слайдъри, експерименти */

/* === CALCULATOR CARD === */
.calc{padding:18px;background:linear-gradient(135deg,#F5F3FF,#FFFFFF);border:2px solid #C4B5FD;border-radius:16px;margin:14px 0;box-shadow:0 2px 8px rgba(124,58,237,.08)}
.calc-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.calc-icon{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#2563EB);color:#fff;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.calc-title{font-size:14.5px;font-weight:800;color:#4C1D95;line-height:1.3}
.calc-sub{font-size:12px;color:#6D28D9;margin-top:2px}

/* === SLIDER === */
.slider-row{margin-bottom:14px}
.slider-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.slider-name{font-size:12.5px;font-weight:700;color:#4C1D95}
.slider-value{font-family:'Nunito',sans-serif;font-size:14px;font-weight:900;color:#2E1065;padding:2px 10px;background:#fff;border-radius:99px;border:1.5px solid #C4B5FD}
.slider-input{width:100%;height:6px;border-radius:99px;background:#DDD6FE;outline:none;-webkit-appearance:none;appearance:none}
.slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#2563EB);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 6px rgba(124,58,237,.4)}
.slider-input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#2563EB);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 6px rgba(124,58,237,.4)}

/* === RESULT === */
.calc-result{margin-top:14px;padding:14px;background:linear-gradient(135deg,#2E1065,#4C1D95);border-radius:12px;text-align:center;color:#fff}
.calc-result-lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:4px}
.calc-result-num{font-family:'Nunito',sans-serif;font-size:32px;font-weight:900;line-height:1.1;color:#FCD34D}
.calc-result-sub{font-size:11.5px;opacity:.85;margin-top:6px;line-height:1.45}
.calc-result-sub strong{color:#FCD34D;font-weight:700}

/* === COMPARISON RESULTS (2 columns) === */
.calc-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.calc-cmp-card{padding:12px;border-radius:10px;text-align:center}
.calc-cmp-card.a{background:linear-gradient(135deg,#FEF2F2,#FEE2E2);border:1.5px solid #FCA5A5}
.calc-cmp-card.b{background:linear-gradient(135deg,#F0FDF4,#DCFCE7);border:1.5px solid #86EFAC}
.calc-cmp-lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.calc-cmp-card.a .calc-cmp-lbl{color:#991B1B}
.calc-cmp-card.b .calc-cmp-lbl{color:#065F46}
.calc-cmp-num{font-family:'Nunito',sans-serif;font-size:22px;font-weight:900;line-height:1.1}
.calc-cmp-card.a .calc-cmp-num{color:#DC2626}
.calc-cmp-card.b .calc-cmp-num{color:#059669}
.calc-cmp-note{font-size:10.5px;margin-top:4px;line-height:1.4}
.calc-cmp-card.a .calc-cmp-note{color:#991B1B}
.calc-cmp-card.b .calc-cmp-note{color:#065F46}

/* === INPUT (numeric) === */
.calc-input{width:100%;padding:10px 12px;border:1.5px solid #C4B5FD;border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;color:#2E1065;background:#fff;outline:none;transition:border-color .2s}
.calc-input:focus{border-color:#7C3AED;box-shadow:0 0 0 3px rgba(124,58,237,.15)}

/* === INTERACTIVE CHOICE (за Канеман експеримент и сходни) === */
.choice-pair{display:grid;gap:10px;margin:14px 0}
.choice-btn{padding:14px 16px;background:#fff;border:2px solid #C4B5FD;border-radius:12px;text-align:left;cursor:pointer;font-family:inherit;font-size:13.5px;color:#4C1D95;line-height:1.5;transition:all .2s;font-weight:600}
.choice-btn:hover{background:#F5F3FF;border-color:#7C3AED;transform:translateX(3px)}
.choice-btn.picked{background:linear-gradient(135deg,#7C3AED,#2563EB);color:#fff;border-color:#2E1065}
.choice-btn.picked strong{color:#FCD34D}
.choice-btn strong{color:#2E1065}
.choice-key{display:inline-block;width:24px;height:24px;border-radius:50%;background:#C4B5FD;color:#2E1065;font-weight:900;text-align:center;line-height:24px;margin-right:8px;font-size:12px}
.choice-btn.picked .choice-key{background:#FCD34D;color:#2E1065}

/* === RESULT REVEAL (за post-choice explanation) === */
.choice-reveal{margin-top:12px;padding:12px 14px;background:linear-gradient(135deg,#FFFBEB,#FEF3C7);border-left:4px solid #D97706;border-radius:10px;font-size:13px;line-height:1.55;color:#78350F;display:none}
.choice-reveal.show{display:block;animation:revealIn .4s ease}
.choice-reveal strong{color:#78350F;font-weight:800}
@keyframes revealIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* === RISK BAR — за визуални проценти === */
.risk-bar-wrap{margin:14px 0}
.risk-bar-track{position:relative;height:28px;background:linear-gradient(90deg,#86EFAC 0%,#FCD34D 50%,#FCA5A5 100%);border-radius:99px;overflow:hidden;border:2px solid #fff;box-shadow:inset 0 0 0 1.5px #DDD6FE}
.risk-bar-marker{position:absolute;top:-4px;width:6px;height:36px;background:#2E1065;border-radius:3px;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.3);transition:left .3s cubic-bezier(.34,1.56,.64,1)}
.risk-bar-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;font-weight:700;color:var(--muted)}

/* === TIMELINE / SCENARIO PLAYER === */
.scenario-grid{display:grid;gap:10px;margin:14px 0}
.scenario-btn{padding:14px;border-radius:12px;border:2px solid var(--border);background:var(--surf);cursor:pointer;text-align:left;transition:all .2s}
.scenario-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.scenario-btn.picked.win{background:linear-gradient(135deg,#F0FDF4,#DCFCE7);border-color:#059669}
.scenario-btn.picked.mid{background:linear-gradient(135deg,#FFFBEB,#FEF3C7);border-color:#D97706}
.scenario-btn.picked.lose{background:linear-gradient(135deg,#FEF2F2,#FEE2E2);border-color:#DC2626}
.scenario-emoji{font-size:24px;line-height:1;margin-bottom:6px}
.scenario-name{font-size:13.5px;font-weight:800;color:var(--text);margin-bottom:3px}
.scenario-desc{font-size:12px;color:var(--muted);line-height:1.5}

/* === COIN STACK (визуализация на пари) === */
.coin-row{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:14px 0;min-height:120px}
.coin-stack{display:flex;flex-direction:column-reverse;align-items:center}
.coin-disk{width:42px;height:8px;border-radius:50%;background:linear-gradient(135deg,#FCD34D,#D97706);box-shadow:0 1px 2px rgba(0,0,0,.15);margin-top:-2px}
.coin-label{font-size:11px;font-weight:800;margin-top:6px;text-align:center}
.coin-label-num{font-family:'Nunito',sans-serif;font-size:14px;font-weight:900;color:var(--text)}

/* RESPONSIVE */
@media(max-width:520px){
  .calc-cmp{grid-template-columns:1fr}
  .calc-result-num{font-size:26px}
}