@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap");

/* *MAIN  */
.Main-Card {
    display: flex;
    align-items: center;
    padding: 0px;
    margin: 0px;

    overflow: auto;

    position: absolute;
    width: 100%;
    height: 100%;

    background: #fefefe;

    font-family: Montserrat;
}

.halfs {
    height: 100%;
    width: 100%;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 3rem;

    min-height: max-content;

    background: #fefefe;
}

.card-red {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    right: 0;

    pointer-events: none;

    overflow: hidden;

    background: linear-gradient(153.96deg, #8f0015 2.3%, #e3384e 96.76%);
}

.head-title {
    font-size: 2.5rem;
}

/*TODO equalize input height, border-radius:3rem; */

/* *LOGIN */

.form.login-form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* *REGISTER */

.form.register-form {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: fit-content;

    margin: auto 0;
}

.form.register-input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-part {
    place-self: start;
    width: 100%;
    margin-top: 5px;
}

.form-label {
    margin-bottom: 0 !important;
}

.form-check input[type="radio"] {
    transform: scale(1.3);
    margin-right: 0.3rem;
}

.form.register-form .register-buttons {
    margin-bottom: 1.5rem ;
}

.form.register-input .input-part:nth-child(3) .radio-container {
    gap: 2rem;
}

/* * PROFILE */

.profile-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    
    width: 100%;
    min-height: fit-content;
}

.profile-page p {
    margin: 0px;
}

.profile-page .data {
    display: flex;
    flex-direction: column;

    gap: 1rem;

    height: 50%;

    align-items: center;
    text-align: center;
}

.qr {
    position: relative;

    margin: 1rem 0;

    max-width: 35rem;

    border-radius: 2rem;
}

/* *POP-UP  */

.alert-window {
    display: flex;
    position: absolute;
    flex-direction: column;

    padding: 2rem;

    width: 75%;
    height: 20rem;

    max-width: 40rem;

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

    align-items: center;

    overflow: hidden;

    background: #fefefe;
    box-shadow: -40px 6px 25px rgba(3, 5, 27, 0.25);
}

.logo-popup {
    display: none;
    width: 6rem;
}

.logo-bg {
    position: absolute;

    right: 0%;
    bottom: 0%;

    opacity: 10%;
    width: 10rem;
}

.alert-img {
    width: 80%;

    max-width: 14rem;

    display: block;
    margin: 0px auto;
}

.alert-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 3rem;
}

/* *BORDER RADIUS  */

.card-content,
.alert-window {
    border-radius: 2.5rem;
}

/* *BOX SHADOW */

/* *IMAGES PART  */
.logo {
    position: absolute;

    top: 1.5rem;
    left: 2rem;
    width: 10%;
    min-width: 5rem;
    max-width: 8rem;
}

.perfume {
    position: relative;
    height: 100%;

    opacity: 0.3;

    object-fit: cover;
}

.img-404 {
    max-width: 10rem;
}

/* * for desktop */

@media (orientation: landscape) {
    /* *SHOW RED CARD */
    .card-red {
        display: flex;
        width: 50%;
        height: 100%;
    }

    .card-content {
        width: 50%;
        padding: 3rem 5rem;
    }

    input.form-control,
    textarea.form-control {
        min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
        padding: 0.5rem 1rem;
        font-size: 1.25rem;
        border-radius: 0.5rem;
    }

    .form.register-form {
        padding-top: 2rem;
    }

    .form.register-input {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* grid: 15% 18% 20% 15% 15% 15% / calc(50% - 0.25rem) calc(50% - 0.25rem); */
    }

    .form.register-input .input-part {
        width: calc(50% - 0.5rem);
    }

    .form.register-input .input-part:nth-child(5),
    .form.register-input .input-part:nth-child(8),
    .form.register-input .input-part:nth-child(9) {
        width: 100%;
    }

    .form.register-input .input-part:nth-child(3) .radio-container {
        flex-direction: column;
        gap: 0;
    }

    .alert-window {
        height: 100%;
        width: 100%;
        max-width: none;
        border-radius: 0;
    }

    .alert-window p {
        font-size: 1.5rem;
        vertical-align: middle;
    }

    .img-404 {
        max-width: 18rem;
    }

    .logo-bg {
        width: 25rem;
        bottom: -8rem;
        right: -4rem;
    }
}

@media (orientation: landscape) and (min-width: 900px) {
}