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

.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.benefits,
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.benefits
{
    margin-right: -15px;

    &.violet ul li .box {
        background-color: $color-background-violet;
    }

    &.ice-blue ul li .box {
        background-color: $color-background-ice-blue;
    }

    &.green ul li .box {
        background-color: $color-background-green;
    }

    &.yellow ul li .box {
        background-color: $color-background-yellow;
    }

    &.orange ul li .box {
        background-color: $color-background-orange;
    }

    ul
    {
        display: flex;
        flex-wrap: wrap;
    }

    li
    {
        width: steps(24);
        margin: steps(2.5) steps(1.5) 0  0;

        .box
        {
            width: steps(24);
            height: steps(20);
            padding: steps(2) steps(1.5) steps(2.5);
            margin-right: steps(1.5);

            @include product-box;

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

            span.text
            {
                overflow: hidden;
                margin-top: 4px;
            }
        }

        @include for-phones
        {
            flex-basis: 100%;
            padding-bottom: steps(1.5);
            margin: 0;
            width: 100%;

            .box {
                width: 100%;
                height: auto;
                align-items: center;

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

                .text
                {
                    @include font-dimensions(11px, 14px);
                }
            }
        }
    }

    @include for-at-least-normal-tablets
    {
        li
        {
            width: steps(24);
            margin: steps(2.5) steps(1.5) 0 0;
        }
    }

    @include for-phones
    {
        margin-right: 0;
    }
}

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
    {
        --gap: 10px;
        display: inline-flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: steps(2);
        margin-left: calc(-1 * var(--gap));
        width: calc(100% + var(--gap));

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

    .action > * {
        margin: var(--gap) 0 0 var(--gap);
    }

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

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

        > .heading
        {
            @include normal-heading;

            font-family: inherit;
        }

        > ol
        {
            counter-reset: result-list;

            > li:before
            {
                counter-increment: result-list;
                content: counter(result-list);

                @include font-dimensions(14px, steps(3), 0.6px);

                box-sizing: border-box;
                float: left;
                overflow: hidden;
                width: steps(3);
                height: steps(3);
                border: 1px solid;
                border-radius: 50%;
                margin-left: steps(-6);
                margin-top: -3px;

                text-align: center;

                @include for-at-least-normal-tablets
                {
                    margin-top: 1px;
                }
            }
        }

        .payout
        {
            @include normal-text;

            position: relative;

            &:not(.stage-1) {
                margin-left: steps(6);
            }

            .svg
            {
                float: left;
                margin-left: steps(-6);
            }

            p
            {
                padding: 0;
            }

            .title
            {
                margin-bottom: 0;

                .text,
                .value
                {
                    display: block;
                }

                .value
                {
                    @include baseline-box(28px, steps(4), -1px);

                    margin-top: steps(1);

                    font-weight: bold;
                    color: $color-brand-darker;
                    white-space: nowrap;
                }

                @include for-at-least-normal-tablets
                {
                    display: flex;
                    justify-content: space-between;

                    .text
                    {
                        flex-shrink: 1; // ie10
                    }

                    .value
                    {
                        margin: 0 0 steps(-2) steps(4);
                    }
                }
            }

            .footnote
            {
                @include for-at-least-normal-tablets
                {
                    max-width: steps(39);
                }
            }
        }
    }

    .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;
}
