/*
Licensed under the MIT License.

Permission is hereby granted, free of charge...
*/
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loading-overlay.active {
    opacity: 1;
}

.loading-content {
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    min-width: 300px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Custom Ball-Bounce Loader */
.loader {
    position: relative;
    width: 75px;
    height: 100px;
    background-repeat: no-repeat;
    background-image: linear-gradient(#DDD 50px, transparent 0),
                      linear-gradient(#DDD 50px, transparent 0),
                      linear-gradient(#DDD 50px, transparent 0),
                      linear-gradient(#DDD 50px, transparent 0),
                      linear-gradient(#DDD 50px, transparent 0);
    background-size: 8px 100%;
    background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
    animation: pillerPushUp 4s linear infinite;
    margin: 0 auto 20px;
}

.loader:after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 10px;
    height: 10px;
    background: #de3500;
    border-radius: 50%;
    animation: ballStepUp 4s linear infinite;
}

@keyframes pillerPushUp {
    0%, 40%, 100% {
        background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
    }
    50%, 90% {
        background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px;
    }
}

@keyframes ballStepUp {
    0% {transform: translate(0, 0)}
    5% {transform: translate(8px, -14px)}
    10% {transform: translate(15px, -10px)}
    17% {transform: translate(23px, -24px)}
    20% {transform: translate(30px, -20px)}
    27% {transform: translate(38px, -34px)}
    30% {transform: translate(45px, -30px)}
    37% {transform: translate(53px, -44px)}
    40% {transform: translate(60px, -40px)}
    50% {transform: translate(60px, 0)}
    57% {transform: translate(53px, -14px)}
    60% {transform: translate(45px, -10px)}
    67% {transform: translate(37px, -24px)}
    70% {transform: translate(30px, -20px)}
    77% {transform: translate(22px, -34px)}
    80% {transform: translate(15px, -30px)}
    87% {transform: translate(7px, -44px)}
    90% {transform: translate(0, -40px)}
    100% {transform: translate(0, 0);}
}

.loading-message {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* Dark theme support */
.dark-theme .loading-content {
    background: #2d2d2d;
    color: #fff;
}

.dark-theme .loading-message {
    color: #fff;
}

.dark-theme .loader {
    background-image: linear-gradient(#666 50px, transparent 0),
                      linear-gradient(#666 50px, transparent 0),
                      linear-gradient(#666 50px, transparent 0),
                      linear-gradient(#666 50px, transparent 0),
                      linear-gradient(#666 50px, transparent 0);
}

/* Success Modal */
.success-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.success-modal.active {
    opacity: 1;
}

.success-content {
    background: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: successPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes successPop {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.success-title {
    font-size: 24px;
    font-weight: 700;
    color: #4CAF50;
    margin-bottom: 20px;
}

.success-list {
    text-align: left;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    max-height: 200px;
    overflow-y: auto;
}

.success-item {
    padding: 8px 0;
    color: #666;
    font-size: 14px;
}

.success-subtitle {
    font-size: 14px;
    color: #999;
    margin-top: 20px;
}

/* Dark theme support */
.dark-theme .success-content {
    background: #2d2d2d;
}

.dark-theme .success-title {
    color: #4CAF50;
}

.dark-theme .success-list {
    background: #1a1a1a;
}

.dark-theme .success-item {
    color: #ccc;
}

.dark-theme .success-subtitle {
    color: #888;
}