/* ==========================================================================
   JIMAM sign-in pages — Amritsar Group of Colleges theme
   Loaded after auth.css on login, register, forgot/verify/reset password.
   Uses the journal website's own colours: maroon with a gold band.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap");

:root {
    --auth-ink: #1d2230;
    --auth-muted: #5f6676;
    --auth-line: #d9dde6;
    --auth-soft: #f4f5f8;
    --auth-primary: #7d1023;
    --auth-primary-dark: #5c0b19;
    --auth-accent: #7d1023;
    --auth-gold: #d4a62a;
    --auth-link: #1f4f8b;
    --auth-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
    --auth-sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, sans-serif;
}

.auth-page-bg {
    font-family: var(--auth-sans);
    font-size: 16px;
    background: #eceef3;
}

/* ---------- frame ---------- */
.auth-shell {
    border: 0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(29, 34, 48, .06), 0 18px 48px rgba(29, 34, 48, .12);
    backdrop-filter: none;
    border-top: 5px solid var(--auth-gold);
}
.auth-shell-login { max-width: 1040px; }

/* ---------- institutional panel ---------- */
.auth-visual {
    justify-content: flex-start;
    gap: 0;
    background: #5c0b19 linear-gradient(160deg, #7d1023 0%, #5c0b19 55%, #3d0710 100%);
    color: #fbf3ee;
}
.auth-visual::before,
.auth-visual::after,
.auth-login-orb { display: none; }

.auth-masthead {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(212, 166, 42, .55);
}
.auth-seal {
    position: relative;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px var(--auth-gold);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.auth-seal b {
    font-family: var(--auth-serif);
    font-size: 19px;
    font-weight: 700;
    color: #7d1023;
    letter-spacing: .02em;
}
.auth-seal img {
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    object-fit: contain;
    background: #fff;
}
.auth-masthead-text { display: grid; gap: 3px; min-width: 0; }
.auth-masthead-text strong {
    font-family: var(--auth-serif);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    color: #fff;
}
.auth-masthead-text small {
    font-size: 13.5px;
    line-height: 1.35;
    color: rgba(251, 243, 238, .82);
}

.auth-brand-badge {
    align-self: flex-start;
    border: 0;
    border-radius: 0;
    padding: 0 0 0 12px;
    border-left: 3px solid var(--auth-gold);
    background: transparent;
    color: #f6dc8f;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}
.auth-visual h1 {
    font-family: var(--auth-serif);
    font-weight: 600;
    font-size: clamp(32px, 3.4vw, 44px);
    line-height: 1.12;
    letter-spacing: -.01em;
    margin: 16px 0 14px;
    color: #fff;
}
.auth-visual p {
    max-width: 34ch;
    font-size: 16.5px;
    line-height: 1.6;
    color: rgba(251, 243, 238, .86);
}

.auth-roles {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
    max-width: 36ch;
}
.auth-roles li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(251, 243, 238, .86);
}
.auth-roles li::before {
    content: "";
    width: 9px;
    height: 9px;
    margin: 6px 0 0 5px;
    transform: rotate(45deg);
    background: var(--auth-gold);
}
.auth-roles strong { color: #fff; font-weight: 600; }

.auth-site-link {
    margin-top: auto;
    padding-top: 30px;
    font-size: 14.5px;
    color: #f6dc8f !important;
    text-decoration: none;
    font-weight: 600;
}
.auth-site-link:hover { text-decoration: underline; }

/* ---------- form side ---------- */
.auth-card-heading .auth-eyebrow {
    color: var(--auth-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.auth-card-heading h2 {
    font-family: var(--auth-serif);
    font-weight: 600;
    font-size: clamp(28px, 3vw, 36px);
    letter-spacing: -.01em;
    color: var(--auth-ink);
}
.auth-card-heading p { color: var(--auth-muted); }

.auth-field label { font-size: 14.5px; font-weight: 600; color: var(--auth-ink); }
.auth-field input,
.auth-field select {
    height: 48px;
    border-radius: 6px;
    border-color: #cfd4de;
    font-size: 16px;
}
.auth-field input:focus,
.auth-field select:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 3px rgba(125, 16, 35, .14);
    transform: none;
}
.auth-toggle-password { border-radius: 4px; }

.auth-primary-btn {
    border-radius: 6px;
    background: var(--auth-primary);
    box-shadow: none;
    font-weight: 700;
    letter-spacing: .01em;
}
.auth-primary-btn:hover {
    background: var(--auth-primary-dark);
    transform: none;
    box-shadow: 0 6px 16px rgba(92, 11, 25, .22);
}
.auth-primary-btn:focus-visible {
    outline: 3px solid var(--auth-gold);
    outline-offset: 2px;
}
.auth-primary-btn span { display: none; }

.auth-label-row a,
.auth-switch-text a,
.auth-check a,
.auth-card a:not(.auth-primary-btn):not(.auth-inline-btn) { color: var(--auth-link); }

.auth-check input { accent-color: var(--auth-primary); }
.auth-alert { border-radius: 6px; }
.auth-strength-bar[data-level="strong"] { background: #0f8a6a; }

/* ---------- small screens ---------- */
@media (max-width: 880px) {
    .auth-visual { min-height: 0; padding: 26px 24px 28px; }
    .auth-masthead { margin-bottom: 18px; padding-bottom: 16px; }
    .auth-roles, .auth-site-link { display: none; }
    .auth-visual h1 { font-size: clamp(26px, 7vw, 34px); margin: 12px 0 8px; }
    .auth-visual p { font-size: 15px; }
}
@media (max-width: 620px) {
    .auth-shell, .auth-shell-login { border-radius: 4px; width: 100%; margin: 0; min-height: 100vh; }
    .auth-seal { width: 52px; height: 52px; }
    .auth-masthead-text strong { font-size: 22px; }
    .auth-masthead-text small { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-page-bg * { transition: none !important; animation: none !important; }
}

/* "Send a new code" on the e-mail verification page */
.auth-switch-text .auth-inline-btn {
    background: none;
    border: 0;
    padding: 0;
    min-height: 0;
    font: inherit;
    font-weight: 600;
    color: var(--auth-link);
    cursor: pointer;
    box-shadow: none;
}
.auth-switch-text .auth-inline-btn:hover { text-decoration: underline; }
.auth-switch-text .auth-inline-btn:disabled { color: var(--auth-muted); cursor: default; text-decoration: none; }