/*
 AFQ THEME: هوية منصة آفاق للمواقع (كحلي وبرتقالي)
 --------------------------------------------------------------------------
 طلب المستخدم 2026-09-10:
 الشكل والتقسيم  =>  https://preprod.afq.edu.sa/masar
 الألوان والهوية ونوع الخط => https://www.afq.edu.sa/ar/Pages/Home.aspx

 الألوان مأخوذة حرفياً من متغيّرات موقع الجامعة
 (Style Library/UD/ar-sa/css/arhome.bndl.css) — تدرّج «علم السعودية»
 `--colors-primary-sa-flag-*` واللون الأساسي هو 600 = #1d3461.
 والخط `--font-ar: "IBMPlexSansArabic"`.

 يُحمَّل بعد `landing.css` عمداً: الجزء الأول منه يُعيد تعريف
 الرموز القديمة (`--e-*` · `--primary-*` · `--secondary-*`) فتُعاد تسمية
 3,198 سطراً من التنسيقات القائمة بالهوية الجديدة بلا لمسها.
 ========================================================================== */

/*  كان @import من fonts.googleapis.com */
@import url('../assets/vendor/fonts/ibm-plex-sans-arabic.css');
/*

 1) رموز التصميم — هوية الجامعة
 ========================================================================== */

:root {
    /* تدرّج الهوية الأساسي (علم السعودية) — من موقع الجامعة حرفياً */
    --afq-25:  #f8f9fc;
    --afq-50:  #f3f5f9;
    --afq-100: #e3e8f1;
    --afq-200: #c5cfe0;
    --afq-300: #98a8c4;
    --afq-400: #5e76a0;
    --afq-500: #2b4c7e;
    --afq-600: #1d3461; /* <= اللون الأساسي للهوية */
    --afq-700: #14213d;
    --afq-800: #0f1a31;
    --afq-900: #0b1324;
    --afq-950: #070c17;

    /* تدرّج ثانوي (ذهبي) — لأزرار الإجراء كما في masar */
    --afq-gold-50:  #fff4e8;
    --afq-gold-100: #ffe3c4;
    --afq-gold-300: #ffb26b;
    --afq-gold-400: #fb9a3c;
    --afq-gold-500: #f77f00;
    --afq-gold-600: #d96f00;
    --afq-gold-700: #a85600;

    /* محايدات */
    --afq-black: #161616;
    --afq-white: #ffffff;
    --afq-ink: #161616;
    --afq-muted: #667085;
    --afq-line: #e5e7eb;
    --afq-surface: #ffffff;
    --afq-surface-alt: #f8f9fc;

    /* ارتفاع الشريط العلوي — مصدر واحد يستهلكه `.afq-main` */
    --afq-nav-h: 72px;

    /* الخط */
    --afq-font: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;

    /* الظلال والحواف */
    --afq-shadow-sm: 0 1px 2px rgba(11, 19, 36, .06);
    --afq-shadow: 0 4px 14px rgba(11, 19, 36, .08);
    --afq-shadow-lg: 0 18px 40px rgba(11, 19, 36, .12);
    --afq-radius: 14px;
    --afq-radius-lg: 20px;

    /* ——— إعادة تعريف الرموز القديمة (يُعيد تلوين landing.css كاملاً) ——— */
    --e-primary: var(--afq-600);
    --e-dark: var(--afq-900);
    --e-gold: var(--afq-gold-500);
    --e-light: var(--afq-50);

    --primary-600: var(--afq-600);
    --primary-700: var(--afq-700);
    --primary-50: var(--afq-50);
    --primary-100: var(--afq-100);

    --secondary-600: var(--afq-gold-500);
    --secondary-700: var(--afq-gold-600);

    --accent-600: var(--afq-500);
    --accent-700: var(--afq-700);
}
/*

 2) الأساسيات — الخط والألوان
 ========================================================================== */

body,
body .lp-main,
.lp-nav,
.btn,
input, select, textarea, button {
    font-family: var(--afq-font) !important;
}

body {
    color: var(--afq-ink);
    background: var(--afq-white);
}

/* Bootstrap: إعادة تلوين المكوّنات الأساسية بهوية الجامعة */
.bg-primary { background-color: var(--afq-600) !important; }
.text-primary { color: var(--afq-600) !important; }
.border-primary { border-color: var(--afq-600) !important; }
.text-muted { color: var(--afq-muted) !important; }

.btn-primary {
    --bs-btn-bg: var(--afq-600);
    --bs-btn-border-color: var(--afq-600);
    --bs-btn-hover-bg: var(--afq-700);
    --bs-btn-hover-border-color: var(--afq-700);
    --bs-btn-active-bg: var(--afq-800);
    --bs-btn-active-border-color: var(--afq-800);
    --bs-btn-disabled-bg: var(--afq-300);
    --bs-btn-disabled-border-color: var(--afq-300);
}

.btn-outline-primary {
    --bs-btn-color: var(--afq-700);
    --bs-btn-border-color: var(--afq-600);
    --bs-btn-hover-bg: var(--afq-600);
    --bs-btn-hover-border-color: var(--afq-600);
}

/* زر ذهبي — نمط masar */
.btn-gold {
    background: var(--afq-gold-500);
    border: 1px solid var(--afq-gold-500);
    color: #3d1f00;
    font-weight: 600;
}

.btn-gold:hover,
.btn-gold:focus {
    background: var(--afq-gold-600);
    border-color: var(--afq-gold-600);
    color: #fff;
}
/*

 3) الشريط العلوي — تقسيم masar (شعار يمين · إجراءات يسار)
 ========================================================================== */

.afq-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1050;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--afq-line);
    transition: box-shadow .25s ease, background .25s ease;
}

.afq-nav.scrolled {
    background: #fff;
    box-shadow: var(--afq-shadow);
}

/* ارتفاع الشريط مثبَّت في متغيّر واحد يستهلكه `.afq-main`.
 بدونه كان الشريط 72px والحشوة 68px => تداخل 4px فوق أول عنصر
 في كل صفحة لا تبدأ بـ`.afq-hero` (شوهد في «الاستعلام عن طلب»). */
.afq-nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
    min-height: var(--afq-nav-h);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.afq-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: var(--afq-900);
}

.afq-brand img {
    height: 46px;
    width: auto;
}

.afq-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.afq-brand-title {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--afq-900);
}

.afq-brand-sub {
    font-size: .72rem;
    color: var(--afq-muted);
}

.afq-nav-links {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: auto;
}

.afq-nav-links > a:not(.afq-btn) {
    color: var(--afq-900);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    padding: .5rem .8rem;
    border-radius: 8px;
    transition: background .2s, color .2s;
}

.afq-nav-links > a:not(.afq-btn):hover {
    background: var(--afq-50);
    color: var(--afq-700);
}

.afq-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1.05rem;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space: nowrap;
}

.afq-btn:hover { transform: translateY(-1px); }

.afq-btn-primary {
    background: var(--afq-600);
    color: #fff;
    box-shadow: 0 4px 12px rgba(29, 52, 97, .25);
}

.afq-btn-primary:hover { background: var(--afq-700); color: #fff; }

.afq-btn-gold {
    background: var(--afq-gold-500);
    color: #3d1f00;
    box-shadow: 0 4px 12px rgba(247, 127, 0, .28);
}

.afq-btn-gold:hover { background: var(--afq-gold-700); color: #fff; }

.afq-btn-ghost {
    background: transparent;
    color: var(--afq-700);
    border-color: var(--afq-200);
}

.afq-btn-ghost:hover { background: var(--afq-50); color: var(--afq-800); }

.afq-nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--afq-line);
    border-radius: 9px;
    padding: .4rem .6rem;
    font-size: 1.2rem;
    color: var(--afq-900);
    margin-inline-start: auto;
    cursor: pointer;
}

@media (max-width: 991px) {
    .afq-nav-toggle { display: inline-flex; }

    .afq-nav-links {
        display: none;
        position: absolute;
        inset: 100% 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
        background: #fff;
        padding: .8rem 1.25rem 1.1rem;
        border-bottom: 1px solid var(--afq-line);
        box-shadow: var(--afq-shadow);
    }

    .afq-nav-links.show { display: flex; }
    .afq-nav-links .afq-btn { justify-content: center; }
}
/*

 4) هيكل الصفحة والأقسام — تقسيم masar
 ========================================================================== */

/* +1px لحدّ الشريط السفلي — ارتفاعه الفعلي = min-height + border */
.afq-main { padding-top: calc(var(--afq-nav-h) + 1px); }

.afq-section { padding: 4.5rem 0; }
.afq-section-alt { background: var(--afq-surface-alt); }

.afq-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* عنوان قسم موسّط — `.title-accent` + `.title-underline` في masar */
.afq-section-head { text-align: center; margin-bottom: 3rem; }

.afq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--afq-700);
    background: var(--afq-100);
    padding: .32rem .9rem;
    border-radius: 999px;
}

.afq-section-title {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 700;
    color: var(--afq-900);
    margin: .8rem 0 .5rem;
}

.afq-underline {
    width: 68px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--afq-600), var(--afq-gold-500));
    margin: 0 auto;
}

.afq-section-lead {
    color: var(--afq-muted);
    max-width: 660px;
    margin: 1rem auto 0;
    line-height: 1.9;
}

/* ——— 4أ) المقدّمة: نصّ + صورة (about-intro) ——— */
.afq-hero {
    position: relative;
    padding: 4.5rem 0 4rem;
    background:
        radial-gradient(1100px 420px at 85% -10%, var(--afq-100) 0%, transparent 60%),
        linear-gradient(180deg, var(--afq-25) 0%, #fff 70%);
    overflow: hidden;
}

/*  `minmax(0, …)` إلزامي لا تحسين:
 `1fr` وحدها تعني `minmax(auto, 1fr)` فلا ينكمش العمود دون عرض محتواه
 الأدنى — وعلى الشاشات الضيّقة كانت الشبكة تتجاوز حاويتها 13px فيُقصّ
 نصّ المقدّمة من حافته. نفس العلّة تصيب كل شبكة هنا. */
.afq-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 3rem;
    align-items: center;
}

.afq-hero-title {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--afq-900);
    margin: 1rem 0 1.1rem;
}

.afq-hero-title span { color: var(--afq-600); }

.afq-hero-lead {
    color: var(--afq-muted);
    font-size: 1.05rem;
    line-height: 2;
    margin-bottom: 1.6rem;
}

.afq-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.afq-badges {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;
}

.afq-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border: 1px solid var(--afq-line);
    box-shadow: var(--afq-shadow-sm);
    border-radius: 999px;
    padding: .38rem .9rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--afq-800);
}

.afq-badge i { color: var(--afq-600); }

/* إطار الصورة مع زخرفتين — `.about-image-frame` + `.about-deco-*` */
.afq-hero-visual { position: relative; }

.afq-hero-frame {
    position: relative;
    z-index: 2;
    border-radius: var(--afq-radius-lg);
    overflow: hidden;
    box-shadow: var(--afq-shadow-lg);
    background: linear-gradient(135deg, var(--afq-700), var(--afq-600));
    /*  `min-height` لا `aspect-ratio`:
 النسبة الثابتة كانت تحبس الإطار عند 226px على الشاشات الضيّقة
 بينما محتواه 325px => `overflow:hidden` يقصّ نصف الأرقام. */
    min-height: clamp(240px, 28vw, 340px);
    display: grid;
    place-items: center;
    color: #fff;
    padding: 2rem;
    text-align: center;
}

.afq-hero-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.afq-deco {
    position: absolute;
    border-radius: 26px;
    z-index: 1;
}

.afq-deco-1 {
    inset-block-start: -18px;
    inset-inline-start: -18px;
    width: 130px;
    height: 130px;
    background: var(--afq-gold-100);
}

.afq-deco-2 {
    inset-block-end: -22px;
    inset-inline-end: -22px;
    width: 165px;
    height: 165px;
    background: var(--afq-100);
}

/* لوحة أرقام داخل الإطار — مكوّن مستقل عمداً.
 لا تُعِد استخدام `.lp-dash` من landing.css هنا: تسمياتها
 `rgba(255,255,255,.35)` مصمّمة لخلفية فاتحة، وعلى الأخضر يصبح
 تباينها ≈1.9:1 (فاشل). */
.afq-stat-panel {
    width: 100%;
    text-align: start;
}

.afq-stat-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-bottom: .85rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.afq-stat-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
}

.afq-stat-head span:last-child {
    margin-inline-start: auto;
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
}

.afq-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

/* خلفية البطاقة تُعتِم الأخضر بدل أن تُفتّحه — يرفع تباين النص الأبيض
 فوق حدّ WCAG AA للنص الصغير بدل أن يخفضه. */
.afq-stat {
    background: rgba(7, 12, 23, .28);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    padding: .85rem .95rem;
}

.afq-stat b {
    display: block;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.afq-stat span {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .95);
}

/* ——— 4ب) الرؤية والرسالة: بطاقتان زجاجيتان (vision_mission) ——— */
.afq-vm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.afq-vm-card {
    position: relative;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(8px);
    border: 1px solid var(--afq-100);
    border-radius: var(--afq-radius-lg);
    padding: 2rem 1.9rem;
    box-shadow: var(--afq-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.afq-vm-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--afq-shadow-lg);
}

.afq-vm-card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 1.9rem;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--afq-600), var(--afq-gold-500));
}

.afq-vm-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: var(--afq-100);
    color: var(--afq-700);
    margin-bottom: 1rem;
}

.afq-vm-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--afq-900);
    margin-bottom: .6rem;
}

.afq-vm-card p {
    color: var(--afq-muted);
    line-height: 2;
    margin: 0;
}

/* ——— 4ج) الخدمات: 4 بطاقات بأيقونة ملوّنة (services_section) ——— */
.afq-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.afq-card {
    background: #fff;
    border: 1px solid var(--afq-line);
    border-radius: var(--afq-radius);
    padding: 1.7rem 1.4rem;
    box-shadow: var(--afq-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height: 100%;
}

.afq-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--afq-shadow-lg);
    border-color: var(--afq-200);
}

.afq-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    margin-bottom: 1.1rem;
}

.afq-ic-green  { background: var(--afq-100);      color: var(--afq-700); }
.afq-ic-gold   { background: var(--afq-gold-100); color: var(--afq-gold-700); }
.afq-ic-blue   { background: #d1e9ff;             color: #175cd3; }
.afq-ic-purple { background: #ece9fe;             color: #5925dc; }

.afq-card h3 {
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--afq-900);
    margin-bottom: .5rem;
}

.afq-card p {
    color: var(--afq-muted);
    font-size: .92rem;
    line-height: 1.9;
    margin: 0;
}

/* ——— 4د) المهام: خطّ زمني مرقّم متبادل (tasks_section) ——— */
.afq-timeline {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
    padding: .5rem 0;
}

.afq-timeline::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    width: 2px;
    background: linear-gradient(180deg, var(--afq-200), var(--afq-100));
    transform: translateX(50%);
}

.afq-task {
    position: relative;
    width: 50%;
    padding: 0 2.4rem 2rem;
}

.afq-task-right { margin-inline-start: auto; }

.afq-task-body {
    background: #fff;
    border: 1px solid var(--afq-line);
    border-radius: var(--afq-radius);
    padding: 1.15rem 1.3rem;
    box-shadow: var(--afq-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}

.afq-task-body:hover {
    transform: translateY(-3px);
    box-shadow: var(--afq-shadow);
}

.afq-task-body p {
    margin: 0;
    color: var(--afq-800);
    line-height: 1.95;
    font-size: .95rem;
}

.afq-task-num {
    position: absolute;
    inset-block-start: .6rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    background: var(--afq-600);
    box-shadow: 0 0 0 6px var(--afq-50);
    z-index: 2;
}

.afq-task-left  .afq-task-num { inset-inline-start: -21px; }
.afq-task-right .afq-task-num { inset-inline-end: -21px; }

/* ——— 4هـ) قسم التواصل (about-cta) ——— */
/*  التدرّج ينتهي عند 700 لا 600: على 600 كان تباين الفقرة 4.46:1
 — أقل من AA بفارق ضئيل. 700 يرفعه إلى ~5.1 بلا تغيير العتامة. */
.afq-cta {
    background: linear-gradient(135deg, var(--afq-900), var(--afq-800) 55%, var(--afq-700));
    color: #fff;
    border-radius: var(--afq-radius-lg);
    padding: 2.8rem 2.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 2.5rem;
    align-items: center;
}

.afq-cta h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.95rem);
    font-weight: 700;
    margin-bottom: .7rem;
}

/*  العتامة هنا محسوبة لا مُقدَّرة: على أفتح نقطة في التدرّج (#1d3461)
 كانت .82 تعطي تبايناً 3.75:1 — دون حدّ WCAG AA (4.5) للنص العادي.
 .95 ترفعه فوق الحدّ. لا تُخفّضها لأغراض جمالية. */
.afq-cta p {
    color: rgba(255, 255, 255, .95);
    line-height: 2;
    margin: 0;
}

/*  كانت عموداً واحداً — كل وسيلة تواصل في
 سطر، فيطول القسم بلا داعٍ وفيه فراغ جانبيّ واسع.
 اثنان جنباً إلى جنب بطلب المستخدم.
 `minmax(0, 1fr)` لا `1fr`: القيم الطويلة (بريد أو رابط) تفرض عرضاً
 أدنى على عنصر الشبكة فيتجاوز العمودُ حدَّه ويخرج المحتوى.
 وعمود واحد دون 640px — عمودان على الجوّال يضغطان النصّ. */
.afq-contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

@media (max-width: 640px) {
    .afq-contact-list {
        grid-template-columns: 1fr;
    }
}

/*  الخلفية تُعتِم التدرّج ولا تُفتّحه.
 `rgba(255,255,255,.1)` كانت ترفع الخلفية إلى #2b4c7e فيهبط تباين
 التسمية إلى 2.7:1 والقيمة إلى 4:1 — كلاهما دون AA. */
.afq-contact-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: rgba(7, 12, 23, .3);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    padding: .75rem 1rem;
    text-decoration: none;
    color: #fff;
    transition: background .2s ease;
}

.afq-contact-item:hover { background: rgba(7, 12, 23, .45); color: #fff; }

.afq-contact-item i { font-size: 1.25rem; color: var(--afq-gold-300); }

.afq-contact-label {
    display: block;
    font-size: .74rem;
    color: rgba(255, 255, 255, .92);
}

.afq-contact-value {
    font-weight: 600;
    font-size: .95rem;
}
/*

 5) التذييل — نمط masar (خلفية الهوية · حقوق يمين · شعار يسار)
 ========================================================================== */

.afq-footer {
    background: var(--afq-600);
    color: #fff;
    padding: 1.6rem 0;
    margin-top: auto;
}

.afq-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.afq-footer p {
    margin: 0;
    font-size: .92rem;
    font-weight: 500;
}

.afq-footer small {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .78);
}

.afq-footer img {
    height: 44px;
    width: auto;
}
/*

 6) الصفحات الداخلية — طقم موحّد (2026-09-11)
 --------------------------------------------------------------------------
 طلب المستخدم: «صفحات النماذج تبقى بنفس الشكل اللي وحّدناه من ناحية
 التقسيم والألوان». كانت كل صفحة تُعرّف ترويستها وبطاقاتها وحقولها
 وأزرارها في `<style>` خاص بها — فاختلفت المقاسات والظلال والتدرّجات.
 => كل ذلك صار هنا، والصفحات تستهلكه.
 ========================================================================== */

/* ——— ترويسة صفحة داخلية (نظير `.afq-section-head` لكن بخلفية الهوية) ———
 `margin-top` إلزامي: الشريط العلوي ثابت و`.afq-main` حشوته = ارتفاعه
 بالضبط، فكانت الترويسة الداكنة تلتصق به بلا أي فاصل (شكاية
 المستخدم 2026-09-12: «الهيدر لازق في النافبار»).
 ولأن الحشوة `calc(nav + 1px)` لا تترك فراغاً، الفاصل يُضاف هنا. */
.afq-page-head {
    background: linear-gradient(135deg, var(--afq-900), var(--afq-800) 55%, var(--afq-700));
    color: #fff;
    padding: 3.2rem 0 2.6rem;
    margin-top: 1.5rem;
    text-align: center;
}

.afq-page-head .afq-eyebrow {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.afq-page-title {
    font-size: clamp(1.55rem, 3.2vw, 2.2rem);
    font-weight: 700;
    margin: .9rem 0 .5rem;
    color: #fff;
}

/*  .95 لا .82 — على أفتح نقطة في التدرّج (700) تعطي .82 تبايناً 3.75:1
 وهو دون WCAG AA للنص العادي. */
.afq-page-sub {
    color: rgba(255, 255, 255, .95);
    font-size: 1rem;
    line-height: 1.9;
    max-width: 640px;
    margin: 0 auto;
}

.afq-page-head .afq-underline {
    background: linear-gradient(90deg, var(--afq-gold-400), #fff);
    margin-top: 1rem;
}

/* ——— جسم الصفحة الداخلية ——— */
.afq-page-body {
    padding: 2.5rem 0 3.5rem;
    background: var(--afq-surface-alt);
    min-height: 40vh;
}

/* ——— لوحة (تحلّ محلّ بطاقات كل صفحة) ——— */
.afq-panel {
    background: #fff;
    border: 1px solid var(--afq-line);
    border-radius: var(--afq-radius-lg);
    box-shadow: var(--afq-shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.afq-panel-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--afq-line);
    background: var(--afq-50);
}

.afq-panel-head i { color: var(--afq-600); font-size: 1.15rem; }

.afq-panel-head h2,
.afq-panel-head h3 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--afq-900);
}

.afq-panel-body { padding: 1.6rem 1.5rem; }

.afq-panel-narrow {
    max-width: 640px;
    margin-inline: auto;
}

/* ——— حقول النماذج ——— */
.afq-panel .form-label,
.afq-form-label {
    font-weight: 600;
    font-size: .92rem;
    color: var(--afq-900);
    margin-bottom: .4rem;
}

.afq-panel .form-control,
.afq-panel .form-select,
.afq-input {
    border: 1px solid var(--afq-line);
    border-radius: 10px;
    padding: .7rem .95rem;
    font-size: .98rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.afq-panel .form-control:focus,
.afq-panel .form-select:focus,
.afq-input:focus {
    border-color: var(--afq-500);
    box-shadow: 0 0 0 3px var(--afq-100);
    outline: none;
}

.afq-panel .form-control::placeholder { color: #9aa2b1; }

/* ——— قسم داخل نموذج طويل ——— */
.afq-fieldset {
    border: 1px solid var(--afq-line);
    border-radius: var(--afq-radius);
    padding: 1.3rem 1.35rem;
    margin-bottom: 1.35rem;
    background: #fff;
}

.afq-fieldset-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-bottom: .8rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--afq-line);
    font-weight: 700;
    color: var(--afq-900);
}

.afq-fieldset-head i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--afq-100);
    color: var(--afq-700);
    font-size: 1rem;
}

/* ——— أزرار ——— */
.afq-btn-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .85rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .18s ease, box-shadow .2s ease;
}

.afq-btn-block:hover { transform: translateY(-1px); }

/*  لا تُحوَّل ألوان الأزرار عند التحويم إلى لون آخر (كان زر الاستعلام
 يتحوّل من الأخضر إلى الأصفر `#ffc700`) — التحويم يُغمّق نفس اللون. */
.afq-btn-block.afq-btn-primary:hover { background: var(--afq-700); }

/* ——— صندوق ملاحظة ——— */
.afq-note {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    border-radius: 12px;
    padding: .95rem 1.1rem;
    font-size: .93rem;
    line-height: 1.85;
    border: 1px solid var(--afq-200);
    background: var(--afq-50);
    color: var(--afq-900);
}

.afq-note i { font-size: 1.15rem; color: var(--afq-600); flex: 0 0 auto; margin-top: .15rem; }
.afq-note p:last-child, .afq-note ul:last-child { margin-bottom: 0; }

.afq-note-warn {
    border-color: var(--afq-gold-300);
    background: var(--afq-gold-50);
    color: #5c2e00;
}

.afq-note-warn i { color: var(--afq-gold-700); }

/* ——— شريط بيانات (مفتاح/قيمة) — للتفاصيل والنجاح ——— */
.afq-datalist { display: grid; gap: .6rem; }

.afq-datarow {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem .95rem;
    border: 1px solid var(--afq-line);
    border-radius: 10px;
    background: var(--afq-25);
}

.afq-datarow dt,
.afq-data-key {
    margin: 0;
    font-size: .82rem;
    color: var(--afq-muted);
    min-width: 150px;
    font-weight: 500;
}

.afq-datarow dd,
.afq-data-val {
    margin: 0;
    font-weight: 600;
    color: var(--afq-900);
    word-break: break-word;
}

/* ——— تأكيد النسخ (صفحة النجاح) ———
 `showCopyFeedback()` في Success.cshtml يضيف/يحذف صنف `.show` فقط.
 كان هذا المكوّن معرَّفاً في `<style>` الخاص بالصفحة، فنقله إلى هنا
 إلزامي وإلا صار زر «نسخ البيانات» ينسخ بلا أي تأكيد مرئي. */
.copy-feedback {
    margin-top: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--afq-700);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

.copy-feedback.show { opacity: 1; visibility: visible; }

/* ——— أيقونة نتيجة كبيرة (صفحة النجاح) ——— */
.afq-result-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2.6rem;
    background: var(--afq-100);
    color: var(--afq-700);
}

.afq-result-icon.is-warn { background: var(--afq-gold-100); color: var(--afq-gold-700); }
.afq-result-icon.is-error { background: #fee4e2; color: #b42318; }

@media (max-width: 575px) {
    .afq-page-head { padding: 2.4rem 0 2rem; }
    .afq-panel-body { padding: 1.2rem 1.1rem; }
    .afq-datarow dt, .afq-data-key { min-width: 100%; }
}
/*

 7) «ملفي الشخصي / طلباتي» وتفاصيل الطلب (2026-09-12)
 --------------------------------------------------------------------------
 طلب المستخدم: الملف الشخصي وطلباتي وتفاصيل الطلب كانت غير متناسقة
 مع التصميم الجديد — كانت تعتمد طقم `*-pro` في `landing.css`
 (`profile-section-pro` · `app-card-pro` · `alert-pro` …) بمقاسات وظلال
 وحوافّ تخصّ التصميم القديم.
 => هذا القسم يحلّ محلّه بمكوّنات من نفس نسق بقية الموقع.
 ========================================================================== */

/* ——— تبويبات ——— */
.afq-tabs {
    display: flex;
    gap: .4rem;
    border-bottom: 1px solid var(--afq-line);
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.afq-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.2rem;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: .96rem;
    font-weight: 600;
    color: var(--afq-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .2s ease, border-color .2s ease;
}

.afq-tab:hover { color: var(--afq-700); }

.afq-tab.is-active {
    color: var(--afq-700);
    border-bottom-color: var(--afq-600);
}

.afq-tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--afq-100);
    color: var(--afq-700);
    font-size: .74rem;
    font-weight: 700;
}

.afq-tab.is-active .afq-tab-count { background: var(--afq-600); color: #fff; }

.afq-tab-pane { display: none; }
.afq-tab-pane.is-active { display: block; }

/* ——— شريحة حالة ——— */
.afq-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

/*  الألوان محسوبة للتباين على خلفياتها الفاتحة — لا تُفتّح النصوص. */
.afq-chip-ok     { background: var(--afq-100);      color: var(--afq-800);      border-color: var(--afq-200); }
.afq-chip-wait   { background: var(--afq-gold-50);  color: #7a2e0e;             border-color: var(--afq-gold-300); }
.afq-chip-warn   { background: var(--afq-gold-100); color: #7a2e0e;             border-color: var(--afq-gold-400); }
.afq-chip-info   { background: #d1e9ff;             color: #1849a9;             border-color: #b2ddff; }
.afq-chip-danger { background: #fee4e2;             color: #912018;             border-color: #fecdca; }

/* ——— شريحة نوع الطلب ———
 هذه هي الإضافة التي طلبها المستخدم صراحةً: «يظهر نوع الطلب إيه
 طلب خبير ولا مقاول» — فلونان مختلفان يُفرّقان النوعين بنظرة. */
.afq-type {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
}

.afq-type-expert     { background: var(--afq-100);      color: var(--afq-800); }
.afq-type-contractor { background: var(--afq-gold-100); color: var(--afq-gold-700); }

/* ——— بطاقة طلب ——— */
.afq-req-list { display: grid; gap: 1rem; }

.afq-req {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.25rem;
    align-items: start;
    background: #fff;
    border: 1px solid var(--afq-line);
    border-left: 4px solid var(--afq-300);
    border-radius: var(--afq-radius);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--afq-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.afq-req:hover { transform: translateY(-2px); box-shadow: var(--afq-shadow); }

/* شريط الحالة الجانبي — في RTL يقع على اليسار بصرياً */
.afq-req.is-ok     { border-left-color: var(--afq-600); }
.afq-req.is-danger { border-left-color: #d92d20; }
.afq-req.is-info   { border-left-color: #2e90fa; }
.afq-req.is-warn,
.afq-req.is-wait   { border-left-color: var(--afq-gold-500); }

.afq-req-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .7rem;
}

/* يُعرض الآن داخل `.afq-req-meta` على سطر واحد مع التخصّص والتواريخ
 (طلب المستخدم 2026-09-12)، فلم يعد كتلة مستقلة. */
.afq-req-num {
    font-weight: 700;
    color: var(--afq-900) !important;
    font-size: .95rem;
}

.afq-req-meta {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    font-size: .86rem;
    color: var(--afq-muted);
}

.afq-req-meta span { display: inline-flex; align-items: center; gap: .35rem; }

.afq-req-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
}

/* ——— حالة فراغ ——— */
.afq-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #fff;
    border: 1px dashed var(--afq-200);
    border-radius: var(--afq-radius-lg);
}

.afq-empty-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2.1rem;
    background: var(--afq-50);
    color: var(--afq-500);
}

.afq-empty h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--afq-900);
    margin-bottom: .5rem;
}

.afq-empty p {
    color: var(--afq-muted);
    margin: 0 auto 1.3rem;
    max-width: 460px;
    line-height: 1.9;
}

.afq-empty-actions {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ——— تنبيه داخل الصفحة ——— */
.afq-alert {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    border-radius: 12px;
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
    font-size: .94rem;
    border: 1px solid var(--afq-200);
    background: var(--afq-50);
    color: var(--afq-900);
}

.afq-alert i { font-size: 1.2rem; flex: 0 0 auto; margin-top: .1rem; color: var(--afq-600); }
.afq-alert-ok     { background: var(--afq-50);      border-color: var(--afq-200); }
.afq-alert-err    { background: #fee4e2;            border-color: #fecdca; color: #912018; }
.afq-alert-err i  { color: #b42318; }
.afq-alert-info   { background: #eff8ff;            border-color: #b2ddff; color: #194084; }
.afq-alert-info i { color: #175cd3; }

/* ——— شبكة بيانات (بديل `.info-grid-pro`) ——— */
.afq-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .9rem;
}

.afq-field {
    background: var(--afq-25);
    border: 1px solid var(--afq-line);
    border-radius: 12px;
    padding: .85rem 1rem;
}

.afq-field-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .79rem;
    color: var(--afq-muted);
    margin-bottom: .3rem;
}

.afq-field-value {
    font-weight: 600;
    color: var(--afq-900);
    word-break: break-word;
}

.afq-field-value.is-ltr { direction: ltr; text-align: left; }

@media (max-width: 575px) {
    .afq-req { grid-template-columns: minmax(0, 1fr); }
    .afq-req-actions { flex-direction: row; }
    .afq-tab { padding: .7rem .85rem; font-size: .9rem; }
}
/* ——— محادثات الطلب (2026-09-12) ———
 المستخدم: «ادخل تفاصيل الطلب انت معملتش تصميم جزء التعليقات والردود».
 كان سجلّ التعليقات معروضاً كصفوف `.afq-datarow` عامّة — بلا تمييز بين
 رسالة مقدّم الطلب ورسالة المراجع، وبلا شكل محادثة. هذا الطقم يعالج ذلك. */

/* صندوق المحادثة — ارتفاع محدود وتمرير داخلي (طلب المستخدم 2026-09-12).
 بدونه كانت 16 رسالة تمدّ الصفحة فيضيع صندوق الرد أسفلها.
 `overscroll-behavior: contain` يمنع تمرير الصفحة خلفه عند بلوغ الطرف. */
.afq-thread {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.6rem;
    max-height: clamp(320px, 55vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .9rem;
    padding-inline-end: .55rem;   /* مساحة شريط التمرير دون قصّ الظلال */
    background: var(--afq-25);
    border: 1px solid var(--afq-line);
    border-radius: var(--afq-radius);
    scroll-behavior: smooth;
}

/* شريط تمرير بهوية النظام — يبقى شريط النظام الافتراضي حيث لا دعم. */
.afq-thread { scrollbar-width: thin; scrollbar-color: var(--afq-300) transparent; }
.afq-thread::-webkit-scrollbar { width: 8px; }
.afq-thread::-webkit-scrollbar-track { background: transparent; }

.afq-thread::-webkit-scrollbar-thumb {
    background: var(--afq-300);
    border-radius: 999px;
}

.afq-thread::-webkit-scrollbar-thumb:hover { background: var(--afq-400); }

/*  الرسالة الأخيرة بلا هامش سفلي زائد داخل الصندوق */
.afq-thread > .afq-msg:last-child { margin-bottom: 0; }

.afq-msg {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
}

/* رسالة المراجع تُزاح للجهة المقابلة ليبين أنها من طرف آخر */
.afq-msg-admin { grid-template-columns: minmax(0, 1fr) 42px; }
.afq-msg-admin .afq-msg-avatar { order: 2; }
.afq-msg-admin .afq-msg-body { order: 1; }

.afq-msg-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    background: var(--afq-100);
    color: var(--afq-700);
    flex: 0 0 auto;
}

.afq-msg-admin .afq-msg-avatar {
    background: var(--afq-gold-100);
    color: var(--afq-gold-700);
}

.afq-msg-body {
    background: #fff;
    border: 1px solid var(--afq-line);
    border-radius: var(--afq-radius);
    padding: .9rem 1.05rem;
    box-shadow: var(--afq-shadow-sm);
    position: relative;
}

/* شريط جانبي يُميّز الطرف بلمحة */
.afq-msg-body::before {
    content: '';
    position: absolute;
    inset-block: .9rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--afq-400);
}

.afq-msg-admin .afq-msg-body {
    background: var(--afq-gold-50);
    border-color: var(--afq-gold-300);
}

.afq-msg-admin .afq-msg-body::before { background: var(--afq-gold-500); }

.afq-msg-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .45rem;
}

.afq-msg-name {
    font-weight: 700;
    font-size: .94rem;
    color: var(--afq-900);
}

.afq-msg-role {
    font-size: .72rem;
    font-weight: 600;
    padding: .16rem .55rem;
    border-radius: 999px;
    background: var(--afq-100);
    color: var(--afq-800);
}

.afq-msg-admin .afq-msg-role {
    background: var(--afq-gold-100);
    color: var(--afq-gold-700);
}

.afq-msg-time {
    font-size: .78rem;
    color: var(--afq-muted);
    margin-inline-start: auto;
}

.afq-msg-text {
    color: var(--afq-ink);
    line-height: 1.95;
    font-size: .95rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.afq-msg-file {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    padding: .4rem .75rem;
    border: 1px solid var(--afq-line);
    border-radius: 9px;
    background: var(--afq-25);
    font-size: .85rem;
    font-weight: 600;
    color: var(--afq-700);
    text-decoration: none;
}

.afq-msg-file:hover { background: var(--afq-50); color: var(--afq-800); }

/* ——— صندوق الرد ——— */
.afq-reply {
    border: 1px solid var(--afq-line);
    border-radius: var(--afq-radius);
    background: var(--afq-25);
    padding: 1.1rem 1.15rem;
}

.afq-reply-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--afq-900);
    margin-bottom: .8rem;
}

.afq-reply-head i { color: var(--afq-600); }

.afq-reply textarea {
    width: 100%;
    border: 1px solid var(--afq-line);
    border-radius: 10px;
    padding: .75rem .95rem;
    font-family: inherit;
    font-size: .96rem;
    line-height: 1.8;
    resize: vertical;
    background: #fff;
}

.afq-reply textarea:focus {
    border-color: var(--afq-500);
    box-shadow: 0 0 0 3px var(--afq-100);
    outline: none;
}

.afq-reply-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .8rem;
}

.afq-reply-file {
    font-size: .85rem;
    color: var(--afq-700);
    font-weight: 600;
}

@media (max-width: 575px) {
    .afq-msg,
    .afq-msg-admin { grid-template-columns: 34px minmax(0, 1fr); }
    .afq-msg-admin .afq-msg-avatar { order: 0; }
    .afq-msg-admin .afq-msg-body { order: 0; }
    .afq-msg-avatar { width: 34px; height: 34px; font-size: .95rem; }
    .afq-msg-time { margin-inline-start: 0; width: 100%; }
}
/*

 8) استجابة الشاشات
 ========================================================================== */

@media (max-width: 991px) {
    .afq-hero-grid,
    .afq-cta { grid-template-columns: minmax(0, 1fr); }

    .afq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .afq-hero-visual { order: -1; }

    .afq-timeline::before { inset-inline-start: 21px; transform: none; }

    .afq-task {
        width: 100%;
        padding-inline: 3.4rem 0;
    }

    .afq-task-left  .afq-task-num,
    .afq-task-right .afq-task-num { inset-inline-start: 0; inset-inline-end: auto; }
}

@media (max-width: 575px) {
    .afq-vm-grid,
    .afq-cards { grid-template-columns: minmax(0, 1fr); }

    .afq-section { padding: 3rem 0; }
    .afq-cta { padding: 2rem 1.4rem; }
    .afq-brand-sub { display: none; }
}

/* ——— UI-FIELDS-3 (2026-09-20 · و): شبكة بيانات بثلاثة أعمدة ثابتة ———
   بطلب المستخدم لتبويب «بياناتي»: ثلاثة حقول في كل سطر بدل `auto-fit`
   الذي يعطي أربعة على الشاشات العريضة. تُضاف بجانب `.afq-fields`. */
.afq-fields.afq-fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) { .afq-fields.afq-fields-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .afq-fields.afq-fields-3 { grid-template-columns: minmax(0, 1fr); } }

/* ——— UI-REQ-TITLE (2026-09-20 · و): عنوان بطاقة الطلب/المنافسة/العرض ———
   `.afq-req-title` كانت بلا قاعدة فورثت حجم `h3` الافتراضي (1.75rem) —
   «الخطوط كبيرة أوي» بتعبير المستخدم. */
.afq-req-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--afq-900);
    margin: 0 0 .55rem;
}

/* ——— UI-COMPACT-TEXT (2026-09-20 · و) ———
   `landing.css` يرفع أساس الخطّ إلى 125% للموقع كله. الصفحات الداخلية التي
   تضبط `ViewBag.CompactText = true` (ملفي الشخصي · عرضي) تعود إلى 100%
   فتوازي لوحة التحكّم. الصفحة الرئيسية وصفحات التقديم لم تُمَسّ. */
html.afq-compact { font-size: 100%; }

/* Empty validation summary stays hidden until there is an error */
.validation-summary-valid { display: none; }