/* ==========================================================
   ДОБРОБОТ
   FANFA.RU VISUAL STYLE
   ========================================================== */


/* ==========================================================
   DESIGN TOKENS
   ========================================================== */

:root {

    /*
     * Brand
     */

    --fanfa-yellow:
        #ffd200;

    --fanfa-yellow-hover:
        #f2c700;

    --fanfa-yellow-soft:
        #fff8cc;


    /*
     * Base
     */

    --black:
        #111111;

    --black-soft:
        #242424;

    --text:
        #161616;

    --muted:
        #707070;

    --muted-light:
        #969696;

    --border:
        #dddddd;

    --border-dark:
        #bdbdbd;

    --background:
        #f7f7f5;

    --surface:
        #ffffff;


    /*
     * States
     */

    --success:
        #16784a;

    --success-soft:
        #edf8f1;

    --warning:
        #8a6500;

    --warning-soft:
        #fff8d8;

    --danger:
        #b42318;

    --danger-soft:
        #fff1f0;


    /*
     * UI
     */

    --radius-small:
        6px;

    --radius:
        10px;

    --radius-large:
        14px;

    --content-width:
        900px;

    --transition:
        180ms ease;
}


/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after {

    box-sizing:
        border-box;
}


html {

    margin:
        0;

    padding:
        0;

    min-height:
        100%;

    background:
        var(--background);

    -webkit-text-size-adjust:
        100%;
}


body {

    margin:
        0;

    padding:
        0;

    min-height:
        100vh;

    min-height:
        100dvh;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.45;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


button,
input,
textarea,
select {

    font:
        inherit;
}


button {

    -webkit-tap-highlight-color:
        transparent;
}


a {

    color:
        inherit;
}


img {

    display:
        block;

    max-width:
        100%;
}


[hidden] {

    display:
        none !important;
}


/* ==========================================================
   APP
   ========================================================== */

.app-shell {

    width:
        min(
            100%,
            var(--content-width)
        );

    min-height:
        100vh;

    min-height:
        100dvh;

    margin:
        0 auto;

    background:
        var(--surface);
}


/* ==========================================================
   TOP BAR
   ========================================================== */

.topbar {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        86px;

    padding:
        max(
            22px,
            env(
                safe-area-inset-top
            )
        )
        24px
        20px;

    border-bottom:
        1px solid
        var(--border);

    background:
        var(--surface);
}


.brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--black);

    font-size:
        23px;

    font-weight:
        800;

    letter-spacing:
        -.04em;

    text-transform:
        uppercase;
}


.brand::after {

    content:
        "";

    display:
        inline-block;

    width:
        10px;

    height:
        10px;

    background:
        var(--fanfa-yellow);
}


.brand-caption {

    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.4;

    letter-spacing:
        .025em;

    text-transform:
        uppercase;
}


/* ==========================================================
   MAIN
   ========================================================== */

.main {

    padding:
        38px
        24px
        calc(
            48px
            +
            env(
                safe-area-inset-bottom
            )
        );
}


/* ==========================================================
   HERO
   ========================================================== */

.hero-card {

    position:
        relative;

    overflow:
        hidden;

    padding:
        42px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background:
        var(--surface);
}


.hero-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        7px;

    background:
        var(--fanfa-yellow);
}


.eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        20px;

    color:
        var(--black);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .095em;

    text-transform:
        uppercase;
}


.eyebrow::before {

    content:
        "";

    display:
        inline-block;

    width:
        26px;

    height:
        3px;

    background:
        var(--fanfa-yellow);
}


h1 {

    max-width:
        720px;

    margin:
        0;

    color:
        var(--black);

    font-size:
        clamp(
            36px,
            7vw,
            58px
        );

    font-weight:
        800;

    line-height:
        .99;

    letter-spacing:
        -.055em;
}


.hero-text {

    max-width:
        650px;

    margin:
        26px 0 0;

    color:
        var(--muted);

    font-size:
        18px;

    line-height:
        1.55;
}


/* ==========================================================
   STATUS
   ========================================================== */

.status-box {

    position:
        relative;

    margin-top:
        30px;

    padding:
        15px 17px
        15px 46px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-small);

    background:
        #fafafa;

    color:
        var(--black-soft);

    font-size:
        13px;

    line-height:
        1.45;
}


.status-box::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        17px;

    width:
        12px;

    height:
        12px;

    border-radius:
        50%;

    background:
        var(--fanfa-yellow);

    transform:
        translateY(
            -50%
        );
}


.status-box.success {

    border-color:
        #bcdcc9;

    background:
        var(--success-soft);

    color:
        var(--success);
}


.status-box.success::before {

    background:
        #28a267;
}


.status-box.warning {

    border-color:
        #ead27b;

    background:
        var(--warning-soft);

    color:
        var(--warning);
}


.status-box.warning::before {

    background:
        var(--fanfa-yellow);
}


.status-box.error {

    border-color:
        #efb0aa;

    background:
        var(--danger-soft);

    color:
        var(--danger);
}


.status-box.error::before {

    background:
        var(--danger);
}


/* ==========================================================
   PRIVACY CONSENT
   ========================================================== */

.privacy-consent {

    display:
        grid;

    grid-template-columns:
        20px
        auto;

    column-gap:
        10px;

    row-gap:
        2px;

    align-items:
        start;

    margin-top:
        22px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.45;
}


.privacy-consent-checkbox {

    grid-row:
        1 / span 2;

    width:
        18px;

    height:
        18px;

    margin:
        0;

    accent-color:
        var(--fanfa-yellow);

    cursor:
        pointer;
}


.privacy-consent-label {

    cursor:
        pointer;
}


.privacy-consent-link {

    width:
        fit-content;

    color:
        var(--black);

    font-weight:
        700;

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;
}


.privacy-consent-link:hover {

    text-decoration-thickness:
        2px;
}


.privacy-consent-checkbox:focus-visible {

    outline:
        3px solid
        rgba(
            255,
            210,
            0,
            .35
        );

    outline-offset:
        2px;
}


/* ==========================================================
   PRIMARY BUTTON
   ========================================================== */

.primary-button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        58px;

    margin-top:
        20px;

    padding:
        16px 24px;

    border:
        1px solid
        var(--fanfa-yellow);

    border-radius:
        var(--radius-small);

    outline:
        none;

    background:
        var(--fanfa-yellow);

    color:
        var(--black);

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        .02em;

    text-transform:
        uppercase;

    cursor:
        pointer;

    transition:
        background-color
            var(--transition),
        border-color
            var(--transition),
        transform
            var(--transition);
}


.primary-button:hover {

    border-color:
        var(--black);

    background:
        var(--black);

    color:
        #ffffff;
}


.primary-button:active {

    transform:
        translateY(
            1px
        );
}


.primary-button:focus-visible {

    outline:
        3px solid
        rgba(
            255,
            210,
            0,
            .35
        );

    outline-offset:
        3px;
}


.primary-button:disabled {

    border-color:
        #e0e0e0;

    background:
        #eaeaea;

    color:
        #999999;

    cursor:
        default;

    transform:
        none;
}


/* ==========================================================
   API RESULT
   ========================================================== */

.api-result {

    margin-top:
        16px;

    padding:
        15px 17px;

    border:
        1px solid
        #bcdcc9;

    border-radius:
        var(--radius-small);

    background:
        var(--success-soft);

    color:
        var(--success);

    font-size:
        13px;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;
}


.api-result.error {

    border-color:
        #efb0aa;

    background:
        var(--danger-soft);

    color:
        var(--danger);
}


/* ==========================================================
   INFO CARDS
   ========================================================== */

.info-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

    margin-top:
        26px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    overflow:
        hidden;

    background:
        var(--border);
}


.info-card {

    position:
        relative;

    display:
        flex;

    min-height:
        178px;

    flex-direction:
        column;

    gap:
        14px;

    padding:
        25px 23px;

    background:
        var(--surface);
}


.info-card::before {

    content:
        "";

    display:
        block;

    width:
        34px;

    height:
        4px;

    margin-bottom:
        4px;

    background:
        var(--fanfa-yellow);
}


.info-card strong {

    color:
        var(--black);

    font-size:
        16px;

    font-weight:
        800;

    line-height:
        1.3;
}


.info-card span {

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.55;
}


/* ==========================================================
   FUTURE DIAGNOSTIC UI
   Эти стили пока могут не использоваться,
   но уже готовы для следующих экранов.
   ========================================================== */


/* ----------------------------------------------------------
   Screen
   ---------------------------------------------------------- */

.screen {

    width:
        100%;
}


.screen-header {

    margin-bottom:
        28px;
}


.screen-kicker {

    margin-bottom:
        12px;

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.screen-title {

    margin:
        0;

    color:
        var(--black);

    font-size:
        clamp(
            29px,
            6vw,
            45px
        );

    font-weight:
        800;

    line-height:
        1.06;

    letter-spacing:
        -.045em;
}


.screen-description {

    max-width:
        640px;

    margin:
        16px 0 0;

    color:
        var(--muted);

    font-size:
        16px;

    line-height:
        1.55;
}


/* ----------------------------------------------------------
   Progress
   ---------------------------------------------------------- */

.progress {

    margin-bottom:
        28px;
}


.progress-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        9px;

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;
}


.progress-track {

    position:
        relative;

    width:
        100%;

    height:
        5px;

    overflow:
        hidden;

    background:
        #e7e7e7;
}


.progress-value {

    height:
        100%;

    background:
        var(--fanfa-yellow);

    transition:
        width
            240ms ease;
}


/* ----------------------------------------------------------
   Question Card
   ---------------------------------------------------------- */

.question-card {

    padding:
        34px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background:
        var(--surface);
}


.question-number {

    margin-bottom:
        12px;

    color:
        var(--muted-light);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.question-title {

    margin:
        0;

    color:
        var(--black);

    font-size:
        clamp(
            25px,
            5vw,
            37px
        );

    font-weight:
        800;

    line-height:
        1.1;

    letter-spacing:
        -.035em;
}


.question-subtitle {

    margin:
        13px 0 0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.5;
}


/* ----------------------------------------------------------
   Options
   ---------------------------------------------------------- */

.answer-list {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        9px;

    margin-top:
        26px;
}


.answer-option {

    position:
        relative;

    text-align:
        left;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    gap:
        3px;

    min-height:
        58px;

    padding:
        14px 50px
        14px 17px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-small);

    background:
        var(--surface);

    color:
        var(--black);

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1.35;

    cursor:
        pointer;

    transition:
        border-color
            var(--transition),
        background-color
            var(--transition);
}


.answer-option-title {

    display:
        block;

    width:
        100%;

    text-align:
        left;
}


.answer-option-description {

    display:
        block;

    width:
        100%;

    text-align:
        left;

    color:
        var(--muted);

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.4;
}


.answer-option:hover {

    border-color:
        var(--black);
}


.answer-option::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        17px;

    width:
        18px;

    height:
        18px;

    border:
        1px solid
        #bdbdbd;

    background:
        #ffffff;

    transform:
        translateY(
            -50%
        );
}


.answer-option.selected {

    border-color:
        var(--black);

    background:
        var(--fanfa-yellow-soft);
}


.answer-option.selected::after {

    border-color:
        var(--fanfa-yellow);

    background:
        var(--fanfa-yellow);

    box-shadow:
        inset 0 0 0 4px
        #ffffff;
}


.answer-option.radio::after {

    border-radius:
        50%;
}


/* ----------------------------------------------------------
   Input
   ---------------------------------------------------------- */

.form-control {

    width:
        100%;

    min-height:
        56px;

    margin-top:
        24px;

    padding:
        15px 16px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        var(--radius-small);

    outline:
        none;

    background:
        var(--surface);

    color:
        var(--black);

    font-size:
        16px;

    line-height:
        1.4;

    transition:
        border-color
            var(--transition),
        box-shadow
            var(--transition);
}


textarea.form-control {

    min-height:
        130px;

    resize:
        vertical;
}


.form-control::placeholder {

    color:
        #aaaaaa;
}


.form-control:focus {

    border-color:
        var(--black);

    box-shadow:
        0 0 0 3px
        rgba(
            255,
            210,
            0,
            .25
        );
}


.form-control.is-invalid {

    border-color:
        var(--danger);

    box-shadow:
        0 0 0 3px
        rgba(
            181,
            54,
            44,
            .12
        );
}


/* ----------------------------------------------------------
   Lead contacts
   ---------------------------------------------------------- */

.lead-contact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.lead-contact-row .form-control {
    margin-top: 0;
}

.contact-add-button,
.contact-option-button,
.contact-remove-button {
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-small);
    background: var(--surface);
    color: var(--black);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.contact-add-button:hover,
.contact-option-button:hover,
.contact-remove-button:hover {
    border-color: var(--black);
}

.contact-add-button:focus-visible,
.contact-option-button:focus-visible,
.contact-remove-button:focus-visible {
    outline: 3px solid rgba(255, 210, 0, .25);
    outline-offset: 2px;
}

.contact-add-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.contact-add-menu[hidden] {
    display: none;
}

@media (max-width: 560px) {
    .lead-contact-row {
        grid-template-columns: 1fr;
    }

    .contact-remove-button {
        justify-self: start;
    }
}


/* ----------------------------------------------------------
   Navigation
   ---------------------------------------------------------- */

.screen-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        24px;
}


.secondary-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        54px;

    padding:
        14px 20px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        var(--radius-small);

    background:
        var(--surface);

    color:
        var(--black);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        .025em;

    text-transform:
        uppercase;

    cursor:
        pointer;

    transition:
        border-color
            var(--transition),
        background-color
            var(--transition);
}


.secondary-button:hover {

    border-color:
        var(--black);

    background:
        #f6f6f6;
}


.screen-actions
.primary-button {

    margin-top:
        0;
}


/* ----------------------------------------------------------
   Insight / Diagnostic Result
   ---------------------------------------------------------- */

.insight-card {

    position:
        relative;

    padding:
        26px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        var(--surface);
}


.insight-card.accent {

    border-color:
        var(--fanfa-yellow);

    background:
        var(--fanfa-yellow-soft);
}


.insight-label {

    margin-bottom:
        9px;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.insight-title {

    margin:
        0;

    color:
        var(--black);

    font-size:
        23px;

    font-weight:
        800;

    line-height:
        1.15;

    letter-spacing:
        -.025em;
}


.insight-text {

    margin:
        11px 0 0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.55;
}


/* ----------------------------------------------------------
   Score
   ---------------------------------------------------------- */

.score-card {

    padding:
        30px;

    border:
        1px solid
        var(--black);

    border-radius:
        var(--radius);

    background:
        var(--black);

    color:
        #ffffff;
}


.score-value {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        5px;

    color:
        var(--fanfa-yellow);

    font-size:
        58px;

    font-weight:
        800;

    line-height:
        .9;

    letter-spacing:
        -.05em;
}


.score-max {

    padding-bottom:
        5px;

    color:
        #8f8f8f;

    font-size:
        15px;

    font-weight:
        600;
}


.score-title {

    margin-top:
        16px;

    font-size:
        20px;

    font-weight:
        800;
}


.score-description {

    margin-top:
        8px;

    color:
        #bdbdbd;

    font-size:
        14px;

    line-height:
        1.5;
}


/* ----------------------------------------------------------
   Recommended Modules
   ---------------------------------------------------------- */

.module-list {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        10px;
}


.module-card {

    position:
        relative;

    padding:
        21px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-small);

    background:
        var(--surface);
}


.module-card::before {

    content:
        "";

    display:
        block;

    width:
        24px;

    height:
        3px;

    margin-bottom:
        15px;

    background:
        var(--fanfa-yellow);
}


.module-card-title {

    color:
        var(--black);

    font-size:
        15px;

    font-weight:
        800;
}


.module-card-text {

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.45;
}


/* ----------------------------------------------------------
   Proposal Packages
   ---------------------------------------------------------- */

.package-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px;
}


.package-card {

    position:
        relative;

    padding:
        25px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        var(--surface);
}


.package-card.recommended {

    border:
        2px solid
        var(--fanfa-yellow);
}


.package-badge {

    display:
        inline-block;

    margin-bottom:
        14px;

    padding:
        6px 9px;

    background:
        var(--fanfa-yellow);

    color:
        var(--black);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.package-title {

    font-size:
        21px;

    font-weight:
        800;

    letter-spacing:
        -.025em;
}


.package-price {

    margin-top:
        12px;

    color:
        var(--black);

    font-size:
        26px;

    font-weight:
        800;
}


.package-features {

    margin:
        20px 0 0;

    padding:
        0;

    list-style:
        none;
}


.package-features li {

    position:
        relative;

    margin-top:
        10px;

    padding-left:
        18px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.4;
}


.package-features li::before {

    content:
        "";

    position:
        absolute;

    top:
        .55em;

    left:
        0;

    width:
        7px;

    height:
        7px;

    background:
        var(--fanfa-yellow);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (
    max-width:
        719px
) {

    .app-shell {

        background:
            var(--surface);
    }


    .topbar {

        min-height:
            74px;

        padding-left:
            18px;

        padding-right:
            18px;
    }


    .brand {

        font-size:
            20px;
    }


    .brand-caption {

        font-size:
            10px;
    }


    .main {

        padding:
            24px
            14px
            calc(
                34px
                +
                env(
                    safe-area-inset-bottom
                )
            );
    }


    .hero-card {

        padding:
            31px 21px
            24px;

        border-radius:
            var(--radius);
    }


    h1 {

        font-size:
            37px;

        line-height:
            1.02;
    }


    .hero-text {

        margin-top:
            20px;

        font-size:
            16px;

        line-height:
            1.5;
    }


    .status-box {

        margin-top:
            24px;
    }


    .primary-button {

        min-height:
            56px;

        font-size:
            13px;
    }


    .info-grid {

        grid-template-columns:
            1fr;
    }


    .info-card {

        min-height:
            auto;

        padding:
            21px;
    }


    .question-card {

        padding:
            26px 20px;
    }


    .question-title {

        font-size:
            29px;
    }


    .screen-title {

        font-size:
            33px;
    }


    .answer-option {

        min-height:
            60px;

        padding-left:
            15px;
    }


    .screen-actions {

        align-items:
            stretch;

        flex-direction:
            column-reverse;
    }


    .screen-actions
    .primary-button {

        width:
            100%;
    }


    .secondary-button {

        width:
            100%;
    }


    .module-list {

        grid-template-columns:
            1fr;
    }


    .package-grid {

        grid-template-columns:
            1fr;
    }


    .score-value {

        font-size:
            52px;
    }
}


/* ==========================================================
   LARGE SCREEN
   ========================================================== */

@media (
    min-width:
        720px
) {

    body {

        padding:
            24px;
    }


    .app-shell {

        border:
            1px solid
            #e3e3e3;

        border-radius:
            14px;

        overflow:
            hidden;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    prefers-reduced-motion:
        reduce
) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}