/* Casete de atenție și informații personalizate */
.atentie-box, .info-box {
    position: relative;
    margin: 1.5rem 0;
    padding: 1.5rem;
    border-radius: 10px;
    font-size: 1rem;
}

/* Stiluri pentru light mode */
body.light-mode .atentie-box {
    background-color: #FFF9E6; /* Galben pastelat */
    border-left: 5px solid #FFD700; /* Bordură aurie */
    color: #663C00; /* Text maro închis */
}

body.light-mode .info-box {
    background-color: #F0F8FF; /* Albastru deschis pastelat */
    border-left: 5px solid #560027; /* Bordură în culoarea ta primară */
    color: #560027; /* Text în culoarea ta primară */
}

/* Stiluri pentru dark mode */
body.dark-mode .atentie-box {
    background-color: rgba(255, 215, 0, 0.1); /* Galben transparent */
    border-left: 5px solid rgba(255, 215, 0, 0.5); /* Bordură aurie semitransparentă */
    color: #F2D0A4; /* Text în culoarea ta accent pentru dark mode */
}

body.dark-mode .info-box {
    background-color: rgba(242, 208, 164, 0.1); /* Culoarea ta accent semi-transparentă */
    border-left: 5px solid rgba(242, 208, 164, 0.5); /* Bordură în culoarea ta accent */
    color: #F2D0A4; /* Text în culoarea ta accent */
}

/* Stiluri pentru elementele din interiorul casetelor */
.atentie-box p, .info-box p,
.atentie-box ul, .info-box ul {
    margin-bottom: 0.75rem;
}

.atentie-box p:last-child, .info-box p:last-child,
.atentie-box ul:last-child, .info-box ul:last-child {
    margin-bottom: 0;
}

/* Formatare pentru titluri și evidențiere în casete */
.atentie-box .fw-bold, .info-box .fw-bold {
    font-size: 1.1rem;
}

/* Îmbunătățiri pentru lizibilitate în dark mode */
body.dark-mode .atentie-box .fw-bold, 
body.dark-mode .info-box .fw-bold {
    color: #FFD700; /* Evidențiere în auriu pentru dark mode */
}