html {
  background-color: rgb(242, 244, 251) ;
}
body{
  font-family: "Cairo", sans-serif !important;
  background-color: rgb(242, 244, 251) !important;
}
img, video { 
  max-width: 100%; 
  height: auto; 
  display: block; 
}
.row > [class^="col"] { 
  min-width: 0; 
}
.card-text, .card-title, a { 
overflow-wrap: anywhere; 
word-break: break-word; 
}
/* body { min-height: 100%; background-color: aqua;} */
html, body { overflow-x: clip; height: 100%;}
/* * { outline: 1px solid red; } */

/* إبقاء الزر شفاف دائماً وإخفاء السهم الصغير */
.btn-link.dropdown-toggle.no-caret::after { display: none; }

/* فتح القوائم بالتحويم على الشاشات الكبيرة فقط */
@media (hover: hover) and (pointer: fine) {
  .dropdown-hover:hover > .dropdown-menu {
    display: block;
  }
  /* مزامنة حالة aria-expanded بصرياً عند التحويم */
  .dropdown-hover:hover > .dropdown-toggle {
    color: var(--bs-primary);
  }
}

/* تأكيد شفافية الأزرار عبر الحالات */
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.show > .btn-link.dropdown-toggle {
  background-color: transparent !important;
  box-shadow: none !important;
  text-decoration: none;
}

/* ==========================================================
   Bootstrap Color Overrides
   Primary:   #FA9500 (orange)
   Secondary: #1D3B6E (dark navy blue)
   ========================================================== */

:root {
    /* --- Primary --- */
    --bs-primary: #FA9500;
    --bs-primary-rgb: 250, 149, 0;
    --bs-link-color: #FA9500;
    --bs-link-color-rgb: 250, 149, 0;
    --bs-link-hover-color: #c87700;
    --bs-link-hover-color-rgb: 200, 119, 0;

    /* --- Secondary --- */
    --bs-secondary: #1D3B6E;
    --bs-secondary-rgb: 29, 59, 110;
}

/* ---- Buttons: Primary ---- */
.btn-primary {
    --bs-btn-bg: #FA9500;
    --bs-btn-border-color: #FA9500;
    --bs-btn-hover-bg: #c87700;
    --bs-btn-hover-border-color: #c87700;
    --bs-btn-active-bg: #b56c00;
    --bs-btn-active-border-color: #b56c00;
    --bs-btn-disabled-bg: #FA9500;
    --bs-btn-disabled-border-color: #FA9500;
}

.btn-outline-primary {
    --bs-btn-color: #FA9500;
    --bs-btn-border-color: #FA9500;
    --bs-btn-hover-bg: #FA9500;
    --bs-btn-hover-border-color: #FA9500;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #FA9500;
    --bs-btn-active-border-color: #FA9500;
    --bs-btn-active-color: #fff;
}

/* ---- Buttons: Secondary ---- */
.btn-secondary {
    --bs-btn-bg: #1D3B6E;
    --bs-btn-border-color: #1D3B6E;
    --bs-btn-hover-bg: #162e58;
    --bs-btn-hover-border-color: #162e58;
    --bs-btn-active-bg: #112347;
    --bs-btn-active-border-color: #112347;
    --bs-btn-disabled-bg: #1D3B6E;
    --bs-btn-disabled-border-color: #1D3B6E;
}

.btn-outline-secondary {
    --bs-btn-color: #1D3B6E;
    --bs-btn-border-color: #1D3B6E;
    --bs-btn-hover-bg: #1D3B6E;
    --bs-btn-hover-border-color: #1D3B6E;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #1D3B6E;
    --bs-btn-active-border-color: #1D3B6E;
    --bs-btn-active-color: #fff;
}

/* ---- Utility classes ---- */
.text-primary { color: #FA9500 !important; }
.bg-primary { background-color: #FA9500 !important; }
.border-primary { border-color: #FA9500 !important; }

.text-secondary { color: #1D3B6E !important; }
.bg-secondary { background-color: #1D3B6E !important; }
.border-secondary { border-color: #1D3B6E !important; }

/* ---- Form controls ---- */
.form-control:focus,
.form-select:focus {
    border-color: #FA9500;
    box-shadow: 0 0 0 0.25rem rgba(250, 149, 0, 0.25);
}

.form-check-input:checked {
    background-color: #FA9500;
    border-color: #FA9500;
}

.form-check-input:focus {
    border-color: #FA9500;
    box-shadow: 0 0 0 0.25rem rgba(250, 149, 0, 0.25);
}

.form-switch .form-check-input:checked {
    background-color: #FA9500;
    border-color: #FA9500;
}

.form-range::-webkit-slider-thumb {
    background-color: #FA9500;
}

.form-range::-moz-range-thumb {
    background-color: #FA9500;
}

/* ---- Navigation ---- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #FA9500;
}

.nav-link {
    color: #FA9500;
}

.nav-link:hover,
.nav-link:focus {
    color: #c87700;
}

/* ---- Pagination ---- */
.page-link {
    color: #FA9500;
}

.page-link:hover {
    color: #c87700;
}

.page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(250, 149, 0, 0.25);
}

.page-item.active .page-link {
    background-color: #FA9500;
    border-color: #FA9500;
}

/* ---- Badges ---- */
.badge.bg-primary {
    background-color: #FA9500 !important;
}

.badge.bg-secondary {
    background-color: #1D3B6E !important;
}

/* ---- Alerts ---- */
.alert-primary {
    color: #7a4900;
    background-color: #feebd0;
    border-color: #fde2b9;
}

.alert-secondary {
    color: #112347;
    background-color: #d4dae6;
    border-color: #bfc8da;
}

/* ---- Progress bars ---- */
.progress-bar {
    background-color: #FA9500;
}

/* ---- List groups ---- */
.list-group-item.active {
    background-color: #FA9500;
    border-color: #FA9500;
}

.list-group-item-action:active {
    background-color: #feebd0;
}

/* ---- Spinners ---- */
.spinner-border.text-primary {
    color: #FA9500 !important;
}

.spinner-border.text-secondary {
    color: #1D3B6E !important;
}

/* ---- Dropdowns ---- */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #FA9500;
}

/* ---- Accordion ---- */
.accordion-button:not(.collapsed) {
    color: #FA9500;
    background-color: #feebd0;
}

.accordion-button:focus {
    border-color: #FA9500;
    box-shadow: 0 0 0 0.25rem rgba(250, 149, 0, 0.25);
}

/* ---- Links ---- */
a {
    color: #FA9500;
}

a:hover {
    color: #c87700;
}

/* ========================================
   Design Variant: cards
   ======================================== */
[data-design="cards"] .article-card-flat {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

[data-design="cards"] .article-card-flat:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-design="cards"] .article-card-flat .article-image-wrapper {
  height: 220px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

[data-design="cards"] .article-card-flat .article-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-design="cards"] .article-card-flat:hover .article-image-wrapper img {
  transform: scale(1.08);
}

[data-design="cards"] .article-card-flat:hover .article-overlay {
  opacity: 1;
}

[data-design="cards"] .article-card-flat .card-title {
  color: #2d3748;
  transition: color 0.3s ease;
}

[data-design="cards"] .article-card-flat:hover .card-title {
  color: hsl(var(--w-color-primary-hue), var(--w-color-primary-saturation), var(--w-color-primary-lightness));
}

@media (max-width: 768px) {
  [data-design="cards"] .article-card-flat:hover {
    transform: translateY(-3px);
  }
}

/* ========================================
   Article Cards (cards_with_featured design)
   ======================================== */
.card-title {
  line-height: 1.7em;
}

.article-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

[data-design="cards_with_featured"] .article-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  text-align: start !important;
}

[data-design="cards_with_featured"] .article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-design="cards_with_featured"] .featured-article {
  border-radius: 12px;
  height: 360px;
}

[data-design="cards_with_featured"] .featured-image-col {
  max-height: 360px;
}

[data-design="cards_with_featured"] .featured-article:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-design="cards_with_featured"] .article-image-wrapper-large {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  border-radius: 12px;
}

[data-design="cards_with_featured"] .article-image-wrapper-large img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-design="cards_with_featured"] .featured-article:hover .article-image-wrapper-large img {
  transform: scale(1.1);
}

[data-design="cards_with_featured"] .article-image-wrapper {
  height: 220px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

[data-design="cards_with_featured"] .article-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-design="cards_with_featured"] .article-card:hover .article-image-wrapper img {
  transform: scale(1.12);
}

[data-design="cards_with_featured"] .horizontal-article {
  border-radius: 12px;
}

[data-design="cards_with_featured"] .horizontal-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-design="cards_with_featured"] .article-image-wrapper-horizontal {
  height: 200px;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  position: relative;
  border-radius: 12px;
}

[data-design="cards_with_featured"] .article-image-wrapper-horizontal img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-design="cards_with_featured"] .horizontal-article:hover .article-image-wrapper-horizontal img {
  transform: scale(1.1);
}

[data-design="cards_with_featured"] .article-card:hover .article-overlay {
  opacity: 1;
}

[data-design="cards_with_featured"] .article-card .card-title {
  color: #2d3748;
  transition: color 0.3s ease;
}

[data-design="cards_with_featured"] .article-card:hover .card-title {
  color: hsl(var(--w-color-primary-hue), var(--w-color-primary-saturation), var(--w-color-primary-lightness));
}

@media (max-width: 768px) {
  [data-design="cards_with_featured"] .featured-article {
    min-height: auto;
  }

  [data-design="cards_with_featured"] .article-image-wrapper-large {
    min-height: 250px;
  }

  [data-design="cards_with_featured"] .horizontal-article:hover {
    transform: translateY(-4px);
  }
}