body[data-section="base"] {
    --background-color: #ffffff;
    --text-color: #FFFFFF;
    --primary-color: #b7cdc9;
    --secondary-color: #22577a;
    --card-bg: #f8f9fa;
    --card-header-bg: #0d6efd;
    --card-text-color: #212529;
    --card-title-color: #3739DB;
    --card-header-title-color: #FFFFFF;
    --button-bg-color: #0d6efd;
    --button-bg-hover: #3bf65a;
    --button-text-color: #ffffff;
    --button-text-hover: #ffffff;
    --link-bg-color: #1c21bc;
    --link-bg-hover: #f8330c;
    --network-bg-color: #c78d8d;
    --network-bg-hover: #a8bfc2;
    --newsletter-title: #ffffff;
    --newsletter-button-bg-color: #2e8a60;
    --newsletter-button-bg-hover: #991414;
    --newsletter-button-text-color: #ffffff;
    --newsletter-button-text-hover: #ffffff;
    --headings-color: #b72a2a;
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #ced4da;
    --input-placeholder: #6c757d;
    --badge-bg-color: #22577a;
    --badge-bg-hover: #b7cdc9;
    --badge-text-color: #ffffff;
}

body[data-section="home"] {
    --background-color: #ffffff;
    --text-color: #FFFFFF;
    --primary-color: #b7cdc9;
    --secondary-color: #22577a;
    --card-bg: #f8f9fa;
    --card-header-bg: #0d6efd;
    --card-text-color: #212529;
    --card-title-color: #3739DB;
    --card-header-title-color: #FFFFFF;
    --button-bg-color: #0d6efd;
    --button-bg-hover: #3bf65a;
    --button-text-color: #ffffff;
    --button-text-hover: #ffffff;
    --link-bg-color: #1c21bc;
    --link-bg-hover: #f8330c;
    --network-bg-color: #c78d8d;
    --network-bg-hover: #a8bfc2;
    --newsletter-title: #ffffff;
    --newsletter-button-bg-color: #2e8a60;
    --newsletter-button-bg-hover: #991414;
    --newsletter-button-text-color: #ffffff;
    --newsletter-button-text-hover: #ffffff;
    --headings-color: #b72a2a;
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #ced4da;
    --input-placeholder: #6c757d;
    --badge-bg-color: #22577a;
    --badge-bg-hover: #b7cdc9;
    --badge-text-color: #ffffff;
}

body[data-section="dashboard"] {
    --background-color: #ffffff;
    --text-color: #FFFFFF;
    --primary-color: #b7cdc9;
    --secondary-color: #22577a;
    --card-bg: #f8f9fa;
    --card-header-bg: #0d6efd;
    --card-text-color: #212529;
    --card-title-color: #3739DB;
    --card-header-title-color: #FFFFFF;
    --button-bg-color: #0d6efd;
    --button-bg-hover: #3bf65a;
    --button-text-color: #ffffff;
    --button-text-hover: #ffffff;
    --link-bg-color: #1c21bc;
    --link-bg-hover: #f8330c;
    --network-bg-color: #c78d8d;
    --network-bg-hover: #a8bfc2;
    --newsletter-title: #ffffff;
    --newsletter-button-bg-color: #2e8a60;
    --newsletter-button-bg-hover: #991414;
    --newsletter-button-text-color: #ffffff;
    --newsletter-button-text-hover: #ffffff;
    --headings-color: #b72a2a;
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #ced4da;
    --input-placeholder: #6c757d;
    --badge-bg-color: #22577a;
    --badge-bg-hover: #b7cdc9;
    --badge-text-color: #ffffff;
}

body[data-section="login"] {
    --background-color: #ffffff;
    --text-color: #FFFFFF;
    --primary-color: #b7cdc9;
    --secondary-color: #22577a;
    --card-bg: #f8f9fa;
    --card-header-bg: #0d6efd;
    --card-text-color: #212529;
    --card-title-color: #3739DB;
    --card-header-title-color: #FFFFFF;
    --button-bg-color: #0d6efd;
    --button-bg-hover: #3bf65a;
    --button-text-color: #ffffff;
    --button-text-hover: #ffffff;
    --link-bg-color: #1c21bc;
    --link-bg-hover: #f8330c;
    --network-bg-color: #c78d8d;
    --network-bg-hover: #a8bfc2;
    --newsletter-title: #ffffff;
    --newsletter-button-bg-color: #2e8a60;
    --newsletter-button-bg-hover: #991414;
    --newsletter-button-text-color: #ffffff;
    --newsletter-button-text-hover: #ffffff;
    --headings-color: #b72a2a;
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #ced4da;
    --input-placeholder: #6c757d;
    --badge-bg-color: #22577a;
    --badge-bg-hover: #b7cdc9;
    --badge-text-color: #ffffff;
}

body[data-section="register"] {
    --background-color: #ffffff;
    --text-color: #FFFFFF;
    --primary-color: #b7cdc9;
    --secondary-color: #22577a;
    --card-bg: #f8f9fa;
    --card-header-bg: #0d6efd;
    --card-text-color: #212529;
    --card-title-color: #3739DB;
    --card-header-title-color: #FFFFFF;
    --button-bg-color: #0d6efd;
    --button-bg-hover: #3bf65a;
    --button-text-color: #ffffff;
    --button-text-hover: #ffffff;
    --link-bg-color: #1c21bc;
    --link-bg-hover: #f8330c;
    --network-bg-color: #c78d8d;
    --network-bg-hover: #a8bfc2;
    --newsletter-title: #ffffff;
    --newsletter-button-bg-color: #2e8a60;
    --newsletter-button-bg-hover: #991414;
    --newsletter-button-text-color: #ffffff;
    --newsletter-button-text-hover: #ffffff;
    --headings-color: #b72a2a;
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #ced4da;
    --input-placeholder: #6c757d;
    --badge-bg-color: #22577a;
    --badge-bg-hover: #b7cdc9;
    --badge-text-color: #ffffff;
}

body[data-section="article"] {
    --background-color: #ffffff;
    --text-color: #FFFFFF;
    --primary-color: #b7cdc9;
    --secondary-color: #22577a;
    --card-bg: #f8f9fa;
    --card-header-bg: #0d6efd;
    --card-text-color: #212529;
    --card-title-color: #3739DB;
    --card-header-title-color: #FFFFFF;
    --button-bg-color: #0d6efd;
    --button-bg-hover: #3bf65a;
    --button-text-color: #ffffff;
    --button-text-hover: #ffffff;
    --link-bg-color: #1c21bc;
    --link-bg-hover: #f8330c;
    --network-bg-color: #c78d8d;
    --network-bg-hover: #a8bfc2;
    --newsletter-title: #ffffff;
    --newsletter-button-bg-color: #2e8a60;
    --newsletter-button-bg-hover: #991414;
    --newsletter-button-text-color: #ffffff;
    --newsletter-button-text-hover: #ffffff;
    --headings-color: #b72a2a;
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #ced4da;
    --input-placeholder: #6c757d;
    --badge-bg-color: #22577a;
    --badge-bg-hover: #b7cdc9;
    --badge-text-color: #ffffff;
}

body[data-section="category"] {
    --background-color: #ffffff;
    --text-color: #FFFFFF;
    --primary-color: #b7cdc9;
    --secondary-color: #22577a;
    --card-bg: #f8f9fa;
    --card-header-bg: #0d6efd;
    --card-text-color: #212529;
    --card-title-color: #3739DB;
    --card-header-title-color: #FFFFFF;
    --button-bg-color: #0d6efd;
    --button-bg-hover: #3bf65a;
    --button-text-color: #ffffff;
    --button-text-hover: #ffffff;
    --link-bg-color: #1c21bc;
    --link-bg-hover: #f8330c;
    --network-bg-color: #c78d8d;
    --network-bg-hover: #a8bfc2;
    --newsletter-title: #ffffff;
    --newsletter-button-bg-color: #2e8a60;
    --newsletter-button-bg-hover: #991414;
    --newsletter-button-text-color: #ffffff;
    --newsletter-button-text-hover: #ffffff;
    --headings-color: #b72a2a;
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #ced4da;
    --input-placeholder: #6c757d;
    --badge-bg-color: #22577a;
    --badge-bg-hover: #b7cdc9;
    --badge-text-color: #ffffff;
}






body {
    background-color: var(--background-color);
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

/* Navbar & Footer */
.navbar, footer {
    background-color: var(--primary-color) !important;
    color: var(--text-color);
}

.nav-link, .navbar-brand {
    color: var(--text-color) !important;
}

.nav-link:hover, .navbar-brand:hover {
    color: var(--secondary-color) !important;
}

/* ===========================
   🔵 Read More Button (Dynamic)
   =========================== */

/* Base state */
a.read-button-style,
.read-button-style {
    background-color: var(--button-bg-color) !important;
    color: var(--button-text-color) !important;
    border: 1px solid var(--button-bg-color) !important;
    transition: all 0.2s ease;
    border-radius: 25px;
    font-weight: 500;
    text-decoration: none !important;
}

/* Hover state */
a.read-button-style:hover,
.read-button-style:hover {
    background-color: var(--button-bg-hover) !important;
    border-color: var(--button-bg-hover) !important;
    color: var(--button-text-hover) !important;
    transform: translateY(-2px);
}


/* Cards */
.card {
    background-color: var(--card-bg) !important;
    color: var(--card-text-color);
    transition: all 0.3s ease;
    border-radius: 0.75rem;
}

.card-header {
    background-color: var(--card-header-bg) !important;
    color: var(--text-color) !important;
}

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

.card-title {
    color: var(--card-title-color);
}

/* Input fields */
.card-body input[type="text"],
.card-body input[type="password"],
.card-body input[type="email"] {
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  width: 100%;
  padding: 10px;
  transition: all 0.3s ease;
}

/* 🟦 Card Header Title (e.g., Login, Register, etc.) */
.card-header h3 {
    color: var(--card-header-title-color);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* Headings & Titles */
h1, h2, h3, h4, h5, h6 {
    color: var(--headings-color);
}


/* Links */
a, .nav-link, .badge {
    color: var(--link-bg-color);
    transition: color 0.2s ease;
}

a:hover, .nav-link:hover, .badge:hover {
    color: var(--link-bg-hover);
}

/* Badges */
.badge {
    background-color: var(--badge-bg-color);
    color: var(--badge-text-color);
}

.badge:hover {
    background-color: var(--badge-bg-hover);
}

/* Inputs & Form Controls */
input, textarea, select {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--primary-color);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Article hover effect */
.article-horizontal:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Image placeholders */
.article-image-placeholder {
    background-color: var(--card-bg);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

/* List group items in cards */
.card .list-group-item {
    background-color: var(--card-bg) !important;
    color: var(--text-color);
    border-color: rgba(0,0,0,0.05);
}

/* 🟩 FORM FIELDS STYLING */
input,
textarea,
select {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 6px;
    padding: 8px 10px;
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 5px var(--primary-color);
    outline: none;
}

/* =====================================
   🌐 Social Share Buttons (Dynamic)
   ===================================== */

.share-buttons {
    text-align: center;
    margin-top: 1.5rem;
}

.share-buttons h6 {
    color: var(--h6-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* General button style */
.share-buttons .btn {
    border-radius: 20px;
    border: 1px solid var(--network-bg-color);
    color: var(--text-color) !important;
    background-color: var(--network-bg-color);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

/* Hover effect */
.share-buttons .btn:hover {
    background-color: var(--network-bg-hover);
    border-color: var(--secondary-hover);
    color: var(--text-color) !important;
    transform: translateY(-2px);
}

/* Icons inside buttons */
.share-buttons .btn i {
    font-size: 1rem;
}

/* Optional: individual brand accent colors (still respects your theme) */
.share-buttons .btn-facebook i {
    color: #1877F2;
}
.share-buttons .btn-twitter i {
    color: #1DA1F2;
}
.share-buttons .btn-linkedin i {
    color: #0077B5;
}
.share-buttons .btn-whatsapp i {
    color: #25D366;
}

/* 📰 Newsletter Footer Section */

/* Title */
.newsletter-footer h5 {
    color: var(--newsletter-title);
    margin-bottom: 1rem;
    font-weight: 600;
}


/* Subscribe Button */
.newsletter-footer button[type="submit"] {
    background-color: var(--newsletter-button-bg-color);
    color: var(--newsletter-button-text-color, #fff);
    border: 1px solid var(--newsletter-button-bg-color);
    border-radius: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

.newsletter-footer button[type="submit"]:hover {
    background-color: var(--newsletter-button-bg-hover);
    border-color: var(--newsletter-button-bg-hover);
    color: var(--newsletter-button-text-hover;
    transform: translateY(-2px);
}

/* Optional: Add a subtle hover effect to the container */
.newsletter-footer:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Generic RTL helper */
.rtl-content {
    direction: rtl;
}

/* Make typical block elements properly right-aligned in RTL blocks */
.rtl-content p,
.rtl-content li,
.rtl-content h1,
.rtl-content h2,
.rtl-content h3,
.rtl-content h4,
.rtl-content h5,
.rtl-content h6 {
    text-align: right;
}

/* Optional: tweak lists and paragraphs spacing specifically for Arabic */
.rtl-content ul,
.rtl-content ol {
    padding-right: 1.5rem;
    padding-left: 0;  /* avoid double padding from LTR defaults */
}

/* Optional: nicer dropdown UX for sub-categories */
.dropdown-menu {
    border-radius: 1rem;
}
.dropdown-menu .dropdown-item {
    white-space: nowrap;
}