/*
 * Ceník – styly komponent PricingCards, PricingCalculator a PricingTable.
 * Staví na proměnných a třídách webu (projectTheme.css / componentStyles.css): barvy --color-*,
 * tlačítka .box-button, formulářové prvky .form-control, pozadí .background--*.
 * Pozor: globální reset webu nastavuje každému prvku color: var(--foreground) a background: none,
 * proto se barva textu mění přes --foreground a pozadí se nastavuje explicitně.
 * Načítá se jen na stránkách s těmito komponentami (Views/Partials/Pricing/PricingAssets.cshtml).
 */

.pricing-cards,
.pricing-calc,
.pricing-table {
    --pricing-text: var(--color-neutral-900);
    --pricing-text-secondary: var(--color-neutral-600);
    --pricing-text-body: var(--color-neutral-700);
    --pricing-line: var(--color-neutral-200);
    --list-item-margin-bottom: 0;
    /* Běžný text jako na celém webu (text-md 16/24), drobný text jako popisky formulářů (text-sm 14/20). */
    --pricing-text-size: var(--text-md-font-size-desktop, 16px);
    --pricing-text-line: var(--text-md-line-height-desktop, 24px);
    --pricing-small-size: var(--text-sm-font-size-desktop, 14px);
    --pricing-small-line: var(--text-sm-line-height-desktop, 20px);
    width: 100%;
    max-width: 100%;
}

.pricing-check {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 3px;
    fill: none;
    stroke: var(--color-brand-600);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ——————————————— */
/* ROZESTUPY SEKCÍ */
/* ——————————————— */

/* Dvě podbarvené sekce se zapnutým „Extra prostor“ se na webu dotýkají – na Ceníku mezi ně dáme běžné odsazení sekce. */
.page--pricingPage main > section.extra-space + section.extra-space {
    margin-top: var(--padding-block);
}

/* ——————————————————————————————————————————————— */
/* SEZNAM S IKONAMI (Text, Vlastní CSS třída „pricing-highlights“) */
/* ——————————————————————————————————————————————— */

/* V RTE: odrážkový seznam, v položce odstavec s ikonou (SVG z výběru ikon) a odstavec s textem. */
.pricing-highlights ul {
    --list-item-margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

    .pricing-highlights ul > li {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
        max-width: none;
        padding: 14px 16px;
        border-radius: 12px;
        background: var(--color-white);
    }

        .pricing-highlights ul > li::before {
            content: none;
        }

        .pricing-highlights ul > li > p {
            margin: 0;
            max-width: none;
        }

            .pricing-highlights ul > li > p:first-child {
                --foreground: var(--color-brand-600);
                display: flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border-radius: 999px;
                background: var(--color-brand-50);
            }

                .pricing-highlights ul > li > p:first-child svg {
                    width: 18px;
                    height: 18px;
                }

/* ——————————————————————————————————————————————————————— */
/* MŘÍŽKY KARET (Mřížka, Vlastní CSS třída „pricing-card-grid“) */
/* ——————————————————————————————————————————————————————— */

/* Web má v mřížkách rozestup 8 px (i layout--signpost, který Mřížka přidává sama); karty v ceníku mají 24 px. */
.layout.pricing-card-grid {
    --column-gap-desktop: 24px;
    --row-gap-desktop: 24px;
    --column-gap-mobile: 16px;
    --row-gap-mobile: 16px;
}

/* Karty „Nastavení podle vašich potřeb“ (navíc třída „pricing-setup-grid“): odkaz vždy dole, cenový řádek oranžově. */
.pricing-setup-grid .card__body {
    display: flex;
    flex-direction: column;
}

    .pricing-setup-grid .card__body > .layout--button-set {
        margin-top: auto;
        padding-top: 8px;
    }

    .pricing-setup-grid .card__body > h3 + p {
        --foreground: var(--color-brand-600);
    }

/* ——————————————————— */
/* ŠTÍTKY V HERO (Sada štítků) */
/* ——————————————————— */

/* Na stránce Ceník (body.page--pricingPage) mají štítky podobu z návrhu: bílá pilulka, šedý rámeček, fajfka. */
.page--pricingPage .layout--badge-set {
    --badge-set-column-gap: 10px;
    --badge-set-row-gap: 10px;
}

.page--pricingPage .layout--badge-set .badge {
    --background: var(--color-white);
    --foreground: var(--color-neutral-900);
    --border: 1px solid var(--color-neutral-200);
    --padding: 0 14px 0 12px;
    --font-size: 14px;
    --line-height: 20px;
    --gap: 8px;
    --badge-font-weight: 500;
    height: 38px;
}

    .page--pricingPage .layout--badge-set .badge::before {
        content: "";
        flex: none;
        width: 16px;
        height: 16px;
        background: var(--color-brand-600);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
    }

/* ———————————— */
/* TARIFOVÉ KARTY */
/* ———————————— */

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: 20px;
    background: var(--background, var(--color-gray-light));
}

    .pricing-card.is-highlighted {
        outline: 2px solid var(--color-brand-600);
        outline-offset: -2px;
    }

    .pricing-card.is-custom {
        border: 1px solid var(--pricing-line);
    }

    .pricing-card h2,
    .pricing-card p,
    .pricing-card ul,
    .pricing-card li {
        margin: 0;
        max-width: none;
    }

.pricing-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
}

.pricing-card .pricing-card__name {
    --foreground: var(--pricing-text-secondary);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-card.is-highlighted .pricing-card__name {
    --foreground: var(--color-brand-600);
}

.pricing-card__badge {
    --foreground: var(--color-white);
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--color-brand-600);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.pricing-card .pricing-card__price {
    margin-top: 16px;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.02em;
}

    .pricing-card .pricing-card__price strong {
        font-weight: 700;
    }

.pricing-card .pricing-card__price--custom {
    font-size: 30px;
}

.pricing-card .pricing-card__price-note {
    --foreground: var(--pricing-text-secondary);
    margin-top: 4px;
    font-size: var(--pricing-text-size);
    line-height: var(--pricing-text-line);
}

.pricing-card .pricing-card__desc {
    --foreground: var(--pricing-text-body);
    margin-top: 16px;
    min-height: 72px;
    font-size: var(--pricing-text-size);
    line-height: var(--pricing-text-line);
    text-wrap: pretty;
}

.pricing-card .pricing-card__features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 20px;
}

    .pricing-card .pricing-card__features > li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 0;
        font-size: var(--pricing-text-size);
        line-height: var(--pricing-text-line);
    }

        .pricing-card .pricing-card__features > li::before {
            content: none;
        }

/* Blok k nastavení je ve všech kartách dole a stejně vysoký (2 řádky), aby čáry i tlačítka lícovala. */
.pricing-card__setup {
    --foreground: var(--pricing-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: calc(2 * var(--pricing-text-line) + 4px + 17px);
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--pricing-line);
    font-size: var(--pricing-text-size);
    line-height: var(--pricing-text-line);
}

.pricing-card.is-highlighted .pricing-card__setup {
    border-top-color: var(--color-brand-100);
}

.pricing-card__cta {
    display: flex;
    padding-top: 24px;
}

    /* Karta bez bloku k nastavení: tlačítko zůstane dole. */
    .pricing-card__features + .pricing-card__cta {
        margin-top: auto;
    }

    /* Pevná výška, aby plné (rámeček 2 px) i obrysové tlačítko (1 px) lícovaly. */
    .pricing-card__cta .box-button {
        width: 100%;
        height: var(--button-large-height, 48px);
        padding-block: 0;
    }

/* Obrysová tlačítka jsou v návrhu bílá (na šedé kartě i v bílém výsledku kalkulačky); web je má průhledná. */
.pricing-cards .box-button.outline.bw,
.pricing-calc .box-button.outline.bw {
    --background: var(--color-white);
}

    .pricing-cards .box-button.outline.bw:hover,
    .pricing-calc .box-button.outline.bw:hover {
        --background: var(--color-neutral-100);
    }

@media screen and (max-width: 1079px) {
    .pricing-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767px) {
    .pricing-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .pricing-card {
        padding: 24px;
    }

    .pricing-card .pricing-card__desc {
        min-height: 0;
    }
}

/* ————————— */
/* KALKULAČKA */
/* ————————— */

.pricing-calc {
    --form-control-input-width: 100%;
    --form-control-body-width: 100%;
    --form-control-input-background: var(--color-white);
    --checkbox-background: var(--color-white);
    --checkbox-background-hover: var(--color-white);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 40px;
    align-items: start;
}

    .pricing-calc p,
    .pricing-calc ul,
    .pricing-calc li,
    .pricing-calc dl,
    .pricing-calc dt,
    .pricing-calc dd {
        margin: 0;
        max-width: none;
    }

.pricing-calc__form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.pricing-calc__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

    .pricing-calc__fields .form-control.input {
        display: flex;
        width: 100%;
    }

.pricing-calc__required {
    --foreground: var(--color-brand-600);
}

.pricing-calc__options {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pricing-calc__hint {
    --foreground: var(--pricing-text-secondary);
}

.pricing-calc .pricing-calc__note {
    --foreground: var(--pricing-text-secondary);
    max-width: 560px;
    font-size: var(--pricing-small-size);
    line-height: var(--pricing-small-line);
}

.pricing-calc__result {
    display: flex;
    flex-direction: column;
    padding: 32px;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 12px 40px rgba(24, 29, 39, 0.08);
}

.pricing-calc .pricing-calc__nojs {
    --foreground: var(--pricing-text-secondary);
    font-size: var(--pricing-text-size);
    line-height: var(--pricing-text-line);
}

.pricing-calc .pricing-calc__eyebrow,
.pricing-calc .pricing-calc__compare-title {
    --foreground: var(--pricing-text-secondary);
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-calc .pricing-calc__tier {
    --foreground: var(--color-brand-600);
    margin-top: 6px;
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pricing-calc .pricing-calc__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 20px;
}

    .pricing-calc .pricing-calc__price strong {
        font-size: 44px;
        line-height: 52px;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .pricing-calc .pricing-calc__price span {
        --foreground: var(--pricing-text-secondary);
        font-size: var(--pricing-text-size);
    }

.pricing-calc .pricing-calc__price--custom strong {
    font-size: 32px;
    line-height: 40px;
}

.pricing-calc .pricing-calc__breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--color-brand-25);
    font-size: var(--pricing-text-size);
    line-height: var(--pricing-text-line);
}

    .pricing-calc .pricing-calc__breakdown * {
        font-size: inherit;
        line-height: inherit;
    }

.pricing-calc__breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    /* Web dává dt/dd width: 100 % – popisek má zabrat zbytek řádku, částka jen svou šířku. */
    .pricing-calc__breakdown-row dt {
        flex: 1 1 auto;
        width: auto;
    }

    .pricing-calc__breakdown-row dd {
        flex: none;
        width: auto;
        font-weight: 600;
        text-align: right;
        white-space: nowrap;
    }

.pricing-calc__breakdown-row--one-off {
    --foreground: var(--pricing-text-body);
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--color-brand-100);
}

.pricing-calc .pricing-calc__breakdown-title {
    font-weight: 600;
}

.pricing-calc .pricing-calc__reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .pricing-calc .pricing-calc__reasons > li {
        display: flex;
        gap: 8px;
        padding: 0;
    }

        .pricing-calc .pricing-calc__reasons > li::before {
            --foreground: var(--color-brand-600);
            content: "!";
            position: static;
            flex: none;
            width: 16px;
            font-weight: 700;
            text-align: center;
        }

.pricing-calc .pricing-calc__reason {
    margin-top: 20px;
    font-size: var(--pricing-text-size);
    line-height: var(--pricing-text-line);
    text-wrap: pretty;
}

.pricing-calc .pricing-calc__includes {
    --foreground: var(--pricing-text-secondary);
    margin-top: 12px;
    font-size: var(--pricing-text-size);
    line-height: var(--pricing-text-line);
}

    .pricing-calc .pricing-calc__includes strong {
        --foreground: var(--pricing-text);
    }

.pricing-calc__compare {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--pricing-line);
}

    .pricing-calc__compare ul {
        display: flex;
        flex-direction: column;
        margin-top: 4px;
    }

.pricing-calc .pricing-calc__compare-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    padding: 0;
    font-size: var(--pricing-text-size);
    line-height: var(--pricing-text-line);
}

    .pricing-calc .pricing-calc__compare-row::before {
        content: none;
    }

    .pricing-calc .pricing-calc__compare-row span:last-child {
        text-align: right;
    }

    .pricing-calc .pricing-calc__compare-row.is-recommended {
        --foreground: var(--color-brand-600);
        font-weight: 600;
    }

    .pricing-calc .pricing-calc__compare-row.is-failed {
        --foreground: var(--color-neutral-500);
    }

.pricing-calc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

    .pricing-calc__actions .box-button {
        flex: 1 1 0;
        min-width: 160px;
    }

@media screen and (max-width: 1079px) {
    .pricing-calc {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .pricing-calc {
        gap: 32px;
    }

    .pricing-calc__fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .pricing-calc__result {
        padding: 20px 16px;
    }

    .pricing-calc .pricing-calc__breakdown {
        padding: 12px;
    }

    .pricing-calc .pricing-calc__tier {
        font-size: 30px;
        line-height: 38px;
    }

    .pricing-calc .pricing-calc__price strong {
        font-size: 36px;
        line-height: 44px;
    }
}

/* ——————————————— */
/* POROVNÁNÍ TARIFŮ */
/* ——————————————— */

/* Tabulka webu (componentStyles.css: table) se řídí proměnnými --table-*; tady je přenastavujeme podle návrhu. */
.pricing-table {
    --table-background: transparent;
    --table-foreground: var(--pricing-text);
    --table-border: none;
    --table-border-radius: 0;
    --table-box-shadow: none;
    --table-spacing: 0;
    --table-font-size: var(--pricing-text-size);
    --table-line-height: var(--pricing-text-line);
    --table-cell-padding: 0 16px;
    --table-header-background: transparent;
    --table-header-foreground: var(--pricing-text);
    --table-header-font-size: var(--pricing-text-size);
    --table-header-font-weight: 400;
    --table-header-line-height: var(--pricing-text-line);
    --table-header-horizontal-separator: 1px solid var(--pricing-line);
    --table-header-vertical-separator: none;
    --table-cell-background: transparent;
    --table-cell-foreground: var(--pricing-text);
    --table-body-font-size: var(--pricing-text-size);
    --table-body-font-weight: 400;
    --table-body-line-height: var(--pricing-text-line);
    --table-body-horizontal-separator: 1px solid var(--pricing-line);
    --table-body-vertical-separator: none;
    --table-row-hover-background: var(--color-neutral-50);
    --table-row-hover-foreground: var(--pricing-text);
}

.pricing-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .pricing-table__scroll:focus-visible {
        box-shadow: var(--focus-ring-shadow);
    }

.pricing-table table {
    min-width: 760px;
    border-collapse: collapse;
}

    /* Web dává všem prvkům tabulky overflow: hidden, to by rozbilo sticky první sloupec. */
    .pricing-table table,
    .pricing-table table * {
        overflow: visible;
    }

.pricing-table th,
.pricing-table td {
    height: 52px;
    text-align: center;
    vertical-align: middle;
}

    .pricing-table th:first-child {
        text-align: left;
    }

/* Web u posledního řádku tabulky odebírá linku buňkám – tady má mít linku celý řádek. */
.pricing-table tbody tr:last-child td {
    border-bottom: 1px solid var(--pricing-line);
}

.pricing-table thead th {
    width: 18%;
    height: 60px;
    border-bottom: 2px solid var(--pricing-text);
    color: var(--pricing-text-secondary);
    font-size: var(--pricing-small-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

    .pricing-table thead th:first-child {
        width: 28%;
    }

    .pricing-table thead th.is-highlighted {
        color: var(--color-brand-600);
    }

.pricing-table .is-highlighted {
    background: var(--color-brand-25);
}

.pricing-table .pricing-table__group th {
    height: 44px;
    background: var(--color-neutral-100);
    color: var(--pricing-text-secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Popisek skupiny zůstává vidět i při horizontálním scrollu tabulky na mobilu. */
.pricing-table__group-label {
    position: sticky;
    left: 16px;
    display: inline-block;
}

.pricing-table td strong {
    font-size: 16px;
    font-weight: 700;
}

.pricing-table__muted {
    --foreground: var(--pricing-text-secondary);
}

.pricing-table__dash {
    --foreground: var(--color-neutral-500);
}

.pricing-table .pricing-check {
    width: 20px;
    height: 20px;
    margin: 0;
    stroke-width: 2.2;
    vertical-align: middle;
}

@media screen and (max-width: 767px) {
    .pricing-table table {
        min-width: 640px;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 0 12px;
    }

    .pricing-table thead th:first-child {
        width: 140px;
    }

    /* První sloupec zůstává při horizontálním scrollu vidět. */
    .pricing-table thead th:first-child,
    .pricing-table tbody th[scope=row] {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--color-white);
        box-shadow: 1px 0 0 var(--pricing-line);
    }

    .pricing-table__group-label {
        left: 12px;
    }
}