/* ========== BONUS UPLOAD MODAL STYLING ========== */

.bonus-upload-modal {
    background-color: var(--color-surface, rgba(20, 20, 30, 0.95)) !important;
    border: 1px solid var(--color-border, rgba(0, 207, 255, 0.35)) !important;
    color: var(--color-text-primary, #ecf0f1) !important;
}

.bonus-upload-header {
    background-color: var(--color-bg-primary, #1a1a2e) !important;
    border-bottom: 1px solid var(--color-border, rgba(0, 207, 255, 0.35)) !important;
    color: var(--color-text-primary, #ecf0f1) !important;
}

.bonus-upload-header .modal-title {
    color: var(--color-text-primary, #ecf0f1) !important;
    font-weight: 600;
}

.bonus-upload-body {
    background-color: var(--color-surface, rgba(20, 20, 30, 0.95)) !important;
    color: var(--color-text-primary, #ecf0f1) !important;
}

.bonus-label {
    color: var(--color-text-primary, #ecf0f1) !important;
    font-weight: 500;
    margin-bottom: 8px;
}

.bonus-input {
    background-color: var(--color-bg-primary, #1a1a2e) !important;
    border: 1px solid var(--color-border, rgba(0, 207, 255, 0.35)) !important;
    color: var(--color-text-primary, #ecf0f1) !important;
}

.bonus-input:focus {
    background-color: var(--color-surface-alt, rgba(30, 30, 50, 0.9)) !important;
    border-color: var(--color-accent, #00cfff) !important;
    color: var(--color-text-primary, #ecf0f1) !important;
    box-shadow: 0 0 8px rgba(0, 207, 255, 0.3) !important;
}

.bonus-input::placeholder {
    color: var(--color-text-muted, #a0aec0);
}

.bonus-upload-footer {
    background-color: var(--color-bg-primary, #1a1a2e) !important;
    border-top: 1px solid var(--color-border, rgba(0, 207, 255, 0.35)) !important;
}

.bonus-upload-modal .btn-primary {
    background-color: var(--color-accent, #00cfff) !important;
    border-color: var(--color-accent, #00cfff) !important;
    color: #000 !important;
    font-weight: 600;
}

.bonus-upload-modal .btn-primary:hover {
    background-color: var(--color-accent-hover, #00e5ff) !important;
    border-color: var(--color-accent-hover, #00e5ff) !important;
}

/* Light theme adjustments */
.theme-light .bonus-upload-modal {
    background-color: var(--color-surface, #ffffff) !important;
    border: 1px solid var(--color-border, #d0d0d0) !important;
    color: var(--color-text-primary, #1f2937) !important;
}

.theme-light .bonus-upload-header {
    background-color: var(--color-bg-primary, #f3f4f6) !important;
    border-bottom: 1px solid var(--color-border, #d0d0d0) !important;
}

.theme-light .bonus-upload-header .modal-title,
.theme-light .bonus-label {
    color: var(--color-text-primary, #1f2937) !important;
}

.theme-light .bonus-input {
    background-color: #ffffff !important;
    border: 1px solid #d0d0d0 !important;
    color: #1f2937 !important;
}

.theme-light .bonus-input:focus {
    background-color: #f9fafb !important;
    border-color: var(--color-accent, #0891b2) !important;
    box-shadow: 0 0 8px rgba(8, 145, 178, 0.2) !important;
}

.theme-light .bonus-upload-footer {
    background-color: var(--color-bg-primary, #f3f4f6) !important;
}

#bonusPreviewModal img {
    max-height: 60vh;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}