/**
 * ==============================================================================
 * JA Resume Unified Arabic & Visual Identity Stylesheet (MNTools Design System)
 * ==============================================================================
 * موحد الهوية البصرية لقالب JA Resume لمطابقة مشغل أدوات م ن (MNTools)
 * - خطوط عربية فاخرة: Cairo للعناوين والشعار والأزرار + Tajawal للنصوص والمقالات
 * - لوحة الألوان الرسمية: الأزرق الملكي (#1e40af / #2563eb) والذهبي الكهرماني (#d97706)
 * - تحسينات RTL الشاملة للهيدر والميجا مينو والبطاقات والجداول والنماذج
 * ==============================================================================
 */

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800&display=swap");

/* -------------------------------------------------------------------------- */
/* 1. Design Tokens & CSS Variables                                           */
/* -------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --mn-primary: #1e40af;
  --mn-primary-hover: #1d4ed8;
  --mn-primary-light: #2563eb;
  --mn-primary-dark: #1e3a8a;
  --mn-primary-bg: #eff6ff;
  --mn-primary-border: #bfdbfe;

  /* Accent Colors */
  --mn-gold: #d97706;
  --mn-gold-light: #f59e0b;
  --mn-gold-bg: #fffbeb;
  --mn-yellow-accent: #fffe65;

  /* Neutrals & Surfaces */
  --mn-bg-deep: #f1f5f9;
  --mn-bg-base: #f8fafc;
  --mn-bg-surface: #ffffff;
  --mn-bg-card-hover: #f8fafc;
  --mn-border-color: #e2e8f0;
  --mn-border-hover: #cbd5e1;
  --mn-border-subtle: #f1f5f9;

  /* Text System */
  --mn-text-main: #0f172a;
  --mn-text-sub: #334155;
  --mn-text-muted: #64748b;
  --mn-text-light: #94a3b8;

  /* Physics Subject Colors */
  --mn-physics-mechanics: #ea580c;
  --mn-physics-waves: #0284c7;
  --mn-physics-thermal: #059669;
  --mn-physics-modern: #7c3aed;

  /* Typography */
  --mn-font-heading: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mn-font-body: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Geometry & Shadows */
  --mn-radius-sm: 8px;
  --mn-radius-md: 12px;
  --mn-radius-lg: 16px;
  --mn-radius-full: 9999px;

  --mn-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --mn-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --mn-shadow-lg: 0 10px 15px -3px rgba(30, 64, 175, 0.08), 0 4px 6px -4px rgba(30, 64, 175, 0.03);
  --mn-shadow-hover: 0 12px 20px -3px rgba(30, 64, 175, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

  --mn-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------- */
/* 2. Global Arabic Typography & Scaffolding                                 */
/* -------------------------------------------------------------------------- */
html,
body {
  direction: rtl !important;
  text-align: right !important;
  font-family: var(--mn-font-body) !important;
  color: var(--mn-text-main) !important;
  background-color: var(--mn-bg-base) !important;
  line-height: 1.75 !important;
  font-size: 16px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings with Cairo */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-header h1, .page-header h2,
.article-title,
.section-title,
.category-title {
  font-family: var(--mn-font-heading) !important;
  font-weight: 800 !important;
  color: var(--mn-text-main) !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
}

h1, .h1 { font-size: 1.85rem !important; margin-bottom: 1.2rem; }
h2, .h2 { font-size: 1.55rem !important; margin-bottom: 1rem; }
h3, .h3 { font-size: 1.3rem !important; margin-bottom: 0.8rem; }
h4, .h4 { font-size: 1.15rem !important; }
h5, .h5 { font-size: 1.05rem !important; }
h6, .h6 { font-size: 0.95rem !important; }

p, .lead {
  font-family: var(--mn-font-body) !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  color: var(--mn-text-sub);
}

p strong, span strong, div strong {
  font-family: var(--mn-font-heading) !important;
  font-weight: 700 !important;
  color: var(--mn-text-main);
}

/* Links */
a {
  color: var(--mn-primary);
  text-decoration: none;
  transition: var(--mn-transition);
}

a:hover, a:focus {
  color: var(--mn-primary-light);
  text-decoration: none;
}

/* Ensure sticky positioning works and horizontal overflow doesn't cause sideways scroll */
html, body {
  overflow-x: clip !important;
}

.t3-wrapper {
  overflow: visible !important;
}

/* -------------------------------------------------------------------------- */
/* 3. Floating Sticky Header & Megamenu (RTL & Glassmorphism)                */
/* -------------------------------------------------------------------------- */
.t3-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1040 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1.5px solid var(--mn-border-color) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.08) !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
  transition: all 0.25s ease !important;
}

.t3-header.ja-affix-top {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.12) !important;
}

.t3-header .t3-mainnav,
#t3-mainnav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* RTL Header Layout */
[dir="rtl"] .t3-header .logo {
  float: right !important;
  text-align: right !important;
}

[dir="rtl"] .t3-mainnav.pull-right,
[dir="rtl"] .navbar.pull-right {
  float: left !important;
}

[dir="rtl"] .navbar-nav {
  float: left !important;
  margin: 0 !important;
}

[dir="rtl"] .navbar-nav > li {
  float: right !important;
}

/* Logo (Original Circular Shape Restored) */
.logo a,
.logo-text a {
  font-family: var(--mn-font-heading) !important;
  font-weight: 700 !important;
  text-decoration: none;
}

.logo-text a span {
  font-family: var(--mn-font-heading) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.site-slogan {
  font-family: var(--mn-font-heading) !important;
  font-size: 0.85rem !important;
  color: var(--mn-gold) !important;
  font-weight: 700;
}

/* When scrolling (ja-affix-top): reduce font size of "م ن" so they appear side-by-side */
.t3-header.ja-affix-top .logo-text a span,
.t3-header.ja-affix-top .logo-text a {
  font-size: 12px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Navigation items */
.navbar-default .navbar-nav > li > a {
  font-family: var(--mn-font-heading) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--mn-text-sub) !important;
  padding: 24px 14px !important;
  border-radius: var(--mn-radius-sm);
  transition: var(--mn-transition);
}

.t3-header.ja-affix-top .navbar-default .navbar-nav > li > a {
  padding: 12px 14px !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a {
  color: var(--mn-primary) !important;
  background: var(--mn-primary-bg) !important;
}

/* RTL Megamenu Dropdown */
.t3-megamenu .dropdown-menu {
  direction: rtl !important;
  text-align: right !important;
  border: 1px solid var(--mn-border-color) !important;
  border-radius: var(--mn-radius-md) !important;
  box-shadow: var(--mn-shadow-lg) !important;
  background: #ffffff !important;
  padding: 8px !important;
}

.t3-megamenu .dropdown-menu > li > a,
.t3-megamenu .mega-nav > li > a {
  font-family: var(--mn-font-heading) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  color: var(--mn-text-sub) !important;
  border-radius: var(--mn-radius-sm);
  transition: var(--mn-transition);
}

.t3-megamenu .dropdown-menu > li > a:hover,
.t3-megamenu .dropdown-menu > li > a:focus,
.t3-megamenu .mega-nav > li > a:hover,
.t3-megamenu .mega-nav > li > a:focus {
  background: var(--mn-primary-bg) !important;
  color: var(--mn-primary) !important;
  transform: translateX(-4px);
}

/* Submenu Flyouts in RTL: cascade to the LEFT */
.dropdown-submenu {
  position: relative;
}

[dir="rtl"] .dropdown-submenu > .dropdown-menu {
  top: 0;
  right: 100% !important;
  left: auto !important;
  margin-top: -6px;
  margin-right: -1px;
}

/* Dropdown Caret Icon in RTL */
[dir="rtl"] .dropdown-submenu > a:after {
  content: "\f104" !important; /* FontAwesome left chevron in RTL */
  font-family: "FontAwesome" !important;
  float: left !important;
  margin-top: 2px;
  color: var(--mn-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Main Body & Layout Spacing (Eliminate Header-Content Gap)                  */
/* -------------------------------------------------------------------------- */
.t3-mainbody,
.t3-masthead,
.t3-features-intro {
  padding-top: 20px !important;
  padding-bottom: 24px !important;
}

@media screen and (max-width: 767px) {
  .t3-mainbody,
  .t3-masthead,
  .t3-features-intro {
    padding-top: 14px !important;
  }
}

.t3-content {
  padding-top: 0 !important;
}

/* Homepage First Section Gap Fix (Neutralize inline 80px padding) */
.item-page .js-section-forcefullwidth:first-child .js-section-content,
.t3-content > .inner > .item-page article section .js-section-forcefullwidth:first-child .js-section-content {
  padding-top: 20px !important;
}

/* -------------------------------------------------------------------------- */
/* 4. Category Views & Article Tables (Modern Card Transformation)           */
/* -------------------------------------------------------------------------- */
.category,
.category-list,
.com-content-category {
  padding-top: 0 !important;
}

/* Remove default harsh borders from category table */
.category table.table-bordered {
  border: none !important;
}

.category table.table-bordered > thead > tr > th,
.category table.table-bordered > tbody > tr > th,
.category table.table-bordered > tfoot > tr > th,
.category table.table-bordered > thead > tr > td,
.category table.table-bordered > tbody > tr > td,
.category table.table-bordered > tfoot > tr > td {
  border: none !important;
}

.category table.category,
.table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover {
  background-color: transparent !important;
}

.category table.category {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  border: none !important;
}

/* Card Row effect */
.category table.category > tbody > tr {
  background: #ffffff !important;
  border: 1px solid var(--mn-border-color) !important;
  border-radius: var(--mn-radius-md) !important;
  box-shadow: var(--mn-shadow-sm) !important;
  transition: var(--mn-transition) !important;
}

.category table.category > tbody > tr:hover {
  background: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: var(--mn-shadow-md) !important;
  border-color: var(--mn-primary-border) !important;
}

.category table.category th {
  font-family: var(--mn-font-heading) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: var(--mn-primary-dark) !important;
  background: var(--mn-primary-bg) !important;
  border: none !important;
  padding: 14px 18px !important;
}

.category table.category th:first-child {
  border-top-right-radius: var(--mn-radius-md);
  border-bottom-right-radius: var(--mn-radius-md);
}

.category table.category th:last-child {
  border-top-left-radius: var(--mn-radius-md);
  border-bottom-left-radius: var(--mn-radius-md);
}

.category table.category td {
  padding: 16px 20px !important;
  font-family: var(--mn-font-body) !important;
  font-size: 1rem !important;
  color: var(--mn-text-main) !important;
  border: none !important;
  border-top: 1px solid var(--mn-border-color) !important;
  border-bottom: 1px solid var(--mn-border-color) !important;
  vertical-align: middle !important;
}

.category table.category tr td:first-child {
  border-right: 1px solid var(--mn-border-color) !important;
  border-top-right-radius: var(--mn-radius-md) !important;
  border-bottom-right-radius: var(--mn-radius-md) !important;
}

.category table.category tr td:last-child {
  border-left: 1px solid var(--mn-border-color) !important;
  border-top-left-radius: var(--mn-radius-md) !important;
  border-bottom-left-radius: var(--mn-radius-md) !important;
}

.category table.category td.list-title a {
  font-family: var(--mn-font-heading) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--mn-text-main) !important;
  display: block !important;
  transition: var(--mn-transition) !important;
}

.category table.category td.list-title a:hover {
  color: var(--mn-primary) !important;
  padding-right: 4px;
}

/* -------------------------------------------------------------------------- */
/* 5. Question & Answer Message Boxes                                         */
/* -------------------------------------------------------------------------- */
.ticket_message {
  background: #ffffff !important;
  border: 1px solid var(--mn-border-color) !important;
  border-radius: var(--mn-radius-md) !important;
  padding: 24px !important;
  margin-bottom: 22px !important;
  box-shadow: var(--mn-shadow-sm) !important;
  transition: var(--mn-transition) !important;
}

.ticket_message:hover {
  box-shadow: var(--mn-shadow-md) !important;
  border-color: var(--mn-primary-border) !important;
}

.message_user {
  font-family: var(--mn-font-heading) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--mn-primary) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px !important;
}

.message_user:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--mn-primary);
  border-radius: 2px;
}

.message_text {
  font-family: var(--mn-font-body) !important;
  font-size: 1.08rem !important;
  line-height: 1.85 !important;
  color: var(--mn-text-main) !important;
}

/* Membership Restriction Banner (.user_content) */
.user_content {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border: 1.5px solid var(--mn-primary-border) !important;
  border-radius: var(--mn-radius-md) !important;
  color: var(--mn-primary-dark) !important;
  font-family: var(--mn-font-heading) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 18px 24px !important;
  margin: 20px 0 !important;
  text-align: center !important;
  box-shadow: var(--mn-shadow-sm) !important;
}

.user_content a {
  color: var(--mn-gold) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
}

.user_content a:hover {
  color: var(--mn-gold-light) !important;
}

/* -------------------------------------------------------------------------- */
/* 6. Buttons & Interactive Controls                                          */
/* -------------------------------------------------------------------------- */
.btn,
.button,
.js-button-btn {
  font-family: var(--mn-font-heading) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 9px 22px !important;
  border-radius: var(--mn-radius-sm) !important;
  transition: var(--mn-transition) !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.btn:active {
  transform: scale(0.97) !important;
}

/* Primary Button (Gradient Royal Blue) */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
.button.btn-primary {
  background: linear-gradient(135deg, var(--mn-primary) 0%, var(--mn-primary-light) 100%) !important;
  border-color: var(--mn-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(30, 64, 175, 0.25) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.35) !important;
}

/* Secondary Button */
.btn-default,
.btn-secondary {
  background: var(--mn-bg-surface) !important;
  color: var(--mn-text-sub) !important;
  border-color: var(--mn-border-color) !important;
  box-shadow: var(--mn-shadow-sm) !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background: var(--mn-bg-base) !important;
  color: var(--mn-text-main) !important;
  border-color: var(--mn-border-hover) !important;
}

/* Form Controls */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  font-family: var(--mn-font-body) !important;
  border: 1.5px solid var(--mn-border-color) !important;
  border-radius: var(--mn-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 0.95rem !important;
  color: var(--mn-text-main) !important;
  background: #ffffff !important;
  transition: var(--mn-transition) !important;
  box-shadow: none !important;
}

.form-control:focus,
input[type="text"]:focus,
select:focus,
textarea:focus {
  border-color: var(--mn-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  outline: none !important;
}

/* -------------------------------------------------------------------------- */
/* 7. Breadcrumbs & Pagination                                               */
/* -------------------------------------------------------------------------- */
.breadcrumb {
  background: #ffffff !important;
  border: 1px solid var(--mn-border-color) !important;
  border-radius: var(--mn-radius-sm) !important;
  font-family: var(--mn-font-heading) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--mn-shadow-sm) !important;
}

.breadcrumb > li + li:before {
  content: "/" !important;
  padding: 0 8px !important;
  color: var(--mn-text-light) !important;
}

.breadcrumb > .active {
  color: var(--mn-text-muted) !important;
  font-weight: 700 !important;
}

.pagination > li > a,
.pagination > li > span {
  font-family: var(--mn-font-heading) !important;
  font-weight: 700 !important;
  color: var(--mn-primary) !important;
  border: 1px solid var(--mn-border-color) !important;
  border-radius: var(--mn-radius-sm) !important;
  margin: 0 3px !important;
  padding: 8px 14px !important;
  transition: var(--mn-transition) !important;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
  background: var(--mn-primary-bg) !important;
  border-color: var(--mn-primary-border) !important;
  color: var(--mn-primary-hover) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--mn-primary) !important;
  border-color: var(--mn-primary) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* 8. MathJax, LaTeX & Physics Formulas                                      */
/* -------------------------------------------------------------------------- */
.mjx-chtml,
.MathJax {
  direction: ltr !important;
  text-align: center !important;
  unicode-bidi: isolate !important;
  font-size: 110% !important;
  color: #1e293b !important;
}

/* -------------------------------------------------------------------------- */
/* 9. Footer Styling (Clean & Light)                                         */
/* -------------------------------------------------------------------------- */
.t3-footer {
  background: #f8fafc !important;
  background-image: none !important;
  color: #475569 !important;
  border-top: 1.5px solid var(--mn-border-color) !important;
  font-family: var(--mn-font-body) !important;
  padding: 32px 0 24px !important;
  position: relative !important;
  z-index: 10 !important;
}

.t3-footer a {
  color: var(--mn-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: var(--mn-transition) !important;
}

.t3-footer a:hover,
.t3-footer a:focus {
  color: var(--mn-primary-light) !important;
  text-decoration: underline !important;
}

.t3-footer p {
  color: #64748b !important;
  font-family: var(--mn-font-body) !important;
  margin-bottom: 6px !important;
}

.t3-footer table,
.t3-footer table td,
.t3-footer table th {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
}

.t3-copyright {
  border: none !important;
  border-top: none !important;
  background: transparent !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  font-size: 0.9rem !important;
  font-family: var(--mn-font-heading) !important;
  color: #64748b !important;
}

.back-to-top button {
  background: var(--mn-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--mn-radius-md) !important;
  box-shadow: var(--mn-shadow-md) !important;
  transition: var(--mn-transition) !important;
}

.back-to-top button:hover {
  background: var(--mn-primary-hover) !important;
  transform: translateY(-2px) !important;
}

/* --- FIX_ICON_FONTS_SAFEGUARD: إصلاح خط الأيقونات ومنع تكسرها بعد تسجيل الدخول --- */
@font-face {
  font-family: 'FontAwesome3';
  src: url('../fonts/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('../fonts/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
       url('../fonts/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.fa, [class^="fa-"], [class*=" fa-"] {
  font-family: 'FontAwesome', 'Font Awesome 6 Free', sans-serif !important;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.back-to-top .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #2d89ef !important;
  border-radius: 4px !important;
}

.back-to-top .btn i,
.back-to-top .btn .fa,
.back-to-top .btn .fa-angle-double-up {
  font-family: 'FontAwesome' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 24px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.back-to-top .btn i::before,
.back-to-top .btn .fa-angle-double-up::before {
  content: "\f102" !important;
  font-family: 'FontAwesome' !important;
}
/* --- END FIX_ICON_FONTS_SAFEGUARD --- */