/* Mamahotel calculators (CALC-01, D-11, D-12): a hybrid look. The page head and the result card carry the neon accent of the quiz,
   the inputs and the numbers are calm and readable ("Teď vážně"): money means trust.
   Portability contract: every selector starts with .mh- (class or attribute on a .mh- class) and every colour and glow comes from
   tokens.css (var(--mh-*)). No image, no library. The range input is styled through its class, never as a bare element.
   Reduced motion is a scoped block at the end of this file. */

/* ---- page head: back link, the kicker and the hotel line (the joke stays in the heading, D-12) ---- */
.mh-calc-head {
  padding-bottom: 0;
}

.mh-calc-head__title {
  margin: var(--mh-space-2) 0 0;
  font-family: var(--mh-font-display);
  font-size: clamp(1.6rem, 6.4vw, 2.1rem);
  line-height: 1.2;
}

.mh-calc-head__line {
  display: block;
}

.mh-calc-head__promo {
  margin: var(--mh-space-2) 0 0;
  color: var(--mh-text-muted);
  font-size: 1rem;
}

.mh-calc__kicker {
  display: block;
  margin: 0 0 var(--mh-space-1);
  color: var(--mh-accent);
  font-family: var(--mh-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: var(--mh-glow-soft);
}

/* ---- the card (same width rules as the quiz card) ---- */
.mh-calc {
  width: calc(100% - 2 * var(--mh-space-4));
  margin: var(--mh-space-8) auto 0;
  padding: var(--mh-space-6) var(--mh-space-4);
  border: 1px solid var(--mh-surface-line);
  border-radius: var(--mh-radius-lg);
  background: var(--mh-surface);
  box-shadow: var(--mh-shadow-lg);
}

.mh-calc .mh-h2 {
  font-size: 1.6rem;
}

.mh-calc__intro {
  margin: 0 0 var(--mh-space-6);
}

.mh-calc__body {
  display: grid;
  gap: var(--mh-space-6);
}

/* ---- the mode switch: the chips come from form.css, only the spacing is set here ---- */
.mh-calc__modes {
  gap: var(--mh-space-2) var(--mh-space-2);
}

/* the sentence under the view switch (today's prices) */
.mh-calc__viewnote {
  margin: 0;
}

/* ---- a field: label, hint, the text input with its slider, the message ---- */
.mh-calc__field {
  display: grid;
  gap: var(--mh-space-2);
  min-width: 0;
}

.mh-calc__label {
  font-weight: 600;
}

.mh-calc__pair {
  display: grid;
  gap: var(--mh-space-1);
}

.mh-calc__input {
  width: 100%;
  min-height: var(--mh-tap);
  padding: var(--mh-space-3) var(--mh-space-4);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-radius-md);
  background: rgba(255, 255, 255, 0.05);
  color: var(--mh-text);
  font-family: var(--mh-font-body);
  font-size: 16px;                         /* 16 px or more: iOS Safari does not zoom on focus */
}

.mh-calc__input:focus-visible {
  outline: 3px solid var(--mh-accent);
  outline-offset: 2px;
}

.mh-calc__input[aria-invalid="true"] {
  border-color: var(--mh-danger);
}

/* ---- the slider: a thumb-sized handle on a calm track, 48 px of touch height ---- */
.mh-calc__range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: var(--mh-tap);
  margin: 0;
  padding: 0;
  background: transparent;
  accent-color: var(--mh-accent);
  cursor: pointer;
}

.mh-calc__range:focus-visible {
  outline: 3px solid var(--mh-accent);
  outline-offset: 2px;
}

.mh-calc__range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--mh-radius-full);
  background: var(--mh-border-strong);
}

.mh-calc__range::-moz-range-track {
  height: 8px;
  border-radius: var(--mh-radius-full);
  background: var(--mh-border-strong);
}

.mh-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;                       /* centres the thumb on the 8 px track */
  border: 0;
  border-radius: var(--mh-radius-full);
  background: var(--mh-accent);
  box-shadow: var(--mh-glow-soft);
}

.mh-calc__range::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--mh-radius-full);
  background: var(--mh-accent);
  box-shadow: var(--mh-glow-soft);
}

/* an untouched slider (the rate waits for the visitor): dimmed thumb, no glow */
.mh-calc__range[data-empty]::-webkit-slider-thumb {
  background: var(--mh-text-muted);
  box-shadow: none;
  opacity: 0.6;
}

.mh-calc__range[data-empty]::-moz-range-thumb {
  background: var(--mh-text-muted);
  box-shadow: none;
  opacity: 0.6;
}

/* ---- the "younger than 36" tick: the whole row is a 48 px target ---- */
.mh-calc__check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--mh-space-3);
}

.mh-calc__check input {
  width: 24px;
  height: 24px;
  margin: 12px 0 0;
  accent-color: var(--mh-accent);
}

.mh-calc__check input:focus-visible {
  outline: 3px solid var(--mh-accent);
  outline-offset: 2px;
}

.mh-calc__check label {
  min-height: var(--mh-tap);
  padding: var(--mh-space-3) 0;
  font-weight: 600;
  cursor: pointer;
}

.mh-calc__check .mh-hint {
  grid-column: 2;
}

/* ---- prompt and result ---- */
.mh-calc__prompt {
  margin: 0;
  padding: var(--mh-space-4);
  border: 1px dashed var(--mh-border-strong);
  border-radius: var(--mh-radius-md);
  color: var(--mh-text);
}

.mh-calc__result {
  padding: var(--mh-space-4);
  border: 1px solid var(--mh-accent);
  border-radius: var(--mh-radius-lg);
  background: var(--mh-bg);
  box-shadow: var(--mh-glow-soft);
}

.mh-calc__rows {
  display: grid;
  gap: var(--mh-space-3);
  margin: 0 0 var(--mh-space-4);
}

.mh-calc__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-space-1) var(--mh-space-3);
}

.mh-calc__row dt {
  color: var(--mh-text-muted);
}

.mh-calc__row dd {
  margin: 0;
}

.mh-calc__value {
  font-family: var(--mh-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  white-space: nowrap;                     /* "20 440 Kč" never breaks between the number and the unit */
}

.mh-calc__row--main .mh-calc__value {
  color: var(--mh-accent);
  font-size: 1.75rem;
}

/* the cost-of-waiting line lit like the MAMAHOTEL sign (form.css .mh-footer__signature is the reference look); the figure sits inside the
   sentence at the size and in the colour of the text around it. hero.css is not loaded on this page, so the flicker has its own name. */
.mh-calc__delay {
  color: var(--mh-accent);
  font-family: var(--mh-font-display);
  font-weight: 700;
  text-shadow: var(--mh-glow-accent);
  text-wrap: balance;
  animation: mh-calc-flicker 4s infinite;
}

.mh-calc__delay .mh-calc__value {
  color: inherit;
  font-size: inherit;
}

@keyframes mh-calc-flicker {
  0%, 91%, 94%, 97%, 100% { opacity: 1; }
  92%, 95% { opacity: 0.55; }
  96% { opacity: 0.8; }
}

/* the goal mode: the descriptor after the scenario name stays muted, the no-growth reference is set apart by a line */
.mh-calc__goal-risk {
  white-space: nowrap;
}

.mh-calc__row--reference {
  padding-top: var(--mh-space-3);
  border-top: 1px solid var(--mh-border-strong);
}

.mh-calc__status {
  margin: 0;
  font-weight: 600;
}

.mh-calc__note {
  margin: var(--mh-space-3) 0 0;
}

.mh-calc__duration {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mh-space-1) var(--mh-space-2);
  margin: 0 0 var(--mh-space-3);
}

.mh-calc__duration .mh-calc__value {
  color: var(--mh-accent);
  font-size: 1.5rem;
  white-space: normal;                     /* "10 let a 5 měsíců" may wrap on a narrow phone */
}

.mh-calc__cardlabel {
  margin: 0 0 var(--mh-space-3);
  color: var(--mh-accent);
  font-family: var(--mh-font-display);
  font-weight: 700;
}

/* The caveat of the affordability mode sits right under the figures at full text colour and body size: it must not read as small print. */
.mh-calc__caveat {
  margin: 0 0 var(--mh-space-3);
  color: var(--mh-text);
  font-size: 1rem;
  line-height: 1.6;
}

.mh-calc__binding {
  margin: 0;
  font-weight: 600;
}

.mh-calc__once {
  margin: var(--mh-space-4) 0 0;
}

/* ---- "Zvládnu to?": an optional, collapsible section. The statuses stay neutral: no green, no red, no tick (D-00c). ---- */
.mh-calc__budget {
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-radius-lg);
  background: rgba(255, 255, 255, 0.03);
}

.mh-calc__summary {
  display: flex;
  align-items: center;
  min-height: var(--mh-tap);
  padding: var(--mh-space-3) var(--mh-space-4);
  font-weight: 600;
  cursor: pointer;
}

.mh-calc__summary:focus-visible {
  outline: 3px solid var(--mh-accent);
  outline-offset: 2px;
}

.mh-calc__budget[open] > .mh-calc__summary {
  border-bottom: 1px solid var(--mh-border-strong);
}

.mh-calc__budget-body {
  display: grid;
  gap: var(--mh-space-4);
  padding: var(--mh-space-4);
}

.mh-calc__budget-result {
  display: grid;
  gap: var(--mh-space-3);
  padding: var(--mh-space-4);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-radius-md);
  background: var(--mh-bg);
}

.mh-calc__budget-result .mh-calc__rows,
.mh-calc__budget-body .mh-calc__note,
.mh-calc__budget-result .mh-calc__status {
  margin: 0;
}

.mh-calc__standing {
  margin: 0;
  font-weight: 600;
}

.mh-calc__recommend {
  margin: 0;
}

.mh-calc__budget-body .mh-source {
  margin: calc(-1 * var(--mh-space-2)) 0 0;
}

/* ---- the permanent disclaimer: body size, full text colour, never collapsible ---- */
.mh-calc__disclaimer {
  margin: 0;
  padding-top: var(--mh-space-2);
  color: var(--mh-text);
  font-size: 1rem;
  line-height: 1.6;
}

/* the negative-scenario toggle (D-18): 48 px, full width on a phone; "pressed" shows as a heavier accent border and a fill, not only a colour */
.mh-calc__negative-actions {
  display: grid;
  margin-top: var(--mh-space-4);
}

.mh-calc__negative-actions .mh-btn {
  min-height: var(--mh-tap);
  width: 100%;
}

.mh-calc__negative-actions .mh-btn[aria-pressed="true"] {
  border: 3px solid var(--mh-accent);
  background: rgba(255, 122, 217, 0.18);
}

/* ---- the investment calculator: three scenario cards, the selected one is told apart by a border, a heavier line and a text tag ---- */
.mh-calc__scenarios {
  display: grid;
  gap: var(--mh-space-4);
  margin-top: var(--mh-space-6);
}

.mh-calc__scenarios > .mh-calc__note {
  margin: 0;
}

.mh-calc__scenario {
  padding: var(--mh-space-4);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-radius-lg);
  background: var(--mh-bg);
}

/* the negative scenario card (D-18): only after the visitor's click; a dashed border tells it apart from the three scenarios */
.mh-calc__scenario--negative {
  margin-top: var(--mh-space-4);
  border: 2px dashed var(--mh-border-strong);
}

.mh-calc__scenario--selected {
  border: 3px solid var(--mh-accent);
  padding: calc(var(--mh-space-4) - 2px);
}

.mh-calc__scenario-name {
  margin: 0 0 var(--mh-space-1);
  font-family: var(--mh-font-display);
  font-size: 1.125rem;
  line-height: 1.3;
}

.mh-calc__scenario-risk {
  margin: 0 0 var(--mh-space-3);
  color: var(--mh-text-muted);
  font-weight: 600;
}

.mh-calc__scenario-tag {
  margin: 0 0 var(--mh-space-3);
  color: var(--mh-accent);
  font-weight: 700;
}

.mh-calc__scenario .mh-calc__rows {
  margin: 0;
}

/* ---- the risk warning: the same block as the results, body size, full text colour, never collapsible ---- */
.mh-calc__risk {
  padding: var(--mh-space-4);
  border: 2px solid var(--mh-border-strong);
  border-radius: var(--mh-radius-md);
  background: var(--mh-surface);
  color: var(--mh-text);
}

.mh-calc__risk-text {
  margin: 0;
  color: var(--mh-text);
  font-size: 1rem;
  line-height: 1.6;
}

.mh-calc__risk-text strong {
  display: block;
  margin-bottom: var(--mh-space-1);
  font-family: var(--mh-font-display);
  font-size: 1.125rem;
}

/* ---- the fallback of a broken config or a missing script ---- */
.mh-calc__fallback {
  display: grid;
  gap: var(--mh-space-3);
}

.mh-calc__fallback p {
  margin: 0;
}

.mh-calc__errors {
  margin: 0;
  padding-left: var(--mh-space-6);
  color: var(--mh-danger);
  overflow-wrap: anywhere;
}

/* ---- the contact area under the calculator ---- */
.mh-calc-cta {
  display: grid;
  gap: var(--mh-space-3);
  margin-top: var(--mh-space-4);
}

.mh-calc-cta .mh-btn {
  width: 100%;
  text-align: center;
}

/* ---- reduced motion: no transition on the slider thumb, the neon line stays lit without flickering ---- */
@media (prefers-reduced-motion: reduce) {
  .mh-calc__delay {
    animation: none;
  }

  .mh-calc__range::-webkit-slider-thumb,
  .mh-calc__range::-moz-range-thumb {
    transition: none;
  }
}