/**
 * Kleeja team
 * 2017
 */

.btn-primary{
    background-color: #1b1e21;
    border-color: #1b1e21;
}

.btn-outline-primary{
    border-color: #1b1e21;
    color: #1b1e21 !important;
}
.btn-outline-primary span{
    color: #1b1e21 !important;
}

/* === Global Font: Tajawal === */
html, body,
h1, h2, h3, h4, h5, h6,
p, span, div,
a, li, ul,
button, input, textarea, select,
.navbar, .nav, .dropdown-menu,
.btn, .form-control {
    font-family: 'Tajawal', Arial, sans-serif !important;
}

/* === Base font === */
html {
    font-size: 16px; /* الأساس */
}

body {
    font-family: 'Tajawal', Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.8;
    color: #222;
}

/* === Headings === */
h1 {
    font-size: 32px;
    font-weight: 700;
}

h2 {
    font-size: 26px;
    font-weight: 700;
}

h3 {
    font-size: 22px;
    font-weight: 600;
}

h4 {
    font-size: 18px;
    font-weight: 600;
}

h5 {
    font-size: 16px;
    font-weight: 500;
}

h6 {
    font-size: 14px;
    font-weight: 500;
}

/* === Paragraphs & text === */
p, span, div {
    font-size: 16px;
}

/* === Links === */
a {
    font-size: 15px;
    text-decoration: none;
}

/* === Navbar & Menus === */
.navbar a,
.navbar-nav > li > a {
    font-size: 15px;
    font-weight: 500;
}

/* === Buttons === */
.btn {
    font-size: 15px;
    font-weight: 500;
}

/* === Forms === */
input,
select,
textarea {
    font-size: 15px;
}

/* === Small text === */
.small,
small {
    font-size: 13px;
}

/* === Tables === */
table {
    font-size: 15px;
}

/* === Remove Bootstrap blue hover color === */

/* Links */
a:hover,
a:focus {
    color: #fff !important;        /* غيّر اللون هنا */
    text-decoration: none;
}

/* Buttons */
.btn:hover,
.btn:focus {
    color: #fff !important;
    box-shadow: none !important;
}

/* Font Awesome icons */
.fa:hover,
.fa:focus {
    color: #fff !important;
}

/* SVG icons */
svg:hover,
svg:focus {
    fill: #fff !important;
}

/* Remove blue outline */
a:focus,
button:focus,
.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* === Fix blue hover on outline buttons === */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;
    background-color: #1b1e21 !important; /* نفس لونك */
    border-color: #1b1e21 !important;
    box-shadow: none !important;
}

/* أيقونة داخل الزر */
.btn-outline-primary:hover i,
.btn-outline-primary:focus i,
.btn-outline-primary:hover svg,
.btn-outline-primary:focus svg {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}

/* إزالة التأثير الأزرق عند الضغط */
.btn-outline-primary:focus-visible {
    outline: none !important;
}

/* === Force hover colors for file buttons/icons (prevent Bootstrap blue) === */

/* أي زر/رابط داخل بطاقات الملفات (عام) */
.file-user-file a:hover,
.file-user-file a:focus,
.file-user-file a:active,
.file-user-image a:hover,
.file-user-image a:focus,
.file-user-image a:active,
.card a.btn:hover,
.card a.btn:focus,
.card a.btn:active {
  color: #fff !important;
  background-color: #1b1e21 !important;
  border-color: #1b1e21 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* الأيقونات داخل الأزرار: FontAwesome / SVG / أي عنصر */
.file-user-file a:hover i,
.file-user-file a:focus i,
.file-user-image a:hover i,
.file-user-image a:focus i,
.card a.btn:hover i,
.card a.btn:focus i {
  color: #fff !important;
}

/* SVG icons (بعضها يستخدم stroke وليس fill) */
.file-user-file a:hover svg,
.file-user-file a:focus svg,
.file-user-image a:hover svg,
.file-user-image a:focus svg,
.card a.btn:hover svg,
.card a.btn:focus svg {
  fill: #fff !important;
  stroke: #fff !important;
}

/* إذا كان Bootstrap يفرض text-primary/link-primary */
.file-user-file a:hover .text-primary,
.file-user-file a:focus .text-primary,
.file-user-image a:hover .text-primary,
.file-user-image a:focus .text-primary,
.file-user-file a:hover .link-primary,
.file-user-file a:focus .link-primary,
.file-user-image a:hover .link-primary,
.file-user-image a:focus .link-primary {
  color: #fff !important;
}

/* === Fix hover color for PNG icons inside buttons === */

/* الزر نفسه */
.file-button-browse:hover,
.file-button-browse:focus {
    background-color: #1b1e21 !important;
    border-color: #1b1e21 !important;
}

/* الصورة داخل الزر */
.file-button-browse:hover img,
.file-button-browse:focus img {
    filter: brightness(0) invert(1);
}

/* === Fix hover color for upload title/tab === */

/* عنوان رفع الملفات */
.panel-title a:hover,
.panel-title a:focus,
.card-header a:hover,
.card-header a:focus,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    color: #1b1e21 !important;   /* لون النص */
    background-color: transparent !important;
    text-decoration: none !important;
}


/* === Guide page column titles colors === */

/* كل عمود */
.guide-page .card,
.guide-page .box,
.guide-page .panel {
    border-radius: 8px;
}

/* العمود الأول: الأعضاء */
.guide-page .col-md-4:nth-child(1) h3,
.guide-page .col-md-4:nth-child(1) h4 {
    background-color: #0d6efd; /* أزرق */
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

/* العمود الثاني: الزوار */
.guide-page .col-md-4:nth-child(2) h3,
.guide-page .col-md-4:nth-child(2) h4 {
    background-color: #198754; /* أخضر */
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

/* العمود الثالث: المسؤولين */
.guide-page .col-md-4:nth-child(3) h3,
.guide-page .col-md-4:nth-child(3) h4 {
    background-color: #dc3545; /* أحمر */
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

/* ===== Guide Page: Allowed Files Styling ===== */

/* تنسيق عام للعناوين */
.guide-page .card-header {
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    border-radius: 6px 6px 0 0;
}

/* العمود الأول: المسؤولين (أحمر) */
.guide-page .row > div:nth-child(1) .card-header {
    background-color: #dc3545; /* أحمر */
}

/* العمود الثاني: الزوار (أخضر) */
.guide-page .row > div:nth-child(2) .card-header {
    background-color: #198754; /* أخضر */
}

/* العمود الثالث: الأعضاء (أزرق) */
.guide-page .row > div:nth-child(3) .card-header {
    background-color: #0d6efd; /* أزرق */
}
/* ===== Guide Page: Allowed Files Styling (no body class needed) ===== */

/* العناوين بشكل عام */
body a[href*="guide"],
body .row .card-header {
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    border-radius: 6px 6px 0 0;
}

/* العمود الأول: المسؤولين */
.row > div:nth-child(1) .card-header {
    background-color: #dc3545; /* أحمر */
}

/* العمود الثاني: الزوار */
.row > div:nth-child(2) .card-header {
    background-color: #198754; /* أخضر */
}

/* العمود الثالث: الأعضاء */
.row > div:nth-child(3) .card-header {
    background-color: #0d6efd; /* أزرق */
}
/* تصغير حجم خط العنصر النشط في القائمة */
.navbar .active > a,
.navbar-nav > .active > a,
.navbar-nav > li > a {
    font-size: 15px !important;
    font-weight: 500 !important;
}
/* ===== Fix hover color for top user menu links ===== */

/* الروابط العلوية (حساب المستخدم) */
.top-bar a:hover,
.top-bar a:focus,
.header-user a:hover,
.header-user a:focus {
    color: #1b1e21 !important;   /* نفس لون النص الأساسي */
    background-color: transparent !important;
    text-decoration: none !important;
}
header a:hover,
header a:focus {
    color: #1b1e21 !important;
}
/* === Fix navbar toggler (mobile menu) hover color === */

/* زر القائمة */
.navbar-toggler {
    border-color: rgba(0,0,0,0.2) !important;
}

/* الأيقونة نفسها */
.navbar-toggler-icon {
    background-image: none !important;
}

/* إنشاء أيقونة مخصصة */
.navbar-toggler::before {
    content: "☰";
    font-size: 22px;
    color: #1b1e21;
}

/* عند المرور بالماوس */
.navbar-toggler:hover::before,
.navbar-toggler:focus::before {
    color: #1b1e21 !important;
}

/* إزالة التأثير الأزرق */
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
}
/* ===== Fix navbar links hover color (desktop + mobile) ===== */

/* جميع روابط القائمة */
.navbar a {
    color: #1b1e21 !important;
}

/* عند المرور بالماوس */
.navbar a:hover,
.navbar a:focus,
.navbar a:active {
    color: #1b1e21 !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* العنصر النشط */
.navbar .active > a,
.navbar-nav .active > a {
    color: #1b1e21 !important;
}
/* ===== Dark header navbar: readable links + no white-on-white hover ===== */

/* الروابط في الهيدر الداكن */
.navbar,
.navbar a,
.navbar .nav-link {
  color: rgba(255,255,255,0.9) !important;
}

/* عند المرور/التركيز: لا تغيّر الخلفية، فقط اجعلها أوضح */
.navbar a:hover,
.navbar a:focus,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #ffffff !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

/* العنصر النشط */
.navbar .active > a,
.navbar-nav .active > a,
.navbar .active > .nav-link,
.navbar-nav .active > .nav-link {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* إزالة ظل/إطار التركيز الأزرق */
.navbar a:focus,
.navbar button:focus,
.navbar .btn:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* ===== Dark main navbar ===== */
.navbar-dark a,
.navbar-dark .nav-link {
    color: #ffffff !important;
}

.navbar-dark a:hover,
.navbar-dark a:focus {
    color: #ffffff !important;
    background-color: transparent !important;
}
/* ===== Auth links (login / register) ===== */
.auth-links a,
.user-links a,
.top-links a {
    color: #1b1e21 !important; /* لون داكن */
}

.auth-links a:hover,
.user-links a:hover,
.top-links a:hover {
    color: #000 !important;
    background-color: transparent !important;
}
/* Fix login/register links visibility */
a[href*="login"],
a[href*="register"] {
    color: #1b1e21 !important;
}

a[href*="login"]:hover,
a[href*="register"]:hover {
    color: #000 !important;
}
/* ===== Light navbar (login/register) - keep links dark ===== */
.navbar.bg-light.navbar-light .nav-link {
  color: #1b1e21 !important;
}

.navbar.bg-light.navbar-light .nav-link:hover,
.navbar.bg-light.navbar-light .nav-link:focus {
  color: #000 !important;
  background-color: transparent !important;
  text-decoration: none !important;
}
/* ===== Footer links color fix ===== */

/* لون الروابط في الفوتر */
footer a,
.footer a {
    color: #1b1e21 !important;   /* لون داكن */
    text-decoration: none;
}

/* عند المرور بالماوس */
footer a:hover,
footer a:focus,
.footer a:hover,
.footer a:focus {
    color: #000 !important;      /* داكن أوضح */
    background-color: transparent !important;
    text-decoration: underline; /* اختياري */
}
/* ===== Terms link under upload button ===== */

/* الرابط نفسه */
a[href*="rules"],
a[href*="terms"] {
    color: #0d6efd !important;     /* أزرق واضح */
    font-weight: 500;
    text-decoration: none;
}

/* عند المرور بالماوس */
a[href*="rules"]:hover,
a[href*="terms"]:hover {
    color: #0a58ca !important;     /* أزرق أغمق */
    font-weight: 700 !important;   /* خط عريض */
    text-decoration: underline;    /* اختياري */
}