/* =========================================
   KV HERBALS - REGISTRATION PAGE OVERRIDE
   Uses Login.css design
========================================= */

/* Allow registration page to scroll */
html,
body {
    width: 100%;
    min-height: 100%;
    height: auto;
}

body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Registration wrapper */
.login-wrapper {
    min-height: 100vh;
    height: auto;
    padding: 28px;
    align-items: flex-start;
}

/* Registration card must grow with form */
.login-card {
    height: auto;
    min-height: 650px;
    overflow: visible;
}

/* Keep left branding section */
.brand-section {
    min-height: 100%;
}

/* Registration form area */
.login-section {
    height: auto;
    min-height: 650px;
    justify-content: flex-start;
}

/* Allow all registration fields to display */
.login-section form {
    width: 100%;
    height: auto;
}

/* Registration fields */
.form-group {
    margin-bottom: 18px;
}

/* ASP.NET controls */
.login-section input[type="text"],
.login-section input[type="password"],
.login-section input[type="email"],
.login-section select,
.login-section textarea {
    max-width: 100%;
}

/* ASP.NET validation/message text */
.login-section .alert-notification,
.login-section .alert-msg {
    height: auto;
}

/* Radio buttons */
.login-section input[type="radio"] {
    width: auto;
    height: auto;
    margin-right: 6px;
}

/* Registration button */
.login-button-wrapper {
    position: relative;
    z-index: 100;
    width: 100%;
    margin-top: 10px;
}

.login-button {
    position: relative;
    z-index: 101;
    display: block;
    width: 100%;
    cursor: pointer;
    pointer-events: auto;
}

/* Background should remain fixed while page scrolls */
.background {
    position: fixed;
    inset: 0;
    height: 100vh;
    overflow: hidden;
}

/* =========================================
   DESKTOP
========================================= */

@media (min-width: 851px) {

    .login-wrapper {
        padding-top: 35px;
        padding-bottom: 35px;
    }

    .login-card {
        width: min(1080px, 100%);
        min-height: 650px;
    }

    .brand-section {
        min-height: 850px;
    }

    .login-section {
        min-height: 850px;
    }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 850px) {

    html,
    body {
        height: auto;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .login-wrapper {
        display: block;
        min-height: 100vh;
        padding: 20px;
    }

    .login-card {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .brand-section {
        min-height: 500px;
        padding: 45px 35px;
    }

    .login-section {
        min-height: 0;
        height: auto;
        padding: 45px 35px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

    .login-wrapper {
        padding: 10px;
    }

    .login-card {
        border-radius: 20px;
    }

    .brand-section {
        min-height: 430px;
        padding: 35px 23px;
    }

    .login-section {
        padding: 35px 23px;
    }

    .brand-title {
        font-size: 38px;
    }

    .login-title {
        font-size: 34px;
    }

    .form-input {
        height: 52px;
    }

    .login-button {
        height: 54px;
    }
}