/*
 * wne auth screens: user login / register / forgot / reset and admin login / forgot / reset.
 * Colours come from the site theme: --main-color-one (primary) and --secondary-color.
 */
.wne-auth {
    --wne-auth-primary: var(--main-color-one, #ff7a59);
    --wne-auth-primary-2: var(--secondary-color, #4f5bd5);
    --wne-auth-ink: #111a3a;
    --wne-auth-muted: #667085;
    --wne-auth-line: #e4e7ec;
    --wne-auth-field: #f9fafb;
    --wne-auth-navy: #0b1437;
    --wne-auth-navy-2: #2d316a;
    padding: 80px 16px;
    background:
        radial-gradient(1200px 400px at 10% -10%, rgba(79, 91, 213, .08), transparent 60%),
        radial-gradient(900px 400px at 110% 110%, rgba(255, 122, 89, .08), transparent 60%),
        #f5f7fb;
}
.wne-auth *, .wne-auth *::before, .wne-auth *::after { box-sizing: border-box; }
.wne-auth { font-family: var(--body-font, inherit); }
.wne-auth h1, .wne-auth h2 { font-family: var(--heading-font, inherit); }

/* a shorter page banner above the auth card, so the form is visible without scrolling */
body:has(.wne-auth) .breadcrumb-area .breadcrumb-inner { padding-bottom: 70px; }
body:has(.wne-auth) .breadcrumb-area.navbar-variant-01 .breadcrumb-inner { padding-top: 90px; }

.wne-auth-card {
    display: grid;
    grid-template-columns: 5fr 7fr;
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(16, 24, 64, .12), 0 2px 6px rgba(16, 24, 64, .05);
}
.wne-auth-card.is-wide { max-width: 1100px; grid-template-columns: 4fr 8fr; }

/* brand panel */
.wne-auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 48px 40px;
    color: #fff;
    background: linear-gradient(155deg, var(--wne-auth-navy) 0%, var(--wne-auth-navy-2) 100%);
    overflow: hidden;
}
.wne-auth-aside::before, .wne-auth-aside::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.wne-auth-aside::before {
    width: 340px; height: 340px; right: -140px; top: -120px;
    background: radial-gradient(circle, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%);
}
.wne-auth-aside::after {
    width: 260px; height: 260px; left: -90px; bottom: -110px;
    background: radial-gradient(circle, var(--wne-auth-primary), transparent 70%);
    opacity: .35;
}
.wne-auth-aside > * { position: relative; z-index: 1; }
.wne-auth-logo img { max-height: 64px; width: auto; }
.wne-auth-aside h2 { color: #fff; font-size: 28px; line-height: 1.3; margin: 0 0 12px; }
.wne-auth-aside p { color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.7; margin: 0; }
.wne-auth-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.wne-auth-points li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.5; }
.wne-auth-points i {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 11px;
}
.wne-auth-aside-foot { font-size: 13px; color: rgba(255, 255, 255, .6); }

/* form panel */
.wne-auth-main { padding: 48px 56px; }
.wne-auth-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; margin-bottom: 14px; border-radius: 50px;
    background: rgba(79, 91, 213, .08); color: var(--wne-auth-primary-2);
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.wne-auth-title { font-size: 28px; line-height: 1.25; color: var(--wne-auth-ink); margin: 0 0 8px; }
.wne-auth-subtitle { color: var(--wne-auth-muted); font-size: 15px; line-height: 1.6; margin: 0 0 28px; }
.wne-auth-main .alert { border-radius: 10px; font-size: 14px; }
.wne-auth-main .alert ul { margin: 0; padding-left: 18px; }

.wne-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.wne-auth-grid .is-full { grid-column: 1 / -1; }

.wne-field { margin-bottom: 18px; }
.wne-field label { display: block; font-size: 14px; font-weight: 600; color: var(--wne-auth-ink); margin-bottom: 7px; }
.wne-field-control { position: relative; }
.wne-field-control > i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: #98a2b3; font-size: 15px; pointer-events: none; transition: color .2s;
}
.wne-auth .wne-field-control input,
.wne-auth .wne-field-control select {
    width: 100%; height: 50px; margin: 0;
    padding: 0 16px 0 44px;
    border: 1px solid var(--wne-auth-line); border-radius: 10px;
    background: var(--wne-auth-field); color: var(--wne-auth-ink);
    font-size: 15px; outline: none; box-shadow: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.wne-auth .wne-field-control select { appearance: auto; }
.wne-auth .wne-field-control input[readonly] { color: var(--wne-auth-muted); cursor: default; }
.wne-auth .wne-field-control input::placeholder { color: #98a2b3; }
.wne-auth .wne-field-control input:focus,
.wne-auth .wne-field-control select:focus {
    border-color: var(--wne-auth-primary); background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--wne-auth-primary) 18%, transparent);
}
.wne-field-control:focus-within > i { color: var(--wne-auth-primary); }
.wne-field-control.has-toggle input { padding-right: 50px; }
.wne-pass-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent;
    color: #98a2b3; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.wne-pass-toggle:hover, .wne-pass-toggle:focus-visible { color: var(--wne-auth-ink); background: rgba(16, 24, 64, .05); outline: none; }

.wne-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 24px; font-size: 14px; }
.wne-auth-row label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--wne-auth-muted); cursor: pointer; }
.wne-auth-row input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--wne-auth-primary); }
.wne-auth a.wne-link { color: var(--wne-auth-primary); font-weight: 600; text-decoration: none; }
.wne-auth a.wne-link:hover { text-decoration: underline; }

.wne-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 52px; padding: 0 24px;
    border: 0; border-radius: 10px; cursor: pointer;
    font-size: 16px; font-weight: 600; text-decoration: none;
    transition: transform .15s, box-shadow .2s, background-color .2s, color .2s;
}
.wne-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--wne-auth-primary), color-mix(in srgb, var(--wne-auth-primary) 70%, var(--wne-auth-primary-2)));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--wne-auth-primary) 30%, transparent);
}
.wne-btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px color-mix(in srgb, var(--wne-auth-primary) 38%, transparent); }
.wne-btn-primary:disabled { opacity: .75; cursor: wait; transform: none; }
.wne-btn-ghost { color: var(--wne-auth-ink); background: #fff; border: 1px solid var(--wne-auth-line); margin-top: 12px; }
.wne-btn-ghost:hover { color: var(--wne-auth-ink); background: var(--wne-auth-field); border-color: #cfd4dc; }

.wne-auth-divider { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; color: #98a2b3; font-size: 13px; }
.wne-auth-divider::before, .wne-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--wne-auth-line); }
.wne-social { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.wne-social a {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 48px; border-radius: 10px; border: 1px solid var(--wne-auth-line); background: #fff;
    color: var(--wne-auth-ink); font-size: 15px; font-weight: 600; text-decoration: none;
    transition: background-color .2s, border-color .2s, transform .15s;
}
.wne-social a:hover { background: var(--wne-auth-field); border-color: #cfd4dc; transform: translateY(-1px); color: var(--wne-auth-ink); }
.wne-social svg { width: 20px; height: 20px; flex: none; }
.wne-social .is-facebook svg { fill: #1877f2; }

.wne-auth-foot { margin: 26px 0 0; text-align: center; color: var(--wne-auth-muted); font-size: 15px; }

/* admin screens fill the viewport */
.wne-auth.is-admin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.wne-auth.is-admin .wne-auth-card { width: 100%; }

@media (max-width: 991px) {
    .wne-auth-main { padding: 40px 36px; }
    .wne-auth-aside { padding: 40px 32px; }
}
@media (max-width: 767px) {
    .wne-auth { padding: 40px 16px; }
    .wne-auth-card, .wne-auth-card.is-wide { grid-template-columns: 1fr; border-radius: 16px; }
    .wne-auth-aside { padding: 28px 24px; gap: 0; }
    .wne-auth-aside .wne-auth-aside-body, .wne-auth-aside-foot { display: none; }
    .wne-auth-logo { text-align: center; }
    .wne-auth-logo img { max-height: 48px; }
    .wne-auth-main { padding: 32px 22px; }
    .wne-auth-title { font-size: 24px; }
    .wne-auth-grid { grid-template-columns: 1fr; }
}

/* right-to-left languages */
[dir=rtl] .wne-field-control > i { left: auto; right: 16px; }
[dir=rtl] .wne-auth .wne-field-control input,
[dir=rtl] .wne-auth .wne-field-control select { padding: 0 44px 0 16px; }
[dir=rtl] .wne-field-control.has-toggle input { padding-left: 50px; }
[dir=rtl] .wne-pass-toggle { right: auto; left: 6px; }