.ee-calc { --ee-calc-accent: #2563eb; --ee-calc-gap: 32px; --ee-calc-field-gap: 20px; --ee-calc-field-bg: #fff; --ee-calc-field-border: rgba( 0, 0, 0, 0.2 ); position: relative; box-sizing: border-box; } .ee-calc *, .ee-calc *::before, .ee-calc *::after { box-sizing: border-box; } .ee-calc__title { margin: 0 0 20px; } .ee-calc__body { display: grid; gap: var( --ee-calc-gap ); align-items: start; } @media ( min-width: 768px ) { .ee-calc--side .ee-calc__body { grid-template-columns: minmax( 0, 3fr ) minmax( 0, 2fr ); } } .ee-calc__inputs { display: grid; gap: var( --ee-calc-field-gap ); } .ee-calc__field { margin: 0; padding: 0; border: 0; min-width: 0; } .ee-calc__label { display: block; margin: 0 0 6px; padding: 0; font-weight: 600; } .ee-calc__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .ee-calc__bubble { font-variant-numeric: tabular-nums; font-weight: 600; color: var( --ee-calc-accent ); } .ee-calc__help { display: block; margin: 4px 0 0; font-size: 0.85em; opacity: 0.75; } .ee-calc__control { display: flex; align-items: stretch; border: 1px solid var( --ee-calc-field-border ); border-radius: 6px; background: var( --ee-calc-field-bg ); overflow: hidden; } .ee-calc__control:focus-within { outline: 2px solid var( --ee-calc-accent ); outline-offset: 1px; } .ee-calc__affix { display: flex; align-items: center; padding: 0 10px; opacity: 0.7; white-space: nowrap; } .ee-calc .ee-calc__number { flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; box-shadow: none; } .ee-calc .ee-calc__number:focus { outline: none; } .ee-calc .ee-calc__select { width: 100%; padding: 10px 12px; border: 1px solid var( --ee-calc-field-border ); border-radius: 6px; background-color: var( --ee-calc-field-bg ); color: inherit; font: inherit; } .ee-calc__range { width: 100%; margin: 6px 0 0; accent-color: var( --ee-calc-accent ); cursor: pointer; } .ee-calc__choices { display: flex; flex-wrap: wrap; gap: 8px; } .ee-calc__choice { position: relative; margin: 0; cursor: pointer; } .ee-calc__choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ee-calc__choice span { display: inline-block; padding: 8px 14px; border: 1px solid var( --ee-calc-field-border ); border-radius: 999px; background: var( --ee-calc-field-bg ); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .ee-calc__choice input:checked + span { border-color: var( --ee-calc-accent ); background: var( --ee-calc-accent ); color: #fff; } .ee-calc__choice input:focus-visible + span { outline: 2px solid var( --ee-calc-accent ); outline-offset: 2px; } .ee-calc__switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .ee-calc__switch .ee-calc__label { margin: 0; } .ee-calc__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ee-calc__switch-track { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: var( --ee-calc-field-border ); transition: background-color 0.15s ease; } .ee-calc__switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ); transition: transform 0.15s ease; } .ee-calc__switch input:checked + .ee-calc__switch-track { background: var( --ee-calc-accent ); } .ee-calc__switch input:checked + .ee-calc__switch-track::after { transform: translateX( 18px ); } .ee-calc__switch input:focus-visible + .ee-calc__switch-track { outline: 2px solid var( --ee-calc-accent ); outline-offset: 2px; } .ee-calc__results { display: grid; gap: 14px; padding: 20px; border-radius: 8px; background: rgba( 127, 127, 127, 0.08 ); } .ee-calc__result { display: grid; gap: 2px; } .ee-calc__result-label { font-size: 0.9em; opacity: 0.8; } .ee-calc__result-value { font-size: 1.25em; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .ee-calc__result.is-primary { padding-top: 12px; border-top: 1px solid rgba( 127, 127, 127, 0.25 ); } .ee-calc__result.is-primary:first-child { padding-top: 0; border-top: 0; } .ee-calc__result.is-primary .ee-calc__result-value { font-size: 2em; line-height: 1.15; color: var( --ee-calc-accent ); } .ee-calc__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 20px; } .ee-calc .ee-calc__cta { display: inline-block; padding: 12px 24px; border: 0; border-radius: 6px; background: var( --ee-calc-accent ); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .ee-calc .ee-calc__cta:focus-visible, .ee-calc .ee-calc__reset:focus-visible { outline: 2px solid var( --ee-calc-accent ); outline-offset: 2px; } .ee-calc .ee-calc__reset { padding: 12px 18px; border: 1px solid var( --ee-calc-field-border ); border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; } .ee-calc__notice { margin: 12px 0 0; font-size: 0.9em; overflow-wrap: anywhere; } .ee-calc__notice[hidden] { display: none; } .ee-calc__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap; border: 0; } .ee-calc__errors { margin: 0 0 16px; padding: 12px 14px; border-left: 4px solid #d63638; background: #fcf0f1; color: #1d2327; font-size: 13px; } .ee-calc__errors ul { margin: 6px 0 0 18px; padding: 0; } .ee-calc-placeholder { padding: 24px; border: 1px dashed rgba( 127, 127, 127, 0.5 ); text-align: center; opacity: 0.8; } @media ( prefers-reduced-motion: reduce ) { .ee-calc__choice span, .ee-calc__switch-track, .ee-calc__switch-track::after { transition: none; } } .ee-multi-step-form { --ltxe-msf-accent: #2271b1; --ltxe-msf-track-bg: rgba(15, 23, 42, 0.1); --ltxe-msf-border: rgba(15, 23, 42, 0.18); --ltxe-msf-text: #1d2327; --ltxe-msf-muted: #50575e; --ltxe-msf-radius: 6px; --ltxe-msf-gap: 1rem; } .ee-multi-step-form__progress-track { height: 6px; margin-bottom: var(--ltxe-msf-gap); background: var(--ltxe-msf-track-bg); border-radius: 999px; overflow: hidden; } .ee-multi-step-form__progress { display: block; width: 0; height: 100%; background: var(--ltxe-msf-accent); border-radius: inherit; transition: width 0.3s ease; } @media (prefers-reduced-motion: reduce) { .ee-multi-step-form__progress { transition: none; } } .ee-multi-step-form__notice { margin: 0 0 var(--ltxe-msf-gap); padding: 0.65rem 0.8rem; border-radius: var(--ltxe-msf-radius); background: #e8f5e9; color: #1e4620; font-size: 0.9375rem; } .ee-multi-step-form__notice[hidden] { display: none; } .ee-multi-step-form__notice--error { background: #fcebea; color: #8a1f11; } .ee-multi-step-form__step { margin: 0; padding: 0; border: 0; min-width: 0; } .ee-multi-step-form__step[hidden] { display: none; } .ee-multi-step-form__step > legend { padding: 0; margin-bottom: 0.75rem; font-size: 1.125rem; font-weight: 600; color: var(--ltxe-msf-text); } .ee-multi-step-form__field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0 0 0.9rem; } .ee-multi-step-form__field > label { font-size: 0.9375rem; font-weight: 600; color: var(--ltxe-msf-text); } .ee-multi-step-form__field input, .ee-multi-step-form__field select, .ee-multi-step-form__field textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; padding: 0.55rem 0.7rem; border: 1px solid var(--ltxe-msf-border); border-radius: var(--ltxe-msf-radius); background: #fff; color: var(--ltxe-msf-text); font-size: 16px; line-height: 1.4; font-family: inherit; } .ee-multi-step-form__field textarea { min-height: 96px; resize: vertical; } .ee-multi-step-form__field input:focus-visible, .ee-multi-step-form__field select:focus-visible, .ee-multi-step-form__field textarea:focus-visible { outline: 2px solid var(--ltxe-msf-accent); outline-offset: 1px; border-color: var(--ltxe-msf-accent); } .ee-multi-step-form__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: var(--ltxe-msf-gap); } .ee-multi-step-form__prev, .ee-multi-step-form__next, .ee-multi-step-form__submit { min-height: 44px; padding: 0.6rem 1.25rem; border: 1px solid transparent; border-radius: var(--ltxe-msf-radius); font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; cursor: pointer; } .ee-multi-step-form__next, .ee-multi-step-form__submit { background: var(--ltxe-msf-accent); color: #fff; } .ee-multi-step-form__prev { background: transparent; border-color: var(--ltxe-msf-border); color: var(--ltxe-msf-text); } .ee-multi-step-form__prev[hidden], .ee-multi-step-form__next[hidden], .ee-multi-step-form__submit[hidden] { display: none; } .ee-multi-step-form__prev:disabled { opacity: 0.5; cursor: not-allowed; } .ee-multi-step-form__next:hover, .ee-multi-step-form__submit:hover, .ee-multi-step-form__prev:hover:not(:disabled) { filter: brightness(0.94); } @media (max-width: 480px) { .ee-multi-step-form__actions { flex-direction: column; align-items: stretch; } .ee-multi-step-form__prev, .ee-multi-step-form__next, .ee-multi-step-form__submit { width: 100%; } }