/* ============================================================
   Auth pages theme (Login / Register / account flows)
   Scoped under .auth-shell so it never leaks into the rest of
   the site. Loaded only by _LoginLayout.cshtml.
   ============================================================ */

.auth-shell {
    --auth-primary: #EB5C5A;
    --auth-primary-dark: #d8504e;
    --auth-ink: #20242E;
    --auth-muted: #6b7280;
    --auth-border: #e3e6ec;

    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: "Onest", Helvetica, Arial, sans-serif;
    background:
        radial-gradient(1100px 480px at 82% -12%, rgba(235, 92, 90, .20), transparent 60%),
        radial-gradient(900px 520px at -5% 112%, rgba(51, 51, 52, .12), transparent 55%),
        linear-gradient(135deg, #fbf3f2 0%, #eef1f7 58%, #e7ebf4 100%);
}

.auth-main {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ---------- Card ---------- */
.auth-shell .container-bigscreen,
.auth-shell .container-smallScreen,
.auth-shell .container-signIn {
    border-radius: 26px !important;
    background: #fff;
    border: 1px solid rgba(20, 20, 40, .05);
    box-shadow: 0 26px 70px rgba(31, 35, 46, .16), 0 6px 18px rgba(31, 35, 46, .06);
}

/* ---------- Headings & copy ---------- */
.auth-shell form h4 {
    color: var(--auth-ink);
    font-size: 25px;
    font-weight: 800;
    margin: 0 0 14px;
}

.auth-shell .createAccountLabel {
    margin: 0 0 18px;
    font-size: 30px;
}

.auth-shell p {
    color: var(--auth-muted);
}

/* ---------- Labels ---------- */
.auth-shell .inputLabel {
    color: #3a3f4b;
    font-family: "Onest", Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    display: block;
    margin: 10px 0 0;
}

/* ---------- Inputs ---------- */
.auth-shell .inputField,
.auth-shell input[type="email"],
.auth-shell input[type="password"] {
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--auth-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 6px 0;
    font-size: 15px;
    color: var(--auth-ink);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-shell .inputField:focus,
.auth-shell input[type="email"]:focus,
.auth-shell input[type="password"]:focus {
    outline: none;
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 4px rgba(235, 92, 90, .14);
}

/* Phone input lives inside the country-picker wrapper, which already
   provides the border — keep the inner field borderless. */
.auth-shell input[type="text"]#phonenumber {
    border: none;
    box-shadow: none;
    outline: none;
    background: transparent;
}

.auth-shell input::placeholder {
    color: #9aa1ad;
}

/* ---------- Primary buttons ---------- */
.auth-shell button[type="submit"] {
    background: var(--auth-primary);
    color: #fff;
    border: none;
    border-radius: 40px;
    padding: 13px 34px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(235, 92, 90, .34);
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

.auth-shell button[type="submit"]:hover {
    filter: brightness(1.04);
    box-shadow: 0 12px 28px rgba(235, 92, 90, .45);
    transform: translateY(-1px);
}

.auth-shell button[type="submit"]:active {
    transform: translateY(0) scale(.98);
}

/* ---------- Secondary / outline buttons ---------- */
.auth-shell .buttonType {
    border-radius: 40px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}

.auth-shell .buttonType:hover {
    background: #fff !important;
    color: var(--auth-primary) !important;
    transform: translateY(-1px);
}

/* Show / hide password toggle */
.auth-shell .buttonNoClass {
    color: var(--auth-muted);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    padding: 8px 0;
}

.auth-shell .buttonNoClass:hover {
    color: var(--auth-primary);
}

/* ---------- Links ---------- */
.auth-shell #forgot-password,
.auth-shell #resend-email-confirmation {
    color: var(--auth-primary);
    font-size: 13px;
    display: inline-block;
    margin: 8px 0;
}

.auth-shell #forgot-password:hover,
.auth-shell #resend-email-confirmation:hover {
    text-decoration: underline;
}

/* ---------- Overlay (dark side panel) ---------- */
.auth-shell .overlay,
.auth-shell .overlay-smallScreen {
    background: linear-gradient(160deg, #2b2e3a 0%, #3a2f3a 58%, #4a2f39 100%);
    color: #fff;
}

.auth-shell .overlay h4,
.auth-shell .overlay-smallScreen h4 {
    color: #fff;
    font-weight: 800;
}

.auth-shell .overlay h6,
.auth-shell .overlay-smallScreen h6 {
    color: rgba(255, 255, 255, .8);
    font-weight: 400;
    line-height: 1.5;
}

/* ---------- Validation messages ---------- */
.auth-shell .text-danger,
.auth-shell .field-validation-error {
    color: #e23b3b;
    font-size: 13px;
    text-align: left;
    display: block;
}

.auth-shell .validation-summary-errors {
    color: #e23b3b;
    font-size: 13px;
    text-align: center;
}

/* ---------- Tighten the sign-up form layout ---------- */
.auth-shell .sign-up-container form,
.auth-shell .sign-up-container-smallScreen form {
    margin: 0 !important;
    padding: 30px 34px !important;
}

/* Terms row */
.auth-shell #terms + label {
    font-size: 13px;
    color: #3a3f4b;
}

/* ============================================================
   Split layout: form on the left, branded art on the right.
   When a page contains .auth-split the shell goes full-bleed.
   ============================================================ */
.auth-shell:has(.auth-split) {
    padding: 0;
    align-items: stretch;
    background: #fff;
    overflow-x: hidden;
}

.auth-shell:has(.auth-split) .auth-main {
    display: block;
}

.auth-split {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* ---- Form side (left) ---- */
.auth-form-side {
    flex: 1 1 50%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 5%;
    background: #fff;
    overflow-y: auto;
}

.auth-form-inner {
    width: 100%;
    max-width: 460px;
}

.auth-form-head {
    margin-bottom: 26px;
}

.auth-form-logo {
    width: 56px;
    height: auto;
    margin-bottom: 18px;
}

.auth-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--auth-ink);
    margin: 0 0 6px;
}

.auth-sub {
    font-size: 15px;
    color: var(--auth-muted);
    margin: 0;
}

.auth-form .inputLabel {
    margin-top: 14px;
}

/* Keep the Bootstrap-grid register form tidy inside the narrow panel:
   single column, no negative-margin overflow. */
.auth-shell .auth-form.row,
.auth-shell .auth-form .row {
    margin-left: 0;
    margin-right: 0;
}

.auth-shell .auth-form [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* First / Last name sit side by side; stack on small screens. */
.auth-shell .auth-form .auth-name-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.auth-shell .auth-form .auth-name-row [class*="col-"] {
    flex: 1 1 0;
    max-width: calc(50% - 7px);
}

@media (max-width: 520px) {
    .auth-shell .auth-form .auth-name-row [class*="col-"] {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Password field with eye toggle */
.auth-password {
    position: relative;
}

.auth-password .inputField {
    padding-right: 46px;
}

.auth-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--auth-muted);
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.auth-eye:hover {
    color: var(--auth-primary);
}

.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 4px;
    flex-wrap: wrap;
    gap: 8px;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #3a3f4b;
    margin: 0;
    cursor: pointer;
}

.auth-remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--auth-primary);
}

/* Full-width primary button */
.auth-shell .auth-primary-btn {
    width: 100%;
    margin-top: 18px;
}

.auth-status {
    background: #eef7ee;
    border: 1px solid #cfe8cf;
    color: #2f7a39;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 16px;
    text-align: center;
}

.auth-switch {
    margin: 22px 0 0;
    font-size: 14px;
    color: var(--auth-muted);
    text-align: center;
}

.auth-switch a {
    color: var(--auth-primary);
    font-weight: 700;
    margin: 0;
}

.auth-switch-sub {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--auth-muted);
    text-align: center;
}

.auth-switch-sub a {
    color: var(--auth-muted);
    text-decoration: underline;
    margin: 0;
}

.auth-switch-sub a:hover {
    color: var(--auth-primary);
}

/* ---- Art side (right) ---- */
.auth-art-side {
    flex: 1 1 50%;
    max-width: 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 56px;
    text-align: center;
    color: #fff;
    background: linear-gradient(155deg, #EB5C5A 0%, #c8403e 46%, #2b2e3a 100%);
}

.auth-art-side::before,
.auth-art-side::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.auth-art-side::before {
    width: 420px;
    height: 420px;
    background: rgba(255, 255, 255, .08);
    top: -150px;
    right: -150px;
}

.auth-art-side::after {
    width: 320px;
    height: 320px;
    background: rgba(0, 0, 0, .12);
    bottom: -120px;
    left: -100px;
}

.auth-art-content {
    position: relative;
    z-index: 1;
    max-width: 420px;
}

.auth-art-logo {
    width: 110px;
    height: auto;
    margin-bottom: 26px;
    filter: brightness(0) invert(1);
}

.auth-art-side h2 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.18;
    margin: 0 0 14px;
}

.auth-art-side p {
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.auth-art-phone {
    position: relative;
    z-index: 1;
    width: 62%;
    max-width: 260px;
    margin-top: 40px;
    filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .4));
}

/* ---- Responsive: collapse to single column ---- */
@media (max-width: 900px) {
    .auth-art-side {
        display: none;
    }

    .auth-form-side {
        flex-basis: 100%;
        max-width: 100%;
        padding: 40px 24px;
    }

    .auth-split {
        min-height: auto;
    }
}