body {
    font-family: var(--ztc-family-font1, 'Space Grotesk', sans-serif) !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    min-height: 100vh;
}

.auth-container {
    background: var(--ztc-bg-bg-1, #fff);
    border-radius: 12px;
    padding: 48px 40px;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--ztc-border-border-1, #E5E7EB);
    max-width: 480px;
    width: 100%;
}

.auth-logo-section {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo-container {
    display: inline-block;
    padding: 2px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ztc-border-border-1, #E5E7EB);
}

.auth-brand-text {
    font-family: var(--ztc-family-font1, 'Space Grotesk', sans-serif);
    font-size: var(--ztc-font-size-font-s24, 24px);
    font-weight: var(--ztc-weight-bold, 700);
    color: var(--ztc-text-text-2, #1A1719);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.auth-brand-subtitle {
    font-family: var(--ztc-family-font2, 'Figtree', sans-serif);
    font-size: var(--ztc-font-size-font-s14, 14px);
    color: var(--ztc-text-text-3, #544E51);
    font-style: italic;
}

/* Style Flux inputs to match the journal design */
[data-flux-input] {
    border: 2px solid var(--ztc-border-border-1, #E5E7EB) !important;
    border-radius: 8px !important;
    font-family: var(--ztc-family-font2, 'Figtree', sans-serif) !important;
    font-size: var(--ztc-font-size-font-s16, 16px) !important;
    transition: all 0.3s ease !important;
}

[data-flux-input]:focus {
    border-color: var(--ztc-bg-bg-8, #002466) !important;
    box-shadow: 0 0 0 3px rgba(0, 36, 102, 0.1) !important;
}

/* Style Flux buttons to match the journal design */
[data-flux-button][data-variant="primary"] {
    background: linear-gradient(135deg, var(--ztc-bg-bg-8, #002466) 0%, var(--ztc-bg-bg-2, #1A1719) 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 24px !important;
    font-family: var(--ztc-family-font1, 'Space Grotesk', sans-serif) !important;
    font-weight: var(--ztc-weight-bold, 700) !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

[data-flux-button][data-variant="primary"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 36, 102, 0.3);
}

/* Arabic Font Support for Auth Pages */
/* Apply Arabic font to specific text elements only */
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p,
[dir="rtl"] span:not([class*="fa-"]):not([class*="icon"]),
[dir="rtl"] div:not([class*="fa-"]):not([class*="icon"]),
[dir="rtl"] a:not([class*="fa-"]):not([class*="icon"]),
[dir="rtl"] label,
[dir="rtl"] button:not([class*="fa-"]):not([class*="icon"]),
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', ui-sans-serif, system-ui, sans-serif !important;
}

[dir="rtl"] [data-flux-heading] {
    font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', ui-sans-serif, system-ui, sans-serif !important;
    font-weight: var(--ztc-weight-bold, 700) !important;
    color: var(--ztc-text-text-2, #1A1719) !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

[dir="rtl"] [data-flux-subheading] {
    font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', ui-sans-serif, system-ui, sans-serif !important;
    color: var(--ztc-text-text-3, #544E51) !important;
    font-size: var(--ztc-font-size-font-s14, 14px) !important;
    line-height: 1.5 !important;
}

[dir="rtl"] [data-flux-button] {
    font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', ui-sans-serif, system-ui, sans-serif !important;
}

[dir="rtl"] [data-flux-input] {
    font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', ui-sans-serif, system-ui, sans-serif !important;
}

/* Explicitly preserve all icon fonts */
[dir="rtl"] svg,
[dir="rtl"] i,
[dir="rtl"] [class*="fa-"],
[dir="rtl"] [class*="heroicon"],
[dir="rtl"] [class*="material-icons"],
[dir="rtl"] [class*="icon"],
[dir="rtl"] .fa,
[dir="rtl"] .fas,
[dir="rtl"] .far,
[dir="rtl"] .fal,
[dir="rtl"] .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", inherit !important;
}

/* Ensure SVG icons are not affected */
[dir="rtl"] svg * {
    font-family: inherit !important;
}

/* Style Flux headings */
[data-flux-heading] {
    font-family: var(--ztc-family-font1, 'Space Grotesk', sans-serif) !important;
    font-weight: var(--ztc-weight-bold, 700) !important;
    color: var(--ztc-text-text-2, #1A1719) !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

[data-flux-subheading] {
    font-family: var(--ztc-family-font2, 'Figtree', sans-serif) !important;
    color: var(--ztc-text-text-3, #544E51) !important;
    font-size: var(--ztc-font-size-font-s14, 14px) !important;
    line-height: 1.5 !important;
}

/* Style Flux links */
[data-flux-link] {
    color: var(--ztc-bg-bg-8, #002466) !important;
    font-family: var(--ztc-family-font1, 'Space Grotesk', sans-serif) !important;
    font-weight: var(--ztc-weight-semibold, 600) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

[data-flux-link]:hover {
    color: var(--ztc-bg-bg-2, #1A1719) !important;
    text-decoration: underline !important;
}

/* Academic styling for links and text */
.auth-footer-text {
    font-family: var(--ztc-family-font2, 'Figtree', sans-serif);
    color: var(--ztc-text-text-3, #544E51);
    font-size: var(--ztc-font-size-font-s14, 14px);
}

@media (max-width: 576px) {
    .auth-container {
        padding: 32px 24px;
        margin: 20px;
    }
}