.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.custom-modal-overlay.active{opacity:1;visibility:visible}.custom-modal-content{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:90%;width:500px;max-height:90vh;display:flex;flex-direction:column;transform:translateY(20px);transition:transform .3s ease;overflow:hidden}.custom-modal-overlay.active .custom-modal-content{transform:translateY(0)}.custom-modal-content.width-sm{width:400px}.custom-modal-content.width-md{width:500px}.custom-modal-content.width-lg{width:700px}.custom-modal-content.width-xl{width:900px}.custom-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #eaeaea}.custom-modal-header h3{margin:0;font-size:18px;font-weight:600}.custom-modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:#777;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.custom-modal-close:hover{background-color:rgba(0,0,0,.05)}.custom-modal-body{padding:24px;overflow-y:auto}.custom-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #eaeaea}.custom-modal-btn{padding:8px 16px;border-radius:4px;font-weight:600;cursor:pointer;border:none;transition:background-color .2s ease}.custom-modal-btn-primary{background-color:var(--primary);color:#fff}.custom-modal-btn-primary:hover{background-color:var(--primary-dark)}.custom-modal-btn-secondary{background-color:#f5f5f5;color:#333}.custom-modal-btn-secondary:hover{background-color:#e8e8e8}.custom-modal-btn-danger{background-color:var(--danger);color:#fff}.custom-modal-btn-danger:hover{background-color:#c82333}@media (max-width:768px){.custom-modal-content.width-lg,.custom-modal-content.width-xl{width:90%}}@media (max-width:576px){.custom-modal-content{width:95%}.custom-modal-body,.custom-modal-footer,.custom-modal-header{padding:12px 16px}}