/* Modal pentru Light Mode */
body.light-mode .modal-content {
    background-color: #FFFFFF;
    /* Fundal alb pentru modal */
    color: var(--light-article-text-color);
    /* Text închis pentru contrast bun */
    border-radius: 15px;
    /* Colțuri rotunjite pentru un aspect prietenos */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Umbra modalului pentru a crea adâncime */
}

body.light-mode .modal-header {
    background-color: var(--light-nav-bg-color);
    /* Fundal similar cu navbar-ul pentru continuitate */
    color: #FFFFFF;
    /* Text alb pentru header */
    border-top-left-radius: 15px;
    /* Rotunjirea colțului stânga sus */
    border-top-right-radius: 15px;
    /* Rotunjirea colțului dreapta sus */
}

body.light-mode .modal-header .modal-title {
    font-weight: bold;
}

body.light-mode .modal-body {
    background-color: #FAFAFA;
    /* Fundal foarte deschis pentru corpul modalului */
    color: var(--light-article-text-color);
    /* Culoarea textului */
    padding: 20px;
}

body.light-mode .modal-footer {
    background-color: #FFFFFF;
    /* Fundal alb pentru footer */
    border-bottom-left-radius: 15px;
    /* Rotunjirea colțului stânga jos */
    border-bottom-right-radius: 15px;
    /* Rotunjirea colțului dreapta jos */
    text-align: right;
    /* Aliniere la dreapta pentru butoane */
}

/* Modal pentru Dark Mode */
body.dark-mode .modal-content {
    background-color: #2C2C2E;
    /* Fundal închis pentru modal */
    color: var(--dark-article-text-color);
    /* Text deschis pentru contrast bun */
    border-radius: 15px;
    /* Colțuri rotunjite pentru un aspect prietenos */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    /* Umbra modalului pentru a crea adâncime */
}

body.dark-mode .modal-header {
    background-color: var(--dark-nav-bg-color);
    /* Fundal similar cu navbar-ul pentru continuitate */
    color: #FFFFFF;
    /* Text alb pentru header */
    border-top-left-radius: 15px;
    /* Rotunjirea colțului stânga sus */
    border-top-right-radius: 15px;
    /* Rotunjirea colțului dreapta sus */
}

body.dark-mode .modal-header .modal-title {
    font-weight: bold;
}

body.dark-mode .modal-body {
    background-color: #3A3A3C;
    /* Fundal mai închis pentru corpul modalului */
    color: var(--dark-article-text-color);
    /* Culoarea textului deschis */
    padding: 20px;
}

body.dark-mode .modal-footer {
    background-color: #2C2C2E;
    /* Fundal închis pentru footer */
    border-bottom-left-radius: 15px;
    /* Rotunjirea colțului stânga jos */
    border-bottom-right-radius: 15px;
    /* Rotunjirea colțului dreapta jos */
    text-align: right;
    /* Aliniere la dreapta pentru butoane */
}

/* Butonul de închidere (`btn-close`) în Light și Dark Mode */
body.light-mode .modal-header .btn-close {
    filter: invert(0);
    /* Buton normal (închis) în light mode */
}

body.dark-mode .modal-header .btn-close {
    filter: invert(1);
    /* Buton deschis (alb) pentru contrast în dark mode */
}

/* Link-uri și Liste în modal */
.modal-body ul.primero li {
    padding: 5px 0;
    font-size: 1.1em;
}

body.light-mode .modal-body ul.primero li {
    color: var(--light-article-text-color);
}

body.dark-mode .modal-body ul.primero li {
    color: var(--dark-article-text-color);
}

/* Stiluri pentru butoanele din modal */
body.light-mode .modal-footer .btn {
    background-color: var(--light-nav-bg-color);
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

body.dark-mode .modal-footer .btn {
    background-color: var(--dark-nav-bg-color);
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

body.light-mode .modal-footer .btn:hover,
body.dark-mode .modal-footer .btn:hover {
    background-color: #560027;
    /* Fundal ușor mai închis la hover pentru ambele moduri */
}


/* Light Mode Modal */
body.light-mode .modal-content {
    max-height: 90vh;
}

body.light-mode .modal-body {
    max-height: calc(90vh - 120px);
    /* Scădem înălțimea header-ului și footer-ului */
    overflow-y: auto;
    scrollbar-width: thin;
}

body.light-mode .modal-body::-webkit-scrollbar {
    width: 6px;
}

body.light-mode .modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

body.light-mode .modal-body::-webkit-scrollbar-thumb {
    background: var(--light-nav-bg-color);
    border-radius: 3px;
}

/* Dark Mode Modal */
body.dark-mode .modal-content {
    max-height: 90vh;
}

body.dark-mode .modal-body {
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
}

body.dark-mode .modal-body::-webkit-scrollbar {
    width: 6px;
}

body.dark-mode .modal-body::-webkit-scrollbar-track {
    background: #2d2d2d;
    border-radius: 3px;
}

body.dark-mode .modal-body::-webkit-scrollbar-thumb {
    background: var(--dark-nav-bg-color);
    border-radius: 3px;
}