/* Fonts: prefer woff2; retain woff for older browsers. */
@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('/cas/css/fonts/woff2/IRANSansX-Thin-4876cb71212da24317e30ada438d7172.woff2') format('woff2'),
        url('/cas/css/fonts/woff/IRANSansX-Thin-8e2ea509e573319eb08c4058c698bfab.woff') format('woff');
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('/cas/css/fonts/woff2/IRANSansX-Bold-e32be5c3556c9a9db45b50e35d77209f.woff2') format('woff2'),
        url('/cas/css/fonts/woff/IRANSansX-Bold-ecc9edbf9be5869e16dcd659d83468f9.woff') format('woff');
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('/cas/css/fonts/woff2/IRANSansX-Regular-92e6c1d1ef500631265d737867e8b60a.woff2') format('woff2'),
        url('/cas/css/fonts/woff/IRANSansX-Regular-5238c4da8da4a34f10d9d61f66053581.woff') format('woff');
}

/* Tokens */
:root {
    color-scheme: light;
    --cas-page: #f4f7fa;
    --cas-surface: #fff;
    --cas-text: #14273a;
    --cas-muted: #5b6b7c;
    --cas-border: #d7e1eb;
    --cas-hover: #eef8fd;
    --cas-segment-track: #eaf6fc;
    --cas-segment-on: #fff;
    --cas-field: #fff;
    --cas-field-border: #71839a;
    --cas-brand: #087cad;
    --cas-ring: rgb(43 176 237 / 30%);
    --cas-primary: rgb(94 208 250);
    --cas-primary-hover: #47c6f5;
    --cas-primary-active: #2fb8ec;
    --cas-on-primary: #06344d;
    --cas-pattern: rgb(43 176 237 / 22%);
    --cas-disabled: #e3e9ef;
    --cas-link: #0a6fa8;
    --cas-error: #b42332;
    --cas-error-ring: rgb(180 35 50 / 20%);
    --cas-success: #1d6b3a;
    --cas-success-bg: #e3f4e8;
    --cas-shadow: 0 1px 2px rgb(16 40 64 / 4%), 0 8px 24px rgb(16 40 64 / 6%);

    /* CAS and Material read these. */
    --cas-theme-primary: var(--cas-primary) !important;
    --cas-theme-secondary: #b3e7f8 !important;
    --mdc-theme-primary: var(--cas-primary);
    --mdc-theme-error: var(--cas-error);
    --mdc-typography-font-family: IRANSansX;
    --mdc-typography-button-font-family: IRANSansX;
    --mdc-protected-button-label-text-font: IRANSansX;
    --mdc-protected-button-label-text-tracking: 0;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --cas-page: #0f1722;
    --cas-surface: #172231;
    --cas-text: #e8eef5;
    --cas-muted: #9fb0c2;
    --cas-border: #34465b;
    --cas-hover: #1f2d3f;
    --cas-segment-track: #111b27;
    --cas-segment-on: #26364b;
    --cas-field: #111b27;
    --cas-field-border: #71859d;
    --cas-brand: #5ed0fa;
    --cas-ring: rgb(94 208 250 / 35%);
    --cas-primary: rgb(94 208 250);
    --cas-primary-hover: #7ad9fb;
    --cas-primary-active: #47c6f5;
    --cas-on-primary: #06344d;
    --cas-pattern: rgb(94 208 250 / 10%);
    --cas-disabled: #223143;
    --cas-link: #6ccbf6;
    --cas-error: #ff9ca5;
    --cas-error-ring: rgb(255 156 165 / 25%);
    --cas-success: #a6e3b8;
    --cas-success-bg: #1d3a2a;
    --cas-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px rgb(0 0 0 / 25%);
    --cas-theme-warning: #ffe0a3;
    --cas-theme-warning-bg: #46391f;
    --cas-theme-danger: #ffb4bd;
    --cas-theme-danger-bg: #492630;
}

/* Base: CAS pins body to 100vh with overflow hidden, which clips the form on short screens. */
html,
body,
.mdc-typography {
    font-family: IRANSansX, sans-serif !important;
}

body {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    justify-content: flex-start;
    background: var(--cas-page);
    color: var(--cas-text);
}

a,
a:visited,
a:hover,
a:active {
    color: var(--cas-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

span i,
a i {
    vertical-align: middle;
}

.small {
    font-size: 0.875rem;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--cas-brand);
    outline-offset: 2px;
}

.auth-card form:focus-visible { outline: 2px solid var(--cas-brand); outline-offset: 4px; }

.skip-link {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 16px;
    z-index: 10;
    padding: 12px 16px;
    background: var(--cas-surface);
    clip-path: inset(50%);
}

.skip-link:focus { clip-path: none; }

/* Header */
header .text-center {
    padding-top: 56px !important;
}

header .text-center > a { display: block; width: max-content; margin: 0 auto; }

header .dynamic-logo {
    display: block;
    width: 168px;
    height: auto;
    margin: 0 auto;
}

@media (min-width: 768px) and (min-height: 800px) {
    header .text-center { padding-top: clamp(96px, 14vh, 160px) !important; }
}

.theme-toggle {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--cas-field-border);
    border-radius: 50%;
    background: var(--cas-surface);
    color: var(--cas-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms, border-color 150ms;
}

.theme-toggle:hover {
    color: var(--cas-text);
    border-color: var(--cas-field-border);
}

.theme-toggle[hidden] { display: none; }
.theme-icon { width: 20px; height: 20px; grid-area: 1 / 1; }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: none !important;
}

/* Card */
#main-content {
    width: 100%;
    max-width: 480px;
    margin: 0;
    padding: 32px 16px 48px !important;
}

.auth-card {
    position: relative;
    isolation: isolate;
    padding: 32px;
    border: 1px solid var(--cas-border);
    border-radius: 20px;
    background: var(--cas-surface);
    box-shadow: var(--cas-shadow);
}

/* Patterns are masks filled with a theme color, so one SVG serves light and dark. */

/* Page: dot grid fading out from the top centre */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(var(--cas-pattern) 1.2px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 100%);
}


.auth-heading {
    margin-bottom: 24px;
}

.auth-heading h1 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.6;
    color: var(--cas-text);
}

.auth-heading p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--cas-muted);
}

.auth-heading .auth-destination {
    margin-top: 8px;
    color: var(--cas-text);
    font-size: 1rem;
    font-weight: bold;
}

.auth-card:has(#token) .auth-heading {
    margin-bottom: 16px;
}

/* The views bring their own padding and section borders; the card owns spacing now. */
.auth-card .p-4,
.auth-card .login-section,
.auth-card .card-body {
    padding: 0 !important;
    border: 0 !important;
}

/* CAS draws its own shadowed box around #content (the password view); the card already frames it. */
.auth-card #content {
    box-shadow: none;
    background: none;
}

.auth-card .cas-field {
    margin: 0 0 20px !important;
}

@media (max-width: 480px) {
    header .text-center { padding-top: 64px !important; }
    #main-content { padding-top: 24px !important; }
    .auth-card { padding: 24px 20px; }
}


/* Short landscape windows (e.g. 844×390): keep the primary action above the fold. */
@media (max-height: 480px) {
    header .text-center { padding-top: 8px !important; padding-bottom: 8px; }
    header .dynamic-logo { width: 96px; }
    #main-content { padding-top: 0 !important; padding-bottom: 16px !important; }
    .auth-card { padding-block: 8px; }
    .auth-heading { margin-bottom: 8px; }
    .auth-card .cas-field { margin-bottom: 12px !important; }
}

@media (max-height: 480px) and (max-width: 568px) {
    header .text-center { padding-bottom: 32px; }
}

/* Fields: the label sits above the input instead of floating, so MDC's notch is flattened. */
.auth-card .mdc-text-field--outlined {
    display: flex;
    flex-direction: column;
    /* MDC's baseline alignment would push the label to the left edge. */
    align-items: stretch;
    gap: 8px;
    position: relative;
    width: 100%;
    height: auto;
    /* MDC's RTL trailing-icon rule adds inline padding that would shrink the input. */
    padding: 0 !important;
    overflow: visible;
    background: none;
}

.auth-card .mdc-notched-outline,
.auth-card .mdc-notched-outline__notch {
    display: contents;
}

.auth-card .mdc-notched-outline__leading,
.auth-card .mdc-notched-outline__trailing {
    display: none;
}

.auth-card .mdc-text-field .mdc-floating-label,
.auth-card .mdc-text-field .mdc-floating-label--float-above {
    position: static;
    order: -1;
    max-width: none;
    text-align: start;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--cas-text) !important;
    transform: none !important;
    transition: none;
    cursor: inherit;
}

.auth-card .mdc-text-field .mdc-text-field__input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--cas-field-border) !important;
    border-radius: 10px !important;
    background: var(--cas-field);
    color: var(--cas-text);
    caret-color: var(--cas-brand);
    font: inherit;
    font-size: 1rem;
    letter-spacing: normal;
    transition: border-color 150ms, box-shadow 150ms;
}

.auth-card .mdc-text-field .mdc-text-field__input:focus {
    outline: none;
    border-color: var(--cas-brand) !important;
    box-shadow: 0 0 0 3px var(--cas-ring);
}

/* Keep autofilled fields on-theme, especially in dark mode. */
.auth-card .mdc-text-field__input:-webkit-autofill {
    -webkit-text-fill-color: var(--cas-text);
    box-shadow: inset 0 0 0 100px var(--cas-field);
}

.auth-card .mdc-text-field__input:-webkit-autofill:focus {
    box-shadow: inset 0 0 0 100px var(--cas-field), 0 0 0 3px var(--cas-ring);
}

.auth-card .req-invalid .mdc-text-field__input,
.auth-card .mdc-text-field--invalid .mdc-text-field__input {
    border-color: var(--cas-error) !important;
}

.auth-card .mdc-text-field.req-invalid .mdc-text-field__input:focus {
    border-color: var(--cas-error) !important;
    box-shadow: 0 0 0 3px var(--cas-error-ring);
}

.auth-card .mdc-text-field__input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-card .mdc-text-field__input[readonly] {
    border-color: transparent !important;
    background: var(--cas-segment-track);
    box-shadow: none;
}

.auth-card label:has(input[readonly]) .mdc-floating-label--required::after {
    content: none;
}

.invalid-label {
    display: block;
    margin-top: 8px;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--cas-error);
}

.invalid-label::before {
    content: "\F02FC";
    font-family: "Material Design Icons";
    font-size: 16px;
    margin-inline-end: 4px;
    vertical-align: middle;
}

/* Phone numbers and emails are LTR content. */
input#username {
    direction: ltr;
    text-align: left;
    letter-spacing: 0.02em !important;
}

/* MDC hides placeholders until focus and colors them for light backgrounds only. */
.auth-card .mdc-text-field__input::placeholder {
    color: var(--cas-muted) !important;
    opacity: 1 !important;
}

/* Mobile / email tabs (radio group styled as a segmented control) */
.id-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 12px;
    background: var(--cas-segment-track);
}

.id-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.id-switch label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--cas-muted);
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms, color 150ms, box-shadow 150ms;
}

.id-switch label:hover {
    color: var(--cas-text);
}

.id-switch input:checked + label {
    background: var(--cas-segment-on);
    color: var(--cas-text);
    font-weight: bold;
    box-shadow: 0 1px 2px rgb(16 40 64 / 12%), 0 0 0 1px var(--cas-border);
}

.id-switch input:focus-visible + label {
    outline: 2px solid var(--cas-brand);
    outline-offset: 2px;
}


/* OTP: spaced digits, centred; extra left padding offsets the trailing letter-spacing. */
.auth-card input#token {
    direction: ltr;
    text-align: center;
    padding-left: calc(14px + 0.5em);
    font-size: 1.25rem;
    letter-spacing: 0.5em !important;
    font-variant-numeric: tabular-nums;
}

/* Password reveal sits inside the input at its inline end. */
.auth-card .mdc-input-group-field,
.auth-card .mdc-input-group {
    display: block;
    width: 100%;
}

.auth-card .mdc-text-field .reveal-password {
    display: grid;
    place-items: center;
    position: absolute;
    inset-block-end: 2px;
    inset-inline-end: 4px;
    width: 44px;
    min-width: 0;
    height: 44px;
    padding: 0;
    border-radius: 6px;
    background: transparent !important;
    color: var(--cas-muted) !important;
    box-shadow: none;
    filter: none;
}

.auth-card .mdc-text-field .reveal-password:focus-visible {
    outline-offset: -2px;
}

.auth-card .reveal-password-icon {
    line-height: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.auth-card .mdc-text-field .reveal-password:hover .reveal-password-icon {
    background: var(--cas-hover);
}

.auth-card .mdc-text-field input#password {
    padding-inline-end: 48px;
}

/* Buttons. CAS adds a drop-shadow filter and a scale-up hover to raised buttons.
   Every step ends the same way: a primary button, then an outlined secondary action. */
.auth-card .mdc-button.submit-btn,
.auth-card .login-via-password-btn,
.auth-card .change-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    border-radius: 10px;
    font: inherit;
    font-size: 1rem;
    letter-spacing: 0;
    box-shadow: none;
    filter: none;
    transform: none;
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms, color 150ms;
}

.auth-card .mdc-button.submit-btn {
    border: 0;
    background: var(--cas-primary);
    color: var(--cas-on-primary);
    font-weight: bold;
}

.auth-card .mdc-button.submit-btn .mdc-button__label {
    color: inherit;
}

.auth-card .mdc-button.submit-btn:hover {
    background: var(--cas-primary-hover);
    box-shadow: none;
    transform: none;
}

.auth-card .mdc-button.submit-btn:active {
    background: var(--cas-primary-active);
}

.auth-card .login-via-password-btn,
.auth-card .change-login-btn {
    margin-top: 12px;
    border: 1px solid var(--cas-field-border);
    background: transparent;
    color: var(--cas-text) !important;
    font-size: 0.9375rem;
    text-decoration: none !important;
    font-weight: normal;
}

.auth-card .change-login-btn {
    border-color: transparent;
    color: var(--cas-link) !important;
    flex-direction: row-reverse;
}

.auth-card .login-via-password-btn:hover,
.auth-card .change-login-btn:hover {
    background: var(--cas-hover);
}

.auth-card .mdc-button.submit-btn:disabled,
.auth-card .login-via-password-btn:disabled {
    border-color: transparent;
    background: var(--cas-disabled);
    color: var(--cas-muted) !important;
    cursor: not-allowed;
}

.auth-card .mdc-button.submit-btn.is-loading:disabled,
.auth-card .login-via-password-btn.is-loading:disabled {
    background: var(--cas-primary);
    color: var(--cas-on-primary) !important;
    cursor: progress;
}

/* The change-number footer is nested deeper in the password view than in the OTP view. */
.auth-card form footer {
    display: block !important;
    padding: 0 !important;
}

.auth-card #otp-retry {
    color: var(--cas-link) !important;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.auth-card #otp-retry.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Row holding the resend link / countdown, between the field and the submit button */
.auth-card div:has(> #otp-clock) {
    padding: 0 0 8px !important;
}

.auth-card #otp-clock {
    font-size: 0.875rem;
    color: var(--cas-muted);
    font-variant-numeric: tabular-nums;
    text-align: start !important;
}

/* Banners */
.banner {
    margin-bottom: 20px;
    padding: 12px 16px !important;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none !important;
    font-size: 0.875rem;
    line-height: 1.8;
}

.banner p {
    margin: 0 !important;
}

.banner.banner-warning {
    color: var(--cas-theme-warning, #664d03);
    background: var(--cas-theme-warning-bg, #fff3cd);
}

.banner.banner-success {
    border-color: transparent;
    color: var(--cas-success);
    background: var(--cas-success-bg);
}

.auth-status.otp-status {
    min-height: calc(3.6em + 16px);
    margin: 0 0 16px;
    padding: 8px 12px !important;
    border: 0;
    font-size: 0.875rem;
    line-height: 1.8;
}

.auth-status.otp-status:empty {
    min-height: 0;
    margin: 0;
    padding: 0 !important;
}

#main-content > #warnings .banner {
    margin-bottom: 16px;
}

/* Page footer */
body > footer {
    margin-top: auto;
}

body > footer .container {
    max-width: 480px;
    padding: 24px 16px 32px !important;
    border: 0 !important;
}

body > footer .d-flex {
    justify-content: center !important;
    gap: 24px;
    font-size: 0.9375rem;
}

body > footer a,
body > footer a:visited {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--cas-muted) !important;
}

body > footer a:hover {
    color: var(--cas-text) !important;
}

/* Utilities */
.text-grey-600,
.text-grey-700 {
    color: var(--cas-muted);
}

.auth-help { font-size: 0.875rem; line-height: 1.8; color: var(--cas-muted); margin: 8px 0 0; text-align: start; text-wrap: pretty; }

.auth-card .cas-field:has(.req-invalid) .auth-help {
    display: none;
}
.auth-destination { overflow-wrap: anywhere; margin: 8px 0 0; }
.auth-status.is-pending {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.is-loading::after {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: cas-loading 800ms linear infinite;
}
@keyframes cas-loading { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .is-loading::after { animation: none; }
    *, *::before, *::after { transition: none !important; }
}
/* Windows forced colors: background/fill swaps vanish, so restore visible outlines. */
@media (forced-colors: active) {
    .id-switch input:checked + label { outline: 2px solid; outline-offset: -2px; }
    .auth-card .mdc-button.submit-btn,
    .auth-card .login-via-password-btn,
    .auth-card .change-login-btn { border: 1px solid; }
    .auth-card .mdc-button.submit-btn,
    .auth-card .mdc-button.submit-btn.is-loading:disabled,
    .auth-card .login-via-password-btn.is-loading:disabled { background: ButtonFace; color: ButtonText !important; }
    .id-switch input:focus-visible + label,
    .auth-card .mdc-text-field .mdc-text-field__input:focus { outline: 2px solid Highlight; outline-offset: 2px; }
}