/* Loading State System for Buttons */

.btn {
    position: relative;
    transition: all 0.2s ease;
}

.btn.loading {
    color: transparent !important;
    pointer-events: none;
    cursor: not-allowed;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spinner 0.6s linear infinite;
}

.btn.btn-ghost.loading::after {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: var(--text-primary);
}

.btn.btn-secondary.loading::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Form input loading state */
.form-input.loading,
.form-select.loading,
.form-textarea.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='.25'/%3E%3Cpath fill='%23333' d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='0.75s' values='0 12 12;360 12 12' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    pointer-events: none;
}

/* Disable state for loading */
.btn:disabled,
.btn.loading {
    opacity: 0.7;
}

/* Loading text helper */
.loading-text {
    display: none;
}

.btn.loading .loading-text {
    display: inline;
    color: white;
}

.btn.loading .default-text {
    display: none;
}

/* Pulse animation for emphasis */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.btn.loading.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Loading overlay for sections */
.loading-overlay {
    position: relative;
}

.loading-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 100;
    display: none;
}

.loading-overlay.loading::before {
    display: block;
}

.loading-overlay::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--accent);
    animation: spinner 0.8s linear infinite;
    z-index: 101;
    display: none;
}

.loading-overlay.loading::after {
    display: block;
}

/* Small loading spinner for inline use */
.spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--accent);
    animation: spinner 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

/* Loading dots animation */
.loading-dots::after {
    content: '';
    animation: loading-dots 1.5s steps(4, end) infinite;
}

@keyframes loading-dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}