///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.devis-title {
    margin-bottom: 10px;
    text-align: center;
}

.devis-subtitle {
    margin-bottom: 70px;
    text-align: center;
}

.devis-subtitle-bubble {
    $bubblesize: 60px;
    font-family: "Lucien-book";
    font-size: 1.5em;
    display: inline-block;
    background-color: none;
    border: 1px solid $color-golden;
    color: $color-golden;
    border-radius: 100%;
    line-height: $bubblesize;
    height: $bubblesize;
    width: $bubblesize;
}

.devis-subtitle-bubble-title {
    color: $color-golden;
    font-family: "Lucien-bold";
    font-size: 1.5em;
    margin-top: 15px;
}

.devis-container {
    @include outer-container;
}

.devis-content {
    @include span-columns(10);
    @include shift(1);
}

.devis-form {
    @include span-columns(5 of 10);

    .form-group {
        margin-bottom: 25px;

        &:nth-of-type(2) {
            float: left;
            width: 46%;
        }
        &:nth-of-type(3) {
            margin-left: 50%;
            width: 50%;
        }
        &:nth-of-type(7) {
            float: left;
            width: 25%;

            label {
                min-height: 32px;
            }

        }
        &:nth-of-type(8) {
            float: left;
            width: 30%;
            margin-left: 7%;

            label {
                min-height: 32px;
            }

        }
        &:nth-of-type(9) {
            float: left;
            width: 30%;
            margin-left: 8%;

            label {
                min-height: 32px;
            }

        }
        &:nth-of-type(10) {
            clear: both;
        }
        &[data-id="submit"] {
            @include span-columns(2 of 5);
        }
        &[data-id="casinos"], &[data-id="card"], &[data-id="optoutReasons"] {
            display: none;
        }
    }
}

.devis-form[data-object="information"] {
    .form-group[data-id="casinos"] {
        display: block;
    }
}

.devis-form[data-object="request"] {
    .form-group[data-id="casinos"] {
        display: block;
    }
}

.devis-form[data-object="premium"] {
    .form-group[data-id="casinos"] {
        display: block;
    }
    .form-group[data-id="card"] {
        display: block;
    }
}

.devis-form[data-object="newsletterOptout"] {
    .form-group[data-id="casinos"] {
        display: block;
    }
    .form-group[data-id="optoutReasons"] {
        display: block;
    }
}

.devis-offre {
    @include span-columns(5 of 10);
}

.devis-offre-visuel {
    img {
        display: block;
        width: 100%;
    }
}

.devis-offre-infos {
    background: $color-grey-darker;
    border-top: 2px solid $color-golden;
    padding: 45px 20px;
}

.devis-offre-infos-title {
    color: $color-golden;
    font-family: lucien-light, sans-serif;
    font-size: 1.6rem;
    margin-bottom: 20px;
    text-align: center;
}

.devis-offre-infos-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.devis-offre-infos-content-text {
    color: #FFFFFF;
    flex-basis: 0;
    flex-grow: 1.8;
    font-size: 1rem;
    text-align: center;
}

.devis-offre-infos-content-button {
    flex-basis: 0;
    flex-grow: 1;
    font-family: lucien-book, sans-serif;
    font-size: 1rem !important;
}

///////////////////////////////////////////////////////////////
// Device: Tablet
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {
    .devis-form {
        @include span-columns(12);
    }
    .devis-offre {
        @include span-columns(12);

        margin: 20px 0;
    }
    .devis-offre-infos-content-text {
        flex-grow: 1.5;
    }
}

///////////////////////////////////////////////////////////////
// Device: Mobile
///////////////////////////////////////////////////////////////

@include mobile-landscape-and-below {
    .devis {
        margin-bottom: 0;
    }
    .devis-content {
        float: none;
        margin: 0;
        width: 100%;
    }
    .devis-form {
        float: none;
        padding: 0 20px;

        .form-group {
            &:nth-of-type(1) {
                .form-inline {
                    margin-left: 0;

                    &:first-child {
                        display: block;
                        margin-bottom: 10px;
                        width: 100%;
                    }
                    &:nth-child(3) {
                        margin-left: 20px;
                    }
                }
            }
            &:nth-of-type(2) {
                float: none;
                width: 100%;
            }
            &:nth-of-type(3) {
                margin-left: 0;
                width: 100%;
            }
            &[data-id="submit"] {
                float: none;
                width: 100%;
            }
        }
    }
    .devis-offre-infos-content {
        display: block;
    }
    .devis-offre-infos-content-text {
        margin-bottom: 20px;
        text-align: center;
    }

    /* hack for required field on mobile */
    .form-required-nbpers {
        &::after {
            right: -5px;
        }
    }

}