/* ============================================================================
   Auth pages — professional split-screen (login / register / forgot-password)
   ----------------------------------------------------------------------------
   Every rule is namespaced under .auth-shell so global .sign-input,
   .allbtn-design and select styles used elsewhere on the site are NOT
   affected. Markup field names/ids, captcha, OTP button and jQuery-validation
   selectors are all preserved — this is purely visual.

   Brand tokens: teal #3CA8A8 · dark-green #205C5B · Montserrat
   Layout: full-height gradient brand panel + white form card.
   ============================================================================ */

/* ── Shell / full-height split ──────────────────────────────────────────── */
.auth-shell {
    padding: 0 !important;
    min-height: 100vh;
    background: #EEF6F6;
    overflow-x: hidden;
}

.auth-shell > .row {
    margin: 0;
    min-height: 100vh;
    align-items: stretch !important;
}

.auth-shell .auth-brand-col,
.auth-shell .auth-form-col {
    padding: 0;
}

/* ── Brand panel ────────────────────────────────────────────────────────── */
.auth-shell .auth-brand-col {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #2C8F8E 0%, #205C5B 100%);
    color: #FFFFFF;
}

/* Decorative soft circles */
.auth-shell .auth-brand-col::before,
.auth-shell .auth-brand-col::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.auth-shell .auth-brand-col::before {
    width: 420px;
    height: 420px;
    top: -130px;
    right: -120px;
    background: rgba(255, 255, 255, 0.07);
}

.auth-shell .auth-brand-col::after {
    width: 300px;
    height: 300px;
    bottom: -110px;
    left: -90px;
    background: rgba(255, 255, 255, 0.05);
}

.auth-shell .auth-brand-col .language-box2 {
    display: none !important;
}

.auth-shell .auth-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 440px;
    padding: 60px 48px;
    text-align: center;
}

.auth-shell .auth-brand-logo {
    display: inline-flex;
    background: #FFFFFF;
    padding: 22px 30px;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    margin-bottom: 34px;
}

.auth-shell .auth-brand-logo img,
.auth-shell .auth-brand-logo .register-logo {
    max-width: 230px;
    width: 100%;
    height: auto;
    padding: 0;
}

.auth-shell .auth-brand-title {
    font: normal normal 700 30px/38px Montserrat;
    margin: 0 0 14px;
}

.auth-shell .auth-brand-text {
    font: normal normal normal 16px/26px Montserrat;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 30px;
}

.auth-shell .auth-brand-points {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: inline-block;
}

.auth-shell .auth-brand-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font: normal normal 500 15px/22px Montserrat;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 14px;
}

.auth-shell .auth-brand-points li:last-child {
    margin-bottom: 0;
}

.auth-shell .auth-brand-points li i {
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    font-size: 12px;
}

/* ── Form side ──────────────────────────────────────────────────────────── */
.auth-shell .auth-form-col {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EEF6F6;
    padding: 48px 24px;
}

.auth-shell .auth-form-col .language-box {
    position: absolute;
    top: 22px;
    right: 26px;
    padding: 0 !important;
    margin: 0;
    z-index: 2;
}

.auth-shell .auth-card {
    width: 100%;
    max-width: 470px;
    background: #FFFFFF;
    border: 1px solid #E3EEEE;
    border-radius: 18px;
    box-shadow: 0 16px 44px rgba(32, 92, 91, 0.12);
    padding: 42px 38px;
}

.auth-shell .auth-head {
    text-align: left;
    margin-bottom: 26px;
}

.auth-shell .auth-title {
    font: normal normal 700 26px/32px Montserrat;
    color: #205C5B;
    margin: 0 0 6px;
}

.auth-shell .auth-subtitle {
    font: normal normal normal 15px/22px Montserrat;
    color: #6B8786;
    margin: 0;
}

/* ── Inputs & selects — white, bordered, teal focus ring ─────────────────── */
.auth-shell .sign-input,
.auth-shell .register-frombox select,
.auth-shell select {
    width: 100% !important;
    background: #FFFFFF;
    border: 1.5px solid #D6E4E4;
    box-shadow: none;
    border-radius: 10px;
    padding: 14px 16px;
    font: normal normal normal 16px/20px Montserrat;
    color: #15302F;
    margin-bottom: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-shell .sign-input::placeholder {
    color: #9AB0AF;
    font-size: 15px;
}

.auth-shell .sign-input:focus,
.auth-shell select:focus {
    outline: none;
    border-color: #3CA8A8;
    box-shadow: 0 0 0 4px rgba(60, 168, 168, 0.15);
}

.auth-shell select {
    background-image: url("../images/dropdownarrow.png");
    background-repeat: no-repeat;
    background-position: right 16px center;
    border: 1.5px solid #D6E4E4;
}

/* ── Password field (.password-input-wrapper + .toggle-password) ─────────── */
.auth-shell .password-input-wrapper {
    width: 100%;
}

.auth-shell .toggle-password {
    position: absolute;
    right: 16px;
    color: #6B8786;
    cursor: pointer;
}

/* ── Captcha row ────────────────────────────────────────────────────────────
   Two markup shapes are supported:
   - login / register: input and image each wrapped in a Bootstrap .col
   - forgot-password: input and image are direct children of .captcha-box
   In both, the text input flexes to fill and the captcha image keeps a sane
   fixed-ish width on the right.
   --------------------------------------------------------------------------- */
.auth-shell .captcha-wrapper {
    width: 100% !important;
    margin-bottom: 16px;
}

.auth-shell .captcha-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-shell .captcha-box .sign-input {
    margin-bottom: 0;
}

.auth-shell .captcha-img {
    height: 52px !important;
    object-fit: cover;
    border: 1.5px solid #3CA8A8 !important;
    border-radius: 10px !important;
    margin-top: 0 !important;
}

/* login / register — input & image each in a .col */
.auth-shell .captcha-box .col {
    padding: 0;
}

.auth-shell .captcha-box .col:first-child {
    flex: 1 1 auto;
}

.auth-shell .captcha-box .col:last-child {
    flex: 0 0 auto;
}

.auth-shell .captcha-box .col .sign-input {
    width: 100% !important;
}

.auth-shell .captcha-box .col .captcha-img {
    width: auto;
    max-width: 160px;
}

/* forgot-password — input & image are direct children of .captcha-box */
.auth-shell .captcha-box > .sign-input {
    width: auto !important;
    flex: 1 1 auto;
}

.auth-shell .captcha-box > .captcha-img {
    width: auto;
    max-width: 160px;
    flex: 0 0 auto;
}

/* ── OTP button docked inside its field ─────────────────────────────────── */
.auth-shell .otp-box {
    position: relative;
}

.auth-shell .otp-box .sign-input {
    padding-right: 138px;
}

.auth-shell .otp-box .otp-btn {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    background: #3CA8A8;
    border: none;
    border-radius: 8px;
    padding: 9px 14px;
    font: normal normal 600 14px/16px Montserrat;
    color: #FFFFFF;
    box-shadow: none;
}

.auth-shell .otp-box .otp-btn:hover {
    background: #319696;
}

/* ── Privacy / agreement checkbox row ───────────────────────────────────── */
.auth-shell .signprivacy-box {
    margin-bottom: 6px;
}

.auth-shell .signprivacy-box label {
    font: normal normal normal 14px/20px Montserrat;
    color: #45605F;
}

/* ── Primary submit button ──────────────────────────────────────────────── */
.auth-shell .allbtn-design {
    width: 100% !important;
    background: #3CA8A8;
    border: none;
    border-radius: 10px;
    padding: 15px 0;
    font: normal normal 600 17px/20px Montserrat;
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(60, 168, 168, 0.35);
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.auth-shell .allbtn-design:hover {
    background: #319696;
    box-shadow: 0 8px 22px rgba(60, 168, 168, 0.45);
    transform: translateY(-1px);
}

.auth-shell .allbtn-design:active {
    transform: translateY(0);
}

/* ── Footer links ───────────────────────────────────────────────────────── */
.auth-shell .signup-aclink {
    text-align: center;
    margin-top: 22px;
}

.auth-shell .signup-aclink p {
    font: normal normal normal 15px/22px Montserrat;
    color: #45605F;
    margin-bottom: 6px;
}

.auth-shell .signup-aclink a {
    color: #3CA8A8;
    font-weight: 600;
    text-decoration: none !important;
}

.auth-shell .signup-aclink a:hover {
    color: #205C5B;
    text-decoration: underline !important;
}

/* ── jQuery-validate error labels ───────────────────────────────────────── */
.auth-shell label.error {
    color: #EF4444;
    font: normal normal 500 13px/18px Montserrat;
    display: block;
    margin: -10px 0 12px;
    text-align: left;
}

/* ── Language toggle text ───────────────────────────────────────────────── */
.auth-shell .language-box p {
    color: #205C5B;
    margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    /* Stack the two panels as plain blocks. Using block layout (instead of
       the Bootstrap flex row) sidesteps the flex `min-width: auto` trap where
       the form column refuses to shrink below its widest child (the captcha
       row) and overflows the viewport. */
    /* The row carries Bootstrap's .d-flex (display:flex !important), so the
       override needs !important to actually switch to block stacking. */
    .auth-shell > .row {
        display: block !important;
        margin: 0;
        min-height: auto;
    }

    .auth-shell .auth-brand-col,
    .auth-shell .auth-form-col {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: auto;
    }

    .auth-shell .auth-brand-inner {
        padding: 44px 24px;
        max-width: 100%;
    }

    .auth-shell .auth-brand-logo {
        margin-bottom: 20px;
        padding: 16px 22px;
    }

    .auth-shell .auth-brand-logo img,
    .auth-shell .auth-brand-logo .register-logo {
        max-width: 170px;
    }

    .auth-shell .auth-brand-title {
        font-size: 23px;
        line-height: 30px;
    }

    /* keep the mobile header compact */
    .auth-shell .auth-brand-text,
    .auth-shell .auth-brand-points {
        display: none;
    }

    .auth-shell .auth-form-col {
        display: block;
        padding: 26px 16px 60px;
    }

    .auth-shell .auth-card {
        max-width: 440px;
        margin: 0 auto;
    }

    /* language switcher centered above the card on mobile */
    .auth-shell .auth-form-col .language-box {
        position: static;
        justify-content: center;
        padding: 0 0 16px !important;
    }

    /* allow the captcha row to shrink to fit instead of forcing overflow */
    .auth-shell .captcha-box,
    .auth-shell .captcha-box .sign-input,
    .auth-shell .captcha-box .col {
        min-width: 0;
    }

    .auth-shell .captcha-box .captcha-img {
        max-width: 120px;
    }
}

@media (max-width: 767px) {
    .auth-shell .auth-card {
        padding: 26px 20px;
    }

    .auth-shell .auth-title {
        font-size: 22px;
    }

    /* Neutralize global theme mobile rules that leak onto the auth pages —
       they inject large empty gaps and hide the language switcher. */
    .auth-shell .register-frombox {
        padding-top: 0 !important;
    }

    .auth-shell .signup-aclink {
        padding-top: 0 !important;
        padding-left: 0 !important;
        margin-top: 20px !important;
    }

    .auth-shell .auth-form-col .language-box.language-boxnoshow {
        display: flex !important;
    }

    .auth-shell .sign-input,
    .auth-shell select {
        margin-bottom: 14px;
    }
}

/* Very small screens — stack the captcha so the input stays usable */
@media (max-width: 360px) {
    .auth-shell .captcha-box {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .auth-shell .captcha-box > .sign-input,
    .auth-shell .captcha-box .col {
        flex: 1 1 100%;
    }

    .auth-shell .captcha-box .col .sign-input {
        width: 100% !important;
    }

    .auth-shell .captcha-box .captcha-img {
        width: auto;
        max-width: 140px;
    }
}