/* ==========================================================================
   1. FONTS & GLOBAL RESET
   ========================================================================== */
@font-face {
    font-family: "SegoeUISL";
    src: url("fonts/SegoeUI-Semilight/SegoeUI-Semilight.woff2") format("woff2"),
         url("fonts/SegoeUI-Semilight/SegoeUI-Semilight.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SegoeUISL";
    src: url("fonts/SegoeUI-Semibold/SegoeUI-Semibold.woff2") format("woff2"),
         url("fonts/SegoeUI-Semibold/SegoeUI-Semibold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: "SegoeUISL", "Segoe UI", "Inter", sans-serif;
    font-size: 14px;
}

body {
    background: #f5f7fa;
    color: #222;
    line-height: 1.6;
}
/*
img {
     max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: .8em;
    border: none; 
}
*/

/* ==========================================================================
   2. MAIN LAYOUT STRUCTURE (The Grid)
   ========================================================================== */
.wrapper {
    display: grid;
    grid-template-rows: auto auto 1fr auto; 
    min-height: 100vh;
    min-width: 300px;
}

.main-layout {
    display: grid;
    grid-template-columns: 220px 1fr 240px; 
    grid-template-areas: "left main right";
    gap: .5rem;
    padding: .5rem 0; /* Only top/bottom padding now */
    width: 100%;
}

.left-sidebar   { grid-area: left; }
.main-content   { grid-area: main; }
.right-sidebar  { grid-area: right; }

.left-sidebar, .right-sidebar {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.main-content {
    background: #fff;
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid #ddd;
    overflow: visible; 
}

/* Sidebar Modules Generic Styles */
.side-nav h3, .form_header h1 {
    margin-bottom: .6rem;
    font-weight: 600;
    font-size: 1.2rem;
    border-bottom: 2px solid #0a1a2a;
    padding-bottom: 5px;
}

.left-sidebar li, .side-nav li {
    list-style: none;
    padding: 5px 0;
}
.left-sidebar li:not(:last-child), .side-nav li:not(:last-child) {
    border-bottom: 1px dashed #ddd;
}
.left-sidebar > *, .right-sidebar > * {
    /* border: 1px dotted #ddd; */
    padding: .5rem;
    margin: .6rem;
}

/* Generic Link Styles in Sidebars */
.left-sidebar a, .right-sidebar a {
    color: #0a1a2a;
    text-decoration: none;
}

/* ==========================================================================
   3. HEADER & TOP BAR
   ========================================================================== */
.header-banner {
    width: 100%;
    padding: 0 5px;
    background-image: url('images/banner1.webp'); 
    background-size: cover;
    background-position: center;
    background-color: rgba(255,255,255,0.85);
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}
.header-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative; /* Essential for centering the switcher */
    padding: 10px 0;
    min-height: 100px;
}

.header-left-block, .header-right-block {
    display: flex;
    align-items: baseline;
    gap: 10px;
    /* z-index: 5; Keep them above the switcher layer */
}

/* --- CENTERED SWITCHER --- */
.language-switcher-wrapper {
    position: absolute;
    left: 42%;
    top: 5px; /* Adjust to move it higher/lower */
    transform: translateX(-50%);
    z-index: 10;
}

/* Logo */
.logo-img {
    height: 80px;
    width: auto;
    display: block;
}

.logo-text {
    user-select: none;
    color: #fff;
    font-size: 32px;
    position: relative;
    bottom: 5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    height: 1.5em;
    /* backdrop-filter: blur(4px); */
    /* border-radius: 8px; */
    /* padding: 0 20px;
    margin-left: -.5em; */
    /* -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent), linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent), linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect; */
}

/* Search Module */
.search-compact {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto; /* Pushes search to right */
    margin-bottom: 5px; 
    width: auto; 
}

.search-input-field {
    width: 160px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    outline: none;
    background: rgba(255, 255, 255, 0.9);
}

.search-input-field:focus {
    border-color: #0a1a2a;
}

.search-input-field::placeholder {
    color: #888;
    font-style: italic;
}

.search-btn-small {
    background: #0a1a2a00;
    color: #fff;
    border: 1px solid white;
    border-radius: 2px;
    padding: 7px 12px;
    cursor: pointer;
    white-space: nowrap;
}

/* Language Switcher */
.language-switcher {
    /* background: #0001; */
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    backdrop-filter: blur(4px);

    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent), linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent), linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.lang-separator { color: #888; }
.lang-active { color: white; cursor: default; font-weight: 700; }
.lang-link { color: #000; text-decoration: none; cursor: pointer; transition: color 0.2s; }
.lang-link:hover { color: #fff; }

/* Menu Button (Mobile) */
.menu-btn {
    display: none; /* Hidden on Desktop */
}

/* ==========================================================================
   4. NAVIGATION (DESKTOP)
   ========================================================================== */
nav {
    background: #0a0027;
    line-height: 1;
    color: #fff;
    top: 0;
    z-index: 900;
}

nav ul { list-style: none; }
nav .container > ul  { display: flex; flex-wrap: nowrap; }
nav li { position: relative; }

nav .container > ul > li:not(:last-child) {
    border-right: 1px solid #fff3;
    padding-right: 4px;
    margin-right: 4px;
}

body.rtl-mode nav .container > ul > li:not(:last-child) {
    border-right: none;
    border-left: 1px solid #fff3;
    padding-left: 4px;
    padding-right: 4px;
}

nav a {
    display: inline-block;
    padding: 10px 8px; 
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

nav li a { font-size: 18px; } 
nav li li a { font-size: 16px; } 
nav li li li a { font-size: 14px; } 

/* Dropdowns */
nav li ul {
    position: absolute;
    background: #132c46;
    top: 100%;
    /* left: 0; */
    min-width: 220px; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
}

nav li ul li {
    border-top: 1px dotted #2d6791;
    border-left: 1px dashed #2d6791;
    font-size: smaller;
}

nav li ul ul { 
    left: 100%; 
    top: 0; 
}

body.rtl-mode  nav li ul ul { 
    left: unset; 
    right: 100%; 
}

/* JS Accordion Helpers (Hidden on Desktop usually, used for logic) */
.submenu-toggle {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    font-size: xx-small;
    padding: 3px 8px 0 4px;
    color: #fff;
}

.submenu-li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-nav { display: none; }

/* ==========================================================================
   5. CONTENT STYLING (Typography, Images, Tables)
   ========================================================================== */
.main-content h1 { font-size: 1.6rem; margin: .5em .4em; }
.content h1{ text-transform: unset; margin-top: 0;}
.main-content h2 { font-size: 1.5rem; margin-top: 15px; border-bottom: 1px solid #eee; }
.main-content p { margin-bottom: 1rem; text-align: justify; }
p { text-indent: 10px; }
.main-content img {
    max-width: 50%;
    height: auto;
    object-fit: contain; 
    display: block;
}

/* Breadcrumbs */
.breadcrumbs {
    margin-bottom: .2rem;
    padding-bottom: .2rem;
    font-family: "SegoeUISL", "Segoe UI", sans-serif;
    font-size: 0.9rem;
    color: #3f4d59;
    border-bottom: 1px dashed #aaa;
    font-weight: 600;
}

.breadcrumbs a {
    color: #0056b3;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: #0a1a2a;
    text-decoration: underline;
}

/* Categories & Tables */
.content h2 {
    font-family: "SegoeUISL", sans-serif;
    color: #0a1a2a;
    margin-bottom: 1.5rem;
}

.content h3 {
    font-size: 1.3rem;
    color: #444;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: 600;
    text-indent: 15px;
}

.content h3 {
    font-size: 1.2rem;
    text-indent: 25px;
}

.content h4 {
    font-size: 1.1rem;
    text-indent: 35px;
}

.content h5 {
    font-size: 1rem;
    text-indent: 45px;
}

._categories { margin: 0 0 8px 0; font-weight: normal; }

._categories a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 12px 15px;
    border-radius: 6px;
    color: #0a1a2a;
    text-decoration: none;
    transition: all 0.2s ease;
}

._categories a:hover {
    border-color: #0056b3;
    background-color: #f8fbff;
    color: #0056b3;
    padding-left: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

._categories a::after {
    content: "›";
    font-size: 1.2rem;
    color: #ccc;
    font-weight: bold;
}
._categories a:hover::after { color: #0056b3; }

/* Article Table */
.articles_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95rem;
}

.articles_table th {
    text-align: left;
    padding: 12px 15px;
    background-color: #f9f9f9;
    color: #666;
    font-weight: 600;
    border-bottom: 2px solid #e5e5e5;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.articles_table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.articles_table tr:hover td { background-color: #f8fbff; }

.articles_table td a {
    color: #0a1a2a;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}
.articles_table td a:hover { color: #0056b3; text-decoration: underline; }

.articles_table .label {
    display: inline-block;
    background-color: #eff2f5;
    color: #555;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 50px;
    text-align: center;
}

/* Article Links */
#article_meat a {
    color: #0056b3;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

#article_meat a:hover {
    color: #0a1a2a;
    border-bottom: 1px solid #0a1a2a;
}

/* ==========================================================================
   6. FORMS (Registration, Login, Search)
   ========================================================================== */
/* Generic Form Classes */
.input, .search, .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.input:focus, .search:focus, .form-control:focus, 
#registration-form input:focus, #registration-form select:focus {
    border-color: #0056b3;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
}

.button, .submit, .poll-btn, .btn-submit-comment {
    width: 100%;
    background-color: #0a1a2a;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 10px;
    transition: background 0.3s ease;
}

.button:hover, .submit:hover, .poll-btn:hover, .btn-submit-comment:hover {
    background-color: #132c46;
}

.poll-btn { background-color: #0a1a2a !important; color: #fff !important; }
.poll-btn:disabled { background-color: #ccc !important; cursor: not-allowed; }

/* Registration Specifics */
#registration-form label {
    font-weight: 700;
    color: #0a1a2a;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 5px;
    margin-top: 10px;
}

#registration-form input.error {
    border-color: #dc3545 !important;
    background-color: #fff8f8;
}

.error-message {
    font-size: 0.85rem;
    color: #dc3545;
    min-height: 18px;
    display: block;
    margin-top: 2px;
}

#password-strength-indicator {
    top: auto !important;
    bottom: 0 !important;
    height: 4px !important;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    transition: width 0.4s ease, background-color 0.4s ease;
    z-index: 5;
    opacity: 0.9;
}

#registration-form div[style*="position: relative"] { margin-bottom: 5px; }
#registration-form br { display: none; }
#registration-form .g-recaptcha { margin-top: 15px; display: flex; justify-content: center; }

/* Password Wrapper & Eye Icon */
.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 40px !important;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.2rem;
    color: #666;
    z-index: 10;
    user-select: none;
}

.toggle-password:hover { color: #0a1a2a; }

.toggle-password:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    right: 0;
    background: #333;
    color: #fff;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    margin-bottom: 5px;
    pointer-events: none;
    opacity: 0.9;
}

/* ==========================================================================
   7. WIDGETS (Polls, Comments)
   ========================================================================== */
/* Poll Widget */
.poll-widget-container {
    background: #fff;
    margin-bottom: 20px;
}

.poll-widget-container h3 {
    font-size: 1.1rem;
    color: #0a1a2a;
    border-bottom: 2px solid #0a1a2a;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.poll-widget-container h4 {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 15px;
    font-weight: 600;
}

.poll-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.poll-radio-label {
    display: flex;
    cursor: pointer;
    margin-bottom: 5px;
    color: #444;
}

.poll-radio-label input[type="radio"] {
    margin-right: 10px;
    margin-left: 10px;
    cursor: pointer;
}

.poll-links { margin-top: 15px; text-align: right; font-size: 0.85rem; }
.poll-links a { color: #0056b3; text-decoration: none; }
.poll-links a:hover { text-decoration: underline; }

.poll-info { font-size: 0.9rem; color: #666; font-style: italic; margin-bottom: 10px; }
.poll-error { font-size: 0.9rem; color: #d9534f; font-weight: 600; margin-bottom: 10px; }

/* Poll Results Page */
.poll-container {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    max-width: 800px;
}

.poll-container h2 { margin-bottom: 20px; border-bottom: 2px solid #0a1a2a; padding-bottom: 10px; }
.poll-item { margin-bottom: 20px; padding: 10px; background: #f9f9f9; border-radius: 4px; border-bottom: 1px solid #eee; }
.poll-label { margin-bottom: 8px; font-size: 1.1rem; color: #0a1a2a; }
.poll-data { display: flex; align-items: center; gap: 15px; }
.poll-votes { min-width: 90px; font-size: 0.9rem; color: #555; }

.poll-bar-container {
    flex-grow: 1;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.poll-bar-fill {
    height: 100%;
    background-color: #0056b3;
    background-image: linear-gradient(45deg, #0056b3, #2d6791);
    border-radius: 10px 0 0 10px;
    transition: width 1s ease-in-out;
}

.poll-percent { min-width: 50px; text-align: right; font-weight: bold; color: #333; }
.poll-footer { margin-top: 30px; padding-top: 15px; border-top: 2px dashed #ccc; font-size: 0.95rem; color: #444; }

/* Comments Section */
.comments-section { margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px; }
.comments-title { font-size: 14px; margin-bottom: 20px; color: #333; }

.comment-number { font-size: 14px; font-weight: bold; color: #ccc; }

.quote-author { font-size: 0.85em; margin-bottom: 2px; color: #495057; }

.add-comment-section { 
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

summary.add-comment-trigger {
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #337ab7;
    margin-bottom: 15px;
    outline: none;
    list-style: none;
    clear:both;
}
summary.add-comment-trigger::-webkit-details-marker { display: none; }
summary.add-comment-trigger:hover { text-decoration: underline; }

.comment-form-container {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }
.input-email-grey { color: #777; background-color: #fcfcfc; }

textarea.comment-text { border-top-left-radius: 0; border-top-right-radius: 0; min-height: 100px; resize: vertical; }

.login-warning {
    color: #766;
    background-color: #fee;
    border: 1px solid #fdd;
    padding: 5px;
    border-radius: 4px;
    text-align: center;
    clear: both;
}
.login-warning a { color: #a44; font-weight: bold; text-decoration: none; }

.vote-controls { display: flex; align-items: center; gap: 8px; margin-right: 10px; }
.vote-btn { background: none; border: none; cursor: pointer; font-size: 18px; padding: 0 4px; position: relative; transition: transform 0.2s; }
.vote-btn:hover { transform: scale(1.2); }
.thumb-up { color: #28a745; }
.thumb-down { color: #dc3545; }

.vote-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 100;
    margin-bottom: 5px;
}

.vote-btn::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    margin-bottom: -5px;
}

.vote-btn:hover::after, .vote-btn:hover::before { opacity: 1; visibility: visible; }

.comment-actions {
    display: flex;
    gap: 5px;
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid #ddd;
}

.btn-edit { color: #f0ad4e; }
.btn-edit:hover { background-color: #fcf8e3; }
.btn-delete { color: #d9534f; }
.btn-delete:hover { background-color: #f2dede; }

.edit-comment-form textarea { width: 100%; min-height: 80px; margin-bottom: 5px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.edit-controls { text-align: right; }
.btn-save { background-color: #5cb85c; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; }
.btn-cancel { background-color: #999; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; margin-right: 5px; }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.footer-modules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    padding: 0 0 .5rem 0;
    background: transparent; /* Background is now handled by the outer wrapper */
}

.footer-modules .side-nav {
    background: #fff;
	padding: .8rem;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.footer-modules h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.footer-modules a { color: #0a1a2a; text-decoration: none; }

.copyright {
    padding: 1rem 2rem;
    background: #0a1a2a;
    color: #fff;
    text-align: center;
    font-size: .9rem;
    margin-top: auto;
}

/* New Container to center content */
.container {
    max-width: 1200px; /* This is the width of your "centered" content */
    margin: 0 auto;    /* Centers the block */
    padding: 0 5px;   /* Prevents content from touching edges on small screens */
    width: 100%;
    position: relative;
}

/* Ensure the main grid stays centered */
.main-wrapper-centered {
    width: 100%;
    background-color: transparent; /* Or any color you want for the "empty" sides */
}
/* Show submenu on Hover (Desktop) */
nav li:hover > ul {
    opacity: 1;
    visibility: visible;
}

/* Show submenu when Clicked (JS Accordion) */
nav li ul.open {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important; /* Overrides mobile restrictions */
}

/* Ensure the submenu is actually vertical inside the horizontal top-bar */
nav li ul li {
    display: block;
    width: 100%;
}

.content li {
    margin-left: 2em;
}
.rtl-mode .content li {
    margin-left: unset;
    margin-right: 2em;
}
/* Article Metadata Bar */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #666;
    background-color: #f8f9fa;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 3px solid #0a1a2a;
    font-family: "SegoeUISL", sans-serif;
}

.meta-item strong {
    color: #333;
    font-weight: 600;
}

.meta-sep {
    color: #ccc;
    font-size: 1.2rem;
    line-height: 1;
}

/* Search Results Styling */
.search-summary {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: #555;
}

.search-results-list ol {
    padding-left: 20px;
}

.search-result-item {
    margin-bottom: 25px;
}

.result-link {
    font-size: 1.2rem;
    font-weight: 600;
    color: #0056b3;
    text-decoration: none;
}

.result-link:hover {
    text-decoration: underline;
}

.result-snippet {
    font-size: 0.95rem;
    color: #666;
    margin-top: 5px;
    line-height: 1.4;
}

.highlight_match {
    background-color: #fff3cd; /* Light yellow background */
    color: #856404;            /* Dark brownish text */
    padding: 0 2px;
    font-weight: bold;
    border-radius: 2px;
}

/* Main Category Introduction (At the top of the page) */
.category-main-intro {
    background-color: #fcfcfc;
    border-bottom: 1px solid #eee;
    padding: 15px 20px;
    margin-bottom: 25px;
    font-style: italic;
    color: #444;
    line-height: 1.7;
    border-left: 4px solid #0056b3;
}
body.rtl-mode .category-main-intro {
    border-left: unset;
    border-right: 4px solid #0056b3;
}
/* Sub-category list items */
.subcategory-item {
    margin-bottom: 20px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}

/* Sub-category link fix (prevent it from taking full width if text is below) */
.subcategory-item ._categories {
    margin-bottom: 5px;
}

/* Preview text below sub-category titles */
.subcategory-preview {
    font-size: 0.95rem;
    color: #666;
    padding-left: 15px;
    line-height: 1.5;
}

/* Ensure images inside intros don't break layout */
.category-main-intro img, .subcategory-preview img {
    max-width: 200px; /* Keep preview images small */
    height: auto;
    float: right;
    margin-left: 15px;
    border-radius: 4px;
}

.btn-like {
    background: #fff;
    border: 1px solid #e1e1e1;
    color: #34b;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}
.btn-like:hover:not(.disabled) {
    background: #fdf2f2;
    border-color: #34b;
}
.btn-like.disabled {
    color: #ccc;
    background: #f9f9f9;
    cursor: not-allowed;
}
.label-likes {
    background-color: #fdf2f2 !important;
    color: #34b !important;
}

/* RTL Global Adjustments */
body.rtl-mode {
    text-align: right;
}

body.rtl-mode .logo-img {
    margin-left: 10px;
    margin-right: 0;
}

body.rtl-mode .search-compact {
    margin-left: 0;
    margin-right: auto;
}

/* Category Table RTL */
body.rtl-mode .articles_table th, 
body.rtl-mode .articles_table td {
    text-align: right;
}

/* Meta Bar RTL */
body.rtl-mode .article-meta {
    border-left: none;
    border-right: 3px solid #0a1a2a;
}

/* Flip the Logo Image for Arabic */
body.rtl-mode .logo-img {
    transform: scaleX(-1); /* Mirrors the image horizontally */
}

.section-but {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
    padding: 5px 10px;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
}

.section-button {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
    padding: 5px 6px;
    margin: 2px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
}

/* Style for the active button */
.section-button.active {
    background-color: #333;
    color: #fff;
}

    
/* MODERN TAB SYSTEM */
.article-tabs-container {
    display: flex;
    gap: 20px;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 25px;
}

.section-button {
    background: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 10px 5px !important;
    margin: 0 !important;
    font-size: 1rem;
    font-weight: 600;
    color: #6c757d;
    transition: all 0.3s ease;
    border-radius: 0 !important;
    width: auto !important;
}

.section-button:hover {
    color: #0056b3;
    border-bottom-color: #dee2e6 !important;
}

.section-button.active {
    color: #0056b3 !important;
    border-bottom-color: #0056b3 !important;
}

/* RTL Adjustment */
body.rtl-mode .article-tabs-container {
    gap: 25px;
}

/* 2-Column Article View */
.main-layout.article-view {
    grid-template-columns: 220px 1fr;
    grid-template-areas: "left main";
}
.main-layout.article-view .right-sidebar {
    display: none;
}


/* Ensure the container expands with the active tab */
.tab-pane {
    width: 100%;
    display: none;
    height: auto !important; /* Allow content to define height */
    position: relative;
    overflow: visible; /* Prevent clipping of long lists */
}

.tab-pane.active {
    display: block;
}

/* Specific fix for the 'See Also' list */
#tab-seealso .text-content {
    height: auto !important; 
    max-height: none !important;
    overflow: visible !important;
}

#tab-seealso .scroll-btn {
    display: none !important;
}

/* VOIR AUSSI (SEE ALSO) LIST STYLING */
#tab-seealso {
    padding: 10px 0;
}

.ref-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 20px;
    margin-bottom: 4px;
    background: #fdfdfd;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    transition: all 0.2s ease;
    border-right: 1px solid #edf2f7;
    border-left: 4px solid #0056b3; /* Highlight strip for Arabic */
}

.ref-item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.ref-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: #fff;
    padding: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    flex-shrink: 0;
}

.ref-content-col {
    flex-grow: 1;
    line-height: 1.4;
}

.ref-link-inline {
    font-weight: 700;
    font-size: 1.05rem;
    color: #0056b3;
    text-decoration: none;
}

.ref-link-inline:hover {
    text-decoration: underline;
}

.ref-sep {
    color: #94a3b8;
    margin: 0 5px;
}

.ref-desc-inline {
    color: #475569;
    font-size: 0.95rem;
}

sup {
    font-size: 50%;
}

em { 
    /* font-family: 'Times New Roman', Times, serif;   */
    font-weight: bold;
    font-style: normal;
    /* font-size: 1.1em;  */
    color: #777;
} 

p strong {
    font-weight: bold;
    color: #666;
}

.pagination-container {
    display: flex; 
    justify-content: center; 
    /* justify-content: space-evenly; */
    gap: .5em; 
    margin: .5em 0; 
}

    

.page-num { padding: 8px 14px; border: 1px solid #dee2e6; color: #0056b3; text-decoration: none; border-radius: 4px; font-weight: 600; }
.page-num.active { background: #0056b3; color: white; border-color: #0056b3; }
.page-dots { color: #6c757d; padding: 0 5px; }

/* Container for the article preview */
.front-article {
    margin-bottom: 30px;
    clear: both;
    /*overflow: hidden;  This keeps floating images contained */
}

/* Ensure images don't break the layout on mobile */
.article-preview img {
    max-width: 50%;
    height: auto;
}

/* Style the Read More link */
.read-more-btn {
    display: inline-block;
    /* margin-top: 15px; */
    padding: 8px 20px;
    background-color: #2c3e50;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

.read-more-btn:hover {
    background-color: #34495e;
}

/* Arabic RTL support */
/* .rtl-mode .read-more-btn {
    float: left; /* Or right, depending on preference 
} */

.section-button.disabled {
    opacity: 0.6;
}
/* Ensure the hover effect doesn't trigger for disabled buttons */
.section-button.disabled:hover {
    background-color: #e0e0e0 !important;
}

#article_meat h1 {
    display: none;
}

/* Ghost Tab Styling */
.section-button.disabled {
    background-color: #f2f2f2 !important;
    color: #bbb !important;
    cursor: not-allowed !important;
    border: 1px solid #ddd !important;
    pointer-events: none; /* Disables clicking */
}

/* Vote Controls Styling */
.comment-vote-controls {
    display: flex;
    gap: 5px;
}
.vote-icon-btn {
    transition: transform 0.2s;
} 
.vote-icon-btn:hover {
    transform: scale(1.2);
}

/* Container Box */
.comment-box {
    border: 1px solid #ddd;
    background: #fdfdfd;
    padding: 15px;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 5px;
}

/* The Header Row */
.comment-header {
    display: flex;
    justify-content: space-between; /* Pushes content to far left and far right */
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

/* Left side: Author & Date */
.header-left {
    display: flex;
    flex-direction: column; /* Puts date under the name */
}
.comment-author { font-weight: bold; color: #333; }
.comment-date { font-size: 0.85em; color: #888; }

/* Right side: Actions, Votes, Score */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Adds space between the groups */
}

/* Grouping icons together */
.action-group, .vote-group {
    display: flex;
    gap: 5px;
}

/* Buttons and Badge */
.vote-icon-btn, .action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    padding: 2px;
}
.vote-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 30px;
    text-align: center;
}

/* Body Content */
.comment-body {
    line-height: 1.5;
    color: #444;
}

/* Quote styling within the body */
.quote-container {
    background: #f1f1f1;
    border-left: 4px solid #ccc;
    padding: 8px 12px;
    margin: 10px 0;
    font-style: italic;
}

/* Logged out state */
.vote-group.logged-out {
    /* opacity: 0.5; */
    cursor: help; /* Shows a question mark/help cursor */
}

.vote-icon-btn.disabled {
    filter: grayscale(100%);
    pointer-events: none; /* User can't click */
}

/* Tooltip style (Browser native title is used, but we can enhance it) */
.vote-group.logged-out:hover {
    opacity: 0.8;
}

/* Badge colors */
.vote-positive { color: #28a745; font-weight: bold; }
.vote-negative { color: #dc3545; font-weight: bold; }
.vote-neutral { color: #6c757d; }


/* The base button style */
.vote-icon-btn {
    background: none;
    border: none;
    padding: 5px;
    font-size: 1.2rem;
    transition: transform 0.1s;
}

/* 1. FORBIDDEN state (Not logged in) */
.vote-icon-btn.forbidden {
    cursor: not-allowed;
    filter: grayscale(100%);
    opacity: 0.4;
}

/* 2. ALREADY VOTED state (Locked) */
.vote-icon-btn.voted-plus, 
.vote-icon-btn.voted-minus {
    cursor: not-allowed;
    background: #eee; /* Light grey highlight to show it's active */
    border-radius: 4px;
}

.vote-icon-btn.voted-plus { color: #28a745; }
.vote-icon-btn.voted-minus { color: #dc3545; }

/* 3. ACTIVE state (Hover for buttons you CAN click) */
.vote-icon-btn:not(.forbidden):not(.voted-plus):not(.voted-minus):hover {
    cursor: pointer;
    transform: scale(1.3);
}

.front-article p em, .front-article p strong {
    font-size: 1em;
    font-family: unset;
    color: unset;
    font-weight: normal;
    font-style: normal;
}






/* ==========================================================================
   Handling img inside article meat
   ========================================================================== */
.article-preview img, #tab-text img, #article_meat > p > img {
    max-width: 50%;
}

.topRight, .middleRight{
    float: right; 
}
.topLeft, .middleLeft {
    float: left; 
}
.topRight {
    margin: 0 0 10px 10px;
}
.topLeft {
    margin: 0  10px 10px 0;
}
.middleRight {
    margin: 10px 0 10px 10px;
}
.middleLeft {
    margin: 10px 10px 10px 0;
}
#article_meat .midCenterP {
    text-align: center ; 
    text-indent: 0;
}
#article_meat p.midCenterP img.midCenterImg{
    display:inline ; 
    max-width:95% ;
}

/* ==========================================================================
    Feature Slider Styles 
/*   ========================================================================== */

.feature-slider-container { position: relative;/*  overflow: hidden; background: #fff; border-radius: 8px; border: 1px solid #ddd; padding: 20px; margin-top: 15px; */ }
.feature-slide { display: none; animation: fadeIn 0.5s ease; min-height: 320px; /* text-align: center;  */}
.feature-slide.active { display: block; }
.feature-slide img { max-height: 150px; /* margin: 15px;  */border-radius: 10px; }
.feature-slide h3 { color: #0a1a2a; margin-bottom: 10px; text-align: left; text-indent: 0;}

.slider-nav { display: flex; justify-content: center; gap: 10px; margin-top: 20px; margin-bottom: 2px;}
.slider-dot { width: 12px; height: 12px; background: #ccc; border-radius: 40%; cursor: pointer; transition: 0.3s; border: none; }
.slider-dot.active { background: #0a1a2a; transform: scale(1.2); }

.slider-arrow { position: absolute; /* top: 50%;  */transform: translateY(-50%); background: rgba(0,0,0,0.05); border: none; /* font-size: 24px;  */cursor: pointer; padding: 10px; border-radius: 20%; margin-top: 20px;}
.slider-arrow:hover { background: rgba(0,0,0,0.1);/*  margin: 15px; */}
.arrow-left { left: 5px; }
.arrow-right { right: 5px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.rtl-mode .feature-slide h3 {
    text-align: unset;
}

.rtl-mode .arrow-left { left: unset;  right: 5px; }
.rtl-mode .arrow-right { right: unset; left: 5px;}

.feature-segment h3 {clear: both; }