/* ============================================
                           CSS VARIABLES
                           ============================================ */
:root {
    /* ========== DGA Azm Design Tokens ========== */

    /* Base */
    --colors-base-white: #ffffff;
    --colors-base-black: #000000;

    /* Brand (Primary Green) */
    --colors-brand-25: #F7FDF9;
    --colors-brand-50: #F3FCF6;
    --colors-brand-100: #DFF6E7;
    --colors-brand-200: #B8EACB;
    --colors-brand-300: #88D8AD;
    --colors-brand-400: #54C08A;
    --colors-brand-500: #25935F;
    --colors-brand-600: #1B8354;
    --colors-brand-700: #166A45;
    --colors-brand-800: #14573A;
    --colors-brand-900: #104631;
    --colors-brand-950: #092A1E;

    /* Gray */
    --colors-gray-25: #FCFCFD;
    --colors-gray-50: #F9FAFB;
    --colors-gray-100: #F2F4F7;
    --colors-gray-150: #F3F4F6;
    --colors-gray-200: #EAECF0;
    --colors-gray-300: #D0D5DD;
    --colors-gray-350: #9DA4AE;
    --colors-gray-400: #98A2B3;
    --colors-gray-500: #667085;
    --colors-gray-600: #475467;
    --colors-gray-700: #333741;
    --colors-gray-800: #182230;
    --colors-gray-900: #101828;
    --colors-gray-950: #0C111D;

    /* Error */
    --colors-error-25: #FFFBFA;
    --colors-error-50: #FEF3F2;
    --colors-error-100: #FEE4E2;
    --colors-error-200: #FECDCA;
    --colors-error-300: #FDA29B;
    --colors-error-400: #F97066;
    --colors-error-500: #F04438;
    --colors-error-600: #D92D20;
    --colors-error-700: #B42318;
    --colors-error-800: #912018;
    --colors-error-900: #7A271A;
    --colors-error-950: #55160C;

    /* Warning */
    --colors-warning-25: #FFFCF5;
    --colors-warning-50: #FFFAEB;
    --colors-warning-100: #FEF0C7;
    --colors-warning-200: #FEDF89;
    --colors-warning-300: #FEC84B;
    --colors-warning-400: #FDB022;
    --colors-warning-500: #F79009;
    --colors-warning-600: #DC6803;
    --colors-warning-700: #B54708;
    --colors-warning-800: #93370D;
    --colors-warning-900: #7A2E0E;
    --colors-warning-950: #4E1D09;

    /* Success */
    --colors-success-25: #F6FEF9;
    --colors-success-50: #ECFDF3;
    --colors-success-100: #DCFAE6;
    --colors-success-200: #ABEFC6;
    --colors-success-300: #75E0A7;
    --colors-success-400: #47CD89;
    --colors-success-500: #17B26A;
    --colors-success-600: #079455;
    --colors-success-700: #067647;
    --colors-success-800: #085D3A;
    --colors-success-900: #074D31;
    --colors-success-950: #053321;

    /* Info */
    --colors-info-25: #F5FAFF;
    --colors-info-50: #EFF8FF;
    --colors-info-100: #D1E9FF;
    --colors-info-200: #B2DDFF;
    --colors-info-300: #84CAFF;
    --colors-info-400: #53B1FD;
    --colors-info-500: #2E90FA;
    --colors-info-600: #1570EF;
    --colors-info-700: #175CD3;
    --colors-info-800: #1849A9;
    --colors-info-900: #194185;
    --colors-info-950: #102A56;

    /* Semantic Text */
    --colors-text-primary: var(--colors-gray-900);
    --colors-text-secondary: var(--colors-gray-700);
    --colors-text-tertiary: var(--colors-gray-600);
    --colors-text-quarterary: var(--colors-gray-500);
    --colors-text-placeholder: var(--colors-gray-500);
    --colors-text-disabled: var(--colors-gray-500);
    --colors-text-white: #ffffff;
    --colors-text-brand-primary: var(--colors-brand-800);
    --colors-text-error-primary: var(--colors-error-600);

    /* Semantic Borders */
    --colors-border-primary: var(--colors-gray-300);
    --colors-border-secondary: var(--colors-gray-200);
    --colors-border-brand: var(--colors-brand-300);
    --colors-border-error: var(--colors-error-300);
    --colors-border-disabled: var(--colors-gray-300);

    /* Semantic Foreground */
    --colors-fg-primary: var(--colors-gray-900);
    --colors-fg-quinary-400: var(--colors-gray-400);
    --colors-fg-tertiary-600: var(--colors-gray-600);

    /* Form Field Borders */
    --form-field-border: #384250;
    --form-field-border-pressed: #0c111b;

    /* DGA Radius */
    --radius-none: 0;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 3.82px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 24px;
    --radius-full: 9999px;

    /* DGA Shadows */
    --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
    --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
    --shadow-md: 0 2px 4px -2px rgba(16,24,40,.06), 0 4px 8px -2px rgba(16,24,40,.1);
    --shadow-lg: 0 4px 6px -2px rgba(16,24,40,.03), 0 12px 16px -4px rgba(16,24,40,.08);
    --shadow-xl: 0 8px 8px -4px rgba(16,24,40,.03), 0 20px 24px -4px rgba(16,24,40,.08);
    --shadow-2xl: 0 24px 48px -12px rgba(16,24,40,.18);
    --shadow-3xl: 0 32px 64px -12px rgba(16,24,40,.14);

    /* DGA Spacing (semantic aliases) */
    --spacing-none: 0;
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 64px;
    --spacing-8xl: 80px;
    /* Spacing — intermediate values (fill DGA scale gaps) */
    --spacing-2_5: 10px;
    --spacing-3_5: 14px;

    /* Transitions */
    --transition-fast: 0.15s;
    --transition-normal: 0.2s;
    --transition-smooth: 0.3s ease;

    /* Focus Rings */
    --focus-ring-brand: 0 0 0 4px var(--colors-brand-100);
    --focus-ring-error: 0 0 0 4px var(--colors-error-100);

    /* Icon Sizes */
    --icon-size-md: 20px;

    /* DGA Brand Gradients */
    --gradient-brand-600-500: linear-gradient(135deg, var(--colors-brand-600), var(--colors-brand-500));
    --gradient-brand-700-600: linear-gradient(135deg, var(--colors-brand-700), var(--colors-brand-600));
    --gradient-brand-800-600: linear-gradient(135deg, var(--colors-brand-800), var(--colors-brand-600));

    /* ========== Legacy Aliases → DGA Tokens ========== */
    --c-primary: var(--colors-brand-500);
    --c-primary-dark: var(--colors-brand-600);
    --c-primary-darker: var(--colors-brand-700);
    --c-navy: var(--colors-gray-900);
    --c-text: var(--colors-text-primary);
    --c-text-light: var(--colors-text-secondary);
    --c-muted: var(--colors-text-tertiary);
    --c-placeholder: var(--colors-text-placeholder);
    --c-border: var(--colors-border-primary);
    --c-bg: var(--colors-gray-25);
    --c-success: var(--colors-success-500);
    --c-success-dark: var(--colors-success-600);
    --c-danger: var(--colors-error-500);
    --c-danger-dark: var(--colors-error-600);
    --c-success-darker: var(--colors-success-700);
    --c-success-bg: var(--colors-success-50);
    --c-success-border: var(--colors-success-200);
    --c-success-text: var(--colors-success-800);
    --c-danger-bg: var(--colors-error-50);
    --c-danger-border: var(--colors-error-200);
    --c-warning: var(--colors-warning-600);
    --c-warning-dark: var(--colors-warning-800);
    --c-info: var(--colors-info-500);
    --c-error-darkest: var(--colors-error-900);

    /* Auth form tokens */
    --auth-required: #b42318;
    --auth-text-primary: #384250;
    --auth-input-border: #6c727e;
    --auth-input-border-hover: #384250;
    --auth-placeholder: #6c727e;
    --auth-icon-end-bg: #f3f4f6;

    /* Gradients */
    --g-primary: linear-gradient(135deg, var(--colors-brand-500) 0%, var(--colors-brand-600) 50%, var(--colors-brand-700) 100%);
    --g-primary-2: var(--gradient-brand-600-500);
    --g-success: linear-gradient(135deg, var(--colors-success-500) 0%, var(--colors-success-600) 100%);
    --g-success-light: linear-gradient(135deg, var(--colors-success-50) 0%, var(--colors-success-100) 100%);
    --g-danger: linear-gradient(135deg, var(--colors-error-500) 0%, var(--colors-error-600) 50%, var(--colors-error-700) 100%);
    --g-warning: linear-gradient(135deg, var(--colors-warning-100) 0%, var(--colors-warning-200) 100%);
    --g-success-dark: linear-gradient(135deg, var(--colors-success-600) 0%, var(--colors-success-700) 100%);
    --g-neutral: linear-gradient(135deg, var(--colors-gray-100) 0%, var(--colors-gray-200) 100%);

    /* Shadows */
    --shadow-primary: 0 4px 15px rgba(37, 147, 95, 0.3);
    --shadow-primary-hover: 0 6px 20px rgba(37, 147, 95, 0.4);
    --shadow-card: var(--shadow-xl);
    --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.12);
    --shadow-card-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-brand-glow: 0 2px 8px rgba(37, 147, 95, 0.3);
    --shadow-brand-light: 0 4px 20px rgba(37, 147, 95, 0.1);
    --shadow-brand-md: 0 4px 12px rgba(37, 147, 95, 0.15);

    /* Alpha Colors */
    --colors-white-alpha-20: rgba(255, 255, 255, 0.2);
    --colors-white-alpha-35: rgba(255, 255, 255, 0.35);
    --colors-white-alpha-85: rgba(255, 255, 255, 0.85);
    --colors-brand-alpha-4: rgba(37, 147, 95, 0.04);
    --colors-brand-alpha-5: rgba(37, 147, 95, 0.05);
    --colors-brand-alpha-8: rgba(37, 147, 95, 0.08);
    --colors-brand-alpha-10: rgba(37, 147, 95, 0.1);
    --colors-brand-alpha-15: rgba(37, 147, 95, 0.15);

    /* Extended Palette — decorative badges, tags */
    --colors-indigo-100: #e0e7ff;
    --colors-indigo-200: #c7d2fe;
    --colors-indigo-600: #4f46e5;
    --colors-violet-100: #ede9fe;
    --colors-violet-200: #ddd6fe;
    --colors-violet-500: #8b5cf6;
    --colors-violet-800: #5b21b6;
    --colors-orange-50: #FFF3E0;
    --colors-orange-100: #FFE0B2;
    --colors-orange-200: #fff7ed;
    --colors-orange-500: #f97316;
    --colors-orange-900: #E65100;
    --colors-green-alt-100: #E8F5E9;
    --colors-green-alt-200: #C8E6C9;
    --colors-green-alt-700: #2E7D32;
    --colors-sky-100: #e0f2fe;
    --colors-sky-200: #bae6fd;
    --colors-sky-600: #0284c7;

    /* Radii */
    --r-sm: var(--radius-md);
    --r-md: var(--radius-xl);
    --r-lg: var(--radius-2xl);
    --r-xl: var(--radius-4xl);
    --r-full: var(--radius-full);
}

/* ============================================
   DGA AZM — NOTIFICATION COMPONENT
   ============================================ */
.notification {
    --notif-accent: var(--colors-gray-500);
    --notif-icon-bg: var(--colors-gray-100);
    --notif-text: var(--colors-gray-700);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md, 8px);
    background: #fff;
    border: 1px solid var(--colors-gray-200);
    border-inline-start: 4px solid var(--notif-accent);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-2xl);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.notification i {
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--notif-accent);
    background: var(--notif-icon-bg);
    border-radius: 50%;
}
.notification i::before {
    display: inline-block;
}
.notification p { margin: 0; }
.notification strong { display: block; }
.notification__title { font-size: 0.875rem; font-weight: 700; margin: 0 0 var(--spacing-xs); color: #1f2a37; }
.notification__message { font-size: 0.8125rem; font-weight: 400; margin: 0; color: #384250; line-height: 1.5; }
.notification__message.typing-cursor::after { content: '|'; animation: blink-cursor 0.6s step-end infinite; font-weight: 700; }
@keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Info */
.notification--info {
    --notif-accent: #5b9bf4;
    --notif-icon-bg: #eff8ff;
    --notif-text: #175cd3;
}
.notification--info i { color: #175cd3; }

/* Success */
.notification--success {
    --notif-accent: #51b488;
    --notif-icon-bg: #ecfdf3;
    --notif-text: #067647;
}
.notification--success i { color: #067647; }

/* Warning */
.notification--warning {
    --notif-accent: #e69554;
    --notif-icon-bg: #fffaeb;
    --notif-text: #b54708;
}
.notification--warning i { color: #b54708; }
.notification--warning strong { color: #b54708; }

/* Critical / Danger / Error */
.notification--critical,
.notification--error {
    --notif-accent: #e46c62;
    --notif-icon-bg: #fef3f2;
    --notif-text: #d92d20;
}
.notification--critical i,
.notification--error i { color: #d92d20; }
.notification--error .error-text { color: #d92d20; font-weight: 500; }

/* Horizontal variant — bottom border instead of inline-start */
.notification--horizontal {
    --notif-accent: var(--c-info, #5b9bf4);
    --notif-icon-bg: #eff8ff;
    background: #eff8ff;
    border: none;
    border-bottom: 4px solid var(--notif-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    text-align: start;
    align-items: center;
}
.notification--horizontal i {
    color: var(--notif-accent);
    background: none;
}

/* ============================================
                           UNIFIED ICON BADGE COMPONENT
                           ============================================ */
.icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-badge-xs  { width: 32px; height: 32px; border-radius: var(--r-full); font-size: 14px; }
.icon-badge-sm  { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.icon-badge-md  { width: 44px; height: 44px; border-radius: 10px; }
.icon-badge-md i { font-size: 20px; }
.icon-badge-lg  { width: 50px; height: 50px; border-radius: var(--r-md); }
.icon-badge-lg i { font-size: 24px; }
.icon-badge-xl  { width: 64px; height: 64px; border-radius: var(--r-lg); margin-bottom: 16px; }
.icon-badge-xl i { font-size: 32px; }
.icon-badge-xxl { width: 80px; height: 80px; border-radius: var(--r-full); margin: 0 auto 24px; }
.icon-badge-xxl i { font-size: 40px; }

.icon-badge-primary { background: var(--g-primary-2); color: var(--colors-base-white); }
.icon-badge-success { background: var(--g-success); color: var(--colors-base-white); }
.icon-badge-light   { background: linear-gradient(135deg, var(--colors-success-100) 0%, var(--colors-success-200) 100%); color: var(--c-primary); }
.icon-badge-glass   { background: var(--colors-white-alpha-20); backdrop-filter: blur(10px); color: var(--colors-base-white); }
.icon-badge-warning { background: linear-gradient(135deg, var(--colors-warning-100) 0%, var(--colors-warning-200) 100%); color: var(--colors-warning-600); }
.icon-badge-danger  { background: linear-gradient(135deg, var(--colors-error-100) 0%, var(--colors-error-200) 100%); color: var(--colors-error-600); }
.icon-badge-danger-alt { background: linear-gradient(135deg, var(--colors-error-100) 0%, var(--colors-error-200) 100%); color: var(--colors-error-500); }
.icon-badge-info    { background: linear-gradient(135deg, var(--colors-info-100) 0%, var(--colors-info-200) 100%); color: var(--colors-info-600); }
.icon-badge-indigo  { background: linear-gradient(135deg, var(--colors-indigo-100) 0%, var(--colors-indigo-200) 100%); color: var(--colors-indigo-600); }
.icon-badge-orange  { background: linear-gradient(135deg, var(--colors-orange-50) 0%, var(--colors-orange-100) 100%); color: var(--colors-orange-900); }
.icon-badge-green-alt { background: linear-gradient(135deg, var(--colors-green-alt-100) 0%, var(--colors-green-alt-200) 100%); color: var(--colors-green-alt-700); }
.icon-badge-sky     { background: linear-gradient(135deg, var(--colors-sky-100) 0%, var(--colors-sky-200) 100%); color: var(--colors-sky-600); }

/* ============================================
                           BASE FONT SETTINGS
                           ============================================ */
html {
    height: 100%;
}

body {
    font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    /*zoom: 0.78;*/
    overflow-x: hidden;
    background: var(--colors-base-white);
}

    body * {
        font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
    }

/* ============================================
                           GLOBAL ELEMENT SELECTORS
                           ============================================ */

/* Headings */
h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
}

/* Text Inputs, Selects, Textareas — zero-specificity fallback for bare inputs (OTP, input-with-button-auth, etc.) */
:where(input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select,
textarea) {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: 15px;
    color: var(--c-text);
    background: var(--c-bg);
    transition: all 0.2s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--c-placeholder);
}

/* ============================================
   DGA AZM — INPUT COMPONENT
   ============================================ */
.auth-required-note { display: flex; align-items: center; gap: var(--spacing-xs); font-size: 0.8125rem; color: var(--auth-required); font-weight: 500; }
.auth-required-star { color: var(--auth-required, #b42318); font-weight: 700; font-size: 1rem; line-height: 1; }
.input-group { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: 0; border-radius: var(--radius-md); }
.input-label { display: flex; align-items: center; gap: 2px; font-size: 1rem; font-weight: 600; color: var(--colors-text-secondary); }
/* Auto asterisk for required fields — detected via [required] or [data-val-required] on child inputs */
.input-group:has([required]) > .input-label::before,
.input-group:has([data-val-required]) > .input-label::before {
    content: "*";
    color: var(--auth-required);
    margin-inline-end: var(--spacing-xxs);
    font-weight: 600;
    align-self: center;
    position: relative;
    top: 3px;
}
.input { position: relative; display: flex; align-items: center; border: 1px solid var(--auth-input-border); border-radius: var(--radius-md); background: var(--colors-base-white); padding: 0; gap: 0; box-shadow: var(--shadow-xs); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none; height: 44px; }
.input:hover { border-color: var(--auth-input-border-hover); }
.input:focus-within { border-color: var(--form-field-border); box-shadow: var(--shadow-md); }
.input input, .input select, .input textarea { flex: 1; border: none; outline: none; padding: var(--spacing-md); margin: 0; font-size: 1rem; color: var(--auth-text-primary); background: transparent; font-family: inherit; min-width: 0; border-radius: var(--radius-md); height: 100%; }
.input:has(.input-icon) input, .input:has(.input-icon) select, .input:has(.input-icon) textarea { padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) 0; }
[dir="rtl"] .input:has(.input-icon) input, [dir="rtl"] .input:has(.input-icon) select, [dir="rtl"] .input:has(.input-icon) textarea { padding: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg); }
.input input:focus, .input select:focus, .input textarea:focus { outline: none; }
.input input::placeholder, .input textarea::placeholder { color: var(--auth-placeholder); }
.input select:invalid, .input select option[value=""] { color: var(--auth-placeholder); }
.input select { color: var(--auth-text-primary); }
.input input:-webkit-autofill,
.input input:-webkit-autofill:hover,
.input input:-webkit-autofill:focus,
.input input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--colors-base-white) inset;
    -webkit-text-fill-color: var(--auth-text-primary);
    font-size: 1rem;
    transition: background-color 5000s ease-in-out 0s;
}
.input--error { border-color: var(--colors-error-300); }
.input--error:hover { border-color: var(--colors-error-400); }
.input--error:focus-within { box-shadow: var(--focus-ring-error); border-color: var(--colors-error-300); }
.input-hint { font-size: 0.875rem; color: var(--colors-text-tertiary); margin-top: var(--spacing-sm); }
.input-error { font-size: 0.875rem; color: var(--colors-text-error-primary); margin-top: var(--spacing-sm); }

/* ── Form field validation error states ── */
.input-group--error .input {
    border-color: var(--colors-error-700);
}

.input-group--error .input::after {
    background-color: var(--colors-error-700);
}

.input-group--error .input:focus-within {
    border-color: var(--colors-error-700);
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.14);
}

/* Terms / checkbox error state — red border on checkbox container, red label, message visible */
.terms-checkbox-auth.input-group--error .checkbox-container {
    border-color: var(--colors-error-700);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}
.terms-checkbox-auth.input-group--error .checkbox__label {
    color: var(--colors-error-700);
}
.terms-checkbox-auth .input-validation-msg {
    margin-top: var(--spacing-xs);
}

/* Label stays normal color on error — only border + message turn red */

.input-validation-msg {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--colors-error-700);
    font-weight: 500;
}

.input-validation-msg i {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* ASP.NET validation spans — hide bare ones; form-validation.js adds .input-validation-msg with icon */
.input-group .field-validation-error:not(.input-validation-msg) {
    display: none;
}
.input-group .input-validation-msg {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.8125rem;
    color: var(--colors-error-700);
    font-weight: 500;
}
.input-group .field-validation-valid {
    display: none;
}

/* Auto-detect server-side errors via :has() */
.input-group:has(.field-validation-error:not(:empty)) .input {
    border-color: var(--colors-error-700);
}

.input-group:has(.field-validation-error:not(:empty)) .input::after {
    background-color: var(--colors-error-700);
}

/* Label stays normal color on server-side error too */

.input-icon { color: var(--colors-fg-quinary-400); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--icon-size-md); padding: 0 var(--spacing-lg); order: -1; height: 100%; }
.input-icon-end { color: var(--colors-fg-quinary-400); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--icon-size-md); padding: 0 var(--spacing-lg); cursor: pointer; height: 100%; background: var(--auth-icon-end-bg); border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.input-icon-end:hover { color: var(--colors-brand-500); }

/* Input — inner element transitions */
.input input, .input textarea, .input select,
.input .ng-select .ng-select-container {
    width: 100%;
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

/* Input — underline animation (::after pseudo-element) */
.input::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: var(--spacing-xxs);
    background-color: var(--form-field-border-pressed);
    transform: translateX(-50%);
    transition: width 0.2s ease-in-out;
    z-index: 2;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.input:focus-within::after {
    width: 100%;
}

/* Input — select styling */
.input select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-inline-end: 36px; }
.input select option { padding: var(--spacing-xs); }
.input:has(select)::before {
    content: "\㭚";
    font-family: "hgi-stroke-rounded" !important;
    position: absolute;
    inset-inline-end: var(--spacing-lg);
    inset-inline-start: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    font-size: var(--icon-size-md);
    color: var(--colors-fg-quinary-400);
    pointer-events: none;
    z-index: 1;
    transition: transform 0.25s ease;
}
.input:has(select:focus)::before {
    transform: translateY(-50%) rotate(180deg);
    color: var(--colors-brand-600);
}

/* Input — ng-select integration */
.input .ng-select.ng-select-single .ng-select-container { cursor: pointer; }
.input .ng-select.ng-select-single .ng-select-container:hover,
.input .ng-select.ng-select-single .ng-select-container:focus { border-color: var(--colors-gray-700); }
.input .ng-select .ng-clear-wrapper { display: none; }
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked { background-color: var(--colors-gray-150); }

/* ============================================
   DGA AZM — SWITCH COMPONENT
   ============================================ */
.switch { display: flex; align-items: flex-start; gap: var(--spacing-md); cursor: pointer; }
.switch-wrapper { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.switch-wrapper input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 1; }
.switch .slider { position: absolute; inset: 0; background: var(--colors-gray-200); border-radius: var(--radius-full); transition: background var(--transition-normal); }
.switch .slider::before { content: ''; position: absolute; width: var(--spacing-2xl); height: var(--spacing-2xl); inset-inline-start: var(--spacing-xxs); bottom: var(--spacing-xxs); background: var(--colors-base-white); border-radius: var(--radius-full); box-shadow: var(--shadow-xs); transition: transform var(--transition-normal); }
.switch input:checked + .slider { background: var(--colors-brand-600); }
.switch input:checked + .slider::before { transform: translateX(20px); }
[dir="rtl"] .switch input:checked + .slider::before { transform: translateX(-20px); }
.switch input:disabled + .slider { opacity: 0.7; cursor: not-allowed; }
.switch:focus-within .slider { box-shadow: var(--focus-ring-brand); }
/* Switch sizes: sm, lg */
.switch--sm .switch-wrapper { width: 40px; height: 22px; }
.switch--sm .slider::before { width: 18px; height: 18px; }
.switch--sm input:checked + .slider::before { transform: translateX(18px); }
[dir="rtl"] .switch--sm input:checked + .slider::before { transform: translateX(-18px); }
.switch--lg .switch-wrapper { width: 48px; height: 26px; }
.switch--lg .slider::before { width: var(--spacing-2xl); height: var(--spacing-2xl); }
.switch--lg input:checked + .slider::before { transform: translateX(22px); }
[dir="rtl"] .switch--lg input:checked + .slider::before { transform: translateX(-22px); }

/* ============================================
   DGA AZM — BUTTON COMPONENT
   ============================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 600;
    border: 1px solid var(--colors-brand-600); background: var(--colors-brand-600); color: var(--colors-base-white);
    border-radius: var(--radius-md); cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none; width: 100%;
    min-height: 38px; padding: 2px 8px;
    font-size: 0.875rem; line-height: 1.5;
}
.btn:hover { background: var(--colors-brand-700); border-color: var(--colors-brand-700); }
.btn:active { background: var(--colors-brand-800); border-color: var(--colors-brand-800); }
.btn:focus-visible { box-shadow: var(--focus-ring-brand); outline: none; }
.btn:disabled { background: var(--colors-gray-100); border-color: var(--colors-gray-200); color: var(--colors-gray-400); cursor: not-allowed; box-shadow: none; }
.btn--lg { font-size: 1rem; }
.btn--primary { background: var(--colors-brand-600); color: var(--colors-base-white); border-color: var(--colors-brand-600); }
.btn--primary:hover { background: var(--colors-brand-700); border-color: var(--colors-brand-700); color: var(--colors-base-white); }
.btn--primary:focus, .btn--primary:active { background: var(--colors-brand-900); border-color: var(--colors-brand-900); color: var(--colors-base-white); }

/* Loading state */
.btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}
.btn--loading:disabled {
    background: var(--colors-brand-600);
    border-color: var(--colors-brand-600);
    opacity: 0.8;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Button with countdown progress bar */
.btn--countdown {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.btn--countdown .btn-progress {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.15);
    transition: width 1s linear;
    z-index: -1;
    border-radius: inherit;
}
.btn--countdown .btn-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn--countdown .btn-count {
    font-variant-numeric: tabular-nums;
    min-width: 1.5em;
    text-align: center;
}
/* Split button — main + cancel addon */
.btn-split {
    display: flex;
    width: 100%;
}
.btn-split-main {
    flex: 1;
    min-width: 0;
}
.btn-split.has-addon .btn-split-main {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.btn-split-addon {
    flex: 0 0 auto;
    width: 44px;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.btn-split-addon:hover {
    opacity: 0.85;
}
.btn--subtle.btn-split-addon {
    border-inline-start-color: var(--colors-gray-300);
}
/* After countdown cancelled */
.btn--countdown.btn--cancelled .btn-progress {
    transition: opacity 0.3s ease;
    opacity: 0;
}
.btn--countdown.btn--cancelled .btn-count {
    display: none;
}
.btn--subtle { background: var(--colors-gray-150); border-color: var(--colors-gray-150); color: var(--colors-gray-700); }
.btn--subtle:hover { background: var(--colors-gray-50); }
.btn--subtle:active { background: var(--colors-gray-100); }
#passkeyTryAnother,
#backToMethods,
#otpBackToMethods,
#nafazBackToMethods,
#magiclinkBackToMethods,
#notFoundChangeBtn { margin-top: 12px; }
.not-found-identifier-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}
.not-found-identifier-label {
    font-size: 12px;
    color: var(--colors-gray-500);
    font-weight: 500;
}
.not-found-identifier {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    font-weight: 500;
    color: var(--colors-gray-900);
    background: var(--colors-gray-50);
    border: 1px solid var(--colors-gray-200);
    border-radius: var(--radius-md, 8px);
    padding: 8px 16px;
    direction: ltr;
    unicode-bidi: isolate;
    word-break: break-all;
    max-width: 100%;
    width: auto;
    letter-spacing: 0.02em;
}
.btn-icon-img { height: 20px; width: auto; object-fit: contain; order: -1; }
.btn--danger { background: var(--colors-error-600); color: var(--colors-base-white); border-color: var(--colors-error-600); }
.btn--danger:hover { background: var(--colors-error-700); border-color: var(--colors-error-700); }
.btn--danger:active { background: var(--colors-error-800); border-color: var(--colors-error-800); }
.btn--auto { width: auto; }

/* Links — default to green text */
a {
    color: var(--c-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--c-primary-dark);
    text-decoration: underline;
}

/* Forms — default to flex column layout */
form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Validation error spans */
span[asp-validation-for] {
    color: var(--c-danger);
    font-size: 13px;
    margin-top: 4px;
}

/* ============================================
                           GLOBAL NOTICE BANNER
                           ============================================ */
.global-notice-banner {
    position: fixed;
    top: 70px;
    inset-inline: 0;
    z-index: 999;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-notice-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}

    .global-notice-content i {
        font-size: 20px;
        flex-shrink: 0;
    }

/* Warning Style (Default) */
.notice-banner-warning-auth {
    background: var(--g-warning);
    border-bottom: 1px solid var(--colors-warning-300);
    color: var(--colors-warning-800);
}

/* Danger Style */
.notice-banner-danger-auth {
    background: linear-gradient(135deg, var(--colors-error-100) 0%, var(--colors-error-200) 100%);
    border-bottom: 1px solid var(--colors-error-400);
    color: var(--colors-error-800);
}

/* Info Style */
.notice-banner-info-auth {
    background: linear-gradient(135deg, var(--colors-info-100) 0%, var(--colors-info-200) 100%);
    border-bottom: 1px solid var(--colors-info-400);
    color: var(--colors-info-800);
}

/* Success Style */
.notice-banner-success-auth {
    background: linear-gradient(135deg, var(--colors-success-100) 0%, var(--colors-success-200) 100%);
    border-bottom: 1px solid var(--colors-success-400);
    color: var(--c-success-text);
}

/* Adjust main content when notice banner is visible */

@media (max-width: 768px) {
    .global-notice-banner {
        top: 70px;
        padding: 10px 16px;
    }

    .global-notice-content {
        font-size: 13px;
    }

}

/* ============================================
                           ENVIRONMENT INDICATOR BADGE
                           ============================================ */
/* Full-width color bar under topbar */
.env-bar {
    width: 100%;
    height: 4px;
    position: relative;
    z-index: 1001;
    overflow: visible;
}

.env-badge {
    position: absolute;
    top: 100%;
    inset-inline-start: 1%;
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 2px 3px -1px rgba(16, 24, 40, 0.08);
    border: none;
}

/* Development - Green */
.env-ribbon-development {
    background: var(--colors-success-50);
    color: var(--colors-success-700);
}
.env-ribbon-development .env-badge {
    background: var(--colors-success-50);
    color: var(--colors-success-700);
}

/* Test - Blue */
.env-ribbon-test {
    background: var(--colors-info-50);
    color: var(--colors-info-600);
}
.env-ribbon-test .env-badge {
    background: var(--colors-info-50);
    color: var(--colors-info-600);
}

/* Staging - Yellow */
.env-ribbon-staging {
    background: var(--colors-warning-50);
    color: var(--colors-warning-600);
}
.env-ribbon-staging .env-badge {
    background: var(--colors-warning-50);
    color: var(--colors-warning-600);
}

/* Production - red */
.env-ribbon-production {
    background: var(--colors-error-50);
    color: var(--colors-error-600);
}
.env-ribbon-production .env-badge {
    background: var(--colors-error-50);
    color: var(--colors-error-600);
}

@media (max-width: 768px) {
    .env-badge {
        padding: 3px 8px;
        font-size: 9px;
    }
}

/* ============================================
                           COMMON AUTH FORM STYLES (Reusable across pages)
                           ============================================ */

/* Auth Page Container */
.auth-page {
    width: 100%;
    flex: 1;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Auth Card - Boxed, centered with margin */
.auth-card {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-radius: var(--r-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    /* Full width children in auth-card */
    .auth-card > * {
        width: 100%;
    }

/* Wide variant for Register / RegisterForeign */
.auth-card--wide {
    max-width: 640px;
}

/* Simple Back Button Row */
.auth-back-row {
    margin-bottom: 24px;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.auth-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 2px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .auth-back-btn:hover {
        background: var(--colors-gray-50);
        border-color: var(--c-primary);
        color: var(--c-primary);
        text-decoration: none;
    }

    .auth-back-btn i {
        font-size: 22px;
        transform: scaleX(-1);
    }

[dir="rtl"] .auth-back-btn i {
    transform: scaleX(1);
}

/* Page Title Row */
.auth-title-row {
    margin-bottom: 32px;
}

/* Back button hint text */
.auth-back-hint {
    font-size: 12px;
    color: var(--c-muted);
    white-space: nowrap;
    transition: color 0.2s ease;
}

.auth-back-row:hover .auth-back-hint {
    color: var(--colors-brand-600);
}

.auth-back-row:hover .auth-back-btn {
    background: var(--colors-gray-50);
    border-color: var(--c-primary);
    color: var(--c-primary);
    text-decoration: none;
}

.auth-subtitle {
    font-size: 15px;
    color: var(--c-muted);
    margin: 8px 0 0;
}

/* Form layout alias for non-form elements (divs) */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form Options Row (Remember me + Forgot password) */
.form-options-auth {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ============================================
   DGA AZM — CHECKBOX COMPONENT
   ============================================ */
.checkbox { display: flex; align-items: flex-start; gap: var(--spacing-md); cursor: pointer; }
.checkbox-container {
    position: relative; width: var(--spacing-2xl); height: var(--spacing-2xl); flex-shrink: 0; margin-top: var(--spacing-xxs);
    border: 1px solid var(--colors-gray-350); border-radius: var(--radius-xs);
    background: var(--colors-base-white); display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.checkbox-container input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.checkbox__checked-icon { display: none; color: var(--colors-base-white); width: var(--spacing-lg); height: var(--spacing-lg); align-items: center; justify-content: center; position: absolute; inset: 0; margin: auto; }
.checkbox:has(input:checked) .checkbox-container { background: var(--colors-brand-600); border-color: var(--colors-brand-600); }
.checkbox:has(input:checked) .checkbox__checked-icon { display: flex; }
.checkbox:focus-within .checkbox-container { box-shadow: var(--focus-ring-brand); }
.checkbox__label { font-size: 0.875rem; font-weight: 500; color: var(--colors-text-secondary); }
.checkbox__helper-text { font-size: 0.875rem; color: var(--colors-text-tertiary); }

/* ============================================
   DGA AZM — RADIO COMPONENT
   ============================================ */
.radio-group { display: flex; align-items: center; gap: var(--spacing-2xl); }
.radio { display: flex; align-items: center; gap: var(--spacing-md); cursor: pointer; }
.radio-container {
    position: relative; width: 24px; height: 24px; flex-shrink: 0;
    border: 1.5px solid var(--colors-gray-350); border-radius: var(--radius-full);
    background: var(--colors-base-white); display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.radio-container input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.radio-container::before { content: ''; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--colors-brand-600); display: none; }
.radio:has(input:checked) .radio-container { border-color: var(--colors-brand-600); background: var(--colors-base-white); }
.radio:has(input:checked) .radio-container::before { display: block; }
.radio:focus-within .radio-container { box-shadow: var(--focus-ring-brand); }
.radio__label { font-size: 0.875rem; font-weight: 500; color: var(--colors-text-secondary); line-height: 24px; }
.radio__helper-text { font-size: 0.875rem; color: var(--colors-text-tertiary); }
/* Card variant (for OTP policy selection etc.) */

/* Register Link Section */
.register-section-auth {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--c-border);
}

    .register-section-auth span {
        color: var(--c-muted);
        font-size: 14px;
    }

    .register-section-auth a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .register-section-auth a i {
        transform: scaleX(-1);
    }

[dir="rtl"] .register-section-auth a i {
    transform: scaleX(1);
}

/* Success/Confirmation Components */
.success-message-auth {
    text-align: center;
    margin-bottom: 24px;
}

    .success-message-auth h2 {
        font-size: 20px;
        font-weight: 600;
        color: var(--c-success-text);
        margin: 0 0 8px;
    }

    .success-message-auth p {
        font-size: 14px;
        color: var(--c-muted);
        margin: 0;
        line-height: 1.6;
    }

/* OTP Large Input Styling */
.otp-input-large {
    text-align: center;
    letter-spacing: 8px;
    font-size: 24px;
    font-weight: 600;
}

    .otp-input-large::placeholder {
        letter-spacing: 8px;
    }

/* OTP Boxes Container */
.otp-boxes-auth {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
    direction: ltr;
}

.otp-box-auth {
    width: 56px;
    height: 48px;
    padding: 0;
    justify-content: center;
}

    .otp-box-auth input {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        padding: 0;
    }

.otp-box--error {
    border-color: var(--colors-error-700);
}

.otp-box--error::before {
    background-color: var(--colors-error-700);
}

.otp-box--error:focus-within {
    border-color: var(--colors-error-700);
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.14);
}

.otp-destination {
    font-weight: 600;
    color: var(--colors-text-primary);
    direction: ltr;
    unicode-bidi: embed;
}

/* Profile Field Styling */
.profile-field-auth {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--colors-gray-25);
    border-radius: var(--r-md);
    border: 1px solid var(--colors-gray-200);
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

    .profile-field-auth.editable:hover {
        border-color: var(--c-primary);
        background: var(--colors-gray-50);
    }

.profile-field-content-auth {
    flex-grow: 1;
    min-width: 0;
}

.profile-field-label-auth {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--colors-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.profile-field-value-auth {
    font-size: 15px;
    font-weight: 500;
    color: var(--colors-gray-800);
    word-break: break-word;
}

.profile-edit-btn-auth {
    width: 40px;
    height: 40px;
    background: white;
    border: 2px solid var(--c-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    text-decoration: none;
}

    .profile-edit-btn-auth:hover {
        background: var(--c-primary);
        color: var(--colors-base-white);
    }

    .profile-edit-btn-auth i {
        font-size: 18px;
    }

/* Responsive */
@media (max-width: 580px) {
    .auth-page {
        padding: 20px 16px;
    }

    .auth-card {
        max-width: 100%;
        padding: 24px;
        border-radius: var(--r-md);
    }

    h1 {
        font-size: 24px;
    }

}

/* Admin Link */
.admin-link-auth {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--g-primary-2);
    color: var(--colors-base-white);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .admin-link-auth i {
        font-size: 16px;
    }

    .admin-link-auth:hover {
        background: var(--gradient-brand-700-600);
        color: var(--colors-base-white);
        box-shadow: var(--shadow-brand-glow);
        transform: translateY(-1px);
    }

/* User Dropdown */
.user-dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
}

.user-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    color: var(--colors-text-secondary);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    position: relative;
}

    .user-dropdown-toggle:hover {
        color: var(--colors-text-primary);
        background: var(--colors-gray-100);
    }

    .user-dropdown-toggle:hover::before {
        content: "";
        position: absolute;
        bottom: 0;
        inset-inline-start: 10%;
        width: 80%;
        height: 6px;
        background-color: var(--colors-gray-500);
        border-radius: var(--radius-full);
    }

.user-avatar {
    width: 24px;
    height: 24px;
    background: var(--g-primary-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colors-base-white);
}

.user-avatar i {
    font-size: 14px;
}

.user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--colors-text-secondary);
    line-height: 20px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-arrow {
    font-size: 16px;
    color: var(--colors-text-secondary);
    transition: transform 0.2s ease;
}

.user-dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: 100%;
    margin-top: 2px;
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-width: 220px;
    background: var(--colors-base-white);
    border: none !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    padding: 8px !important;
    display: none;
    list-style: none;
    margin-bottom: 0;
    z-index: 1002;
    text-align: start;
}

    .user-dropdown-menu.show {
        display: block;
    }

.user-dropdown-menu li {
    list-style: none;
    width: 100%;
}

.user-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--c-text-light);
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.2s ease;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}

    .user-dropdown-menu .dropdown-item:hover,
    .user-dropdown-menu .dropdown-item:focus {
        background: var(--c-success-bg);
        color: var(--c-primary);
        text-decoration: none;
    }

    .user-dropdown-menu .dropdown-item i {
        flex-shrink: 0;
        font-size: 18px;
        color: var(--colors-text-tertiary);
    }

    .user-dropdown-menu .dropdown-item:hover i {
        color: var(--colors-brand-600);
    }

.user-dropdown-menu li.dropdown-divider {
    height: 1px;
    background: var(--c-border);
    margin: 8px 0;
    padding: 0;
    border: none;
}

.user-dropdown-menu .logout-item:hover,
.user-dropdown-menu .logout-item:focus {
    background: var(--c-danger-bg);
    color: var(--c-danger-dark);
}

    .user-dropdown-menu .logout-item:hover i {
        color: var(--c-danger-dark);
    }

.language-selector {
    display: flex;
    align-items: stretch;
}

#selectLanguageForm,
.logisti-topbar-actions-item > form {
    display: flex;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
}

.lang-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 12px 14px;
    height: 55px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--colors-text-secondary);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
}

.lang-switch-btn:hover {
    color: var(--colors-text-primary);
    background: var(--colors-gray-100);
}

.lang-switch-btn:hover::before {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 10%;
    width: 80%;
    height: 6px;
    background-color: var(--colors-gray-500);
    border-radius: var(--radius-full);
}

.lang-switch-icon {
    width: 16px;
    height: 16px;
}

/* ============================================
                           MAIN CONTENT STYLES
                           ============================================ */
.site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-container {
    display: flex;
    flex: 1;
}

.content-area {
    width: 50%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
}

/* Common page container class for all pages */
.page-container {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--g-neutral);
}

.page-card {
    width: 520px;
    min-width: 520px;
    max-width: 520px;
    background: var(--colors-base-white);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.page-header-section {
    background: var(--g-primary);
    padding: 40px 40px 50px;
    text-align: center;
    position: relative;
    border-radius: 0 0 40px 40px;
}

.page-icon-wrapper {
    width: 80px;
    height: 80px;
    background: var(--colors-white-alpha-20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    backdrop-filter: blur(10px);
    color: var(--colors-base-white);
}

.page-title {
    color: var(--colors-base-white);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

.page-subtitle {
    color: var(--colors-white-alpha-85);
    font-size: 15px;
    margin: 0;
}

.page-content {
    padding: 40px;
}

@media (max-width: 580px) {
    .page-card {
        width: 100%;
        min-width: unset;
        max-width: 100%;
        border-radius: 20px;
    }

    .page-header-section {
        padding: 30px 24px 40px;
        border-radius: 0 0 30px 30px;
    }

    .page-icon-wrapper {
        width: 70px;
        height: 70px;
    }

        .page-icon-wrapper svg {
            width: 40px;
            height: 40px;
        }

    .page-title {
        font-size: 22px;
    }

    .page-content {
        padding: 30px 24px;
    }
}

.decoration-area {
    width: 50%;
    flex-shrink: 0;
    flex: 1;
    background: var(--colors-gray-50);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* World Map Background */
.bgWorldMap {
    position: absolute;
    inset: 0;
    background-image: url('/images/MapWorld.svg');
    background-repeat: no-repeat;
    background-position: center top 3rem;
    background-size: 90% auto;
}

/* Features Carousel */
.features-carousel-container {
    position: absolute;
    bottom: 40px;
    inset-inline: 0;
    padding: 0 40px;
}

.carousel.vertical .carousel-inner {
    height: 80px;
    overflow: hidden;
}

.carousel.vertical .carousel-item {
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    backface-visibility: hidden;
}

    .carousel.vertical .carousel-item-next,
    .carousel.vertical .carousel-item-prev,
    .carousel.vertical .carousel-item.active {
        display: flex;
    }

    /* --- Incoming item starts off-screen and transparent --- */
    .carousel.vertical .carousel-item-next:not(.carousel-item-start) {
        transform: translateY(100%);
        opacity: 0;
    }
    .carousel.vertical .carousel-item-prev:not(.carousel-item-end) {
        transform: translateY(-100%);
        opacity: 0;
    }

    /* --- Landing position: fully visible --- */
    .carousel.vertical .carousel-item-next.carousel-item-start,
    .carousel.vertical .carousel-item-prev.carousel-item-end {
        transform: translateY(0);
        opacity: 1;
    }

    /* --- Outgoing item: stays in place, fades out --- */
    .carousel.vertical .active.carousel-item-end,
    .carousel.vertical .active.carousel-item-start {
        transform: translateY(0);
        opacity: 0;
    }

.feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: var(--colors-base-white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-brand-light);
    border: 1px solid var(--colors-brand-alpha-10);
    position: relative;
    z-index: 1;
}

.feature-content {
    flex: 1;
    min-width: 0;
}

.feature-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 4px;
    line-height: 1.4;
}

.feature-subtitle {
    font-size: 13px;
    color: var(--c-muted);
    margin: 0;
    line-height: 1.4;
}

[dir="rtl"] .feature-item {
    flex-direction: row;
}

.ann-topbar-toggle {
    position: relative !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
    color: var(--colors-text-secondary);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 20px;
}

.ann-topbar-toggle.dropdown-toggle::after {
    display: none;
}

.ann-topbar-toggle i {
    font-size: 16px;
}

    .ann-topbar-toggle:hover {
        color: var(--colors-text-primary);
        background: var(--colors-gray-100);
    }

    .ann-topbar-toggle:hover::before {
        content: "";
        position: absolute;
        bottom: 0;
        inset-inline-start: 10%;
        width: 80%;
        height: 6px;
        background-color: var(--colors-gray-500);
        border-radius: var(--radius-full);
    }

.ann-topbar-badge {
    position: absolute;
    top: 15px;
    inset-inline-start: 4px;
    min-width: 16px;
    height: 16px;
    background: var(--colors-error-600);
    color: var(--colors-base-white);
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 3px;
}
.ann-topbar-badge--dot {
    min-width: 8px;
    height: 8px;
    padding: 0;
}

.ann-topbar-menu {
    position: absolute !important;
    inset: auto !important;
    top: 100% !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    transform: none !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    z-index: 1002 !important;
    width: 360px;
    max-width: calc(100vw - 20px);
    background: var(--colors-base-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    padding: 0 !important;
    display: none;
    list-style: none;
    overflow: hidden;
    border: none;
    z-index: 1050;
}

.ann-topbar-menu.show {
    display: block;
}

.ann-topbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 2px;
    border-bottom: none;
}

    .ann-topbar-header span {
        font-weight: 700;
        font-size: 15px;
        color: var(--c-navy);
    }

.ann-topbar-list {
    max-height: 340px;
    overflow-y: auto;
    padding: 8px;
}

.ann-topbar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    border: none;
    background: none;
    width: 100%;
    text-align: start;
}

    .ann-topbar-item:hover {
        background: var(--c-success-bg);
    }

/* Unread/new items — highlighted background */
.ann-topbar-item:not(.ann-topbar-item--read) {
    background: var(--colors-brand-25, #F7FDF9);
}

.ann-topbar-item-body {
    flex: 1;
    min-width: 0;
}

.ann-topbar-item-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--c-text);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ann-topbar-item-title .ann-link-icon {
        color: var(--c-primary);
        font-size: 14px;
        flex-shrink: 0;
    }

.ann-topbar-item-date {
    font-size: 12px;
    color: var(--c-placeholder);
}

/* Unread dot indicator */
.ann-unread-dot {
    width: 6px;
    height: 6px;
    aspect-ratio: 1;
    border-radius: var(--radius-full, 9999px);
    background: var(--colors-error-500, #F04438);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(240, 68, 56, 0.6);
    animation: ann-dot-pulse 2s ease-in-out infinite;
}

@keyframes ann-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 68, 56, 0.6); }
    50% { box-shadow: 0 0 0 4px rgba(240, 68, 56, 0); }
}

/* Read/acknowledged items — muted style */
.ann-topbar-item--read {
    opacity: 0.8;
}

    .ann-topbar-item--read .ann-topbar-item-title {
        font-weight: 400;
        color: var(--c-placeholder);
    }

    .ann-topbar-item--read .ann-topbar-item-date {
        color: var(--colors-gray-300, #D0D5DD);
    }

    .ann-topbar-item--read .icon-badge {
        opacity: 0.5;
    }

    .ann-topbar-item--read:hover {
        opacity: 1;
    }

    .ann-topbar-item--read:hover .ann-topbar-item-title {
        color: var(--c-text);
    }

    .ann-topbar-item--read:hover .ann-topbar-item-date {
        color: var(--c-placeholder);
    }

.ann-topbar-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--c-placeholder);
    font-size: 14px;
}

    .ann-topbar-empty i {
        font-size: 32px;
        display: block;
        margin-bottom: 8px;
        color: var(--colors-gray-300);
    }

/* Announcement detail modal */
.ann-detail-modal .modal-dialog {
    max-width: 600px;
}

.ann-detail-modal .modal-content {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: none;
    box-shadow: var(--shadow-xl);
    background: var(--colors-base-white);
}

.ann-detail-modal .modal-header {
    background: var(--colors-base-white);
    border-bottom: none;
    padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .ann-detail-modal .modal-header .ann-detail-icon {
        width: 40px;
        height: 40px;
        background: var(--colors-gray-100);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--colors-text-primary);
        font-size: 20px;
    }

    .ann-detail-modal .modal-header .btn--close {
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--colors-text-tertiary);
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 18px;
        padding: 0;
    }

    .ann-detail-modal .modal-header .btn--close:hover {
        background: var(--colors-gray-100);
        color: var(--colors-text-primary);
    }

.ann-detail-modal .modal-body {
    background: var(--colors-base-white);
    padding: 0 var(--spacing-3xl) var(--spacing-xl);
}

    .ann-detail-modal .modal-body .ann-detail-title {
        color: var(--colors-text-primary);
        font-weight: 700;
        font-size: 18px;
        margin: 0 0 var(--spacing-md);
        line-height: 1.4;
    }

    .ann-detail-modal .modal-body .ann-detail-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--colors-brand-600);
        text-decoration: none;
        font-size: 14px;
        margin-bottom: var(--spacing-lg);
        transition: color 0.2s ease;
    }

    .ann-detail-modal .modal-body .ann-detail-link:hover {
        color: var(--colors-brand-700);
        text-decoration: underline;
    }

.ann-detail-modal .ann-content {
    color: var(--colors-gray-500);
    font-size: 14px;
    line-height: 1.7;
}

.ann-detail-modal .ann-countdown {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--colors-warning-25);
    border: 1px solid var(--colors-warning-200);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--colors-text-secondary);
}

.ann-detail-modal .ann-countdown i {
    font-size: 18px;
    color: var(--colors-warning-600);
    flex-shrink: 0;
}

.ann-detail-modal .ann-countdown-label {
    white-space: nowrap;
}

.ann-detail-modal .ann-countdown-timer {
    display: flex;
    gap: var(--spacing-lg);
    font-weight: 600;
    color: var(--colors-text-primary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.ann-detail-modal .ann-countdown-timer .ann-cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 36px;
}

.ann-detail-modal .ann-countdown-timer .ann-cd-num {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--colors-text-primary);
}

.ann-detail-modal .ann-countdown-timer .ann-cd-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--colors-text-tertiary);
    text-transform: uppercase;
}

.ann-detail-modal .ann-countdown-timer .ann-cd-expired {
    font-size: 14px;
    font-weight: 600;
    color: var(--colors-error-600);
}

.ann-detail-modal .ann-dont-show {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: none;
}

.ann-detail-modal .ann-dont-show label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--colors-text-tertiary);
}

.ann-detail-modal .modal-footer {
    background: var(--colors-base-white);
    border-top: none;
    padding: var(--spacing-xl) var(--spacing-3xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.ann-detail-modal .modal-footer .btn {
    width: auto;
}

.ann-detail-modal .modal-footer .ann-dont-show {
    margin-top: 0;
    padding-top: 0;
}

.ann-detail-modal .modal-footer .ann-dont-show .checkbox {
    align-items: center;
}

.ann-detail-modal .modal-footer .ann-dont-show .checkbox-container {
    margin-top: 0;
}

.ann-detail-modal .modal-footer-buttons {
    display: flex;
    gap: var(--spacing-md);
    margin-inline-start: auto;
}

/* Modal button variants */
.ann-detail-modal .btn.btn--modal-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--colors-gray-950);
    color: var(--colors-base-white);
    border: 1px solid var(--colors-gray-950);
}

.ann-detail-modal .btn.btn--modal-primary:hover {
    background: var(--colors-gray-800);
    border-color: var(--colors-gray-800);
    color: var(--colors-base-white);
}

.ann-detail-modal .btn.btn--modal-primary:active,
.ann-detail-modal .btn.btn--modal-primary:focus {
    background: var(--colors-gray-900);
    border-color: var(--colors-gray-900);
    color: var(--colors-base-white);
}

.ann-detail-modal .btn.btn--modal-danger {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--colors-error-600);
    color: var(--colors-base-white);
    border: 1px solid var(--colors-error-600);
}
.ann-detail-modal .btn.btn--modal-danger:hover {
    background: var(--colors-error-700);
    border-color: var(--colors-error-700);
}
.ann-detail-modal .btn.btn--modal-danger:active,
.ann-detail-modal .btn.btn--modal-danger:focus {
    background: var(--colors-error-800);
    border-color: var(--colors-error-800);
}

.ann-detail-modal .btn.btn--modal-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--colors-base-white);
    color: var(--colors-text-primary);
    border: 1px solid var(--colors-gray-350);
}

.ann-detail-modal .btn.btn--modal-secondary:hover {
    background: var(--colors-gray-50);
    border-color: var(--colors-gray-400);
    color: var(--colors-text-primary);
}

.ann-detail-modal .btn.btn--modal-secondary:active,
.ann-detail-modal .btn.btn--modal-secondary:focus {
    background: var(--colors-gray-100);
    border-color: var(--colors-gray-400);
    color: var(--colors-text-primary);
}

/* Override Bootstrap modal-backdrop from 100vh to 100% */
.modal-backdrop {
    width: 100% !important;
    height: 100% !important;
}

/* ============================================
                           RESPONSIVE STYLES
                           ============================================ */
@media (max-width: 992px) {
    .decoration-area {
        display: none;
    }

    .content-area {
        width: 100% !important;
        flex-shrink: 1;
    }
}

@media (max-width: 768px) {
    .site-main {
    }

    .lang-switch-btn span {
        display: none;
    }

    .lang-switch-btn {
        padding: 8px;
    }

    .user-name {
        display: none;
    }

    .admin-link-auth span {
        display: none;
    }

    .admin-link-auth {
        padding: 8px;
        border-radius: 50%;
    }

    .user-dropdown-toggle {
        padding: 8px;
    }

}

/* OTP Countdown */
.otp-countdown-auth {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--colors-text-secondary);
    margin: 12px 0 16px;
}

/* Error Alert */
.error-alert-auth {
    padding: 12px 16px;
    background: var(--c-danger-bg);
    border: 1px solid var(--c-danger-border);
    border-radius: 10px;
    color: var(--c-danger-dark);
    font-size: 14px;
    margin: 12px 0;
}

    .error-alert-auth.field-validation-valid,
    .error-alert-auth:empty {
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

/* Terms Checkbox */

/* Wizard Steps */
.wizard-steps-auth {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 24px;
    padding: 20px 0;
}

.wizard-step-auth {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: var(--colors-gray-300);
    font-size: 13px;
}

    .wizard-step-auth.active {
        color: var(--colors-brand-600);
    }

    .wizard-step-auth.completed {
        color: var(--colors-brand-600);
    }

/* Wizard step icon: inactive = gray border, active = green border/text, completed = solid green fill */
.wizard-step-auth .icon-badge {
    width: 40px;
    height: 40px;
    border: 2px solid currentColor;
    background: transparent;
    color: inherit;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--radius-full);
}

/* Active: transparent bg, green border, green text */
.wizard-step-auth.active .icon-badge {
    background: transparent;
    border-color: var(--colors-brand-600);
    color: var(--colors-brand-600);
}

/* Completed: no circle border, bigger green tick */
.wizard-step-auth.completed .icon-badge {
    background: transparent;
    border: none;
    color: var(--colors-brand-600);
    font-size: 20px;
}

/* Wizard step title — future (default) */
.wizard-step-label-auth {
    font-size: 12px;
    color: var(--auth-placeholder);
}

/* Wizard step subtitle — future (default) */
.wizard-step-subtitle-auth {
    font-size: 11px;
    color: var(--auth-placeholder);
}

/* Completed step title + subtitle */
.wizard-step-auth.completed .wizard-step-label-auth { color: var(--colors-gray-900); }
.wizard-step-auth.completed .wizard-step-subtitle-auth { color: var(--auth-text-primary); }

/* Active step title + subtitle */
.wizard-step-auth.active .wizard-step-label-auth { color: var(--colors-gray-800); font-weight: 700; }
.wizard-step-auth.active .wizard-step-subtitle-auth { color: var(--auth-text-primary); }

.wizard-step-connector-auth {
    flex: 1;
    height: 1px;
    background: var(--colors-gray-300);
    margin-top: 20px;
    min-width: 12px;
}

/* Green connector after completed steps */
.wizard-step-auth.completed + .wizard-step-connector-auth {
    background: var(--colors-brand-600);
}

/* Form Hint */
.form-hint-auth {
    font-size: 13px;
    color: var(--c-muted);
    margin: 4px 0 8px;
}

/* Verify inline button (sits inside .input) */
.btn-verify-inline-auth {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    margin: 0;
    background: var(--colors-brand-600);
    color: var(--colors-base-white);
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    height: 100%;
    transition: background 0.2s ease;
}

.btn-verify-inline-auth:hover {
    background: var(--colors-brand-700);
}

/* Verify Feedback */
.verify-feedback-auth {
    margin-top: var(--spacing-lg);
    background: var(--colors-brand-25);
    border: 1px solid var(--colors-brand-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.verify-feedback-auth .feedback-header-auth {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.verify-feedback-auth .feedback-icon-auth {
    width: 40px;
    height: 40px;
    background: var(--colors-brand-100);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.verify-feedback-auth .feedback-icon-auth i {
    color: var(--colors-brand-600);
    font-size: 20px;
}

.verify-feedback-auth .feedback-text-auth {
    flex: 1;
    min-width: 0;
}

.verify-feedback-auth .feedback-title-auth {
    font-size: 13px;
    color: var(--colors-text-tertiary);
    font-weight: 500;
    margin: 0 0 2px;
}

.verify-feedback-auth .feedback-value-auth {
    font-size: 14px;
    color: var(--colors-text-primary);
    font-weight: 600;
    margin: 0;
    direction: ltr;
    unicode-bidi: embed;
}

.verify-feedback-auth .feedback-actions-auth {
    display: flex;
    gap: var(--spacing-md);
}

.verify-feedback-auth .feedback-btn-auth {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--colors-border-primary);
    background: var(--colors-base-white);
    color: var(--colors-text-secondary);
}

.verify-feedback-auth .feedback-btn-auth:hover {
    background: var(--colors-gray-50);
    border-color: var(--colors-gray-400);
}

.verify-feedback-auth .feedback-btn-change-auth:hover {
    border-color: var(--colors-warning-500);
    color: var(--colors-warning-600);
    background: var(--colors-warning-50);
}

.verify-feedback-auth .feedback-btn-resend-auth:hover {
    border-color: var(--colors-brand-500);
    color: var(--colors-brand-600);
    background: var(--colors-brand-50);
}

.verify-feedback-auth .feedback-resent-badge-auth {
    display: none;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--colors-success-50);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--colors-success-700);
    font-weight: 600;
}

.verify-feedback-auth .feedback-resent-badge-auth.show {
    display: inline-flex;
}

/* Link Button */
.link-btn-auth {
    background: none;
    border: none;
    color: var(--colors-brand-600);
    font-size: 13px;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}

.link-btn-auth:hover {
    color: var(--colors-brand-700);
}

/* Verified Success */
.verified-success-auth {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--colors-success-50);
    border: 1px solid var(--colors-success-200);
    border-radius: var(--radius-md);
    color: var(--colors-success-700);
    font-size: 14px;
    font-weight: 600;
}

.verified-success-auth i {
    font-size: 20px;
    color: var(--colors-success-600);
}

/* ============================================================
   SHARED COMPONENTS (merged from page-specific CSS files)
   ============================================================ */

/* --- Error Page Components --- */
.error-code-badge-auth {
    display: inline-block;
    font-size: 48px;
    font-weight: 800;
    color: var(--colors-error-200);
    letter-spacing: 4px;
    margin-bottom: 16px;
}

.error-details-auth {
    background: var(--colors-gray-50);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-top: 20px;
    text-align: start;
}

.error-details-header-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--colors-gray-100);
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-light);
}

.error-details-header-auth i {
    color: var(--c-muted);
}

.error-details-content-auth {
    padding: 16px;
    overflow-x: auto;
}

.error-details-content-auth code {
    font-family: 'Roboto Mono', 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--c-danger-dark);
    word-break: break-word;
    white-space: pre-wrap;
}

.request-id-box-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--colors-gray-50);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    margin-top: 16px;
}

.request-id-box-auth i {
    color: var(--c-muted);
}

.request-label-auth {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-muted);
}

.request-value-auth {
    font-family: 'Roboto Mono', 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--c-text-light);
    background: var(--c-border);
    padding: 4px 8px;
    border-radius: 4px;
}

.suggestions-box-auth {
    background: var(--colors-gray-50);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 20px;
    margin-top: 20px;
    text-align: start;
}

.suggestions-title-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text-light);
    margin: 0 0 16px 0;
}

.suggestions-title-auth i {
    color: var(--colors-warning-600);
}

.suggestions-list-auth {
    list-style: none;
    margin: 0;
    padding: 0;
}

.suggestions-list-auth li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--colors-gray-600);
    border-bottom: 1px solid var(--c-border);
}

.suggestions-list-auth li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.suggestions-list-auth li:first-child {
    padding-top: 0;
}

.suggestions-list-auth i {
    color: var(--c-success);
    flex-shrink: 0;
}

[dir="rtl"] .suggestions-list-auth li {
    flex-direction: row;
}

[dir="rtl"] .suggestions-title-auth {
    flex-direction: row;
}

/* --- Loading / Spinner --- */
.hgi-loading-03 {
    animation: spin 1s linear infinite;
}

/* --- Redirect / Progress Components --- */
.rotating-icon {
    animation: rotate 1.5s linear infinite;
    font-size: 48px;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

@keyframes scaleIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.progress-section-auth {
    margin: 24px 0;
}

.progress-bar-auth {
    height: 8px;
    background: var(--c-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill-auth {
    height: 100%;
    width: 0%;
    background: var(--g-success);
    border-radius: 4px;
    animation: progress 2s ease-in-out infinite;
}

@keyframes progress {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

.progress-text-auth {
    text-align: center;
    font-size: 14px;
    color: var(--c-muted);
    margin: 0;
}

.manual-redirect-auth {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid var(--c-border);
}

.manual-redirect-auth p {
    font-size: 14px;
    color: var(--c-muted);
    margin: 0 0 12px 0;
}

/* --- Consent / Scope Components --- */
.client-logo-container {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: var(--shadow-card-md);
    overflow: hidden;
}

.client-logo {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}

.scope-section {
    background: var(--colors-gray-50);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--c-border);
}

.scope-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--g-neutral);
    border-bottom: 1px solid var(--c-border);
}

.scope-header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}

.scope-list {
    padding: 8px 0;
}

.scope-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 20px;
    transition: background-color 0.2s ease;
}

.scope-item:hover {
    background: var(--colors-brand-alpha-4);
}

.scope-info {
    flex-grow: 1;
    min-width: 0;
}

.scope-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.scope-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
}

.scope-emphasize {
    color: var(--colors-warning-400);
    display: flex;
    align-items: center;
}

.scope-required {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-primary);
    background: var(--colors-brand-alpha-10);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scope-description {
    display: block;
    font-size: 13px;
    color: var(--c-muted);
    margin-top: 4px;
    line-height: 1.4;
    cursor: pointer;
}

.remember-section {
    padding: 16px 20px;
    background: var(--colors-gray-50);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
}

.remember-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.remember-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text-light);
}

.client-link-container {
    text-align: center;
}

.client-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--colors-gray-500);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.client-link:hover {
    color: var(--c-primary);
    text-decoration: none;
}

@media (max-width: 580px) {
    .scope-header {
        padding: 14px 16px;
    }
}

/* --- Enable Authenticator / Setup Steps --- */
.setup-step-auth {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--colors-gray-25);
    border-radius: var(--r-md);
    margin-bottom: 16px;
}

.step-content-auth {
    flex: 1;
}

.step-title-auth {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 4px;
}

.app-link-auth {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    color: var(--c-text-light);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
}

.app-link-auth:hover {
    border-color: var(--c-success);
    color: var(--c-success-dark);
}

.secret-key-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    border: 1px dashed var(--colors-gray-300);
    border-radius: 8px;
    margin-top: 12px;
}

.secret-key-auth i {
    color: var(--c-success);
}

.secret-key-auth code {
    font-family: 'Roboto Mono', 'IBM Plex Mono', monospace;
    font-size: 14px;
    color: var(--c-text-light);
    letter-spacing: 2px;
    word-break: break-all;
}

[dir="rtl"] .step-content-auth {
    text-align: end;
}

/* --- Accessibility Option Labels --- */
.accessibility-option-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    border: 2px solid var(--colors-gray-200);
    border-radius: var(--r-lg);
    background: var(--colors-gray-25);
    transition: all 0.3s ease;
    cursor: pointer;
}

.accessibility-option-label:hover {
    border-color: var(--c-primary);
    transform: translateY(-2px);
}

input[type="radio"]:checked + .accessibility-option-label {
    border-color: var(--c-primary);
    background: linear-gradient(135deg, var(--colors-brand-alpha-8) 0%, var(--colors-brand-alpha-4) 100%);
    box-shadow: var(--shadow-brand-md);
}

input[type="radio"]:checked + .accessibility-option-label .accessibility-option-text {
    color: var(--c-primary);
}

input[type="radio"]:checked + .accessibility-option-label .accessibility-option-icon {
    transform: scale(1.1);
}

.accessibility-option-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.accessibility-option-icon i {
    font-size: 24px;
}

.accessibility-option-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--colors-gray-700);
}

/* --- Upload Area --- */
#uploadArea:hover,
#regUploadArea:hover {
    border-color: var(--c-primary);
    background: linear-gradient(135deg, var(--colors-brand-alpha-5) 0%, var(--colors-brand-alpha-10) 100%);
    transform: scale(1.01);
}

#uploadArea.dragover,
#regUploadArea.dragover {
    border-color: var(--c-primary);
    background: linear-gradient(135deg, var(--colors-brand-alpha-10) 0%, var(--colors-brand-alpha-15) 100%);
    transform: scale(1.02);
}

#removeFile:hover,
#regRemoveFile:hover {
    background: var(--colors-error-200);
}

/* --- Form Section (grouped fields) --- */
.form-section-auth {
    background: var(--colors-gray-25);
    border: 1px solid var(--colors-gray-200);
    border-radius: var(--r-md);
    padding: 20px;
    margin-bottom: 20px;
}

.form-section-header-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--colors-gray-200);
}

.form-section-header-auth i {
    font-size: 20px;
    color: var(--c-primary);
}

.form-section-header-auth span {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-navy);
}

/* --- Form Layout Utilities --- */
.date-selects-row {
    display: flex;
    gap: 8px;
}

.date-selects-row > .input {
    flex: 1;
    min-width: 0;
}

.date-selects-row > .input.date-type-select {
    flex: 1.5;
}

.form-row-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.accessibility-container-auth {
    background: var(--colors-gray-25);
    border: 1px solid var(--colors-gray-200);
    border-radius: var(--r-md);
    padding: 20px;
}

.accessibility-header-auth {
    display: flex;
    align-items: center;
    gap: 10px;
}

.accessibility-header-auth i {
    font-size: 24px;
    color: var(--c-navy);
}

.form-actions-auth {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.form-actions-auth .btn {
    width: auto;
}

.toggle-password {
    cursor: pointer;
    background: var(--colors-gray-150);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
}

.otp-absher::-webkit-outer-spin-button,
.otp-absher::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-absher[type=number] {
    -moz-appearance: textfield;
}

@media (max-width: 580px) {
    .form-row-auth {
        grid-template-columns: 1fr;
    }

    .date-selects-row select {
        min-width: 0;
    }
}

/* ============================================
   UTILITY & EXTRACTED CLASSES
   ============================================ */

/* --- Text color utilities --- */
.text-danger-auth       { color: var(--c-danger-dark); }
.text-danger-light-auth { color: var(--c-danger); }
.text-error-dark-auth   { color: var(--c-error-darkest); margin: 0; }
.text-warning-auth      { color: var(--c-warning); }
.text-warning-dark-auth { color: var(--c-warning-dark); margin: 0; }
.text-success-auth      { color: var(--c-success); }
.text-info-auth         { color: var(--c-info); }
.text-primary-auth      { color: var(--c-primary); }
.text-white-auth        { color: var(--colors-base-white); }

/* --- Button variants --- */
.btn-secondary-danger-auth {
    background: var(--c-danger-bg);
    border-color: var(--c-danger-border);
    color: var(--c-danger-dark);
}

/* --- Layout helpers --- */
.section-heading-auth {
    text-align: center;
    color: var(--c-navy);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 24px;
}

.section-divider-auth {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--c-border);
}

.btn-verify-compact-auth {
    white-space: nowrap;
    padding: 14px 24px;
}

.text-hint-auth {
    font-size: 13px;
    color: var(--c-muted);
}

.flex-row-gap-10 { display: flex; gap: 10px; }
.flex-row-gap-12 { display: flex; gap: 12px; }
.flex-col-gap-12 { display: flex; flex-direction: column; gap: 12px; }
.flex-1-auth { flex: 1; }

.icon-badge i.icon-lg { font-size: 40px; }
.icon-badge i.icon-md { font-size: 28px; }

/* ============================================
   DGA AZM — FILE UPLOAD COMPONENT
   ============================================ */
.file-upload { width: 100%; }
.file-upload__input { display: none; }
.file-upload__drop-area { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-5xl) var(--spacing-3xl); border: 1px dashed var(--colors-border-primary); border-radius: var(--radius-lg); cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; position: relative; }
.file-upload__drop-area:hover { border-color: var(--colors-brand-300); background: var(--colors-brand-25); }
.file-upload--drag-over .file-upload__drop-area { border-color: var(--colors-brand-600); background: var(--colors-brand-50); }
.file-upload__icon { color: var(--colors-gray-400); margin-bottom: var(--spacing-lg); }

.file-type-badge-auth {
    display: inline-block;
    background: var(--g-primary-2);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--colors-base-white);
    font-weight: 500;
}

.file-preview-auth {
    display: none;
    background: linear-gradient(135deg, var(--colors-success-100) 0%, var(--colors-success-200) 100%);
    border: 1px solid var(--colors-success-300);
    border-radius: var(--r-md);
    padding: 16px;
    margin-top: 16px;
    align-items: center;
    gap: 12px;
}

.file-preview-icon-auth {
    width: 40px;
    height: 40px;
    background: var(--g-primary-2);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove-file-auth {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--colors-error-100);
    border-radius: var(--r-sm);
    color: var(--colors-error-600);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.btn-remove-file-auth:hover { background: var(--colors-error-200); }

.collapse-section-auth {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

.option-cards-auth {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.option-card-wrapper-auth {
    flex: 1;
    position: relative;
}

.radio-overlay-auth {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

/* --- Nafaz app store links --- */
.app-store-links-auth {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.app-store-links-auth a { transition: transform 0.2s; }
.app-store-links-auth img { height: 40px; border-radius: var(--r-sm); }

/* --- Page Loading Overlay (used for Register → RegisterForeign redirect) --- */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--colors-gray-200);
    border-top-color: var(--colors-brand-600);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* --- Auth Form Section Title (lightweight separator, no card) --- */
.auth-form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.auth-form-section-title i {
    font-size: 20px;
    color: var(--c-primary);
}
.auth-form-section-title span {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-navy, var(--colors-text-primary));
}

/* ============================================
   AUTH — HERO ICON (centered icon above title)
   ============================================ */
.auth-hero-icon {
    text-align: center;
    margin-bottom: 16px;
}
.auth-hero-icon i {
    font-size: 64px;
    color: var(--colors-brand-600);
}
.auth-hero-icon--danger i {
    color: var(--colors-error-600);
}

/* ============================================
   AUTH — METHOD SELECTION CARDS (ChooseMethod)
   ============================================ */
.auth-method-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.auth-method-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--colors-text-tertiary, var(--colors-gray-500));
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 4px;
}
.auth-method-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--colors-gray-200);
    border-radius: var(--radius-md);
    background: var(--colors-base-white);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none;
    color: var(--colors-text-primary, var(--colors-gray-900));
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}
.auth-method-card:hover {
    border-color: var(--colors-brand-400);
    background: var(--colors-brand-25, var(--colors-gray-25));
    box-shadow: var(--shadow-xs);
}
.auth-method-card:active {
    background: var(--colors-brand-50);
    border-color: var(--colors-brand-600);
}
.auth-method-card:focus-visible {
    box-shadow: var(--focus-ring-brand);
    outline: none;
}
.auth-method-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm, 6px);
    background: var(--colors-gray-100);
    flex-shrink: 0;
}
.auth-method-card-icon i {
    font-size: 20px;
    color: var(--colors-brand-600);
}
.auth-method-card-name {
    flex: 1;
    text-align: start;
}
.auth-method-card-arrow {
    flex-shrink: 0;
    color: var(--colors-gray-400);
    font-size: 16px;
    transition: color var(--transition-fast);
}
.auth-method-card:hover .auth-method-card-arrow {
    color: var(--colors-brand-600);
}
[dir="rtl"] .auth-method-card-arrow i {
    transform: scaleX(-1);
}

/* ============================================
   AUTH — STATUS MESSAGE (passkey waiting etc.)
   ============================================ */
.auth-status-message {
    text-align: center;
    padding: 16px 0;
    color: var(--colors-text-secondary, var(--colors-gray-600));
}
.auth-status-message p {
    margin: 0 0 12px;
    font-size: 0.9375rem;
}

/* Inline spinner reusing existing token */
.spinner-auth {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--colors-gray-200);
    border-top-color: var(--colors-brand-600);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ============================================
   AUTH — PASSKEY LIST (Manage/Passkeys)
   ============================================ */
.auth-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--colors-gray-200);
    border-radius: var(--radius-md);
    background: var(--colors-base-white);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.auth-list-item:not(:last-child) {
    margin-bottom: 8px;
}
.auth-list-item:hover {
    border-color: var(--colors-gray-300);
    background: var(--colors-gray-25, #fcfcfd);
}
.auth-list-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm, 6px);
    background: var(--colors-gray-100);
    flex-shrink: 0;
}
.auth-list-item-icon i {
    font-size: 20px;
    color: var(--colors-brand-600);
}
.auth-list-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.auth-list-item-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--colors-text-primary);
}
.auth-list-item-meta {
    font-size: 0.8125rem;
    color: var(--colors-text-tertiary);
}
.auth-list-item-actions {
    flex-shrink: 0;
}
.auth-empty-state {
    text-align: center;
    padding: 24px 16px;
    color: var(--colors-text-tertiary);
    font-size: 0.9375rem;
}
.auth-empty-state i {
    display: block;
    font-size: 40px;
    color: var(--colors-gray-300);
    margin-bottom: 8px;
}

/* Logged-in User Welcome Card */
/* Active session card (already logged in) */
.active-session-card {
    border-radius: var(--radius-xl, 16px);
    border: 2px solid var(--colors-success-200, #bbf7d0);
    background: var(--colors-success-50, #f0fdf4);
    margin-bottom: 20px;
    overflow: hidden;
}
.active-session-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--colors-success-100, #dcfce7);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--colors-success-700, #15803d);
}
.active-session-badge i {
    font-size: 1rem;
}
.active-session-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 10px;
}
.active-session-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: visible;
    background: var(--c-primary, var(--colors-brand-600));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.active-session-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.active-session-dot {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 12px;
    height: 12px;
    background: var(--colors-success-500, #22c55e);
    border: 2px solid var(--colors-success-50, #f0fdf4);
    border-radius: 50%;
}
.avatar-initial {
    color: #fff;
    font-weight: 600;
    font-size: 1.25rem;
}
.active-session-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.active-session-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--colors-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.active-session-id {
    font-size: 0.8125rem;
    color: var(--colors-gray-500);
    margin-top: 2px;
    direction: ltr;
    unicode-bidi: isolate;
}
.active-session-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.8125rem;
    color: var(--colors-gray-500);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    border-top: 1px solid var(--colors-success-200, #bbf7d0);
}
.active-session-switch:hover {
    color: var(--c-primary, var(--colors-brand-600));
    background: var(--colors-success-100, #dcfce7);
    text-decoration: none;
}
.active-session-switch i {
    font-size: 1rem;
}

/* Legacy compat */
.logged-in-user-card { display: none; }
.logged-in-user-switch {
    font-size: 0.8125rem;
    color: var(--c-primary);
    white-space: nowrap;
}

/* --- Progressive Login: Method Icons Grid --- */
.auth-methods-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--colors-gray-700);
    margin-bottom: 12px;
}
.auth-methods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.auth-method-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--colors-gray-200);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}
.auth-method-btn:hover {
    border-color: var(--c-primary);
    background: var(--colors-gray-50);
}
.auth-method-btn:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}
.auth-method-btn-icon {
    font-size: 2.25rem;
    color: var(--c-primary);
}
.auth-method-btn-name {
    font-size: 0.9rem;
    color: var(--colors-gray-700);
    text-align: center;
}
.btn--loading {
    opacity: 0.7;
    pointer-events: none;
}

/* --- Resolved user card --- */
.resolved-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--colors-gray-200);
    background: var(--colors-gray-50);
    margin-bottom: 16px;
}
.resolved-user-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 1rem;
    flex-shrink: 0;
}
.resolved-user-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resolved-user-name { font-weight: 600; font-size: 0.875rem; color: var(--colors-gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resolved-user-detail { font-size: 0.75rem; color: var(--colors-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resolved-user-change { background: none; border: none; color: var(--c-primary); font-size: 0.75rem; cursor: pointer; white-space: nowrap; padding: 4px 8px; }
.resolved-user-change:hover { text-decoration: underline; }

/* --- Passkey loading overlay --- */
.passkey-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.passkey-overlay-content {
    background: #fff;
    border-radius: var(--radius-lg, 12px);
    padding: 32px 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    min-width: 240px;
}
.passkey-overlay-spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--colors-gray-200);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: passkey-spin 0.8s linear infinite;
    margin: 0 auto 16px;
}
@keyframes passkey-spin { to { transform: rotate(360deg); } }
.passkey-overlay-status {
    font-size: 0.9375rem;
    color: var(--colors-gray-700);
    margin: 0;
}

/* --- Forgot links in Phase 1 --- */
/* --- Identifier hint --- */
.auth-identifier-hint {
    font-size: 0.875rem;
    color: var(--colors-gray-600);
    margin: 0 0 12px;
    text-align: center;
}

.auth-forgot-links {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 4px;
    margin-bottom: 4px;
}
.auth-forgot-links a {
    font-size: 0.8125rem;
    color: var(--c-primary);
}
.auth-forgot-links a:hover {
    text-decoration: underline;
}

/* --- Passkey prompt phase --- */
.passkey-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--colors-gray-200);
    background: var(--colors-gray-50);
    margin-bottom: 16px;
    text-align: center;
}
.passkey-prompt-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: var(--c-primary);
    margin-bottom: 4px;
}
.passkey-prompt-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--colors-gray-900);
    margin: 0;
}
.passkey-prompt-desc {
    font-size: 0.8125rem;
    color: var(--colors-gray-500);
    margin: 0;
    max-width: 280px;
}
.passkey-prompt-spinner {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.passkey-prompt-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-primary);
    opacity: 0.3;
    animation: passkey-dot-pulse 1.2s ease-in-out infinite;
}
.passkey-prompt-dot:nth-child(2) { animation-delay: 0.2s; }
.passkey-prompt-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes passkey-dot-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}
.passkey-prompt-status {
    font-size: 0.8125rem;
    color: var(--c-primary);
    margin: 4px 0 0;
}

/* ============================================
   Inline OTP Phase
   ============================================ */
#phase-otp .otp-boxes-auth {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
    direction: ltr;
}
#phase-otp .otp-input {
    width: 56px;
    height: 56px;
    border: 1px solid var(--border-primary, var(--gray-300));
    border-radius: var(--r-md, 8px);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, var(--gray-900));
    background: var(--bg-primary, #fff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
#phase-otp .otp-input:focus {
    border-color: var(--c-primary, var(--brand-600));
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(0, 128, 96, 0.15));
}
.otp-resend-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.resend-timer {
    font-size: 0.8125rem;
    color: var(--text-tertiary, var(--gray-500));
}

/* ============================================
   Inline Nafaz Phase
   ============================================ */
/* Nafaz Identity Card */
.nafaz-id-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--colors-gray-50);
    border: 1px solid var(--colors-gray-200);
    border-radius: var(--radius-lg, 12px);
    margin-bottom: 16px;
}
.nafaz-id-card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--colors-base-white);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--colors-gray-200);
    font-size: 20px;
    color: var(--c-primary, var(--colors-brand-600));
}
.nafaz-id-card-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.nafaz-id-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.nafaz-id-card-label {
    font-size: 12px;
    color: var(--colors-text-tertiary);
    font-weight: 500;
}
.nafaz-id-card-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--colors-text-primary);
    letter-spacing: 0.05em;
    direction: ltr;
    unicode-bidi: embed;
    text-align: start;
}
.nafaz-id-card-check {
    flex-shrink: 0;
    color: var(--colors-success-500, #22c55e);
    font-size: 22px;
    display: flex;
    align-items: center;
}

/* Phone numbers, emails, identity numbers — always LTR */
#nafaz-identity-number,
#otp-masked-destination,
.resolved-user-detail,
.remembered-account-username {
    direction: ltr;
    unicode-bidi: isolate;
}
/* Nafaz Random Number Card */
.nafaz-number-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 16px auto 12px;
    background: var(--colors-brand-50);
    border: 2px solid var(--colors-brand-200);
    border-radius: var(--radius-lg, 12px);
    padding: 24px 40px;
    min-width: 100px;
    min-height: 100px;
}
.nafaz-number-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--c-primary, var(--colors-brand-600));
    letter-spacing: 0.15em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.nafaz-number-card--success {
    background: var(--colors-success-50, #f0fdf4);
    border-color: var(--colors-success-200, #bbf7d0);
    flex-direction: column;
    gap: 6px;
    padding: 14px 24px;
    animation: nafazSuccessPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nafaz-number-card--success i {
    font-size: 2rem;
    color: var(--colors-success-500, #22c55e);
}
.nafaz-success-text {
    font-size: 0.875rem;
    color: var(--colors-success-700, #15803d);
    font-weight: 500;
}
@keyframes nafazSuccessPop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.nafaz-number-card--expired {
    background: var(--colors-gray-50);
    border-color: var(--colors-gray-200);
    flex-direction: column;
    gap: 6px;
    padding: 14px 24px;
}
.nafaz-number-card--expired i {
    font-size: 1.75rem;
    color: var(--colors-error-500, #ef4444);
    animation: nafazExpiredBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nafaz-expired-text {
    font-size: 0.8125rem;
    color: var(--colors-text-tertiary);
    font-weight: 500;
}
@keyframes nafazExpiredBounce {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.3); opacity: 1; }
    80% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Nafaz Progress Bar — single line with inline time */
.nafaz-progress-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.nafaz-progress-track {
    flex: 1;
    height: 4px;
    background: var(--colors-gray-200);
    border-radius: 2px;
    overflow: hidden;
}
.nafaz-progress-fill {
    height: 100%;
    background: var(--c-primary, var(--colors-brand-600));
    border-radius: 2px;
    width: 100%;
    transition: width 1s linear;
}
.nafaz-progress-time {
    font-size: 0.75rem;
    color: var(--colors-text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 32px;
    text-align: center;
}
.nafaz-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
#nafaz-status-text {
    font-size: 0.875rem;
    font-weight: 500;
    background: linear-gradient(90deg, var(--colors-text-tertiary) 25%, var(--colors-text-primary) 50%, var(--colors-text-tertiary) 75%);
    background-size: 200% 100%;
    animation: nafazTextShimmer 2s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@keyframes nafazTextShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
[dir="rtl"] #nafaz-status-text {
    animation: nafazTextShimmerRtl 2s ease infinite;
}
@keyframes nafazTextShimmerRtl {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================
   Inline Magic Link Phase
   ============================================ */
#phase-magiclink .auth-hero-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
#phase-magiclink .auth-hero-icon i {
    font-size: 3rem;
    color: var(--c-primary, var(--brand-600));
}

/* ============================================
   Not-Found Phase
   ============================================ */
.auth-hero-icon--warning {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.auth-hero-icon--warning i {
    font-size: 3rem;
    color: var(--warning-600, #d97706);
}

/* ============================================
   Remembered Accounts / Account Picker
   ============================================ */
.auth-accounts-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--colors-gray-900);
    margin-bottom: 12px;
}
.auth-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.remembered-account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--colors-gray-200);
    background: var(--colors-gray-50);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.remembered-account-item:hover {
    border-color: var(--colors-brand-300);
    box-shadow: var(--shadow-xs);
}
.remembered-account-item.loading {
    opacity: 0.6;
    pointer-events: none;
    cursor: wait;
}
.nav-locked {
    opacity: 0.4;
    pointer-events: none;
}
.remembered-account-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-primary, var(--colors-brand-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    flex-shrink: 0;
    overflow: hidden;
}
.remembered-account-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.remembered-account-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.remembered-account-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--colors-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.remembered-account-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.remembered-account-username {
    font-size: 0.75rem;
    color: var(--colors-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.remembered-account-dot {
    font-size: 0.75rem;
    color: var(--colors-gray-400);
    flex-shrink: 0;
}
.remembered-account-time {
    font-size: 0.7rem;
    color: var(--colors-gray-400);
    white-space: nowrap;
    flex-shrink: 0;
}
.remembered-account-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-inline-start: auto;
}
.remembered-account-method-badge {
    flex-shrink: 0;
    color: var(--c-primary, var(--colors-brand-600));
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    padding: 0 4px;
    margin-inline-end: 0;
    transition: margin-inline-end 0.3s ease;
}
.remembered-account-item:hover .remembered-account-method-badge,
.remembered-account-item:focus-within .remembered-account-method-badge {
    margin-inline-end: 72px;
}
/* Hover actions: slide in from the right edge */
.remembered-account-hover-actions {
    position: absolute;
    inset-inline-end: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
[dir="rtl"] .remembered-account-hover-actions {
    transform: translateX(-20px);
}
.remembered-account-item:hover .remembered-account-hover-actions,
.remembered-account-item:focus-within .remembered-account-hover-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.remembered-account-action-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--colors-gray-400);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-sm, 6px);
    transition: color 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.remembered-account-action-btn:hover {
    background: var(--colors-gray-100);
}
.remembered-account-action-btn--options:hover {
    color: var(--c-primary, var(--colors-brand-600));
}
.remembered-account-action-btn--forget:hover {
    color: var(--colors-error-600);
}
/* Mobile: no hover, always show action buttons */
@media (hover: none) {
    .remembered-account-hover-actions {
        max-width: 72px;
        opacity: 1;
    }
}

/* RTL adjustments */
[dir="rtl"] .remembered-account-item {
    flex-direction: row;
}

/* ===== Identifier Type Tags ===== */
.identifier-tags-label {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--colors-gray-500, #6b7280);
}

.identifier-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
}

.identifier-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-sm, 6px);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    background: var(--colors-gray-100, #f3f4f6);
    color: var(--colors-gray-600, #4b5563);
    border: 1px solid var(--colors-gray-200, #e5e7eb);
    transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease, border-color 200ms ease, font-weight 200ms ease;
    user-select: none;
    white-space: nowrap;
}

.identifier-tag i {
    font-size: 12px;
}

.identifier-tag--active {
    background: var(--colors-brand-600, #7c3aed);
    color: #fff;
    border-color: var(--colors-brand-600, #7c3aed);
    font-weight: 500;
}

.identifier-tag--faded {
    opacity: 0.4;
}

/* Parent tag with popover */
.identifier-tag--parent {
    position: relative;
    cursor: default;
    padding-inline-end: 6px;
}

.identifier-tag-expand {
    font-size: 11px;
    opacity: 0.5;
    margin-inline-start: 1px;
    transition: opacity 200ms ease;
}

.identifier-tag--parent:hover .identifier-tag-expand {
    opacity: 1;
}

.identifier-tag--active .identifier-tag-expand {
    opacity: 0.8;
}

.identifier-tag-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--colors-gray-200, #e5e7eb);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    padding: 6px 0;
    z-index: 10;
    min-width: 140px;
    white-space: nowrap;
}

.identifier-tag-popover::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #fff;
}

.identifier-tag-popover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--colors-gray-200, #e5e7eb);
}

.identifier-tag--parent:hover .identifier-tag-popover,
.identifier-tag--parent:focus-within .identifier-tag-popover {
    display: block;
}

.identifier-tag-popover-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--colors-gray-600, #4b5563);
    line-height: 1.6;
}

.identifier-tag-popover-item i {
    font-size: 12px;
    color: var(--colors-gray-400, #9ca3af);
}

.identifier-tag-popover-item--active {
    color: var(--colors-brand-600, #7c3aed);
    font-weight: 500;
}

.identifier-tag-popover-item--active i {
    color: var(--colors-brand-600, #7c3aed);
}

.identifier-tag-popover-item--faded {
    opacity: 0.4;
}

[dir="rtl"] .identifier-tag-popover {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

[dir="rtl"] .identifier-tag-popover::after,
[dir="rtl"] .identifier-tag-popover::before {
    left: auto;
    right: 50%;
    transform: translateX(50%);
    top: auto;
    bottom: 100%;
}

/* Restriction info trigger + panel */
.restriction-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--colors-gray-500, #6b7280);
    cursor: pointer;
    transition: color 0.15s ease;
}

.restriction-trigger:hover {
    color: var(--colors-brand-600, #7c3aed);
    text-decoration: underline;
}

.restriction-trigger i {
    font-size: 14px;
}

.restriction-panel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 16px;
    background: var(--colors-gray-50, #f9fafb);
    border: 1px solid var(--colors-gray-200, #e5e7eb);
    border-inline-start: 3px solid var(--colors-brand-600, #7c3aed);
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
    color: var(--colors-gray-700, #374151);
    line-height: 1.5;
    animation: restrictionSlideIn 0.25s ease-out;
}

.restriction-panel i {
    font-size: 16px;
    color: var(--colors-brand-600, #7c3aed);
    flex-shrink: 0;
    margin-top: 1px;
}

@keyframes restrictionSlideIn {
    from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; }
    to { opacity: 1; max-height: 100px; }
}

/* ============================================
   KIOSK MODE
   ============================================ */
.auth-page--kiosk .auth-card {
    max-width: 520px;
}

.auth-page--kiosk .input input,
.auth-page--kiosk .input select {
    font-size: 18px;
    padding: 14px 16px;
    min-height: 52px;
}

.auth-page--kiosk .input-label {
    font-size: 16px;
}

.auth-page--kiosk .btn--primary,
.auth-page--kiosk .btn--lg {
    font-size: 18px;
    padding: 14px 24px;
    min-height: 52px;
}

.auth-page--kiosk .radio__label,
.auth-page--kiosk .checkbox__label {
    font-size: 16px;
}

.auth-page--kiosk .method-card {
    padding: 16px 20px;
    font-size: 16px;
}

/* Kiosk mode indicator */
.kiosk-indicator {
    position: fixed;
    bottom: 12px;
    inset-inline-end: 12px;
    background: var(--colors-gray-900);
    color: var(--colors-gray-100);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-sm, 4px);
    opacity: 0.5;
    z-index: 9999;
    pointer-events: none;
}

/* ── Identity Type Selector (Radio Buttons) ── */
.identity-type-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.identity-type-option {
    flex: 1;
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1.5px solid var(--colors-gray-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--colors-white, #fff);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--colors-gray-700, #374151);
    transition: all 0.2s ease;
    text-align: center;
    user-select: none;
}
.identity-type-option i {
    font-size: 18px;
    flex-shrink: 0;
}
.identity-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}
.identity-type-option:hover {
    border-color: var(--colors-brand-400, #60a5fa);
    background: var(--colors-brand-50, #eff6ff);
}
.identity-type-option.selected,
.identity-type-option:has(input:checked) {
    border-color: var(--colors-brand-600, #2563eb);
    background: var(--colors-brand-50, #eff6ff);
    color: var(--colors-brand-700, #1d4ed8);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--colors-brand-600, #2563eb);
}
.identity-type-selector.disabled {
    pointer-events: none;
    opacity: 0.7;
}
.identity-type-selector.disabled .identity-type-option {
    cursor: default;
}
.identity-type-selector.disabled .identity-type-option:hover {
    border-color: var(--colors-gray-200, #e5e7eb);
    background: var(--colors-white, #fff);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ── Client-side validation errors ── */
.is-invalid {
    border-color: var(--colors-danger-500, #ef4444) !important;
}
.client-error {
    display: block;
    color: var(--colors-danger-600, #dc2626);
    font-size: 13px;
    margin-top: 4px;
}
/* ── Password Strength Indicator ── */
.pwd-strength {
    margin-bottom: 16px;
}
.pwd-strength-bar {
    height: 4px;
    background: var(--colors-gray-200, #e5e7eb);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}
.pwd-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.pwd-strength-fill[data-level="0"] { width: 0%; background: var(--colors-gray-300, #d1d5db); }
.pwd-strength-fill[data-level="1"] { width: 20%; background: var(--colors-danger-500, #ef4444); }
.pwd-strength-fill[data-level="2"] { width: 40%; background: var(--colors-danger-400, #f87171); }
.pwd-strength-fill[data-level="3"] { width: 60%; background: var(--colors-warning-500, #f59e0b); }
.pwd-strength-fill[data-level="4"] { width: 80%; background: var(--colors-brand-500, #3b82f6); }
.pwd-strength-fill[data-level="5"] { width: 100%; background: var(--colors-success-500, #22c55e); }
.pwd-rules {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}
.pwd-rules li {
    font-size: 12px;
    color: var(--colors-gray-400, #9ca3af);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}
.pwd-rules li i {
    font-size: 14px;
}
.pwd-rules li.pass {
    color: var(--colors-success-600, #16a34a);
}
.pwd-rules li.fail {
    color: var(--colors-gray-400, #9ca3af);
}

/* ── intl-tel-input inside .input ── */
.input--tel .intl-tel-input {
    flex: 1;
    display: flex;
    align-items: center;
}
.input--tel .intl-tel-input input {
    flex: 1;
}
.input--tel .intl-tel-input .flag-container {
    position: relative;
}

/* ── Readonly Input (Yakeen pre-filled) ── */
.input-readonly {
    background: var(--colors-gray-50, #f9fafb) !important;
    color: var(--colors-gray-600, #6b7280) !important;
    cursor: default !important;
    border-color: var(--colors-gray-200, #e5e7eb) !important;
    pointer-events: none;
}

/* ── Inline Radio Group (DGA style) ── */
.radio-group-inline {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 4px;
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--colors-gray-700, #374151);
}
.radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--colors-brand-600, #2563eb);
    cursor: pointer;
    margin: 0;
}
.foreigner-fields {
    animation: fadeSlideIn 0.3s ease;
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Status Message Close Button ── */
.status-message-close-auth {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: inherit;
    opacity: 0.6;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}
.status-message-close-auth:hover {
    opacity: 1;
}

/* ── Skeleton Loader ── */
.skeleton-item {
    background: linear-gradient(90deg, var(--colors-gray-100, #f3f4f6) 25%, var(--colors-gray-200, #e5e7eb) 50%, var(--colors-gray-100, #f3f4f6) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite ease-in-out;
    border-radius: var(--radius-md, 8px);
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* RTL tooltip arrow fix */
[dir="rtl"] .remember-tooltip-arrow {
    transform: rotate(-45deg);
}