/* Feedback Widget Styles */
.feedback-widget-btn {
    position: fixed; bottom: 100px; right: 20px; z-index: 1040;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    cursor: pointer; transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.5rem;
}
.feedback-widget-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5); }
.feedback-widget-btn:active { transform: scale(0.95); }
@media (max-width: 991.98px) { .feedback-widget-btn { bottom: 80px; } }

.feedback-modal-content {
    border-radius: 16px; border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.feedback-modal-header {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding: 1rem 1.25rem;
}
.feedback-modal-header .modal-title { font-weight: 600; font-size: 1rem; }
#feedbackModal .modal-body { padding: 1.25rem; }

.feedback-type-buttons { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.feedback-type-btn {
    flex: 1; padding: 0.5rem; border: 2px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px; background: var(--bs-body-bg, #fff);
    cursor: pointer; transition: all 0.2s ease; text-align: center;
}
.feedback-type-btn:hover { border-color: #6366f1; background: rgba(99, 102, 241, 0.12); }
.feedback-type-btn.active { border-color: #6366f1; background: #6366f1; color: white; }
.feedback-type-btn i { display: block; font-size: 1.25rem; margin-bottom: 0.25rem; }
.feedback-type-btn span { font-size: 0.75rem; font-weight: 500; }

.feedback-form .form-control, .feedback-form .form-select {
    border-radius: 8px; border: 1.5px solid var(--bs-border-color, #dee2e6); font-size: 0.875rem;
}
.feedback-form .form-control:focus, .feedback-form .form-select:focus {
    border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.feedback-form textarea { resize: none; }
.feedback-submit-btn { width: 100%; padding: 0.75rem; border-radius: 8px; font-weight: 600; font-size: 0.875rem; }

.feedback-success { text-align: center; padding: 2rem 1rem; }
.feedback-success-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--bs-success-bg-subtle, #d1fae5); color: var(--bs-success, #10b981);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 2rem;
}
.feedback-success h5 { margin-bottom: 0.5rem; font-weight: 600; }
.feedback-success p { color: var(--bs-secondary, #6c757d); font-size: 0.875rem; margin-bottom: 0; }

.feedback-screenshot-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.625rem; border: 2px dashed var(--bs-border-color, #dee2e6);
    border-radius: 8px; background: transparent; color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease; margin-bottom: 1rem;
}
.feedback-screenshot-btn:hover { border-color: #6366f1; color: #6366f1; background: rgba(99, 102, 241, 0.12); }
.feedback-screenshot-buttons { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.feedback-screenshot-buttons .feedback-screenshot-btn { flex: 1; margin-bottom: 0; }

.feedback-screenshot-preview { position: relative; margin-bottom: 1rem; }
.feedback-screenshot-preview img { width: 100%; border-radius: 8px; border: 1px solid var(--bs-border-color, #dee2e6); }
.feedback-screenshot-remove {
    position: absolute; top: -8px; right: -8px; width: 24px; height: 24px;
    border-radius: 50%; background: var(--bs-danger, #dc3545); color: white;
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
}

/* Screenshot overlay */
.screenshot-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.3); z-index: 9999; cursor: crosshair;
}
.screenshot-overlay-instructions {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8); color: white; padding: 1.5rem 2rem;
    border-radius: 12px; text-align: center; font-size: 1rem; pointer-events: none; line-height: 1.6;
}
.screenshot-overlay-instructions i { display: block; font-size: 2rem; margin-bottom: 0.75rem; }
.screenshot-overlay-instructions small { opacity: 0.7; }
.screenshot-selection {
    position: absolute; border: 2px dashed #fff;
    background: rgba(99, 102, 241, 0.2); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); display: none;
}

/* Dark mode */
[data-bs-theme="dark"] .feedback-widget-btn { background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%); box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3); }
[data-bs-theme="dark"] .feedback-modal-content { background-color: #383838 !important; }
[data-bs-theme="dark"] .feedback-type-btn { background-color: #1E1E1E; border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.87); }
[data-bs-theme="dark"] .feedback-type-btn:hover { background: rgba(129,140,248,0.15); border-color: #818cf8; }
[data-bs-theme="dark"] .feedback-type-btn.active { background: #818cf8; border-color: #818cf8; color: #121212; }
[data-bs-theme="dark"] .feedback-screenshot-btn { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.60); }
[data-bs-theme="dark"] .feedback-screenshot-btn:hover { background: rgba(129,140,248,0.15); border-color: #818cf8; color: #818cf8; }