/* ========================================================================
   CDL MODALS (Glassy, Premium, Bootstrap-safe)
   ======================================================================== */

/* Modal Dialog Container – nur Optik, keine Funktion beeinflussen! */
.modal-dialog {
    backdrop-filter: none !important; /* Nur sicherheitshalber */
    margin-top: 4rem;
}

/* Modal Content */
.modal-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    animation: modalFadeIn 0.35s ease;
}

/* Header */
.modal-header {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(8px);
}

    .modal-header .modal-title {
        font-weight: 700;
        color: var(--text);
    }

    .modal-header .btn-close {
        filter: invert(40%);
    }

/* Body */
.modal-body {
    color: var(--text);
    font-weight: 500;
}

/* Footer */
.modal-footer {
    border-top: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(8px);
}

/* Small subtle fade animation */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========================================================================
   SAFE BACKDROP – keine Funktion zerstören!
   ======================================================================== */

.modal-backdrop.show {
    opacity: 0.45; /* Dezenter, schöner */
}

.modal-backdrop {
    background-color: #000 !important; /* Standard beibehalten */
}

/* ========================================================================
   Sizing Helper Classes (optional)
   ======================================================================== */

.modal-xl-glass .modal-dialog {
    max-width: 1100px;
}

.modal-lg-glass .modal-dialog {
    max-width: 900px;
}

.modal-sm-glass .modal-dialog {
    max-width: 400px;
}

/* Optional: Center modal vertically without breaking Bootstrap */
.modal-vertical-center .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 2rem);
}


/* Modal Container */
.cdl-settings-modal .modal-content.glassy-modal {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
    padding: 10px 6px 0px 6px;
}

/* Settings List */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* One Setting Item */
.settings-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.7);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background .15s;
}

    .settings-item:hover {
        background: rgba(255,255,255,0.85);
    }

    .settings-item .form-check-input {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.settings-icon {
    font-size: 22px;
    width: 28px;
}

.settings-label {
    font-size: 16px;
    font-weight: 500;
}