/* Alerts */

.alert {

    display: block;
    position: relative;
    padding: 16px 20px;

    &:not(.no-bottom) {
        margin-bottom: 20px;
    }

    &:not(.no-radius) {
        border-radius: var(--alert-border-radius, 6px);
    }

    &.border {
        border: 1px solid transparent;
    }

    &.shadow {
        box-shadow: 0 8px 12px var(--theme-shadow-color, rgba(152, 152, 152, .125));
    }

    &.alert-inline {
        display: inline-block;
    }

    &:not([class*="title-"]) {
        h1, h2, h3, h4, h5, h6 {
            font-size: var(--title-h6);
        }
    }

    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 0;
       &:not(:last-child) {
           margin-bottom: 10px;
       }
    }

    ul, ol, p, iframe {
        margin-bottom: 0;
        &:not(:last-child) {
            margin-bottom: 8px;
        }
    }

    ul, ol {
        padding-left: 16px;
    }


    &:not(.no-underline) a:not(.button) {
        text-decoration: underline;
    }

    color: var(--alert-color, #000 );
    background-color: var(--alert-background-color, transparent );
    border-color: var(--alert-border-color, transparent );

    &.alert-info {
        color: var(--alert-info-color, #000 );
        background-color: var(--alert-info-background-color, transparent );
        border-color: var(--alert-info-border-color, transparent );
    }

    &.alert-warning {
        color: var(--alert-warning-color, #000 );
        background-color: var(--alert-warning-background-color, transparent );
        border-color: var(--alert-warning-border-color, transparent );
    }

    &.alert-positive,
    &.alert-success {
        color: var(--alert-positive-color, #000 );
        background-color: var(--alert-positive-background-color, transparent );
        border-color: var(--alert-positive-border-color, transparent );
    }

    &.alert-negative,
    &.alert-danger {
        color: var(--alert-negative-color, #000 );
        background-color: var(--alert-negative-background-color, transparent );
        border-color: var(--alert-negative-border-color, transparent );
    }



    /*&.alert-danger {*/
    /*    color: #a94442;*/
    /*    background-color: #f2dede;*/
    /*    border-color: #ebccd1;*/
    /*}*/

    /*&.alert-success {*/
    /*    color: #3c763d;*/
    /*    background-color: #dff0d8;*/
    /*    border-color: #d6e9c6;*/
    /*}*/

    /*&.alert-info {*/
    /*    color: #31708f;*/
    /*    background-color: #d9edf7;*/
    /*    border-color: #bce8f1;*/
    /*}*/

    /*&.alert-warning {*/
    /*    color: #8a6d3b;*/
    /*    background-color: #fcf8e3;*/
    /*    border-color: #faebcc;*/
    /*}*/


    /*.alert * {*/
    /*    margin: 0;*/
    /*}*/
    /*.alert > b,*/
    /*.alert > h1,*/
    /*.alert > h2,*/
    /*.alert > h3,*/
    /*.alert > .title {*/
    /*    display: block;*/
    /*    margin-bottom: 10px;*/
    /*    line-height: 1em;*/
    /*}*/


}





/* Option Fields (Checkbox & Radio) */

label.option {

    display: inline-flex;
    position: relative;
    flex-direction: column;
    padding-left: 24px;
    margin: 0;

    & > .field-option {
        display: inline-flex;
        gap: 5px;
    }

    & > input {
        position: absolute;
        opacity: 0;
        inset: 0;
    }

    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 0;
        min-width: 18px;
        min-height: 18px;
        border-radius: 4px;
    }

    &::before {
        border: 1px solid var(--theme-grayish, #d9d9d9);
        background: #fff;
    }

    &.disabled, 
    &[disabled] {
        cursor: not-allowed;
    }

    &:not([disabled]):not(.disabled) {
        &, & > input {
            cursor: pointer;
        }
    }

    &:not([disabled]):not(.disabled):focus,
    &:not([disabled]):not(.disabled):hover {
        &::before {
            border-color: var(--input-border-focus, #888);
        }
    }


    &:not(.checked) {

        &::after {
            opacity: 0;
        }

    }

    &.radio {

        &::before,
        &::after {
            border-radius: 999px;
        }

        &::after {
            transform: scale( 0.45 );
            background-color: #000;
        }

    }


    &.checkbox {

        &::after {
            transform: scale( 0.75 );
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url('/images/svg/check.svg');
        }

    }


    &.medium {

        padding-left: 30px;

        & > .field-option {
            gap: 8px;
        }

        &::before,
        &::after {
            top: 0;
            min-width: 22px;
            min-height: 22px;
            border-width: 2px;
        }

        &.checkbox {
            &::before,
            &::after {
                border-radius: 4px;
            }
            &::after {
                transform: scale(0.625);
            }
        }

    }


}




/* Form Options */

.form-options {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 2px 0;

    label.option {
        display: inline-flex;
    }

    &.medium {
        gap: 6px 20px;
    }

    .form-field.inline & {
        flex-direction: row;
    }

}





/* Form Fields */

.form-field {

    --label-font-family: var(--theme-label-font-family, 'Helvetica Neue'), sans-serif; );
    --label-font-size: var(--theme-label-font-size, 14px );
    --label-line-height: var(--theme-label-line-height, 18px);
    --label-font-weight: var(--theme-label-font-weight, 400 );

    position: relative;

    &.disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

    &.bottom {
        margin-bottom: 1rem;
    }

    .field-label {
        display: flex;
        position: relative;
        justify-content: space-between;

        label, .label {
            display: inline-block;
            font-family: var(--label-font-family, 'Helvetica Neue'), sans-serif; );
            font-size: var(--label-font-size, 14px);
            font-weight: var(--label-font-weight, 400);
            line-height: var(--label-line-height, 18px);
            margin: 0;
        }

        .form-label {
            display: flex;
            position: relative;
            margin-bottom: 6px;
            gap: 0 10px;
            flex: 1 1;
        }

        .form-label, label, .label {
            & > em {
                display: inline-block;
                font-style: normal;
                transform: scale(1.2);
                color: var(--theme-negative-border, #db0000);
            }
        }

        .optional-label {
            font-size: var(--12px, 12px);
            font-weight: 300;

            &.absolute {
                position: absolute;
                top: 0;
                right: 0;
            }
        }

    }


    .field-message {
        display: flex;
        flex-direction: column;
        position: relative;
        margin-top: 6px;
        gap: 4px;
        font-weight: 300;
        font-size: var(--13px, 13px);
        line-height: var(--16px, 16px);

        &, .message {
            color: var(--theme-gray, #888);
        }

        .field.focus & .message-hint {
            color: var(--theme-graying, #666);
        }

        .message-positive {
            color: var(--theme-positive-hint, #1a8800);
        }

        .message-error {
            font-weight: 400;
            color: var(--theme-negative-hint, #db0000);
        }

    }


    .field-description {
        margin: 0 0 10px;
    }


    &:not(.has-error) {

        .message-error {
            display: none;
        }

    }


    &.has-error {

        .message-hint {
            display: none;
        }

        .message-error {
            display: block;
        }

    }


    &.inline {
        display: inline-flex;
        flex-direction: column;
    }


    &.no-label .field-label {
        display: none;
    }


    &.compact {
        .field-label {

            .form-label {
                margin-bottom: 2px;
            }

        }
    }


    &.dashed {
        border-width: 2px;
        border-style: dashed;
        border-radius: 7px;
        border-color: var(--input-border-color, #d9d9d9);
        padding: 14px 16px 16px;

        &.compact {
            padding: 10px 12px 12px;
        }

    }


}





/* Form Base */

.form {

    &.inline {
        display: flex;
        align-items: end;
        gap: 8px;

        .form-actions {
            gap: 0 8px;

            .button.compact {
                min-height: 38px;
            }
        }

    }

}





/* Form Fieldsets */

.fieldset-legend,
.fieldset-title {
    margin-bottom: 1rem;

    &, & h2, & h3, & h4 {
        font-weight: 300;
        font-size: 1.5rem;
        line-height: 1em;
    }
}

.fieldset-description {
    margin-bottom: 1rem;
}




/* Form Schema */

.form-schema.is-parent {
    display: flex;
    flex-direction: column;


    & > .form-fieldset {

        &:not(:last-child) {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px dashed var(--theme-grayish, #d9d9d9);
        }


    }

    /*gap: 50px;*/


}





/* Form Input */

.form-input {

    --input-font-family: var(--theme-input-font-family, 'Helvetica Neue'), sans-serif; );
    --input-font-size: var(--theme-input-font-size, 14px );
    --input-line-height: var(--theme-input-line-height, 18px );
    --input-font-weight: var(--theme-input-font-weight, 300 );
    --input-border-width: var(--theme-input-border-width, 2px );
    --input-border-radius: var(--theme-input-border-radius, 4px );
    --input-border-color: var(--theme-input-border-color, #d9d9d9);
    --input-border-focus: var(--theme-input-border-focus, #888);

    --input-padding: var(--theme-input-padding, 8px 10px );
    --input-outline-color: var(--theme-input-outline-color, #005bda );
    --input-placeholder-opacity: var(--theme-input-placeholder-opacity, 0.25 );

    &.select {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            pointer-events: none;
            top: 50%;
            right: 10px;
            z-index: 45;
            width: 11px;
            height: 11px;
            transform: rotate(90deg) translateX(-50%);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url(/images/svg/caret.svg);
            opacity: 0.5;
        }
    }



    & .input,
    & > input,
    & > select,
    & > textarea {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;

        font-family: var(--input-font-family, 'Helvetica Neue'), sans-serif; );
        font-size: var(--input-font-size, 14px);
        font-weight: var(--input-font-weight, 300);
        line-height: var(--input-line-height, 18px);

        border-style: solid;
        border-width: var(--input-border-width, 1px);
        border-radius: var(--input-border-radius, 4px);
        border-color: var(--input-border-color, #d9d9d9);
        outline-color: var(--input-outline-color, #005bda);

        padding: var(--input-padding, 8px 10px);

        &:is(select) {
            padding-right: 28px !important;;
        }

        &:not([disabled]):focus,
        &:not([disabled]):hover {
            border-color: var(--input-border-focus, #888);
        }
        
        &[disabled] {
            background-color: transparent;
            border-color: var(--input-border-color, #d9d9d9) !important;
            cursor: not-allowed;
            opacity: 1;
        }

        &:focus {
            outline-style: solid;
            outline-width: var(--input-border-width, 1px);
            outline-offset: calc(-1 * var(--input-border-width, 1));
        }

        .form-field.shadow > & {
            box-shadow: 0 8px 12px var(--theme-shadow-color, rgba(152, 152, 152, .125));
        }

        .form-field.has-error & {
            border-color: var(--theme-negative-border, #db0000) !important;
        }

        .form-field.has-positive & {
            border-color: var(--theme-positive-border, #1a8800) !important;
        }

        &::placeholder {
            color: #000;
            opacity: var(--input-placeholder-opacity, 0.25);
        }

    }


    & > textarea {
        display: block;
        resize: none;
        height: 8.5rem;
    }


}






/* Form Input: License Plate */

.form-input.license-plate {

    --input-border-color: #055cc6;
    --input-outline-color: #055cc6;
    --input-border-focus:  #055cc6;
    --input-placeholder-opacity: 0.15;

    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: var(--theme-input-border-radius, 4px );

    &::before {
        content: ' ';
        position: absolute;
        top: 2px;
        left: 2px;
        bottom: 2px;
        z-index: 10;
        width: 88px;
        background: rgba(255, 255, 255, 0.25);
    }

    .input {
        height: 52px;
        padding-left: 42px;
        font-family: var(--theme-license-font-family), sans-serif;
        font-weight: 500;
        font-size: 2rem;
        line-height: 48px;
        text-transform: uppercase;
    }

    .input:not(:last-child) {
        padding-left: 95px;
    }

    &[data-license-country="NL"] .input {
        background-color: #f3b700;
    }

    &[data-license-country="BE"] .input {
        color: #ad1715;
    }



    .license-country {
        display: inline-flex;
        justify-content: center;
        align-items: end;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 25;
        width: 32px;
        border-radius: 3px 0 0 3px;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url(/images/theme/general/license-european.svg);
        background-color: #055cc6;

        span {
            display: inline-block;
            color: #fff;
            font-size: 0.75rem;
            font-weight: 400;
            padding: 4px 0;
        }

        [data-license-country="CH"] & {
            background-color: transparent;
            background-image: url('/images/theme/general/license-swiss.svg');
            background-position: 10px center;
            background-size: 20px;
        }

    }

    .select-country {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100px;
        z-index: 35;

        &::after {
            top: 24px;
            right: 16px;
            transform: rotate(90deg);
        }

        .select-labels {
            display: inline-flex;
            flex-direction: column;
            position: absolute;
            z-index: 15;
            inset: 0;
            gap: 3px;
            padding: 8px 0 8px 42px;

            .select-label {
                display: inline-block;
                font-weight: 400;
                line-height: 1em;
                font-size: 0.75rem;
                font-size: 0.625rem;

                &.is-dynamic {
                    font-weight: 500;
                    font-size: 1.325rem;
                    text-transform: uppercase;
                }

            }
        }

        select {
            position: relative;
            height: 100%;
            width: 100%;
            z-index: 40;
            opacity: 0;
            font-size: 0;
        }
    }

}




/* Form Actions */

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    &.space-between {
        justify-content: space-between;
    }

}


.form-prices {

    &.bottom {
        margin-bottom: 20px;
    }

    .price-info {
        display: block;

        .price-label,
        .price-total {
            display: inline-block;
            vertical-align: top;
        }
    }

    .price-description {
        display: block;
        color: #888;
        font-size: var(--theme-label-font-size, 14px);
        font-family: var(--theme-label-font-family, 'Helvetica Neue'), sans-serif; );
        line-height: var(--theme-label-line-height, 18px);

        .important-label {
            font-weight: 600;
            color: var(--theme-positive-hint, #1a8800);
        }

    }

}






/* Form Segments */

.form-segment {
    display: block;
    position: relative;
    padding: 20px 20px;
    border-radius: 6px;
    max-width: 100%;

    &:not(.transparent) {
        background-color: #fff;
    }

    &:not(.basic) {
        border: 1px solid var(--theme-shadow-border, #efefef);
        box-shadow: 0 8px 12px var(--theme-shadow-color, rgba(152, 152, 152, .125));
    }

    &.bottom {
        margin-bottom: 30px;
    }

    @media all and (max-width: 575px) {

        &.bottom {
            margin-bottom: 20px;
        }

    }
}