/* =============================================================
   auth-glass.css - the sign in / recover / reset screens.

   Shared by index.php, recover-pw.php and reset-password.php so the
   three pages that a locked-out user walks through in sequence look
   like one product rather than three.

   The glassmorphism is kept and pushed further: more blur, a light
   gradient across the pane so it catches the background, a hairline
   border and a deep soft shadow. What changed is everything around
   it - type scale, field anatomy, focus feedback, and a scrim that
   makes white text legible over a busy photograph.

   Icons are inline SVG in the markup, never an icon font: these
   pages load no Font Awesome stylesheet, so a <i class="fa ..."> on
   them renders as nothing at all.
   ============================================================= */

.auth-page {
    --auth-text:        #f5f7fc;
    --auth-muted:       rgba(245, 247, 252, 0.80);
    --auth-line:        rgba(255, 255, 255, 0.22);
    --auth-line-soft:   rgba(255, 255, 255, 0.24);
    --auth-field:       rgba(255, 255, 255, 0.13);
    --auth-field-hover: rgba(255, 255, 255, 0.19);
    --auth-accent:      #6c63ff;
    --auth-accent-lift: #8f86ff;
    --auth-danger:      #ff7a7a;
    --auth-ok:          #45dda0;

    min-height: 100vh;
    color: var(--auth-text);
    -webkit-font-smoothing: antialiased;
}

/* Deliberately NO page-wide scrim.
   An overlay dark enough to guarantee legibility also hides the background
   photograph, and the photograph is the point. The contrast the text needs is
   bought locally instead, in the pane tint below, so it costs nothing outside
   the 432px the form actually occupies. */

.auth-page .login-form-bg,
.auth-page .container,
.auth-page .form-input-content {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* ------------------------------------------------------------ pane */

.auth-page .card.auth-card {
    width: 100%;
    max-width: 432px;
    margin: 0 auto;
    padding: 2.4rem 2.15rem 2rem;
    border-radius: 22px;
    border: 1px solid var(--auth-line);
    /* Frosted, not tinted. The white sheen does the work and the dark base
       underneath is only a whisper - enough to stop white text dissolving
       where the photo goes bright, not enough to read as a solid panel.
       Legibility comes from the heavy blur (which flattens the busy detail
       behind the pane) and a soft text shadow on the headings, rather than
       from darkening, which is what killed the glass the first time. */
    background:
        linear-gradient(158deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.17) 52%, rgba(255, 255, 255, 0.26) 100%),
        linear-gradient(180deg, rgba(18, 22, 44, 0.06), rgba(18, 22, 44, 0.12));
    backdrop-filter: blur(28px) saturate(155%);
    -webkit-backdrop-filter: blur(28px) saturate(155%);
    box-shadow:
        0 14px 34px rgba(6, 10, 26, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    overflow: hidden;
}

/* The glint along the top edge that reads as a pane of glass. */
.auth-page .card.auth-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
}

.auth-page .card.auth-card .card-body {
    padding: 0;
    background: transparent;
}

/* ------------------------------------------------------------ heading */

.auth-head {
    text-align: center;
    margin-bottom: 1.9rem;
}

/* Tinted with the accent, not left as clear glass.
   A white stroke on a near-white translucent square is invisible - once the
   pane was lightened the badge disappeared altogether. Filling it with the
   same violet as the submit button gives the icon something to sit on and
   bookends the card: mark at the top, action at the bottom. */
.auth-badge {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: linear-gradient(145deg, var(--auth-accent) 0%, var(--auth-accent-lift) 100%);
    box-shadow:
        0 8px 20px rgba(85, 76, 224, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.auth-badge svg {
    width: 25px;
    height: 25px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.95;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-title {
    margin: 0 0 0.35rem;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.25;
    text-shadow: 0 1px 14px rgba(6, 10, 26, 0.55);
}

.auth-sub {
    margin: 0;
    font-size: 0.895rem;
    line-height: 1.45;
    color: var(--auth-muted);
    text-shadow: 0 1px 10px rgba(6, 10, 26, 0.45);
}

/* ------------------------------------------------------------ fields */

.auth-form {
    margin: 0;
}

.auth-field {
    position: relative;
    margin-bottom: 0.95rem;
}

.auth-field__icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    pointer-events: none;
    z-index: 2;
}

.auth-field__icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--auth-muted);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.18s ease;
}

/* The placeholder is a single space in the markup on purpose: it keeps
   :placeholder-shown true while the field is empty, which is what
   drives the floating label without a line of JavaScript. */
.auth-page input.auth-input {
    width: 100%;
    height: 58px;
    padding: 1.35rem 2.9rem 0.45rem 2.85rem;
    border-radius: 14px;
    border: 1px solid var(--auth-line-soft);
    background: var(--auth-field);
    color: var(--auth-text);
    font-size: 0.97rem;
    line-height: 1.2;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.auth-page input.auth-input:hover:not(:focus) {
    background: var(--auth-field-hover);
}

.auth-page input.auth-input:focus {
    outline: none;
    border-color: rgba(143, 134, 255, 0.85);
    background: var(--auth-field-hover);
    box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.20);
}

.auth-field:focus-within .auth-field__icon svg {
    stroke: var(--auth-accent-lift);
}

.auth-page input.auth-input::placeholder {
    color: transparent;
}

.auth-label {
    position: absolute;
    left: 2.9rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: 0.95rem;
    color: var(--auth-muted);
    pointer-events: none;
    transition: transform 0.16s ease, font-size 0.16s ease, color 0.16s ease;
    transform-origin: left center;
    z-index: 2;
}

.auth-page input.auth-input:focus + .auth-label,
.auth-page input.auth-input:not(:placeholder-shown) + .auth-label {
    transform: translateY(-168%);
    font-size: 0.715rem;
    letter-spacing: 0.02em;
    color: rgba(245, 247, 252, 0.72);
}

.auth-page input.auth-input:focus + .auth-label {
    color: var(--auth-accent-lift);
}

/* A readonly field is context, not something to fill in - say so
   visually so nobody fights a field that will not take a keystroke. */
.auth-page input.auth-input[readonly] {
    background: rgba(255, 255, 255, 0.045);
    color: rgba(245, 247, 252, 0.80);
    cursor: default;
}

.auth-page input.auth-input[readonly]:focus {
    border-color: var(--auth-line-soft);
    box-shadow: none;
}

/* Chrome paints autofilled inputs opaque yellow, which destroys the
   glass. The long inset shadow is the only way to repaint them. */
.auth-page input.auth-input:-webkit-autofill,
.auth-page input.auth-input:-webkit-autofill:hover,
.auth-page input.auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-text);
    -webkit-box-shadow: 0 0 0 1000px rgba(38, 42, 66, 0.92) inset;
    caret-color: var(--auth-text);
    transition: background-color 9999s ease-in-out 0s;
}

/* ------------------------------------------------------------ reveal */

.auth-eye {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    z-index: 3;
    transition: background 0.16s ease;
}

.auth-eye:hover,
.auth-eye:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.auth-eye svg {
    width: 18px;
    height: 18px;
    stroke: var(--auth-muted);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-eye[aria-pressed="true"] svg {
    stroke: var(--auth-accent-lift);
}

.auth-eye .auth-eye__off {
    display: none;
}

.auth-eye[aria-pressed="true"] .auth-eye__on {
    display: none;
}

.auth-eye[aria-pressed="true"] .auth-eye__off {
    display: block;
}

/* ------------------------------------------------------------ button */

.auth-page .auth-btn {
    position: relative;
    width: 100%;
    height: 54px;
    margin-top: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--auth-accent) 0%, var(--auth-accent-lift) 100%);
    color: #fff;
    font-size: 0.99rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(85, 76, 224, 0.38);
    transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.auth-page .auth-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 16px 32px rgba(85, 76, 224, 0.46);
}

.auth-page .auth-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(85, 76, 224, 0.36);
}

.auth-page .auth-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

.auth-page .auth-btn:disabled {
    cursor: progress;
    filter: saturate(0.75) brightness(0.92);
    box-shadow: 0 8px 18px rgba(85, 76, 224, 0.22);
    transform: none;
}

.auth-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Drawn in CSS rather than borrowed from an icon font, so the busy
   state still shows something on a page with no Font Awesome. */
.auth-spin {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin 0.7s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------ replies */

.auth-reply:empty {
    display: none;
}

/* Sits between the last field and the submit button, so spacing comes from
   the field above and the button's own top margin below. */
.auth-reply {
    margin: 0.15rem 0 0.35rem;
}

.auth-page .auth-reply .alert {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    padding: 0.72rem 0.85rem;
    border-radius: 12px;
    border: 1px solid;
    font-size: 0.865rem;
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.08);
    color: var(--auth-text);
    animation: auth-rise 0.22s ease both;
}

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.auth-page .auth-reply .alert-danger {
    border-color: rgba(255, 122, 122, 0.45);
    background: rgba(255, 122, 122, 0.14);
    color: #ffdada;
}

.auth-page .auth-reply .alert-success {
    border-color: rgba(69, 221, 160, 0.45);
    background: rgba(69, 221, 160, 0.14);
    color: #d6fff0;
}

.auth-page .auth-reply .alert-info {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.10);
    color: rgba(245, 247, 252, 0.88);
}

/* ------------------------------------------------------------ footer */

.auth-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem 0.85rem;
    margin: 1.6rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--auth-line-soft);
    font-size: 0.87rem;
    color: var(--auth-muted);
    text-align: center;
}

.auth-foot a {
    color: #cdc7ff;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.auth-foot a:hover,
.auth-foot a:focus-visible {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

/* The old footer ran "Forgot Password? Reset It Don't have Account?
   Sign Up Now" together on one line with no separation, so the two
   offers read as one sentence. */
.auth-foot__sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.auth-brand {
    margin: 1.1rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: rgba(245, 247, 252, 0.42);
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 575.98px) {
    .auth-page .card.auth-card {
        padding: 1.9rem 1.35rem 1.6rem;
        border-radius: 18px;
    }
    .auth-title { font-size: 1.28rem; }
    .auth-page input.auth-input { height: 54px; font-size: 0.94rem; }
    .auth-page .auth-btn { height: 50px; }

    /* Below this width the two offers cannot share a line, and a wrapped
       row leaves the separator dot stranded at the end of the first one.
       Stack them instead and drop the dot. */
    .auth-foot {
        flex-direction: column;
        gap: 0.55rem;
    }
    .auth-foot__sep { display: none; }
}

/* Honour a reduced-motion preference: the spinner stays (it carries
   meaning) but the decorative movement stops. */
@media (prefers-reduced-motion: reduce) {
    .auth-page .auth-btn,
    .auth-page input.auth-input,
    .auth-label,
    .auth-foot a {
        transition: none;
    }
    .auth-page .auth-reply .alert {
        animation: none;
    }
}