/* ===== feedback.css – standalone compressed ===== */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

.feedback-root {--feedback-white: #ffffff; --feedback-bg-light: #f9fafb; --feedback-border-light: #e5e7eb; --feedback-border-medium: #d1d5db; --feedback-border-dark: #9ca3af; --feedback-text-primary: #111827; --feedback-text-secondary: #4b5563; --feedback-text-tertiary: #6b7280; --feedback-accent-blue: #3066db; --feedback-accent-red: #ef4444; 
    --feedback-accent-green: #10b981; --feedback-accent-yellow: #f59e0b; --feedback-radius-md: 8px; --feedback-radius-lg: 12px; --feedback-radius-full: 9999px; --feedback-shadow-sm: 0 1px 2px 0 #0000000d; --feedback-shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f; --feedback-shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d; --feedback-transition: all 0.2s ease;}
.feedback-widget {position: fixed; bottom: 20px; right: 20px; display: none;}
.feedback-button {background: var(--feedback-accent-blue, #2563eb); color: var(--feedback-white, #ffffff); border: none; border-radius: 30px; padding: 10px 22px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: var(--feedback-shadow-lg, 0 10px 15px -3px #0000001a); display: flex; align-items: center; gap: 8px; transition: var(--feedback-transition, all 0.2s ease);}
.feedback-button:hover {background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 12px 20px -8px #2563eb66;}
.feedback-button i {font-size: 17px;}
.feedback-modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #00000026; display: flex; align-items: center; justify-content: center; z-index: 10003; opacity: 0; visibility: hidden; transition: all 0.3s ease;}
.feedback-modal.active {backdrop-filter: blur(2px); opacity: 1; visibility: visible;}
.feedback-modal.active ~ .feedback-widget {display: none;}
.feedback-modal-content {background: var(--feedback-white, #ffffff); border-radius: var(--feedback-radius-lg, 12px); padding: 30px; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: translateY(30px); transition: transform 0.3s ease; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto;}
.feedback-modal.active .feedback-modal-content {transform: translateY(0);}
.feedback-modal-close {position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: var(--feedback-text-tertiary, #6b7280); background: none; border: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--feedback-radius-full, 9999px); transition: var(--feedback-transition, all 0.2s ease);}
.feedback-modal-close:hover {color: var(--feedback-accent-red, #ef4444);}
.feedback-title {color: var(--feedback-text-primary, #111827); margin-bottom: 25px; font-size: 24px; text-align: center;}
.feedback-form {display: flex; flex-direction: column; gap: 20px;}
.feedback-form-row {display: flex; gap: 15px;}
.feedback-form-group {display: flex; flex-direction: column; gap: 8px; flex: 1;}
.feedback-label {font-weight: 600; color: var(--feedback-text-primary, #111827); font-size: 15px;}
.required {color: var(--feedback-accent-red, #ef4444);}
.feedback-input, .feedback-textarea {padding: 12px 16px; color: var(--feedback-text-primary, #111827); border: 2px solid var(--feedback-border-medium, #d1d5db); border-radius: var(--feedback-radius-md, 8px); font-size: 16px; font-family: inherit; background: var(--feedback-bg-light, #f9fafb); transition: var(--feedback-transition, all 0.2s ease);}
.feedback-input:focus, .feedback-textarea:focus {outline: none; border-color: var(--feedback-accent-blue, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);}
.feedback-textarea {resize: vertical; min-height: 120px;}
.feedback-type-badges {display: flex; gap: 8px; flex-wrap: wrap;}
.feedback-type-badge {padding: 10px 16px; border: 2px solid var(--feedback-border-medium, #d1d5db); border-radius: var(--feedback-radius-md, 8px); background: var(--feedback-bg-light, #f9fafb); color: var(--feedback-text-secondary, #4b5563); cursor: pointer; transition: var(--feedback-transition, all 0.2s ease); font-size: 14px; font-weight: 500; text-align: center; flex: 1; min-width: calc(30% - 4px);}
.feedback-type-badge.active {background: var(--feedback-accent-blue, #2563eb); color: var(--feedback-white, #ffffff); border-color: var(--feedback-accent-blue, #2563eb);}
.feedback-type-badge:hover:not(.active) {border-color: var(--feedback-accent-blue, #2563eb);}
.feedback-rating {display: flex; gap: 15px; justify-content: center; padding: 10px 0 5px;}
.feedback-star {font-size: 35px; color: var(--feedback-border-dark, #9ca3af); cursor: pointer; transition: var(--feedback-transition, all 0.2s ease); background: none; border: none; padding: 5px; position: relative;}
.feedback-star:hover {color: var(--feedback-accent-yellow, #f59e0b); transform: scale(1.2);}
.feedback-star.active {color: var(--feedback-accent-yellow, #f59e0b);}
.feedback-rating-text {text-align: center; color: var(--feedback-text-tertiary, #6b7280); font-size: 14px; margin-bottom: 5px;}
.character-count {text-align: right; font-size: 12px; color: var(--feedback-text-tertiary, #6b7280); margin-top: 5px;}
.feedback-submit-btn {background: var(--feedback-accent-blue, #2563eb); color: var(--feedback-white, #ffffff); border: none; border-radius: var(--feedback-radius-md, 8px); padding: 16px; font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--feedback-transition, all 0.2s ease); margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;}
/* .feedback-submit-btn:hover:not(:disabled) {background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 4px 12px #2563eb4d;} */
/* .feedback-submit-btn:disabled {background: #93c5fd; cursor: not-allowed; transform: none; box-shadow: none;} */

.feedback-toast {position: fixed; top: 75px; right: 25px; background: #3066db; color: var(--feedback-white, #ffffff); padding: 12px 20px; border-radius: var(--feedback-radius-md, 8px); box-shadow: 0 10px 30px #00000033; 
    display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; z-index: 10010; transform: translateX(100px); opacity: 0; visibility: hidden; transition: all 0.3s ease; max-width: 350px;}
.feedback-toast.show {transform: translateX(0); opacity: 1; visibility: visible;}
.feedback-toast i {font-size: 20px;}
.feedback-toast-error {background: var(--feedback-accent-red, #ef4444);}
.feedback-toast-success {background: #3066db;}

@media (max-width: 700px) {.feedback-widget {bottom: 18px; right: 18px;} .feedback-button {padding: 10px; width: 50px; height: 50px; border-radius: var(--feedback-radius-full, 9999px); justify-content: center;} .feedback-button span {display: none;} 
.feedback-modal-content {padding: 25px; max-height: 100vh;} .feedback-form-row {flex-direction: column; gap: 15px;} .feedback-type-badges {flex-wrap: wrap;} .feedback-star {font-size: 30px;} .feedback-toast {top: 20px; right: 20px; left: 20px; max-width: none;}}
@media (max-width: 500px) {.feedback-widget {bottom: 15px; right: 15px;} .feedback-button {width: 45px; height: 45px;} .feedback-modal {padding: 0; align-items: stretch;} 
.feedback-modal-content {max-width: 100%; max-height: 100vh; height: 100%; width: 100%; border-radius: 12px 12px 0 0; padding: 25px 21px; margin-top: 5px;} .feedback-title {text-align: left; font-size: 22px; margin-bottom: 20px;} .feedback-type-badge {min-width: calc(50% - 4px);} .feedback-form {gap: 15px;} .feedback-form-row {gap: 12px;}}