/* ============================================================
   الهوية البصرية لفرص خضراء — من brand file.pdf (مجلد الهوية)
   الألوان الأساسية:   #1B6B23 أخضر · #FA9C28 برتقالي · #000000
   الألوان الثانوية:   #ABE188 ورقي فاتح · #42BFDD سماوي · #F8FBFF خلفية
   الخطوط: Juman للعناوين العربية · Expo Arabic للنصوص
   ============================================================ */

@font-face {
    font-family: 'Juman';
    src: url('../fonts/brand/juman-arabic-normal.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: 'Expo Arabic';
    src: url('../fonts/brand/ExpoArabic-Book.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Expo Arabic';
    src: url('../fonts/brand/ExpoArabic-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Expo Arabic';
    src: url('../fonts/brand/ExpoArabic-Bold.woff2') format('woff2');
    font-weight: 700 800;
    font-display: swap;
}

:root {
    /* الأساسية */
    --fk-green: #1B6B23;
    --fk-green-dark: #14521b;
    --fk-orange: #FA9C28;
    --fk-ink: #0d2910;

    /* الثانوية */
    --fk-leaf: #ABE188;
    --fk-sky: #42BFDD;
    --fk-bg: #F8FBFF;

    /* درجات مشتقة للخلفيات الخفيفة */
    --fk-green-soft: #e9f4e6;
    --fk-leaf-soft: #f0f9e8;
    --fk-orange-soft: #fef3e2;
    --fk-sky-soft: #e8f7fb;

    /* الخطوط */
    --fk-font-head: 'Juman', 'Expo Arabic', 'Cairo', sans-serif;
    --fk-font-body: 'Expo Arabic', 'Cairo', sans-serif;
}

/* ===== شريط "ثبّت التطبيق" (Views/Shared/_InstallPrompt.cshtml) ===== */
.fk-install {
    position: fixed;
    inset-inline: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1060;
    max-width: 520px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    color: var(--fk-ink);
    border: 1px solid var(--fk-green-soft);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(13, 41, 16, .18);
    font-family: var(--fk-font-body);
}
.fk-install[hidden] { display: none; }
.fk-install__icon { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; }
.fk-install__body { flex: 1; min-width: 0; }
.fk-install__body strong { display: block; font-size: 1rem; color: var(--fk-green); }
.fk-install__text { margin: 2px 0 0; font-size: .85rem; line-height: 1.6; color: #4b5563; }
.fk-install__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.fk-install__btn {
    background: var(--fk-green);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 8px 18px;
    font-weight: 700;
    cursor: pointer;
}
.fk-install__btn:hover { background: var(--fk-green-dark); }
.fk-install__close {
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: #6b7280;
    padding: 4px 8px;
    cursor: pointer;
}
/* نص الشريط وزره بحسب الحالة: prompt (Chrome/Edge) أو ios (Safari) */
.fk-install [data-install-mode] { display: none; }
.fk-install[data-mode="prompt"] [data-install-mode~="prompt"],
.fk-install[data-mode="ios"] [data-install-mode~="ios"],
.fk-install[data-mode="ios-other"] [data-install-mode~="ios-other"],
.fk-install[data-mode="inapp"] [data-install-mode~="inapp"] { display: revert; }
a.fk-install__btn { text-decoration: none; }

/* داخل التطبيق المثبّت لا حاجة لروابط "حمّل التطبيق" (site.js يضيف fk-standalone) */
.fk-standalone .fk-hide-standalone { display: none !important; }

/* ===== بطاقة "فعّل التنبيهات" (Views/Shared/_PushCard.cshtml، site.js) ===== */
.fk-push {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--fk-green-soft);
    border: 1px solid #d6ead8;
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.fk-push[hidden] { display: none; }
.fk-push[data-state="on"] { background: #fff; }
.fk-push__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--fk-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.fk-push[data-state="denied"] .fk-push__icon { background: #94a3b8; }
.fk-push__body { flex: 1; min-width: 0; }
.fk-push__body strong { display: block; color: var(--fk-green); font-size: .95rem; }
.fk-push__body p { margin: 2px 0 0; font-size: .8rem; line-height: 1.6; color: #4b5563; }
.fk-push__actions { flex-shrink: 0; display: flex; align-items: center; }
.fk-push__btn {
    background: var(--fk-green);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.fk-push__btn:hover { background: var(--fk-green-dark); color: #fff; }
.fk-push__btn:disabled { opacity: .6; }
.fk-push__link { background: none; border: 0; color: #6b7280; font-weight: 600; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.fk-push [data-when] { display: none; }
.fk-push[data-state="off"] [data-when~="off"],
.fk-push[data-state="on"] [data-when~="on"],
.fk-push[data-state="denied"] [data-when~="denied"],
.fk-push[data-state="ios-install"] [data-when~="ios-install"],
.fk-push[data-state="error"] [data-when~="error"] { display: revert; }

/* ===== أساسيات الهاتف ===== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media (max-width: 768px) {
    /* أهداف اللمس: زر القائمة والأزرار الأيقونية في الشريط العلوي لا تقل عن 44px */
    .mobile-menu-btn, .nav-btn--icon {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ===== الهاتف (≤768px): شريط علوي ثابت في الحالتين؛ شريط التبويبات السفلي (Views/Shared/_MobileTabBar.cshtml) في التطبيق المثبّت فقط
   (html.fk-standalone من _Layout) — في متصفح الهاتف شريط المتصفح نفسه أسفل الشاشة فيتكرر الشريطان ===== */
.fk-tabbar { display: none; }
@media (max-width: 768px) {
    body { -webkit-tap-highlight-color: transparent; }
    /* يبقى الشريط العلوي ظاهرًا أثناء التمرير: الالتصاق على <header> لأن .top-banner يملأ الهيدر كله فلا مجال له ليلتصق */
    html .navbar-header {
        position: sticky;
        top: 0;
        z-index: 1030;
    }
    /* مساحة أسفل الصفحة حتى لا يغطي الشريط آخر المحتوى (على آخر صف في التذييل، لأن _Layout يفرض padding-bottom:0 !important على body والتذييل) */
    .fk-standalone .custom-footer .footer-bottom { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }

    .fk-standalone .fk-tabbar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1040;
        display: flex;
        align-items: stretch;
        height: calc(62px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
        border-top: 1px solid var(--fk-green-soft);
        box-shadow: 0 -6px 20px rgba(13, 41, 16, .08);
        font-family: "Cairo", sans-serif;
    }
    .fk-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #6b7280;
        text-decoration: none;
        font-size: .72rem;
        font-weight: 600;
        min-width: 0;
    }
    .fk-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .fk-tab i { font-size: 1.35rem; line-height: 1; }
    .fk-tab .fk-tab__ic--on { display: none; }
    .fk-tab.is-active { color: var(--fk-green); }
    .fk-tab.is-active .fk-tab__ic { display: none; }
    .fk-tab.is-active .fk-tab__ic--on { display: inline; }
    .fk-tab:hover, .fk-tab:focus-visible { color: var(--fk-green); }
}

/* ===== الشريط العلوي على الهاتف. في التطبيق المثبّت: زر القائمة + الشعار في المنتصف + (الجرس والحساب للمسجّلين)،
   وأزرار الدخول ومبدّل اللغة داخل القائمة (.fk-app-only). في متصفح الهاتف تبقى في الشريط العلوي كالموقع ===== */
.menu-mobile-extra { display: none; }
html:not(.fk-standalone) .fk-app-only { display: none !important; }
@media (max-width: 768px) {
    .fk-standalone .top-banner .auth-guest { display: none !important; }
    /* شريط واحد بلا التفاف: زرّا الدخول والعلم بجانب الشعار حتى على شاشة 360px بالعربية */
    html .top-banner { flex-wrap: nowrap; gap: 6px; padding-inline: 10px; }
    html .top-banner .auth-section { gap: 4px !important; }
    html .top-banner .auth-guest .nav-btn { padding: 8px 10px; font-size: 12.5px; }
    html .top-banner .lang-switch .nav-btn--icon { min-width: 38px; width: 38px; }
    html:not(.fk-standalone) .top-banner .logo { margin: 0 !important; min-width: 0; }
    html.fk-standalone .top-banner .logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
    }
    .menu-mobile-extra {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 6px;
    }
    /* حجم موحّد لكل عناصر القائمة على الهاتف (site.css يصغّرها إلى 13px) */
    html .nav-content .menu-items > a,
    html .nav-content .menu-mobile-extra > a {
        font-size: 15px;
        font-weight: 700;
        padding: 14px 0;
        width: 100%;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        border-radius: 0;
    }
    /* "نشاطاتنا" و"الفرص" أزرار قوائم منسدلة لا روابط: نفس الحجم */
    html .nav-content .menu-items > .custom-dropdown > .nav-btn {
        font-size: 15px;
        font-weight: 700;
    }
    html .nav-content .menu-mobile-extra > .menu-mobile-cta {
        background: var(--fk-orange);
        color: #fff;
        border-bottom: 0;
        margin: 10px 24px 4px;
        width: auto;
        border-radius: 12px;
    }
}