@import '../../environment';
@import '../../shared/personal';
@import '../../shared/personal.payment';
@import '../../shared/personal.indemnities';

main
{
    section.messages
    {
        ul
        {
            margin: steps(-1) 0 steps(-3);

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

        li
        {
            @include normal-text(0, steps(1.5));

            border-bottom: 1px solid $color-border-normal;
            margin-bottom: steps(2) - 1px;

            font-weight: bold;
            color: $color-text-darker;

            @include for-at-least-normal-tablets
            {
                @include baseline-paddings(18px, steps(3), 0, steps(2));

                margin-bottom: steps(1) - 1px;
            }

            &:last-child
            {
                border-bottom: 0;
                margin-bottom: 0;
            }

            a
            {
                font-weight: normal;
            }
        }
    }

    section.offers
    {
        li
        {
            padding: steps(3);
            border: 1px solid $color-border-normal;

            &:not(:last-child)
            {
                margin-bottom: steps(2);
            }

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

                padding: steps(4) steps(4) steps(2);
            }
        }

        h2
        {
            @include font-dimensions(22px, 30px, -0.1px);
            @include serif-font-family;

            padding-bottom: steps(1.5);

            color: $color-text-darker;

            @include for-at-least-normal-tablets
            {
                position: relative;

                min-height: steps(6);
                padding-left: 88px;
                padding-bottom: steps(0.5);

                letter-spacing: -0.2px;
            }

            .svg.product
            {
                display: block;
                margin-bottom: steps(3);

                color: $color-brand-darker;

                @include for-at-least-normal-tablets
                {
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }

            .extra
            {
                @include font-dimensions(16px, 50px, 0.5px);
                @include sans-serif-font-family;

                display: block;

                font-weight: normal;
                color: $color-text-normal;

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

                    @include font-dimensions(18px, 30px, -0.1px);
                }
            }
        }

        .price
        {
            @include font-dimensions(28px, 50px, -0.8px);

            margin-bottom: steps(1.5);

            color: $color-brand-darker;
            white-space: nowrap;

            @include for-at-least-normal-tablets
            {
                float: left;
                padding-left: 88px;
                margin-bottom: 0;
            }

            .value
            {
                @include font-dimensions(38px, 50px, -0.8px);
            }
        }

        .button
        {
            @include for-at-least-normal-tablets
            {
                float: right;
                margin-top: steps(-0.5);
            }
        }
    }
}
