/*
 * Ostoja — IKZE calculator styles (scoped to .ost-calc).
 * Bespoke CSS port of the Tailwind markup in dodatki/kalklulator.html + Calculator.tsx.
 */
.ost-calc-wrap { padding-block: 4rem; }
.ost-calc-wrap.ost-section { background: color-mix(in oklab, var(--ost-sage) 40%, transparent); }

.ost-calc {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: var(--ost-cream);
  color: var(--ost-foreground);
  box-shadow: 0 24px 80px rgba(36, 53, 45, 0.08);
  padding: 1rem;
}
.ost-calc::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(212, 168, 106, 0.16), transparent 28%),
    radial-gradient(circle at left center, rgba(40, 89, 67, 0.08), transparent 34%);
}
.ost-calc > * { position: relative; }
@media (min-width: 768px) { .ost-calc { padding: 1.5rem; } }
@media (min-width: 1024px) { .ost-calc { padding: 2rem; } }

.ost-calc__grid { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .ost-calc__grid { grid-template-columns: 1.05fr 0.95fr; } }

/* Panel (left) */
.ost-calc__panel {
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(36, 53, 45, 0.05);
  padding: 1.25rem;
}
@media (min-width: 768px) { .ost-calc__panel { padding: 1.5rem; } }

.ost-calc__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; border: 1px solid rgba(212, 168, 106, 0.35);
  background: #fff9f1; color: #8a6940;
  padding: .375rem .75rem; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
}
.ost-calc__title {
  margin: 1rem 0 0; max-width: 14ch;
  font-size: clamp(1.875rem, 4vw, 2.625rem); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1.1;
}
.ost-calc__lead { margin: .75rem 0 0; max-width: 58ch; color: #58685f; line-height: 1.7; }

.ost-calc__controls-top { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.ost-calc__limit-badge {
  border-radius: 9999px; border: 1px solid var(--ost-sage); background: #eef5f0;
  padding: .5rem .75rem; font-size: .875rem; color: #456257;
}

/* Segmented control */
.ost-seg {
  display: inline-flex; border-radius: 9999px; padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 12px 28px rgba(36, 53, 45, 0.07); backdrop-filter: blur(8px);
}
.ost-seg__btn {
  position: relative; border: 0; cursor: pointer; background: transparent;
  border-radius: 9999px; padding: .625rem 1rem; font-size: .875rem; font-weight: 500;
  color: #466056; transition: color .3s var(--ost-ease), background-color .3s var(--ost-ease), box-shadow .3s var(--ost-ease);
}
.ost-seg__btn:hover { color: var(--ost-foreground); }
.ost-seg__btn.is-active { color: #fff; background: var(--ost-primary); box-shadow: 0 10px 24px rgba(40, 89, 67, 0.28); }

/* Sliders */
.ost-calc__sliders { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.ost-calc__slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.ost-calc__slider-label { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em; color: #5c6b63; }
.ost-calc__slider-hint { margin: .25rem 0 0; font-size: .875rem; color: #617168; }
.ost-calc__pill {
  border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.7);
  padding: .375rem .75rem; font-size: .875rem; font-weight: 500; color: var(--ost-foreground); white-space: nowrap;
  box-shadow: 0 8px 24px rgba(36, 53, 45, 0.06);
}

.ost-calc__range-wrap { position: relative; display: flex; align-items: center; height: 2rem; }
.ost-calc__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: transparent; margin: 0; cursor: pointer;
}
.ost-calc__range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 9999px;
  background: linear-gradient(90deg, var(--ost-primary) var(--ost-fill, 0%), var(--ost-sage) var(--ost-fill, 0%));
}
.ost-calc__range::-moz-range-track {
  height: 6px; border-radius: 9999px;
  background: linear-gradient(90deg, var(--ost-primary) var(--ost-fill, 0%), var(--ost-sage) var(--ost-fill, 0%));
}
.ost-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px;
  border-radius: 9999px; background: linear-gradient(135deg, #285943 0%, #214b38 100%);
  border: 3px solid rgba(255, 255, 255, 0.92); box-shadow: 0 8px 24px rgba(33, 75, 56, 0.22);
}
.ost-calc__range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 9999px; background: linear-gradient(135deg, #285943 0%, #214b38 100%);
  border: 3px solid rgba(255, 255, 255, 0.92); box-shadow: 0 8px 24px rgba(33, 75, 56, 0.22);
}
.ost-calc__range:focus-visible { outline: 2px solid var(--ost-primary); outline-offset: 4px; border-radius: 9999px; }

/* Limit usage card */
.ost-calc__limit { margin-top: 1.75rem; border-radius: 28px; border: 1px solid var(--ost-sage); background: #f6faf7; padding: 1rem; }
@media (min-width: 768px) { .ost-calc__limit { padding: 1.25rem; } }
.ost-calc__limit-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ost-calc__limit-eyebrow { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: #607167; }
.ost-calc__limit-text { margin: .25rem 0 0; font-size: .875rem; color: #5f7067; }
.ost-calc__limit-right { text-align: right; }
.ost-calc__limit-used { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.03em; }
.ost-calc__limit-max { font-size: .75rem; color: #708078; }
.ost-calc__limit-track { margin-top: 1rem; height: 8px; border-radius: 9999px; background: var(--ost-sage); overflow: hidden; }
.ost-calc__limit-fill { height: 100%; border-radius: 9999px; width: 0; background: linear-gradient(90deg, #285943 0%, #d4a86a 100%); transition: width .6s var(--ost-ease); }
.ost-calc__limit-explain { margin: .75rem 0 0; font-size: .875rem; line-height: 1.6; color: #5b6b63; }

/* Results column */
.ost-calc__results { display: grid; gap: 1.25rem; align-content: start; }

.ost-calc__hero-result {
  position: relative; overflow: hidden; border-radius: 32px;
  border: 1px solid rgba(50, 91, 72, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 245, 239, 0.94));
  box-shadow: 0 22px 50px rgba(36, 53, 45, 0.08); padding: 1.5rem;
}
.ost-calc__hero-glow { position: absolute; right: 1.25rem; top: 1.25rem; height: 6rem; width: 6rem; border-radius: 9999px; background: rgba(212, 168, 106, 0.18); filter: blur(32px); }
.ost-calc__hero-eyebrow { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em; color: #64756d; }
.ost-calc__big { margin-top: 1rem; font-size: clamp(2.625rem, 6vw, 3.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.05em; color: var(--ost-forest); }
.ost-calc__hero-text { margin: 1rem 0 0; max-width: 42ch; font-size: .9375rem; line-height: 1.7; color: #5a6a62; }
.ost-calc__mini-grid { display: grid; gap: .75rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .ost-calc__mini-grid { grid-template-columns: 1fr 1fr; } }
.ost-calc__mini { border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.72); padding: 1rem; }
.ost-calc__mini-label { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: #6b7c73; }
.ost-calc__mini-value { margin: .5rem 0 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; }
.ost-calc__mini-detail { margin: .5rem 0 0; font-size: .875rem; color: #617168; }

/* Stat cards */
.ost-calc__stats { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ost-calc__stats { grid-template-columns: 1fr 1fr; } }
.ost-calc__stat {
  border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 40px rgba(36, 53, 45, 0.06); backdrop-filter: blur(8px); padding: 1.25rem;
}
.ost-calc__stat--accent { border-color: rgba(212, 168, 106, 0.35); background: linear-gradient(180deg, rgba(212, 168, 106, 0.18), rgba(255, 255, 255, 0.72)); }
.ost-calc__stat--wide { grid-column: 1 / -1; }
.ost-calc__stat-label { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: #66776f; }
.ost-calc__stat-value { margin-top: .75rem; font-size: clamp(1.75rem, 4vw, 2rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.ost-calc__stat-detail { margin: .75rem 0 0; font-size: .875rem; line-height: 1.5; color: #5d6e65; }

/* Insight */
.ost-calc__insight { border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.65); background: linear-gradient(180deg, rgba(221, 232, 224, 0.65), rgba(255, 255, 255, 0.76)); box-shadow: 0 16px 38px rgba(36, 53, 45, 0.05); padding: 1.25rem; }
.ost-calc__insight-eyebrow { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: #63746b; }
.ost-calc__insight-text { margin: .75rem 0 0; font-size: 1.125rem; font-weight: 500; line-height: 1.6; letter-spacing: -0.02em; }
.ost-calc__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; font-size: .875rem; color: #5a6b62; }
.ost-calc__chip { border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.75); padding: .375rem .75rem; }

/* Chart row */
.ost-calc__chart-row { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 1024px) { .ost-calc__chart-row { grid-template-columns: 1.15fr 0.85fr; } }
.ost-calc__chart-card, .ost-calc__disclaimer {
  border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 16px 40px rgba(36, 53, 45, 0.05); padding: 1.25rem;
}
.ost-calc__chart-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ost-calc__chart-eyebrow { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: #65776f; }
.ost-calc__chart-sub { margin: .25rem 0 0; font-size: .875rem; color: #617168; }
.ost-calc__chart-latest { text-align: right; font-size: .875rem; color: #5e6f66; }
.ost-calc__chart-latest-val { font-weight: 500; color: var(--ost-foreground); }
.ost-calc__chart { display: flex; align-items: flex-end; gap: .5rem; height: 12rem; margin-top: 1.25rem; }
@media (min-width: 768px) { .ost-calc__chart { height: 14rem; } }
.ost-calc__bar-wrap { position: relative; display: flex; flex: 1 1 0; align-items: flex-end; }
.ost-calc__bar {
  width: 100%; border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(212, 168, 106, 0.7), rgba(40, 89, 67, 0.88));
  box-shadow: 0 10px 24px rgba(40, 89, 67, 0.15);
  animation: ost-bar-grow .6s var(--ost-ease) both;
}
@keyframes ost-bar-grow { from { transform: scaleY(0); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
.ost-calc__bar-wrap { transform-origin: bottom; }
.ost-calc__bar { transform-origin: bottom; }
.ost-calc__bar-tip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: .5rem;
  display: none; white-space: nowrap; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.9); padding: .5rem .75rem; font-size: .75rem; color: var(--ost-foreground);
  box-shadow: 0 12px 24px rgba(36, 53, 45, 0.08);
}
.ost-calc__bar-wrap:hover .ost-calc__bar-tip { display: block; }

.ost-calc__disclaimer { color: #5c6d65; font-size: .875rem; line-height: 1.7; }
.ost-calc__disclaimer p { margin: 0 0 .75rem; }
.ost-calc__disclaimer p:last-child { margin-bottom: 0; }
.ost-calc__disclaimer-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: #65776f; margin-bottom: 1rem !important; }

@media (prefers-reduced-motion: reduce) {
  .ost-calc__bar { animation: none; }
  .ost-calc__limit-fill { transition: none; }
}