@import '../environment';
@import '../vendor/cube-countdown/cube.countdown';
@import '../layout/fonts';

@import '../vendor/no-ui-slider/nouislider';

.mfp-content button.mfp-close
{
    box-sizing: content-box;
}

main
{
    > .head
    {
        height: auto;
        max-height: none;
        padding: 0;
        overflow: hidden;
        align-items: stretch;
        background-image: none;

        @include colored-background;

        .content
        {
            max-width: none;

            @include half-column;

            padding: steps(2) steps(3) steps(3);

            @include for-desktops
            {
                padding: steps(7.5) steps(3.5) steps(5) steps(13);
            }

        }

        .text-block
        {
            position: relative;
            padding: steps(7.5) steps(2) steps(5) steps(10);

            .bubble
            {
                position: absolute;
                right: -67px;
                height: 135px;
                width: 135px;

                p.number
                {
                    @include font-dimensions(48px, steps(4.5));

                    word-wrap: initial;
                    margin-bottom: 4px;
                }

                p
                {
                    @include font-dimensions(14px, 13px);
                }
            }

            .heading
            {
                margin-top: 0;
                margin-bottom: steps(6.5);
                color: $color-brand-darker;
                padding-right: steps(4);
            }

            .inner-block
            {
                display: flex;

                .svg, .svg > svg
                {
                    color: $color-brand-darkest;
                    flex-shrink: 0;
                    width: steps(10);
                    height: steps(10);
                }

                .inner-text
                {
                    margin-left: steps(4);
                    color: $color-brand-darkest;

                    p
                    {
                        font-size: 16px;
                    }

                    .subheading
                    {
                        font: bold 24px $accent-font;
                        margin-bottom: 0;
                    }
                }
            }

            .button
            {
                font-weight: bold;
            }
        }

        @include responsive-banner;

        @include for-at-most-tablets
        {
            .text-block
            {
                order: 2;

                h1.heading
                {
                    margin-top: 0;
                    margin-bottom: steps(5);
                    min-height: auto;
                }

                p.subheading
                {
                    display: block;
                }

                p.action
                {
                    a.button
                    {
                        margin: steps(1);
                    }
                }

                .bubble
                {
                    right: 10%;
                    bottom: -67px;
                    width: steps(9);
                    height: steps(9);

                    p
                    {
                        @include font-dimensions(8px, 10px);

                        &.number
                        {
                            @include font-dimensions(24px, 30px);
                            padding-right: steps(1);
                        }
                    }
                }

            }

        }

        @include for-at-most-tablets
        {
            .text-block
            {
                padding: steps(4);

                .inner-block .inner-text
                {
                    width: 100%;
                }
            }
        }

        @include for-phones
        {
            .text-block
            {
                padding: steps(3) steps(2);

                h1.heading
                {
                    @include font-dimensions(18px, 24px);
                    margin-bottom: steps(2);
                }
                .inner-block
                {
                    .inner-text
                    {
                        margin-left: steps(2.5);

                        p.subheading
                        {
                            @include font-dimensions(14px, 18px);
                        }

                        p
                        {
                            @include font-dimensions(11px, 18px);
                        }
                    }

                    .svg.product, .svg.product > svg
                    {
                        width: steps(7);
                        height: steps(7);
                    }
                }

                p.action
                {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    margin-top: steps(1);
                    padding: 0;

                    a.button
                    {
                        margin: 12px 5px 0 5px;
                        flex-basis: calc(50% - 10px);
                        flex-grow: 2;
                        padding: steps(1);

                        &:first-child
                        {
                            flex-basis: calc(100% - 10px);
                        }
                    }

                }
            }
        }
    }


    .hint
    {
        @include hint;
    }

}

section.steps,
section.reviews,
section.calculator
{
    margin-top: steps(5);

    > .heading
    {
        @include normal-heading;
        @include font-dimensions(18px, steps(3));

        @include for-at-least-normal-tablets
        {
            @include font-dimensions(22px, steps(3));
        }
    }
}

section.steps
{
    ol
    {
        @include bullet-list;
    }

    ol:not(.specificity-override)
    {
        > li
        {
            @include baseline-paddings(16px, steps(2.5), 0, steps(1.5));
            @include font-dimensions(11px, 16px);

            margin-top: steps(2);

            &:only-child
            {
                &:before
                {
                    display: none;
                }

                padding-left: 0;
            }

            &:not(:last-child)
            {
                border-bottom: 1px solid $color-border-normal;
                margin-bottom: -1px;
            }

            &:before
            {
                content: counter(ordered-list, decimal-leading-zero);
            }

            @include for-at-least-normal-tablets
            {
                @include baseline-paddings(16px, steps(2.5), 0, steps(1.5));
                @include font-dimensions(16px, 24px);

                padding-top: steps(1);
                padding-left: steps(6);
            }
        }
    }

}

section.reviews
{
    .review
    {
        padding: steps(2) steps(3);
        margin-top: steps(3);

        background: $color-background-lighter;

        .title
        {
            @include normal-heading;

            float: left;
            max-width: 70%;

            font-family: inherit;
            letter-spacing: 0.7px;
            word-wrap: normal;
        }

        .image
        {
            float: right;
            overflow: hidden;
            width: steps(7);
            padding: 0;
            border-radius: 50%;
        }

        .text
        {
            @include baseline-box(14px, steps(2.5), 0.6px);

            clear: both;
        }

        @include for-at-least-normal-tablets
        {
            @include clear-inside;

            padding: steps(3) steps(4);

            background: $color-background-darker;

            .title,
            .text
            {
                width: 67%;
            }

            .title
            {
                margin-bottom: steps(1);

                letter-spacing: 1.5px;
            }

            .image
            {
                width: 28%;
                min-width: steps(7);
                max-width: steps(16);
                margin-bottom: 0;
            }

            .text
            {
                @include baseline-box(16px, steps(3), 0.5px);

                clear: none;
                float: left;
            }
        }

        @include for-desktops
        {
            .image
            {
                margin-top: steps(1);
            }
        }
    }
}

section.calculator
{
    html:not(.js) &
    {
        display: none;
    }

    .field
    {
        .control.number
        {
            width: steps(22);
        }
    }

    .action
    {
        margin-top: steps(3);

        @include for-at-least-normal-tablets
        {
            margin-top: steps(4);
        }
    }

    .disclaimer
    {
        margin-top: steps(3);
        border-top: 1px solid $color-border-normal;

        @include for-at-least-normal-tablets
        {
            margin-top: steps(4);
            padding-top: steps(1);
        }
    }
}

body[data-view="success"] main
{
    .content
    {
        text-align: center;
    }

    h1
    {
        @include normal-heading;
        @include success-icon;
    }
}

.hidden
{
    display: none;
}

.calculator
{
    .with-range
    {
        margin-bottom: steps(2);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        text-align: center;

        @include for-at-least-normal-tablets
        {
            text-align: unset;
            flex-wrap: unset;
        }

        .field
        {
            width: 100%;
            margin-bottom: 0;

            > .label {
                padding: 0;
            }

            @include for-at-least-normal-tablets
            {
                width: unset;

                &.with-range__amount
                {
                    margin-bottom: 0;
                }
            }
        }

        .label
        {
            display: inline-block;
        }

        &__text
        {
            line-height: 19px;
        }

        &__amount-current, &__amount-label
        {
            @include sans-serif-font-family;
            font-size: 24px;
            line-height: 30px;
            letter-spacing: 0.79px;
            margin-left: steps(0.5);
            padding-bottom: 0;
        }

        &__amount-label
        {
            color: $color-text-darker;
        }

        &__amount-current
        {
            color: $color-brand-darker;
        }

        .svg, .svg svg
        {
            width: steps(4.5);
            height: steps(4.5);
        }
    }

    .first-payment
    {
        margin-top: steps(4);
        margin-bottom: steps(1);

        &__title
        {
            display: block;
            margin-bottom: steps(1.5);
        }

        &__amount
        {
            display: block;
            @include sans-serif-font-family;
            color: $color-brand-darker;
            font-weight: bold;
            letter-spacing: -0.29px;

            .amount
            {
                font-size: 42px;
                line-height: 44px;
            }

            .currency
            {
                font-size: 32px;
                line-height: 34px;
            }
        }

        a
        {
            display: flex;
            justify-content: space-between;
            margin: steps(2) 0 steps(3) 0;
            border-bottom: 1px solid #979797;
            padding-bottom: steps(1.5);
            text-decoration: none;
            width: 100%;

            @include for-at-least-normal-tablets
            {
                width: fit-content;

                .title
                {
                    padding-right: steps(4);
                }
            }

            .icon
            {
                color: $color-black;
            }
        }

        .label
        {
            font-weight: normal;
            line-height: steps(3);
        }

        .chevron-up
        {
            display: none;
        }
    }

    &.show-table
    {
        .first-payment
        {
            .chevron-down
            {
                display: none;
            }

            .chevron-up
            {
                display: initial;
            }
        }

        .insurance-period
        {
            display: block;
        }
    }

    &.show-form
    {
        .user-info
        {
            display: initial;
        }

        .fill-application
        {
            display: none;
        }
    }

    .user-info
    {
        display: none;

        .control
        {
            @include for-at-least-normal-tablets
            {
                width: steps(44);
            }
        }
    }

    .insurance-period
    {
        display: none;
        @include sans-serif-font-family;

        header {
            margin: steps(2) 0 steps(2) steps(-3);
            padding: steps(0.5) steps(3);
            width: calc(100% + 60px);
            background-color: #bab8ac;

            color: $color-text-darker;
            font-size: 12px;
            line-height: steps(2);
            letter-spacing: 0.4px;
            font-weight: bold;

            @include for-at-least-normal-tablets
            {
                width: 100%;
                margin-left: 0;
                padding: steps(0.5) 0;
                font-size: 14px;
                line-height: steps(3);
                letter-spacing: 0.45px;
            }
        }

        .row .column
        {
            color: $color-text-darker;
            letter-spacing: 0;
            line-height: steps(2);
            font-size: 16px;
        }

        .row.period-dates
        {
            flex-wrap: wrap;

            .column
            {
                width: 50%;
                flex: unset;
                line-height: steps(3);
                letter-spacing: 0.53px;
            }

            .column:first-child
            {
                padding-left: 0;
                width: 100%;
                flex: unset;
            }

            @include for-at-least-normal-tablets
            {
                flex-wrap: unset;

                .column
                {
                    width: initial;
                    flex: 1;
                    line-height: steps(2);
                    letter-spacing: 0;
                }

                .column:first-child
                {
                    width: initial;
                    flex: 1;
                }

                .column:nth-child(2)
                {
                    padding-left: steps(4);
                }
            }
        }

        header .column:first-child
        {
            @include for-at-least-normal-tablets
            {
                padding-left: steps(4);
            }
        }

        .row .column:first-child
        {
            margin-right: steps(-2);
            padding-left: steps(2);

            @include for-at-least-normal-tablets
            {
                margin-right: 0;
                padding-left: steps(4);
            }
        }

        .row, header
        {
            display: flex;
        }

        .column
        {
            flex: 1;
        }
    }

    .action button
    {
        font-weight: bold;
    }
}

.amount-slider
{
    width: 100%;

    .noUi-target
    {
        @include button-shadow;
        height: steps(2);
        border: none;
        border-radius: steps(1);
        outline: none;
    }

    .noUi-connects
    {
        background: $color-background-lightest;
        border-radius: steps(1);

        .noUi-connect
        {
            background: $color-link-normal;
        }
    }

    .noUi-handle {
        position: absolute;
        top: 0;
        right: calc(#{steps(1)} * -1) !important;
        width: steps(2);
        height: steps(2);
        background: $color-brand-darker;
        border: none;
        border-radius: 100%;
        box-shadow: none;
        outline: none;
        cursor: ew-resize;

        &:before, &:after
        {
            display: none;
        }
    }

    .amount-slider-ranges
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: steps(1);

        span
        {
            @include sans-serif-font-family;
            color: $color-text-darker;
            font-size: 16px;
            line-height: 19px;
        }
    }
}
