/**
Copyright (c) 2026 Yartha Engineering Pvt Ltd
 */

.loading-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.display-none {
    display: none !important;
}

/* Style the cite-marker inside the CKEditor editable area */
/* Target the protected span inside the CKEditor editing area */
.ck-content span[data-ck-unsafe-element="cite-marker"], cite-marker {
    display: inline-block !important;
    background-color: #e6f2ff;
    border: 1px solid #99c2ff;
    border-radius: 4px;
    padding: 0 6px;
    margin: 0 4px;
    font-size: 0.85em;
    font-weight: 600;
    color: #0d6efd;
    cursor: pointer;
    vertical-align: baseline;

    /* Reinforce that it shouldn't be selected like normal text */
    user-select: none !important;
    -webkit-user-select: none !important;

    /* Smooth transition for hover effects */
    transition: all 0.2s ease-in-out;
}

/* Inject visual text since the span is technically empty */
.ck-content span[data-ck-unsafe-element="cite-marker"]::after, cite-marker::after {
    content: '📚'; /* Or use an icon like '📚' */
}

/* Add a nice hover effect so users know it's interactive */
.ck-content span[data-ck-unsafe-element="cite-marker"]:hover, cite-marker:hover {
    background-color: #cce5ff;
    border-color: #66a3ff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}