@import '../environment';
@import '../shared/application_form';
@import '../shared/policy_prices';
@import '../shared/payment.buy_forms';

@import 'buy_travel_insurance_pages/common';
@import 'buy_travel_insurance_pages/standard_packages';
@import 'buy_travel_insurance_pages/custom_package';
@import 'buy_travel_insurance_pages/custom_package_definition';
@import 'buy_travel_insurance_pages/dialogs';

main
{
    a.hint
    {
        @include hint;
    }

    .additional-options
    {
        border-top: 1px solid $color-border-normal;
        padding-top: steps(2.5);
        margin-top: steps(2);

        @include for-desktops
        {
            padding-top: steps(4);
        }

        .discount
        {
            margin-bottom: steps(3);

            @include for-at-least-normal-tablets
            {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            @include for-desktops
            {
                margin-bottom: steps(4);
            }

            .text
            {
                @include alternative-text;

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

            .actions
            {
                @include buttons;

                text-align: center;

                @include for-at-least-tablets
                {
                    text-align: left;
                    white-space: nowrap;
                }
            }

            .remove
            {
                @include font-dimensions(16px, steps(2), 0.9px);

                margin-top: steps(2);

                color: $color-link-normal;

                @include for-at-least-tablets
                {
                    margin-top: 0;
                    margin-left: steps(1.5);
                }

                &::after
                {
                    content: svg-image-data-url("x", $color-link-normal);

                    display: inline-block;
                    width: steps(2);
                    height: steps(2);
                    margin-left: steps(0.5);

                    line-height: steps(2);
                    vertical-align: top;
                }
            }
        }

        fieldset.extra-option
        {
            margin-top: steps(0.5);

            @include for-desktops
            {
                margin-top: 0;
            }
        }
    }

    p.note
    {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    p.thank-you
    {
        @include normal-heading;
    }

    p.warning-notice
    {
        margin-bottom: steps(2);

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

        @include for-at-least-normal-tablets
        {
            text-align: center;
        }
    }

    .summary
    {
        padding-bottom: steps(2.5);
        border-bottom: 1px solid $color-border-normal;
        margin-top: steps(3);
        margin-bottom: steps(2) - 1px;

        @include for-at-least-normal-tablets
        {
            margin-bottom: steps(5) - 1px;

            .note
            {
                margin-top: steps(4);
            }
        }
    }

    .panel.form
    {
        .heading
        {
            @include small-heading;

            @include for-at-least-normal-tablets
            {
                @include content-padding;

                text-align: center;
            }
        }


        &.secondary
        {
            fieldset
            {
                margin-bottom: 0;

                p:last-child
                {
                    margin-bottom: steps(3);
                }
            }
        }

        .field.counters
        {
            > .label
            {
                margin-top: steps(3);
            }

            .group > span
            {
                display: inline-block;

                label
                {
                    @include small-text;

                    color: $color-text-darker;
                    display: block;
                    width: 100%;
                    text-align: center;
                }
            }
        }

        .person
        {
            margin-bottom: steps(3);

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

            @include for-at-least-normal-tablets
            {
                @include content-padding;

                display: flex;
                justify-content: center;
                margin: steps(-1) steps(-1) steps(1);

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

            .title
            {
                @include fieldset-name;

                @include for-at-least-normal-tablets
                {
                    @include visually-hidden;
                }
            }

            .field
            {
                @include for-at-least-normal-tablets
                {
                    display: block;
                    max-width: steps(22);

                    margin: steps(1);

                    > .control:not(.checkbox),
                    .error
                    {
                        width: auto;
                        margin-left: 0;
                    }

                    .label
                    {
                        @include visually-hidden;
                    }

                    > .control:not(.checkbox)
                    {
                        max-width: none;
                    }

                    .error
                    {
                        padding-left: 0;
                        padding-right: 0;
                    }
                }
            }
        }
    }
}
