.error-message {
            color: red;
            font-weight: bold;
            text-align: center;
            padding: 15px;
            background-color: #ffe0e0;
            border: 1px solid #ffb3b3;
            border-radius: 5px;
        }
                /* أنماط زر "أضف إلى موقعك" */
        .add-to-site-btn {
    display: block;
    width: fit-content;
    margin: 0px auto 0 auto;
    padding: 12px 25px;
    background-color: #d3d3d3;
    color: #000000;
    border: 1px dashed;
    border-radius: 0px;
    cursor: pointer;
    transform: skewX(10deg);
    font-size: 13px;
    transition: background-color 0.3s ease;
}
        .add-to-site-btn:hover {
            background-color: #0056b3;
        }
.add-to-site-btn:hover span {
filter:invert(1)
}        
        /* أنماط النافذة المنبثقة (fullscreen) */
        .fullscreen-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            visibility: hidden; /* مخفي افتراضيًا */
            opacity: 0;
            transition: visibility 0s, opacity 0.3s ease;
        }
        .fullscreen-overlay.show {
            visibility: visible;
            opacity: 1;
        }
        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            max-width: 600px;
            width: 90%;
            text-align: center;
            position: relative;
        }
        #codeModal h3 {
    color: #333;
    margin: 10px auto;
    max-width: 400px;
    background-color: initial;
    box-shadow: none;
    border: 0;
}
        .code-area {
            background-color: #eee;
            border: 1px solid #ccc;
            padding: 15px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap; /* للحفاظ على تنسيق الكود */
            word-break: break-all; /* لكسر الكلمات الطويلة */
            max-height: 250px;
            overflow-y: auto;
            margin-bottom: 20px;
            text-align: left;
            font-size: 14px;
            color: #555;
            direction: ltr;
        }
        .copy-code-btn {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
        .copy-code-btn:hover {
            background-color: #218838;
        }
        .close-modal-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            font-size: 24px;
            color: #aaa;
            cursor: pointer;
        }
        .close-modal-btn:hover {
    background-color: initial;
    color:#666;
}
.close-modal-btn:focus {
    background-color: initial;
    color:initial;
}
        

    .add-to-site-btn span{
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPjxwYXRoIGQ9Ik0gMTIgMiBDIDYuNDg4OTk3MSAyIDIgNi40ODg5OTcxIDIgMTIgQyAyIDE3LjUxMTAwMyA2LjQ4ODk5NzEgMjIgMTIgMjIgQyAxNy41MTEwMDMgMjIgMjIgMTcuNTExMDAzIDIyIDEyIEMgMjIgNi40ODg5OTcxIDE3LjUxMTAwMyAyIDEyIDIgeiBNIDEyIDQgQyAxNi40MzAxMjMgNCAyMCA3LjU2OTg3NzQgMjAgMTIgQyAyMCAxNi40MzAxMjMgMTYuNDMwMTIzIDIwIDEyIDIwIEMgNy41Njk4Nzc0IDIwIDQgMTYuNDMwMTIzIDQgMTIgQyA0IDcuNTY5ODc3NCA3LjU2OTg3NzQgNCAxMiA0IHogTSAxMSA3IEwgMTEgMTEgTCA3IDExIEwgNyAxMyBMIDExIDEzIEwgMTEgMTcgTCAxMyAxNyBMIDEzIDEzIEwgMTcgMTMgTCAxNyAxMSBMIDEzIDExIEwgMTMgNyBMIDExIDcgeiIvPjwvc3ZnPg==);
    background-size: 15px;
    background-position-y: 3px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 17px;
    width: 14px;
    margin-right: 10px;
    margin-bottom: -4px;
    }

    #dynamic-loading-overlay{
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        z-index: 9999;
        opacity: 1;
max-width: 100%;
    }