/*  =========================================================================================
    Razakar portal - sign in
    =========================================================================================

    EVERY RULE IS SCOPED UNDER .rz-login. The login layout (_Login.cshtml) is shared with six
    other pages - forgot password, reset password, verify code, licence, payment confirmation -
    which still use the Metronic markup. Unscoped rules here would redecorate all of them
    halfway and leave the auth flow looking broken.

    The palette is the portal's own purple, organised rather than replaced: the deep violet of
    the existing brand panel, a workable primary for the button, and neutrals carrying a slight
    violet bias so greys look chosen rather than left over.
    ========================================================================================= */

.rz-login {
    --brand-deep:   #2B0B5E;
    --brand-mid:    #3F1178;
    --brand:        #5B21B6;
    --brand-lift:   #7C3AED;
    --violet-mist:  #C7BAF0;

    --ink:     #1C1830;
    --muted:   #6E6A85;
    --line:    #E7E4EF;
    --ground:  #FAF9FC;
    --surface: #FFFFFF;

    --danger:   #C0392B;
    --danger-bg:#FDF1EF;
    --warn-ink: #7A5200;
    --warn-bg:  #FFF8E6;
    --ok:       #2F7A4F;

    --radius: 12px;

    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    min-height: 100vh;
    display: grid;
    grid-template-columns: 46% 54%;
    background: var(--surface);
}

/* ------------------------------------------------------------------ brand panel */
.rz-login__brand {
    position: relative;
    overflow: hidden;
    background: var(--brand-deep);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px;
    isolation: isolate;
}

/* Depth without a stock gradient hero: one warm pool of light behind the mark, and a
   second cooler one low down, so the panel has a direction to it. */
.rz-login__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(58% 45% at 50% 34%, rgba(124, 58, 237, 0.55) 0%, rgba(124, 58, 237, 0) 70%),
        radial-gradient(70% 50% at 15% 100%, rgba(45, 16, 110, 0.9) 0%, rgba(43, 11, 94, 0) 72%),
        linear-gradient(160deg, var(--brand-mid) 0%, var(--brand-deep) 62%);
}

/* A quiet geometric field, built from repeating gradients rather than an image - it reads as
   ordered pattern at a glance and never competes with the mark. */
.rz-login__brand::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.14;
    background-image:
        repeating-linear-gradient(45deg,  rgba(255,255,255,.6) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,.6) 0 1px, transparent 1px 34px);
    mask-image: radial-gradient(80% 70% at 50% 45%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 0%, transparent 78%);
}

.rz-login__mark {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    text-align: center;
}

.rz-login__mark img {
    width: 190px;
    max-width: 60%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.35));
}

.rz-login__urdu {
    font-family: "Noto Naskh Arabic", serif;
    font-size: 1.5rem;
    line-height: 1.9;
    color: #fff;
    direction: rtl;
}

.rz-login__tagline {
    max-width: 34ch;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--violet-mist);
    margin: 0;
}

.rz-login__brandfoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.62);
}

.rz-login__brandfoot a {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    padding-bottom: 1px;
}

.rz-login__brandfoot a:hover,
.rz-login__brandfoot a:focus { color: #fff; border-bottom-color: #fff; }

.rz-login__links { display: flex; gap: 18px; }

/* ------------------------------------------------------------------- form panel */
.rz-login__panel {
    background: var(--ground);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.rz-login__card {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (prefers-reduced-motion: no-preference) {
    .rz-login__card {
        animation: rzRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes rzRise {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }
}

.rz-login__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0;
}

.rz-login__title {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 6px 0 0;
    color: var(--ink);
    text-wrap: balance;
}

.rz-login__sub {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

/* The form is a single child of the card, so the card's gap does nothing for what is inside
   it. Without this the fields, the options row and the button stack flush against each other. */
.rz-login__card form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ----------------------------------------------------------------------- fields */
.rz-login__fields { display: flex; flex-direction: column; gap: 16px; }

.rz-field { display: flex; flex-direction: column; gap: 7px; }

.rz-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
}

.rz-field__wrap { position: relative; display: flex; }

/* The input is also .form-control, which Metronic styles. These rules are more specific, so
   they win without needing !important. */
.rz-login .rz-field__wrap input.form-control,
.rz-login .rz-field__wrap input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(28, 24, 48, 0.04);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.rz-login .rz-field__wrap input::placeholder { color: #A9A5BC; }

.rz-login .rz-field__wrap input:hover { border-color: #D3CDE4; }

.rz-login .rz-field__wrap input:focus {
    outline: none;
    border-color: var(--brand-lift);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14);
}

/* Room for the reveal button so long passwords never run under it. */
.rz-login .rz-field__wrap--password input { padding-right: 46px; }

.rz-reveal {
    position: absolute;
    top: 0; right: 0;
    width: 46px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer;
    color: var(--muted); font-size: 0.95rem; line-height: 1;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.rz-reveal .rz-eye { width: 19px; height: 19px; fill: currentColor; }

/* The eye gains a stroke through it while the password is visible, so the control says which
   state pressing it will produce. */
.rz-reveal .rz-eye__slash {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0;
}
.rz-reveal.is-showing .rz-eye__slash { opacity: 1; }

.rz-reveal:hover { color: var(--brand); }
.rz-reveal:focus-visible {
    outline: 2px solid var(--brand-lift);
    outline-offset: -2px;
}

/* Shown only while Caps Lock is actually on - a real cause of failed sign-ins that almost
   nothing tells people about. */
.rz-caps {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--warn-ink);
    background: var(--warn-bg);
    border: 1px solid #F2E3B8;
    border-radius: 8px;
    padding: 6px 10px;
}
.rz-caps.is-on { display: flex; }

/* ----------------------------------------------------------------- options row */
.rz-login__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rz-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.rz-check input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

.rz-login__forgot {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}
.rz-login__forgot:hover,
.rz-login__forgot:focus { color: var(--brand-lift); text-decoration: underline; }

/* ---------------------------------------------------------------------- button */
.rz-login .rz-submit {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: 0.97rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(91, 33, 182, 0.26);
    transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}
.rz-login .rz-submit:hover { background: var(--brand-lift); box-shadow: 0 8px 22px rgba(124, 58, 237, 0.3); }
.rz-login .rz-submit:active { transform: translateY(1px); }
.rz-login .rz-submit:focus-visible { outline: 3px solid rgba(124, 58, 237, .35); outline-offset: 2px; }

/* KTApp.progress adds a spinner class to the button while the form posts. Keep the label
   readable and the control obviously busy rather than letting it look clickable. */
.rz-login .rz-submit.kt-spinner { color: rgba(255, 255, 255, 0.75); cursor: progress; }

/* ------------------------------------------------------------------- messages */
.rz-msg {
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.86rem;
    line-height: 1.5;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
/* Inline SVG icons. They take their colour from the text they sit with, so a message only
   ever has to set one colour. */
.rz-login .rz-ico {
    width: 16px;
    height: 16px;
    flex: none;
    fill: currentColor;
}
.rz-msg .rz-ico { margin-top: 1px; }

.rz-msg--error  { background: var(--danger-bg); color: var(--danger); border: 1px solid #F3D4CE; }
.rz-msg--ok     { background: #F0F7F2; color: var(--ok); border: 1px solid #CDE5D6; }

/* The browser-notification notice. It is genuinely minor - it used to be a large amber slab
   above everything, which read as though sign-in itself had failed. */
.rz-login__notice {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid #E3B341;
    border-radius: 8px;
    padding: 9px 12px;
}

/* Validation messages from jQuery Validate. Both class names are covered: rz-error is what
   this page configures, error is the library default if anything reconfigures it. */
.rz-login label.rz-error,
.rz-login label.error {
    color: var(--danger);
    font-size: 0.78rem;
    font-weight: 500;
    margin: 0;
}

.rz-login .rz-field__wrap input.rz-invalid,
.rz-login .rz-field__wrap input.error {
    border-color: var(--danger);
    background: #FEFAF9;
}
.rz-login .rz-field__wrap input.rz-invalid:focus {
    box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.13);
}

/* Hidden error label that carries the server's message; empty unless something failed. */
.rz-login__servererror:empty { display: none; }

/* kt-hidden comes from the Metronic bundle, which this layout has commented out. Define it
   here so anything toggling that class actually stays hidden. */
.rz-login .kt-hidden { display: none !important; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
    .rz-login {
        grid-template-columns: 1fr;
        min-height: 100vh;
    }
    .rz-login__brand {
        padding: 26px 24px 30px;
        gap: 18px;
    }
    .rz-login__mark { flex: none; gap: 12px; }
    .rz-login__mark img { width: 108px; }
    .rz-login__urdu { font-size: 1.2rem; }
    .rz-login__tagline { display: none; }
    .rz-login__brandfoot { display: none; }
    .rz-login__panel { padding: 32px 20px 48px; align-items: flex-start; }
}

@media (max-width: 420px) {
    .rz-login__title { font-size: 1.55rem; }
    .rz-login__panel { padding-inline: 16px; }
}