/* Modal Header Styling */
.modal-header {
    background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%) !important;
    color: white !important;
    border-bottom: none !important;
    padding: 20px 30px !important;
}

.modal-title {
    font-weight: 700 !important;
    font-size: 24px !important;
    color: white !important;
}

/* Gradient Title Effect - Rainbow Style */
.gradient-title {
    background: linear-gradient(90deg, 
        #ff1493 0%,
        #ff69b4 16%,
        #ffa500 33%,
        #ffd700 50%,
        #32cd32 66%,
        #1e90ff 83%,
        #9370db 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    display: inline-block !important;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* Modal Body */
.modal-body {
    padding: 30px !important;
    background: linear-gradient(to bottom, #fff 0%, #fff5fa 100%) !important;
}

#modalDesc {
    color: #333 !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
}

/* Headings with Colorful Gradient */
#modalDesc h1, 
#modalDesc h2, 
#modalDesc h3, 
#modalDesc h4 {
    background: linear-gradient(90deg, 
        #ff1493 0%,
        #ff6347 25%,
        #ffa500 50%,
        #32cd32 75%,
        #1e90ff 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
    margin: 25px 0 15px 0 !important;
    display: inline-block !important;
}

#modalDesc h1 {
    font-size: 28px !important;
    padding-bottom: 10px !important;
}

#modalDesc h2 { 
    font-size: 24px !important; 
}

#modalDesc h3 { 
    font-size: 20px !important; 
}

#modalDesc h4 { 
    font-size: 18px !important; 
}

/* Paragraphs */
#modalDesc p {
    margin-bottom: 15px !important;
    color: #444 !important;
}

/* Text Formatting */
#modalDesc strong, 
#modalDesc b {
    background: linear-gradient(90deg, #ff1493, #ff6347, #ffa500) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
}

#modalDesc em, 
#modalDesc i {
    color: #d4116e !important;
    font-style: italic !important;
}

/* Lists */
#modalDesc ul, 
#modalDesc ol {
    margin: 15px 0 !important;
    padding-left: 30px !important;
    color: #444 !important;
}

#modalDesc li {
    margin-bottom: 10px !important;
    line-height: 1.6 !important;
}

#modalDesc li::marker {
    color: #ff1493 !important;
    font-weight: bold !important;
}

/* Blockquote */
#modalDesc blockquote {
    border-left: 4px solid #ff1493 !important;
    padding: 15px 20px !important;
    margin: 20px 0 !important;
    font-style: italic !important;
    color: #666 !important;
    background: #fff !important;
    border-radius: 5px !important;
}

/* Links */
#modalDesc a {
    background: linear-gradient(90deg, #ff1493, #1e90ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

#modalDesc a:hover {
    background: linear-gradient(90deg, #1e90ff, #ff1493) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Horizontal Rule */
#modalDesc hr {
    border: none !important;
    height: 2px !important;
    background: linear-gradient(90deg, #ff1493, #ffa500, #32cd32, #1e90ff, #9370db) !important;
    margin: 25px 0 !important;
    opacity: 0.6 !important;
}

/* Code */
#modalDesc code {
    background: #ffe6f2 !important;
    color: #d4116e !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: monospace !important;
}

#modalDesc pre {
    background: #ffe6f2 !important;
    border-left: 4px solid #ff1493 !important;
    padding: 15px !important;
    border-radius: 5px !important;
    overflow-x: auto !important;
}