/*
 * Responsive overrides for the login page.
 *
 * Loaded after login-premium.css so it can adjust that file's fixed sizes without
 * editing them. Layout only: no colours, fonts, components or copy are changed here,
 * and the desktop appearance above 1600px-wide screens is left exactly as it was.
 *
 * Breakpoints follow the Bootstrap scale already used by the project:
 *   <=575.98   phones (portrait)
 *   576-767.98 large phones
 *   768-991.98 tablets
 *   992-1299.98 small laptops (the left column is only col-lg-4 wide here)
 *   >=1600     large / wide desktops
 * plus a short-viewport rule for phones and tablets held in landscape.
 */

/* ---------------------------------------------------------------------------
   Applies at every size: nothing may push the page sideways.
   --------------------------------------------------------------------------- */
.login-pg.container-fluid {
    overflow-x: hidden;
}

.login-pg.container-fluid img {
    max-width: 100%;
}

/* The row is a flex container, so its columns need permission to shrink below
   their content width -- without this a long e-mail or button forces the whole
   page wider than the viewport. */
.login-pg.container-fluid .left-sec,
.login-pg.container-fluid .right-sec {
    min-width: 0;
}

/* Three single-line flex rows in the left column. They are laid out with the
   default nowrap, so once the column narrows the browser breaks the sentences
   inside them instead of moving a whole item down ("Don't have an Account" /
   "?"), and "Remember me" ends up touching "Forgot Password?". Letting them
   wrap keeps every phrase intact; at full width they still sit on one line. */
.login-pg.container-fluid .left-sec .main-sec .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 8px 16px;
}

.login-pg.container-fluid .left-sec .create-account-btn {
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0;
}

.login-pg.container-fluid .contactus-wrapper {
    flex-wrap: wrap;
    /* The wrapper is stretched by flex:1, so once the copyright line wraps its
       two lines would be spread apart by the default align-content. Keeping the
       lines together at the bottom preserves the original one-line look. */
    align-content: flex-end;
    column-gap: 0;
}

/* .form-main carries a 2rem right padding from the old two-column form layout.
   The login form has nothing beside it, so below 1300px that padding is 32px
   taken straight out of an already narrow column -- enough to push "Signup"
   onto its own line. */
@media screen and (max-width: 1299.98px) {
    .login-pg.container-fluid .login-sec .form-main {
        padding-right: 0;
    }
}

/* login-premium.css locks html/body to the viewport height with the overflow
   hidden. The other pages that use this layout (e-mail verification, feedback)
   are centred cards that can grow taller than a short tablet window, so they
   are given room to scroll here as well; the login page itself is exactly one
   viewport tall at these widths, so nothing about it changes. */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
    }
}

/* ---------------------------------------------------------------------------
   Large / wide desktops: stop the form stretching across a very wide column.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 1600px) {
    .login-pg.container-fluid .left-sec .left-sec-inner {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------------------------------------------------------------------------
   Small laptops: the left column is col-lg-4, so at 992px it is only ~330px
   wide and the 50px side padding leaves too little room for the fields.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 992px) and (max-width: 1299.98px) {
    .login-pg.container-fluid .left-sec .left-sec-inner {
        padding: 40px 24px 40px 28px;
    }

    .login-pg.container-fluid .login-pg-desc {
        line-height: 34px;
    }

    .login-pg.container-fluid .login-pg-desc p,
    .login-pg.container-fluid .login-pg-desc span {
        font-size: 28px;
    }

    .login-pg.container-fluid .login-pg-desc span:last-of-type {
        font-size: 19px;
    }
}

/* ---------------------------------------------------------------------------
   Tablets: the two columns are an even split, so the form has half of ~768px.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .login-pg.container-fluid .left-sec .left-sec-inner {
        padding: 32px 22px;
    }

    .login-pg.container-fluid .login-pg-desc {
        margin-top: 16px;
        line-height: 32px;
    }

    .login-pg.container-fluid .login-pg-desc p,
    .login-pg.container-fluid .login-pg-desc span {
        font-size: 26px;
    }

    .login-pg.container-fluid .login-pg-desc span:last-of-type {
        font-size: 18px;
    }

    .login-pg.container-fluid #forgot-password-section,
    #otp-verification-section {
        padding-top: 60px;
    }
}

/* ---------------------------------------------------------------------------
   Phones. The right-hand panel is already hidden below 768px by d-md-block,
   so the form takes the full width.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
    /* login-premium.css locks the page to the viewport height and hides the
       overflow. On a phone the form is taller than the screen, so that clips
       the button out of reach -- let the page scroll instead. */
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
    }

    .login-pg.container-fluid .left-sec .left-sec-inner {
        height: auto;
        min-height: 100vh;
        padding: 28px 20px 32px;
    }

    .login-pg.container-fluid .left-sec .left-sec-inner .brand-logo {
        max-width: 220px;
    }

    .login-pg.container-fluid .login-pg-desc {
        margin-top: 14px;
        line-height: 30px;
    }

    .login-pg.container-fluid .login-pg-desc p,
    .login-pg.container-fluid .login-pg-desc span {
        font-size: 24px;
    }

    .login-pg.container-fluid .login-pg-desc span:last-of-type {
        font-size: 17px;
    }

    /* The fixed 100px top padding on these two panels wastes most of a phone
       screen before the first field. */
    .login-pg.container-fluid #forgot-password-section,
    #otp-verification-section {
        padding-top: 32px;
    }

    .signup-section-container {
        padding: 24px 18px;
        margin-top: 16px;
    }

    /* Anchored to the bottom-right corner, where it can sit on top of the form
       once the viewport is short. */
    .login-container .footer-text {
        position: static;
        display: block;
        margin-top: 1.5rem;
        text-align: right;
    }
}

/* ---------------------------------------------------------------------------
   Phones, portrait. Six 50px OTP boxes plus their gaps need 350px, which is
   wider than a 320px screen once padding is taken off.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 575.98px) {
    .login-pg.container-fluid .left-sec .left-sec-inner {
        padding: 22px 16px 28px;
    }

    .login-pg.container-fluid .login-pg-desc {
        line-height: 26px;
    }

    .login-pg.container-fluid .login-pg-desc p,
    .login-pg.container-fluid .login-pg-desc span {
        font-size: 21px;
    }

    .login-pg.container-fluid .login-pg-desc span:last-of-type {
        font-size: 16px;
    }

    .login-pg.container-fluid .left-sec .left-sec-inner .main-sec .form-check label,
    .login-pg.container-fluid .left-sec .left-sec-inner .main-sec .forgot-pass-link {
        font-size: 14px;
    }

    /* The 50px width is an inline style on each input, so it can only be
       relaxed with !important. The boxes share the row evenly and stop at
       their original 50px, so they never grow beyond the current design. */
    .otp-container {
        gap: 6px !important;
    }

    .otp-container .form-control {
        width: auto !important;
        flex: 1 1 0;
        min-width: 0;
        max-width: 50px;
    }
}

/* ---------------------------------------------------------------------------
   Landscape phones and short windows: same clipping problem as portrait
   phones, but it happens at widths where the desktop layout is still in use.
   --------------------------------------------------------------------------- */
@media screen and (max-height: 600px) and (orientation: landscape) {
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
    }

    .login-pg.container-fluid .left-sec .left-sec-inner {
        height: auto;
        min-height: 100vh;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .login-pg.container-fluid #forgot-password-section,
    #otp-verification-section {
        padding-top: 32px;
    }
}

/* ---------------------------------------------------------------------------
   Signup panel.

   .signup-section-container is a fixed 800px card with 40px of padding, sitting
   in the centred .login-form-side flex box. From ~880px down the card plus its
   padding is wider than the viewport, so it has to be allowed to shrink and to
   keep a little breathing space on either side.
   --------------------------------------------------------------------------- */
.login-container .login-form-side .signup-section-container {
    width: 100%;
}

@media screen and (max-width: 991.98px) {
    .login-container .login-form-side .signup-section-container {
        max-width: 100%;
        margin-left: 12px;
        margin-right: 12px;
        margin-bottom: 24px;
        padding: 32px 24px;
    }
}

@media screen and (max-width: 767.98px) {
    /* The card is taller than the screen here, so it needs the same room at the
       bottom that .left-sec-inner gets, or "Login here" sits on the edge. */
    .login-container .login-form-side .signup-section-container {
        margin-bottom: 16px;
    }
}

/* ---------------------------------------------------------------------------
   Terms of Use modal: p-5 is 48px of padding on each side, which leaves very
   little of a phone screen for the text itself.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 991.98px) {
    .fullheightModal .modal-body.p-5 {
        padding: 1.75rem !important;
    }
}

@media screen and (max-width: 767.98px) {
    .fullheightModal .modal-body.p-5 {
        padding: 1.25rem !important;
    }

    .fullheightModal .modal-header {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .fullheightModal .modal-title {
        font-size: 1.5rem;
    }

    .fullheightModal .modal-title .fas {
        margin-right: 0.75rem !important;
    }
}

@media screen and (max-width: 575.98px) {
    .fullheightModal .modal-title {
        font-size: 1.25rem;
    }

    /* Two buttons on one line at 320px overflow the footer otherwise. */
    .fullheightModal .modal-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

    .fullheightModal .modal-footer .btn {
        margin: 0;
    }
}

/* ---------------------------------------------------------------------------
   Right-hand marketing panel between the sizes login-premium.css already
   handles (<=1110px) and a comfortable desktop. The heading is 50px with a
   425px cap, which is wider than the column allows here.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 1111px) and (max-width: 1299.98px) {
    .login-pg.container-fluid .right-sec-desc {
        padding-top: 60px;
    }

    .login-pg.container-fluid .right-sec-desc > p:last-child {
        font-size: 44px;
        line-height: 44px;
    }

}

/* ---------------------------------------------------------------------------
   Very wide desktops: keep the panel's proportions instead of letting the
   artwork scale with the monitor. At 1920px the image is already ~896px wide,
   so this only takes effect above that.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 1920px) {

    .login-pg.container-fluid .right-sec-desc > p:last-child {
        max-width: 500px;
    }
}

/* ---------------------------------------------------------------------------
   Standalone card pages on this layout (e-mail verification, feedback rating).

   They centre themselves with .container.h-100 > .row.h-100.align-items-center,
   which needs an unbroken percentage-height chain up to <html>. The media
   queries above deliberately relax html/body to height:auto so the login form
   can scroll on short screens, and that collapses the chain here: the row ends
   up only as tall as the card, so align-items-center has nothing to centre in
   and the card sits flush against the top edge of the screen.

   Re-establishing the centring on the container itself makes it independent of
   the html/body height, so it behaves the same at every width. The login page
   is untouched -- it uses .login-pg.container-fluid, not .container.h-100.
   --------------------------------------------------------------------------- */
body > .container.h-100 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding-top: 24px;
    padding-bottom: 24px;
}

body > .container.h-100 > .row.h-100 {
    height: auto;
}

/* ---------------------------------------------------------------------------
   Signup on phones: reclaim the horizontal space.

   Measured at 320px, the form field ended up only 152px wide because five
   separate insets stack up on each side before the input is reached:

       16px  .login-container margin (the max-width:90% cap in login-premium)
     + 16px  .container-fluid gutter padding
     + 12px  .signup-section-container margin
     + 24px  .signup-section-container padding
     = 68px per side, i.e. 136px of a 320px screen spent on chrome.

   The card is the only thing on screen on the signup page, so it does not need
   to be inset from a background it is already covering. Scoped to
   .signup-page-active (the class Login.js puts on <body> for this view) so the
   login form keeps the framing it was signed off with.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
    .signup-page-active .login-container {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    .signup-page-active .login-container .login-form-side .signup-section-container {
        margin-left: 0;
        margin-right: 0;
        padding: 24px 16px;
    }
}

/* ---------------------------------------------------------------------------
   The show/hide-password eye is absolutely positioned at right:12px inside
   .input-container, but the input it sits on top of only carries the default
   12px of right padding. On a narrow screen the placeholder ("Create Your
   Password*") and any typed value run straight underneath the icon. Reserve
   the space the icon occupies.

   togglePassword() swaps the input between type=password and type=text, so the
   :has() rule is what actually holds at runtime; the attribute rule below it is
   the fallback for browsers without :has() support, covering the default state.
   --------------------------------------------------------------------------- */
.login-container .auth-section .input-container:has(> .toggle-password) .form-control {
    padding-right: 40px;
}

.login-container .auth-section .input-container input.form-control[type="password"] {
    padding-right: 40px;
}