/* ==========================================================================
   calculator.css - Price Calculator (ADUT #1 / konverzioni hub)
   Standalone component styles. Depends on tokens.css + components.css.
   Fully keyboard-navigable; aria-live price; mobile-first (375px works perfectly).
   ========================================================================== */

.calc { display: grid; gap: var(--space-8); align-items: start; min-width: 0; }
.calc > * { min-width: 0; }
@media (min-width: 1024px) { .calc { grid-template-columns: 1.4fr 1fr; } }

/* ---- left: the form (steps) ---- */
.calc__form { display: flex; flex-direction: column; gap: var(--space-10); min-width: 0; }
.calc__step { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; border: 0; padding: 0; margin: 0; }
.calc__step legend { padding: 0; }
.calc__step-head { display: flex; align-items: baseline; gap: var(--space-3); width: 100%; }
.calc__step-num { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-on-green); background: var(--green-400); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.calc__step-title { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--text-white); }
.calc__step-hint { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- radio card group (tip sajta) ---- */
.calc__options { display: grid; gap: var(--space-3); grid-template-columns: 1fr; min-width: 0; }
@media (min-width: 560px) { .calc__options { grid-template-columns: repeat(2, 1fr); } }
.calc-option { position: relative; display: block; cursor: pointer; }
.calc-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-option__box {
  border: 2px solid var(--navy-border); border-radius: var(--radius-lg);
  background: var(--navy-surface); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1); height: 100%;
  transition: border-color var(--dur-fast) var(--ease-state), background var(--dur-fast) var(--ease-state);
}
.calc-option__box .icon { width: 28px; height: 28px; color: var(--green-400); margin-bottom: var(--space-2); }
.calc-option__name { font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--text-white); }
.calc-option__desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.calc-option:hover .calc-option__box { border-color: var(--navy-border-hi); }
.calc-option input:checked + .calc-option__box { border-color: var(--green-400); background: var(--navy-surface2); }
.calc-option input:focus-visible + .calc-option__box { box-shadow: var(--shadow-focus); }
.calc-option input:checked + .calc-option__box::after { content: "✓"; position: absolute; top: var(--space-3); right: var(--space-4); color: var(--green-400); font-weight: bold; }

/* ---- stepper (broj strana) ---- */
.stepper { display: inline-flex; align-items: center; gap: var(--space-3); }
.stepper__btn { width: 48px; height: 48px; border-radius: var(--radius-md); border: 1px solid var(--navy-border-hi); background: var(--navy-surface); color: var(--text-white); font-size: var(--text-2xl); line-height: 1; cursor: pointer; display: grid; place-items: center; }
.stepper__btn:hover { border-color: var(--green-400); color: var(--green-400); }
.stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.stepper__value { min-width: 3ch; text-align: center; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-white); font-variant-numeric: tabular-nums; }
.stepper__label { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- slider (alt for count) ---- */
.calc-slider { display: flex; flex-direction: column; gap: var(--space-3); }
.calc-slider input[type="range"] { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: var(--navy-surface2); border-radius: var(--radius-pill); cursor: pointer; }
.calc-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green-400); border: 3px solid var(--navy-canvas); cursor: pointer; }
.calc-slider input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--green-400); border: 3px solid var(--navy-canvas); cursor: pointer; }
.calc-slider input[type="range"]:focus-visible { box-shadow: var(--shadow-focus); }
.calc-slider__scale { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- feature checkboxes ---- */
.calc__features { display: grid; gap: var(--space-3); grid-template-columns: 1fr; min-width: 0; }
@media (min-width: 560px) { .calc__features { grid-template-columns: repeat(2, 1fr); } }
.calc-feature { display: flex; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--navy-border); border-radius: var(--radius-md); padding: var(--space-4); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-state); }
.calc-feature:hover { border-color: var(--navy-border-hi); }
.calc-feature:has(input:checked) { border-color: var(--green-400); background: var(--navy-surface); }
.calc-feature input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-feature__box { flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-sm); border: 2px solid var(--navy-border-hi); display: grid; place-items: center; margin-top: 1px; transition: all var(--dur-fast) var(--ease-state); }
.calc-feature__box .icon { width: 14px; height: 14px; color: var(--ink-on-green); opacity: 0; }
.calc-feature input:checked + .calc-feature__box { background: var(--green-400); border-color: var(--green-400); }
.calc-feature input:checked + .calc-feature__box .icon { opacity: 1; }
.calc-feature input:focus-visible + .calc-feature__box { box-shadow: var(--shadow-focus); }
.calc-feature__text { font-size: var(--text-sm); }
.calc-feature__name { color: var(--text-white); font-weight: var(--weight-medium); display: block; }
.calc-feature__price { color: var(--color-text-muted); font-size: var(--text-xs); }

/* ---- right: result panel (sticky on desktop) ---- */
.calc__result {
  background: var(--navy-surface2); border: 1px solid var(--green-400); border-radius: var(--radius-lg);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5);
}
@media (min-width: 1024px) { .calc__result { position: sticky; top: 90px; } }
.calc__result-label { font-family: var(--font-heading); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-muted); }
.calc__price {
  font-family: var(--font-heading); font-weight: var(--weight-bold); color: var(--text-white);
  font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.calc__price .price-ph { color: var(--green-400); }
.calc__price-note { font-size: var(--text-sm); color: var(--color-text); }
.calc__breakdown { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--navy-border); }
.calc__breakdown-row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); }
.calc__breakdown-row span:first-child { color: var(--color-text); }
.calc__breakdown-row span:last-child { color: var(--text-white); font-variant-numeric: tabular-nums; }
.calc__reset { align-self: flex-start; background: none; border: 0; color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: underline; cursor: pointer; padding: 0; }
.calc__reset:hover { color: var(--green-400); }

/* ---- optional lead capture step ---- */
.calc__lead { border-top: 1px solid var(--navy-border); padding-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.calc__lead p { font-size: var(--text-sm); color: var(--color-text); }
.calc__lead-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.calc__lead-row .input { flex: 1; min-width: 12rem; }

/* animate value once on change (respect reduced motion handled globally) */
.calc__price.is-updating { animation: calc-pulse var(--dur-base) var(--ease-entrance); }
@keyframes calc-pulse { 0% { color: var(--green-400); } 100% { color: var(--text-white); } }