:root {
    --mf-bg: #0c0c0d;
    --mf-bg-2: #0c0c0d;
    --mf-orange: #e6231e;
    --mf-orange-light: #ff5a4d;
    --mf-text: #f2f2f2;
    --mf-text-secondary: #a8a8ab;
    /* الكتابة فوق متغيرات Bootstrap نفسها لضمان تطبيق الخط على body والعناوين والأزرار وكل العناصر،
       لأن Bootstrap يحدد الخط بشكل صريح على body عبر هذا المتغير، والاعتماد على وراثة html وحدها لا يكفي */
    --bs-body-font-family: 'Cairo', sans-serif;
    --bs-font-sans-serif: 'Cairo', sans-serif;
    /* استبدال لون Bootstrap الأصفر الافتراضي (warning) بالأحمر، ليتأثر به text-warning / bg-warning / border-warning تلقائياً */
    --bs-warning: var(--mf-orange);
    --bs-warning-rgb: 230, 35, 30;
    --bs-secondary-rgb: 168, 168, 171;
}



/* أزرار btn-warning و btn-outline-warning تحدد ألوانها الداخلية بشكل منفصل عن المتغير أعلاه،
   لذلك نكتب فوقها مباشرة لتصبح حمراء بدل الأصفر الافتراضي */
.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mf-orange);
    --bs-btn-border-color: var(--mf-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mf-orange-light);
    --bs-btn-hover-border-color: var(--mf-orange-light);
    --bs-btn-focus-shadow-rgb: 230, 35, 30;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mf-orange-light);
    --bs-btn-active-border-color: var(--mf-orange-light);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--mf-orange);
    --bs-btn-disabled-border-color: var(--mf-orange);
}

.btn-outline-warning {
    --bs-btn-color: var(--mf-orange);
    --bs-btn-border-color: var(--mf-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mf-orange);
    --bs-btn-hover-border-color: var(--mf-orange);
    --bs-btn-focus-shadow-rgb: 230, 35, 30;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mf-orange);
    --bs-btn-active-border-color: var(--mf-orange);
    --bs-btn-disabled-color: var(--mf-orange);
    --bs-btn-disabled-border-color: var(--mf-orange);
}

html[lang="ar"], html[lang="ar-SA"],
html[lang="en"], html[lang="en-US"],
body {
    font-family: 'Cairo', sans-serif;
}

body {
    background-color: var(--mf-bg);
    color: var(--mf-text);
}

a { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-weight: 800; }

.bg-dark-2 { background-color: var(--mf-bg-2); }

/* ---------- Navbar ---------- */
.mf-navbar {
    background-color: #0c0c0d
    /* border-bottom: 2px solid var(--mf-orange);*/
}
.mf-logo {
    width: 90px;
    height: 90px;
    object-fit: cover;
   /* border-radius: 50%;
    border: 2px solid var(--mf-orange);*/
}
.mf-logo-lg {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--mf-orange);
}
.navbar-brand span {
    color: #FFFFFF;
}
.mf-navbar .nav-link {
    color: var(--mf-text);
    font-weight: 600;
    transition: color .2s ease;
}
.mf-navbar .nav-link:hover,
.mf-navbar .nav-link.active {
    color: var(--mf-orange);
}
.lang-switch .btn { font-weight: 700; min-width: 46px; }

/* مسافة ثابتة بين الشعار والقائمة (بدل auto) - غيّر الرقم حسب المسافة المطلوبة */
.nav-offset {
    margin-inline-start: 60px;
}

/* ---------- Hero ---------- */
.hero-section {
    background-size: cover !important; /* تضمن إجبار الصورة على ملء المساحة بالكامل */
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-content {
    max-width: 620px;
    text-align: start;
}
.hero-title {
    font-size: 3.2rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 4px 18px rgba(0,0,0,.6);
    letter-spacing: 1px;
}
.hero-subtitle {
    font-size: 1.15rem;
    color: #d8d8d8;
    margin-top: .75rem;
}
.hero-find-link {
    color: #d8d8d8;
    font-size: .95rem;
    transition: color .2s ease;
}
.hero-find-link:hover {
    color: var(--mf-orange);
}

/* ---------- Page header (inner pages) ---------- */
/* عنوان الصفحة الداخلية: يظهر فوق المحتوى مباشرة بنفس خلفية الصفحة، بدون شريط منفصل */
.page-title {
    font-size: 2.7rem;
    font-weight: 900;
    color: #fff;
    text-align: start;
    margin-bottom: 2.5rem;       
}
.page-title .subtitle {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: var(--mf-text-secondary);
    margin-top: .5rem;
}

.section-title {
    font-size: 2rem;
    position: relative;
    display: inline-block;
    margin-bottom: 1.2rem;
}

    /* ---------- Red Line ---------- */
.section-title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    inset-inline-start: 0;
    width: 60px;
    height: 1px;
    background: var(--mf-orange);
    border-radius: 4px;
}

/* ---------- Features ---------- */
.feature-card {
    background: var(--mf-bg);
    border: 1px solid #2a2a2c;
    border-radius: 16px;
    padding: 2rem 1.2rem;
    height: 100%;
    transition: transform .25s ease, border-color .25s ease;
}
.feature-card:hover {
    transform: translateY(-6px);
    border-color: var(--mf-orange);
}
.feature-icon { font-size: 2.6rem; color: var(--mf-orange); }

/* ---------- Gallery ---------- */
.gallery-thumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform .3s ease, filter .3s ease;
    cursor: pointer;
}
.gallery-thumb:hover {
    transform: scale(1.04);
    filter: brightness(1.1);
}

/* ---------- Plans ---------- */
.plan-card {
    background: var(--mf-bg-2);
    border: 1px solid #2a2a2c;
    border-radius: 18px;
    padding: 2rem 1.5rem;
    height: 100%;
    position: relative;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.plan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(230,35,30,.15);
}
.plan-featured {
    border: 2px solid var(--mf-orange);
    background: linear-gradient(180deg, #200b0a, var(--mf-bg-2) 40%);
}
.plan-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mf-orange);
    color: #000;
    font-weight: 800;
    font-size: .75rem;
    padding: 4px 14px;
    border-radius: 20px;
}
.plan-name { color: var(--mf-orange-light); font-size: 1.4rem; margin-bottom: .5rem; }
.plan-price { margin-bottom: 1.2rem; }
.plan-price .amount { font-size: 2.6rem; font-weight: 900; color: #fff; }
.plan-price .currency { font-size: 1rem; color: var(--mf-text-secondary); }
.plan-price .duration {display: block; font-size: .85rem; color: var(--mf-orange-light); }
.plan-features { text-align: start; margin: 0 auto 1.5rem; max-width: 260px; }
.plan-features li { padding: .35rem 0; color: var(--mf-text-secondary); }
.plan-features li i { color: var(--mf-orange); margin-inline-end: 8px; }

/* ---------- Footer ---------- */
.mf-footer {
    background-color: #000;
    border-top: 2px solid var(--mf-orange);
}
.footer-title { color: var(--mf-orange); font-size: 1.1rem; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: var(--mf-text-secondary); }
.footer-links a:hover { color: var(--mf-orange); }
.social-icon { color: var(--mf-text); transition: color .2s ease; }
.social-icon:hover { color: var(--mf-orange); }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    background: #25D366;
    color: #fff;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
    z-index: 1000;
    transition: transform .2s ease;
}
.whatsapp-float:hover {
    transform: scale(1.08);
    color: #fff;
}

/* ---------- Login page ---------- */
.login-body {
    background: radial-gradient(circle at top, #1a1a1a, #000);
    min-height: 100vh;
}
.login-card {
    background: var(--mf-bg-2);
    border: 1px solid #2a2a2c;
    border-radius: 18px;
    padding: 2.2rem;
    width: 100%;
    max-width: 380px;
}
.login-card .form-control {
    background: #0c0c0d;
    color: #fff;
    border-color: #2a2a2c;
}
.login-card .form-control:focus {
    border-color: var(--mf-orange);
    box-shadow: 0 0 0 .2rem rgba(230,35,30,.2);
}

/* Generic form styling on dark theme (used across site + admin) */
.form-control, .form-select, textarea.form-control {
    background: #101011;
    color: #fff;
    border-color: #2a2a2c;
}
.form-control:focus, .form-select:focus {
    background: #101011;
    color: #fff;
    border-color: var(--mf-orange);
    box-shadow: 0 0 0 .2rem rgba(230,35,30,.2);
}
label.form-label { color: var(--mf-text-secondary); font-weight: 600; }


/* ---------- تأثير الدخول التدريجي لمحتوى الهيرو ---------- */
@keyframes mfFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title,
.hero-subtitle,
.hero-content .d-flex,
.hero-find-link {
    opacity: 0;
    animation: mfFadeUp .7s ease forwards;
}

.hero-title {
    animation-delay: .1s;
}

.hero-subtitle {
    animation-delay: .3s;
}

.hero-content .d-flex {
    animation-delay: .5s;
}

.hero-find-link {
    animation-delay: .7s;
}

.page-title {
    opacity: 0;
    animation: mfFadeUp .7s ease forwards;
    animation-delay: .1s;
}

/* زر تبديل اللغة الموحد (شكل بيضاوي مع أيقونة كرة أرضية) */
.lang-toggle-btn {
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50px;
    padding: 6px 18px;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    background: transparent;
    transition: border-color .2s ease, color .2s ease;
}

    .lang-toggle-btn:hover {
        border-color: var(--mf-orange);
        color: var(--mf-orange);
    }

    .lang-toggle-btn i {
        font-size: 1.05rem;
    }

/* خلفية ثابتة (Parallax) لصفحة عن النادي بالكامل + ارتفاع أكبر */
.about-bg {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* منع أي انزياح أفقي أو تجاوز للمحتوى خارج حدود الشاشة */
html, body {
    overflow-x: hidden;
}

.page-title {
    max-width: 100%;
    overflow-wrap: break-word;
}

.club-features {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 55px 40px;
    margin: 70px 0;
}

.facility {
    text-align: center;
    transition: .35s;
    cursor: pointer;
}

    .facility img {
        width: 78px;
        height: 78px;
        transition: .35s;
        filter: brightness(0) invert(1);
    }

    .facility span {
        display: block;
        color: #fff;
        margin-top: 18px;
        font-size: 20px;
        font-weight: 500;
    }

    .facility:hover {
        transform: translateY(-8px);
    }

        .facility:hover img {
            filter: brightness(0) saturate(100%) invert(14%) sepia(94%) saturate(7348%) hue-rotate(353deg) brightness(95%) contrast(112%);
            transform: scale(1.12);
        }

        .facility:hover span {
            color: #e30613;
        }

@media(max-width:992px) {

    .club-features {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:576px) {

    .club-features {
        grid-template-columns: 1fr;
    }
}


/** اثسام النادي */



.club-sections {
    margin: 70px 0;
}

.club-section {
    background: rgba(35, 35, 35, 0.7);
    margin-bottom: 45px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    max-height: 300px;
    max-width: 1000px;
}

.section-content {
    padding: 60px;
}

    .section-content h3 {
        color: #e6231e;
        margin-bottom: 25px;
        font-weight: 700;
    }
/** خط تعريف التمرين **/
.section-content p {
    color: #d5d5d5;
    line-height: 2;
    font-size: 18px;
}

.section-image {
    overflow: hidden;
    height: 100%;
}

    .section-image img {
        width: 90%;
        height: 90%;
        min-height: 90px;
        object-fit: cover;
        transition: .5s;
    }

.club-section:hover img {
    transform: scale(1.08);
}

@media(max-width:991px) {

    .section-content {
        padding: 35px;
    }

    .section-image img {
        min-height: 280px;
    }

    .section-header {
        font-size: 20px;
    }
}

/* التنسيقات العامة المشتركة */
.about-hours-text {
    font-size: 25px !important;
    font-weight: bold;
    display: block;
    width: 100%;
}

.hours-value-text {
    display: block;
    width: 100%;
    font-size: 1.15rem;
    color: #fff !important;
    
}

/* التنسيق والتوجيه عند تحول الصفحة للغة العربية */
.lang-ar {
    direction: rtl !important;
}

    .lang-ar .hours-text-group {
        text-align: right !important;
    }

/* التنسيق والتوجيه عند تحول الصفحة للغة الإنجليزية (الشمال) */
.lang-en {
    direction: ltr !important;
}

    .lang-en .hours-text-group {
        text-align: left !important;
    }