/* Banner Upload Styles - Realmify Theme */
.banner-upload-container {
    position: relative;
}

.banner-upload-area {
    border: 2px dashed var(--realmify-border-dark);
    border-radius: var(--realmify-radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--realmify-duration) var(--realmify-transition);
    background: var(--realmify-dark-bg);
    color: var(--realmify-text-primary);
}

.banner-upload-area:hover {
    border-color: var(--realmify-voxel-blue);
    background: var(--realmify-deep-grid-gray);
    box-shadow: var(--realmify-shadow-glow);
    transform: translateY(-2px);
}

.banner-upload-area.dragover {
    border-color: var(--realmify-arcane-teal);
    background: var(--realmify-deep-grid-gray);
    box-shadow: 0 0 15px rgba(0, 196, 167, 0.3);
    border-style: solid;
    transform: scale(1.02);
}

.banner-upload-content {
    pointer-events: none;
}

.banner-upload-content i {
    color: var(--realmify-voxel-blue);
}

.banner-upload-content p {
    color: var(--realmify-text-secondary);
    margin-top: 0.5rem;
}

.banner-upload-content small {
    color: var(--realmify-text-muted);
}

.banner-preview {
    text-align: center;
    background: var(--realmify-dark-bg);
    border: 1px solid var(--realmify-border-dark);
    border-radius: var(--realmify-radius);
    padding: var(--realmify-spacing-md);
}

.banner-preview img {
    border: 1px solid var(--realmify-border-dark);
    border-radius: var(--realmify-radius-sm);
    box-shadow: var(--realmify-shadow-card);
}

.banner-preview-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* Upload progress */
.upload-progress {
    margin-top: 1rem;
}

.upload-progress .progress {
    height: 8px;
    border-radius: var(--realmify-radius-sm);
    background: var(--realmify-deep-grid-gray);
}

.upload-progress .progress-bar {
    background: linear-gradient(135deg, var(--realmify-voxel-blue) 0%, var(--realmify-arcane-teal) 100%);
}

/* Error states */
.banner-upload-area.error {
    border-color: #ff4757;
    background: var(--realmify-dark-bg);
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.3);
}

.banner-upload-area.error .banner-upload-content {
    color: #ff4757;
}

.banner-upload-area.error .banner-upload-content i {
    color: #ff4757;
}

/* Success states */
.banner-upload-area.success {
    border-color: var(--realmify-arcane-teal);
    background: var(--realmify-dark-bg);
    box-shadow: 0 0 10px rgba(0, 196, 167, 0.3);
}

.banner-upload-area.success .banner-upload-content {
    color: var(--realmify-arcane-teal);
}

.banner-upload-area.success .banner-upload-content i {
    color: var(--realmify-arcane-teal);
}