.digital-stamp-card {
    padding: 8px 32px;
    background: var(--colors-gray-100);
    margin: 0;
}

    .digital-stamp-card .digital-stamp-header {
        display: flex;
        align-items: center;
        gap: 3px 10px;
    }

        .digital-stamp-card .digital-stamp-header h6 {
            margin: 0px;
            color: var(--colors-gray-950);
            font-size: 0.93rem;
            flex: 1;
        }

        .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

            .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card span {
                color: var(--colors-brand-600);
                font-size: 0.9rem;
            }

            .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card svg,
            .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card img,
            .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card .stamp-chevron {
                transition: 0.3s;
            }

        .digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card svg,
        .digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card img,
        .digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card .stamp-chevron {
            transform: rotate(180deg);
        }

.btn-digital-stamp-card img {
    margin-inline: 4px;
}

.btn-digital-stamp-card .stamp-chevron {
    font-size: 14px;
    color: var(--colors-brand-600);
    margin-inline: 4px;
}

.img-border-rounded .stamp-icon {
    font-size: 22px;
    color: var(--colors-brand-700);
}

.digital-stamp-card .digital-stamp-body {
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

    .digital-stamp-card .digital-stamp-body.open {
        padding-top: 40px;
        padding-bottom: 32px;
        max-height: 500px;
    }

    .digital-stamp-card .digital-stamp-body .digital-stamp-container {
        margin-bottom: 32px;
        display: flex;
        gap: 32px;
    }

        .digital-stamp-card .digital-stamp-body .digital-stamp-container .box {
            display: flex;
            align-items: flex-start;
            gap: 18px;
        }

            .digital-stamp-card .digital-stamp-body .digital-stamp-container .box .img-border-rounded {
                padding: 14px 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--colors-success-700);
                border-radius: 100%;
            }

            .digital-stamp-card .digital-stamp-body .digital-stamp-container .box h6 {
                margin-top: 0px;
                margin-bottom: 12px;
                color: var(--colors-gray-950);
                font-size: 18px;
            }

            .digital-stamp-card .digital-stamp-body .digital-stamp-container .box .green-text {
                color: var(--colors-brand-600);
            }

            .digital-stamp-card .digital-stamp-body .digital-stamp-container .box p {
                margin: 0px;
                color: var(--colors-gray-600);
                font-size: 16px;
            }

    .digital-stamp-card .digital-stamp-body .stamp-link-box {
        padding: 8px 28px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 8px;
        background: var(--colors-base-white);
    }

        .digital-stamp-card .digital-stamp-body .stamp-link-box p {
            margin: 0px;
            color: var(--colors-gray-950);
            font-size: 16px;
        }

        .digital-stamp-card .digital-stamp-body .stamp-link-box a {
            color: var(--colors-brand-600);
            font-size: 16px;
            text-decoration: underline;
        }

.stamp-ar {
    direction: rtl;
}

.stamp-en {
    direction: ltr;
}

@media (max-width: 768px) {
    .digital-stamp-card {
        padding: 8px 16px;
    }

        .digital-stamp-card .digital-stamp-header {
            flex-wrap: wrap;
        }

            .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
                flex: 100%;
                margin-inline-end: 33px;
            }

        .digital-stamp-card .digital-stamp-body .digital-stamp-container {
            flex-direction: column;
        }
}

/* ============================================
                           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 { display: flex; align-items: flex-start; gap: var(--spacing-lg); padding: var(--spacing-xl); border-radius: var(--radius-xl); font-size: 0.875rem; margin-bottom: var(--spacing-2xl); }
.notification i { font-size: var(--icon-size-md); flex-shrink: 0; margin-top: 1px; }
.notification p { margin: 0; }
.notification strong { display: block; }
.notification__title { font-size: 0.875rem; font-weight: 600; margin: 0 0 var(--spacing-xs); }
.notification__message { font-size: 0.875rem; font-weight: 400; margin: 0; word-break: break-all; }
.notification--success { background: var(--colors-success-50); border: 1px solid var(--colors-success-200); color: var(--colors-success-700); }
.notification--success i { color: var(--colors-success-500); }
.notification--success .notification__message { color: var(--colors-success-700); }
.notification--warning { background: var(--colors-warning-50); border: 1px solid var(--colors-warning-200); color: var(--colors-warning-700); }
.notification--warning strong { color: var(--colors-warning-700); }
.notification--critical { background: var(--colors-error-50); border: 1px solid var(--colors-error-200); color: var(--colors-error-700); }
.notification--info { background: var(--colors-info-50); border: 1px solid var(--colors-info-200); color: var(--colors-info-700); }
.notification--info i { color: var(--colors-info-700); }

/* ============================================
                           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-note .auth-required-star { 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: block; font-size: 0.875rem; 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;
}
.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);
}

/* 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); }
.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); }
.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 */
.site-main.has-notice-banner {
    margin-top: 140px;
}

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

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

    .site-main.has-notice-banner {
        margin-top: 118px;
    }
}

/* ============================================
                           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: 40px;
    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: unset !important;
}

/* Simple Back Button Row */
.auth-back-row {
    margin-bottom: 24px;
    width: auto;
}

.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;
}

.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;
    }

}

/* ============================================
                           HEADER STYLES
                           ============================================ */
.site-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    background: var(--colors-base-white);
    box-shadow: var(--shadow-soft);
    z-index: 1000;
}

/* ===================== Logisti Portal Topbar ===================== */
.logisti-topbar {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--colors-border-secondary);
    background: var(--colors-base-white);
    padding: 0 24px;
    min-height: 56px;
    position: relative;
    z-index: 1010;
}

.logisti-topbar-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

/* Brand: Logo + Hamburger */
.logisti-topbar-brand {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 12px;
    flex-shrink: 0;
}

.logisti-topbar-logo-link {
    display: flex;
    align-items: center;
}

.logisti-topbar-logo {
    height: 40px;
    display: block;
}

.logisti-topbar-logo-mobile {
    height: 36px;
    display: none;
}

.logisti-topbar-toggler {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--colors-border-primary);
    border-radius: var(--radius-md);
    padding: 6px 8px;
    cursor: pointer;
    color: var(--colors-text-secondary);
    font-size: 20px;
    transition: background 0.2s ease;
}

.logisti-topbar-toggler:hover {
    background: var(--colors-gray-50);
}

/* Nav Links — override Bootstrap .collapse hiding on desktop */
.logisti-topbar-collapse {
    display: flex !important;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}

.logisti-topbar-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.logisti-topbar-nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

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

.logisti-topbar-nav-link {
    position: relative;
}

.logisti-topbar-nav-link:hover {
    color: var(--colors-text-primary);
    background: var(--colors-gray-100);
    text-decoration: none;
}

.logisti-topbar-nav-link: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);
}

.logisti-topbar-nav-link.active {
    background: var(--colors-brand-600);
    color: #fff;
    position: relative;
}

.logisti-topbar-nav-link.active::before {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 10%;
    width: 80%;
    height: 6px;
    background-color: var(--colors-brand-400);
    border-radius: var(--radius-full);
}

.logisti-topbar-nav-link.active:hover {
    background: var(--colors-brand-700);
    color: #fff;
}

/* Dropdown toggle in nav */
/* Hide Bootstrap default caret — we use HugeIcon arrow */
.logisti-topbar-dropdown-toggle::after {
    display: none;
}

.logisti-topbar-dropdown-arrow {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.logisti-topbar-dropdown-item.show .logisti-topbar-dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown parent must be relative for absolute submenu */
.logisti-topbar-dropdown-item {
    position: relative;
}

/* Hidden by default, shown only when Bootstrap adds .show */
.logisti-topbar-submenu {
    display: none;
    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;
    min-width: 200px;
    background: var(--colors-base-white);
    border: none !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    padding: 4px;
    z-index: 1002 !important;
    text-align: start;
}

.logisti-topbar-submenu.show {
    display: block;
}

.logisti-topbar-submenu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--colors-text-secondary);
    text-align: start;
    direction: inherit;
}

.logisti-topbar-submenu .dropdown-item:hover {
    color: var(--colors-brand-600);
    background: var(--colors-brand-25);
    text-decoration: none;
}

/* Actions (right side) */
.logisti-topbar-actions {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

.logisti-topbar-actions-list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.logisti-topbar-actions-item {
    display: flex;
    align-items: stretch;
}

.logisti-topbar-actions-item > * {
    display: flex;
    align-items: stretch;
}

.logisti-topbar-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--colors-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
    font-family: inherit;
}

.logisti-topbar-action-link {
    position: relative;
}

.logisti-topbar-action-link:hover {
    color: var(--colors-text-primary);
    background: var(--colors-gray-100);
    text-decoration: none;
}

.logisti-topbar-action-link: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);
}

.logisti-topbar-action-link i {
    font-size: 16px;
}

.logisti-topbar-action-link.active {
    background: var(--colors-brand-600);
    color: #fff;
    position: relative;
}

.logisti-topbar-action-link.active::before {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 10%;
    width: 80%;
    height: 6px;
    background-color: var(--colors-brand-400);
    border-radius: var(--radius-full);
}

.logisti-topbar-action-link.active:hover {
    background: var(--colors-brand-700);
    color: #fff;
}

/* ===================== End Logisti Portal Topbar ===================== */

/* 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 {
    margin-top: 108px;
    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 center;
    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;
}

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

        .carousel.vertical .carousel-item-next.carousel-item-start,
        .carousel.vertical .carousel-item-prev.carousel-item-end {
            transform: translateY(0);
        }

        .carousel.vertical .active.carousel-item-end,
        .carousel.vertical .carousel-item-next:not(.carousel-item-start) {
            transform: translateY(100%);
        }

        .carousel.vertical .active.carousel-item-start,
        .carousel.vertical .carousel-item-prev:not(.carousel-item-end) {
            transform: translateY(-100%);
        }

.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);
    backdrop-filter: blur(10px);
    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;
}

/* ============================================
                           FOOTER STYLES
                           ============================================ */
.site-footer {
    background: var(--colors-gray-50);
    border-top: 1px solid var(--colors-border-secondary);
    width: 100%;
}

/* Footer Columns Grid */
.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-3xl);
    padding: var(--spacing-4xl) var(--spacing-3xl);
}

.footer-col-heading {
    border-bottom: 1px solid var(--colors-border-secondary);
    margin-bottom: 0;
    padding-bottom: 0;
}

.footer-col-heading p {
    font-size: 15px;
    font-weight: 500;
    color: var(--colors-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    padding-inline-start: var(--spacing-md);
}

.footer-col-links {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0 0;
}

.footer-col-links li {
    padding: var(--spacing-xs) 0;
}

.footer-col-links a {
    font-size: 14px;
    font-weight: 400;
    color: var(--colors-text-secondary);
    text-decoration: none;
    padding-inline-start: var(--spacing-md);
    transition: color 0.2s ease;
    line-height: 20px;
}

.footer-col-links a:hover {
    color: var(--colors-brand-600);
}

/* Social Links */
.footer-social-links {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0 0;
    display: flex;
    gap: var(--spacing-md);
    padding-inline-start: var(--spacing-md);
}

.footer-social-links a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--colors-border-primary);
    color: var(--colors-text-secondary);
    font-size: 18px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.footer-social-links a:hover {
    color: var(--colors-brand-600);
    background: var(--colors-brand-25);
    border-color: var(--colors-brand-200);
}

/* Accessibility Tools */
.footer-accessibility {
    margin-top: var(--spacing-3xl);
}

.footer-accessibility-tools {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0 0;
    display: flex;
    gap: var(--spacing-md);
    padding-inline-start: var(--spacing-md);
}

.footer-a11y-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--colors-border-primary);
    background: none;
    color: var(--colors-text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.footer-a11y-btn:hover {
    color: var(--colors-brand-600);
    background: var(--colors-brand-25);
    border-color: var(--colors-brand-200);
}

/* Footer Bottom Bar */
.footer-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--spacing-xl) var(--spacing-3xl);
    border-top: 1px solid var(--colors-border-secondary);
}

.footer-bottom-start {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-3xl);
}

.footer-bottom-links a {
    font-size: 14px;
    font-weight: 400;
    color: var(--colors-text-secondary);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
    color: var(--colors-brand-600);
}

.footer-bottom-copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.footer-rights {
    font-size: 15px;
    font-weight: 700;
    color: var(--colors-text-primary);
    margin: 0;
    line-height: 22px;
}

.footer-dev {
    font-size: 14px;
    font-weight: 400;
    color: var(--colors-text-secondary);
    margin: 0;
    line-height: 20px;
}

.footer-modified {
    font-size: 14px;
    font-weight: 400;
    color: var(--colors-text-secondary);
    margin: 0;
    line-height: 20px;
}

.footer-bottom-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-md);
}

.footer-bottom-logo img {
    height: 37px;
    width: auto;
}

/* Version Badge */
.footer-version {
    display: flex;
    align-items: center;
    position: relative;
    cursor: help;
}

.footer-version .version-label {
    font-family: 'Roboto Mono', 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--colors-text-tertiary);
    background: var(--colors-gray-100);
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--colors-border-secondary);
}

.footer-version:hover .version-label {
    color: var(--colors-brand-600);
    border-color: var(--colors-brand-600);
}

.footer-version::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    inset-inline-end: 0;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: var(--colors-gray-900);
    color: var(--colors-gray-100);
    font-family: 'Roboto Mono', 'IBM Plex Mono', monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    pointer-events: none;
}

.footer-version:hover::before {
    opacity: 1;
    visibility: visible;
}

/* ============================================
                           ANNOUNCEMENTS TOPBAR DROPDOWN
                           ============================================ */
.ann-topbar-dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
}

.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);
}

/* 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-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 {
        margin-top: 70px;
    }

    /* Topbar mobile */
    .logisti-topbar {
        padding: 0 12px;
        min-height: 48px;
    }

    .logisti-topbar-toggler {
        display: flex;
    }

    .logisti-topbar-logo {
        display: none;
    }

    .logisti-topbar-logo-mobile {
        display: block;
    }

    .logisti-topbar-collapse {
        display: none !important;
        position: absolute;
        top: 100%;
        inset-inline: 0;
        background: var(--colors-base-white);
        border-bottom: 1px solid var(--colors-border-secondary);
        box-shadow: var(--shadow-md);
        padding: 8px 12px;
        z-index: 999;
    }

    .logisti-topbar-collapse.show {
        display: block !important;
    }

    .logisti-topbar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .logisti-topbar-nav-link {
        width: 100%;
        justify-content: space-between;
        padding: 10px 12px;
        border-radius: var(--radius-sm);
    }

    .logisti-topbar-submenu {
        position: static !important;
        box-shadow: none;
        border: none;
        padding-inline-start: 16px;
        transform: none !important;
    }

    .logisti-topbar-action-link span {
        display: none;
    }

    .logisti-topbar-action-link {
        padding: 8px;
    }

    .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;
    }

    .footer-columns {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        padding: var(--spacing-xl) var(--spacing-xl);
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xl);
        padding: var(--spacing-xl);
        text-align: center;
    }

    .footer-bottom-start {
        align-items: center;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-xl);
    }

    .footer-bottom-end {
        align-items: center;
    }

    .footer-version .version-label {
        font-size: 10px;
        padding: 2px 6px;
    }

    .footer-version::before {
        font-size: 10px;
        padding: 6px 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 --- */
.auth-card-centered { text-align: center; }

.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));
}