/*
 * Cenova kalkulacka.
 *
 * Mobile-first: zaklad je mobil, desktop pridavaju min-width dotazy. Je to
 * naopak nez vo zvysku temy, a zamerne - vacsina navstev tejto sekcie pride
 * z reklamy na mobile.
 *
 * Selektory su prefixovane "body" len tam, kde tema alebo jej customizer
 * definuju to iste (nadpisy, odkazy, tlacidla, tabulky). Vdaka tomu nie je
 * potrebne !important.
 *
 * Farby su natvrdo, ako vo zvysku projektu - CSS premenne tu nikde nie su.
 * Pozor na #93c45a: na bielej ma kontrast ~2,1:1, takze nikdy nie ako farba
 * textu, len vyplne a ikony vedla popisu.
 */

.kodeo-calc {
    max-width: 900px;
    margin: 0 auto;
    /* Bez pozadia a ramceka - sekcia sa chova ako kazda ina sekcia webu. */
    padding: 0 20px;
    /* Kotva nesmie skoncit pod lepivou hlavickou temy. */
    scroll-margin-top: 100px;
}

.kodeo-calc,
.kodeo-calc *,
.kodeo-calc *::before,
.kodeo-calc *::after {
    box-sizing: border-box;
}

/* Tema casto rusi obrysy fokusu - vraciame ich spat. */
body .kodeo-calc :focus-visible {
    outline: 2px solid #2f3133;
    outline-offset: 2px;
}

.kodeo-calc__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- hlavicka sekcie ---------- */

/*
 * Hlavicka drzi vzor, ktory na tomto webe pouzivaju vsetky ostatne sekcie:
 * zelene nadocie (Roboto 19px/700, uppercase, letter-spacing 0,7px), pod nim
 * H2 v Poppins 32px/600 a nakoniec sivy uvodny odstavec 19px - vsetko
 * centrovane. Predtym mala kalkulacka vlastnu, mensiu a lavo zarovnanu
 * hlavicku a vyzerala ako cudzi prvok medzi ostatnymi sekciami.
 *
 * Velkost H2 sa zamerne NENASTAVUJE: tema uz bezny h2 renderuje presne ako
 * Poppins 32px/600 #323a48, takze staci nezasahovat a nadpis sedi sam - aj
 * ked sa raz zmeni tema.
 */

.kodeo-calc__intro {
    text-align: center;
}

/*
 * Zelena je zamerne tmavsia nez akcent #93c45a, ktorym su nadocia ostatnych
 * sekcii. Akcent ma na svetlom podklade kontrast ~2:1 - nesplna ani hranicu
 * 3:1 pre velky tucny text, nieto 4,5:1 pre bezny. #4a7420 je z tej istej
 * rodiny a ma 4,9:1, takze prejde v kazdej velkosti.
 */
.kodeo-calc__eyebrow {
    margin: 0 0 6px;
    color: #4a7420;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.7px;
    line-height: 1.5;
    text-transform: uppercase;
}

body .kodeo-calc__heading {
    margin: 0 0 14px;
    line-height: 1.5;
}

.kodeo-calc__lead {
    max-width: 720px;
    margin: 0 auto;
    color: #737b84;
    font-size: 19px;
    line-height: 1.5;
}

/*
 * Odstup tlacidla drzi tlacidlo samo, nie spodny margin odstavca nad nim.
 * Tema ma pravidlo "div p:last-of-type { margin-bottom: 0 }" so specificitou
 * 0-1-2 - jednotriedny selektor odstavca ho neprebije a tlacidlo by ostalo
 * nalepene na texte.
 */
.kodeo-calc__intro .kodeo-calc__start {
    margin-top: 30px;
}

/* ---------- karta interaktivnej casti ---------- */

/*
 * Ramcek dostava az samotny formular a vysledok, nie cela sekcia. V pokojovom
 * stave je na stranke len nadpis a tlacidlo - karta okolo nich pusobila ako
 * prazdny plavajuci box, kedze ostatne sekcie webu ziadne karty nemaju.
 */

.kodeo-calc__stage,
.kodeo-calc__result {
    padding: 24px 18px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    text-align: left;
}

/* ---------- priebeh ---------- */

.kodeo-calc__progress {
    margin-bottom: 22px;
}

.kodeo-calc__progress-track {
    height: 6px;
    background: #ececec;
    border-radius: 999px;
    overflow: hidden;
}

.kodeo-calc__progress-fill {
    display: block;
    width: 0;
    height: 100%;
    background: #93c45a;
    border-radius: 999px;
    transition: width .3s ease;
}

.kodeo-calc__progress-label {
    margin: 8px 0 0;
    color: #737b84;
    font-size: 13px;
}

/* ---------- otazka ---------- */

.kodeo-calc__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

body .kodeo-calc__question {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    color: #323a48;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
    text-wrap: pretty;
}

.kodeo-calc__help {
    margin: 0 0 18px;
    color: #737b84;
    font-size: 14px;
    line-height: 1.5;
}

.kodeo-calc__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/*
 * Natívny input, len vizualne skryty. Klavesnica, ohlasovanie stavu aj
 * skupinova semantika prichadzaju zadarmo - postavit to z <div> by znamenalo
 * dopisat to vsetko rucne a horsie.
 */
.kodeo-calc__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.kodeo-calc__option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    background: #fff;
    border: 2px solid #ececec;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.kodeo-calc__option:hover {
    border-color: #c5d9ad;
    background: #fafcf7;
}

.kodeo-calc__option-mark {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid #c9ced6;
    border-radius: 50%;
    transition: border-color .2s ease, background-color .2s ease;
}

.kodeo-calc__input[type="checkbox"] + .kodeo-calc__option-mark {
    border-radius: 5px;
}

.kodeo-calc__input:checked + .kodeo-calc__option-mark {
    background: #93c45a;
    border-color: #93c45a;
    box-shadow: inset 0 0 0 3px #fff;
}

.kodeo-calc__input:checked ~ .kodeo-calc__option-label {
    font-weight: 700;
}

.kodeo-calc__option:has(.kodeo-calc__input:checked) {
    border-color: #93c45a;
    background: #f6faf1;
}

.kodeo-calc__input:focus-visible + .kodeo-calc__option-mark {
    outline: 2px solid #2f3133;
    outline-offset: 2px;
}

.kodeo-calc__option-label {
    color: #323a48;
    font-size: 16px;
    line-height: 1.4;
    text-wrap: pretty;
}

/* ---------- navigacia ---------- */

.kodeo-calc__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
}

body .kodeo-calc__back {
    padding: 10px 4px;
    color: #737b84;
    background: none;
    border: 0;
    font-size: 15px;
    text-decoration: underline;
    cursor: pointer;
}

body .kodeo-calc__next {
    margin-left: auto;
}

/* ---------- vysledok ---------- */

.kodeo-calc__headline {
    padding-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid #ececec;
}

.kodeo-calc__result-lead {
    margin: 0 0 4px;
    color: #737b84;
    font-size: 15px;
}

body .kodeo-calc__result-name {
    margin: 0 0 6px;
    color: #323a48;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.kodeo-calc__result-price {
    margin: 0 0 6px;
    color: #323a48;
    font-size: 32px;
    font-weight: 700;
}

.kodeo-calc__result-meta {
    margin: 0;
    color: #737b84;
    font-size: 14px;
}

.kodeo-calc__result-copy {
    margin: 12px auto 0;
    max-width: 620px;
    color: #5b6470;
    font-size: 16px;
    line-height: 1.6;
    text-wrap: pretty;
}

body .kodeo-calc__subheading {
    margin: 26px 0 10px;
    color: #323a48;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body .kodeo-calc__why-list,
body .kodeo-calc__excluded-list {
    margin: 0;
    padding-left: 20px;
    color: #5b6470;
    font-size: 15px;
    line-height: 1.65;
}

body .kodeo-calc__why-list li,
body .kodeo-calc__excluded-list li {
    margin-bottom: 6px;
    text-wrap: pretty;
}

/* ---------- porovnavacia tabulka ---------- */

.kodeo-calc__compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

body .kodeo-calc__table {
    width: 100%;
    /*
     * Zamerne separate: lepivy prvy stlpec je v Safari s border-collapse
     * collapse rozbity - okraje sa nekreslia a stlpec sa netrapi.
     */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

body .kodeo-calc__table th,
body .kodeo-calc__table td {
    padding: 10px 12px;
    border-bottom: 1px solid #ececec;
    text-align: center;
    vertical-align: middle;
}

body .kodeo-calc__table thead th {
    min-width: 8.5rem;
    color: #323a48;
    font-size: 13px;
    font-weight: 700;
    scroll-snap-align: start;
}

body .kodeo-calc__table thead th.is-recommended {
    color: #4d7a1f;
}

body .kodeo-calc__table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 10rem;
    background: #fff;
    color: #5b6470;
    font-weight: 400;
    text-align: left;
}

.kodeo-calc__table .is-included {
    color: #4d7a1f;
    font-weight: 700;
}

.kodeo-calc__table .is-excluded {
    color: #c0392b;
    font-weight: 700;
}

.kodeo-calc__table .is-addon {
    color: #737b84;
    font-size: 12px;
}

.kodeo-calc__table .is-na {
    color: #b9bec5;
}

/* ---------- akcie ---------- */

.kodeo-calc__disclaimer {
    margin: 22px 0 0;
    color: #737b84;
    font-size: 13px;
    line-height: 1.6;
    text-wrap: pretty;
}

.kodeo-calc__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

body .kodeo-calc__cta {
    display: block;
    width: 100%;
}

/*
 * kodeo-buttons.css (z kodeo-portfolio) dava kazdemu tlacidlu za tlacidlom
 * margin-top: 10px - pocita s tlacidlami pod sebou. Vo flex riadku ten okraj
 * ukroji z krizovej osi, takze sa druhe tlacidlo nedotiahne na rovnaku vysku
 * a sedi o 10 px nizsie. Odstupy tu riesi gap.
 */
body .kodeo-calc__actions .kodeo-btn + .kodeo-btn {
    margin-top: 0;
}

.kodeo-calc__footnote {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    margin: 16px 0 0;
}

body .kodeo-calc__link {
    padding: 4px 0;
    color: #737b84;
    background: none;
    border: 0;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- desktop ---------- */

@media (min-width: 700px) {
    .kodeo-calc__stage,
    .kodeo-calc__result {
        padding: 32px 36px;
    }

    .kodeo-calc__options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Jednostlpcovo, ked su moznosti dlhe vety. */
    .kodeo-calc__options:has(.kodeo-calc__option:nth-child(7)) {
        grid-template-columns: 1fr;
    }

    .kodeo-calc__actions {
        flex-direction: row;
        justify-content: center;
    }

    body .kodeo-calc__cta {
        display: inline-block;
        width: auto;
        min-width: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kodeo-calc__progress-fill,
    .kodeo-calc__option {
        transition: none;
    }
}

/* ---------- dopyt priamo vo vysledku ---------- */

.kodeo-calc__lead-form {
    margin-top: 26px;
    padding: 22px 20px;
    background: #f6faf1;
    border: 2px solid #dceac9;
    border-radius: 10px;
}

body .kodeo-calc__lead-form .kodeo-calc__subheading {
    margin-top: 0;
}

.kodeo-calc__lead-intro {
    margin: 0 0 18px;
    color: #5b6470;
    font-size: 15px;
    line-height: 1.6;
    text-wrap: pretty;
}

.kodeo-calc__field {
    margin-bottom: 14px;
}

body .kodeo-calc__label {
    display: block;
    margin-bottom: 5px;
    color: #323a48;
    font-size: 14px;
    font-weight: 700;
}

body .kodeo-calc__text {
    display: block;
    width: 100%;
    padding: 11px 14px;
    color: #323a48;
    background: #fff;
    border: 2px solid #d7dde3;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px; /* pod 16px zoomuje iOS pri fokuse */
    line-height: 1.4;
}

body .kodeo-calc__text:focus {
    border-color: #93c45a;
    outline: none;
}

body .kodeo-calc__text:focus-visible {
    outline: 2px solid #2f3133;
    outline-offset: 1px;
}

.kodeo-calc__field-help {
    margin: 5px 0 0;
    color: #737b84;
    font-size: 13px;
}

/* Pasca na roboty - clovek ju nesmie vidiet ani na nu natrafit tabulatorom. */
.kodeo-calc__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kodeo-calc__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 10px;
    color: #323a48;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    text-wrap: pretty;
}

/*
 * Suhlas je vedome nezaskrtnuty a je to samostatny ukon, nie sucast tlacidla
 * Odoslat. Zaskrtavatko je preto naozajstne, nie vizualna napodobenina.
 */
.kodeo-calc__consent input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: #6a9c3c;
}

.kodeo-calc__privacy {
    margin: 0 0 16px;
    color: #737b84;
    font-size: 13px;
    line-height: 1.55;
    text-wrap: pretty;
}

body .kodeo-calc__privacy a {
    color: #4d7a1f;
    text-decoration: underline;
}

.kodeo-calc__error {
    margin: 0 0 14px;
    padding: 10px 12px;
    color: #c0392b;
    background: #fdf2f1;
    border: 1px solid #f0c4bf;
    border-radius: 6px;
    font-size: 14px;
}

body .kodeo-calc__submit {
    display: block;
    width: 100%;
}

body .kodeo-calc__submit[disabled] {
    opacity: .65;
    cursor: default;
    transform: none;
}

.kodeo-calc__done {
    margin-top: 26px;
    padding: 24px 20px;
    background: #f6faf1;
    border: 2px solid #93c45a;
    border-radius: 10px;
    text-align: center;
}

body .kodeo-calc__done-heading {
    margin: 0 0 8px;
    color: #4d7a1f;
    font-size: 20px;
    font-weight: 700;
}

.kodeo-calc__done-text {
    margin: 0;
    color: #5b6470;
    font-size: 15px;
    line-height: 1.6;
    text-wrap: pretty;
}

@media (min-width: 700px) {
    .kodeo-calc__lead-form {
        padding: 28px 30px;
    }

    body .kodeo-calc__submit {
        display: inline-block;
        width: auto;
        min-width: 240px;
    }
}

.kodeo-calc__from-link {
    margin: 0 0 18px;
    padding: 10px 14px;
    color: #6b5b1f;
    background: #fdf7e3;
    border: 1px solid #eddfb0;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
    text-wrap: pretty;
}