/* css/feedback.css */

/* ====================================================== */
/* 1. Modal Styles (Existing - No Changes) */
/* ====================================================== */
.feedback-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.feedback-modal.active { opacity: 1; pointer-events: auto; }
.feedback-modal.is-dissolving { transition-delay: 0s; }
.feedback-modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); transition: opacity 0.4s ease;
}
.feedback-modal.is-dissolving .feedback-modal-overlay { opacity: 0; }
.feedback-modal-content {
    position: relative; background-color: var(--surface-color); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 2rem; width: 100%; max-width: 450px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    overflow: hidden; transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease, border-radius 0.4s ease;
}
.feedback-modal.active .feedback-modal-content { transform: scale(1); }
.feedback-modal.is-dissolving .feedback-modal-content { transform: scale(0); opacity: 0; border-radius: 50%; }
.close-modal-btn {
    position: absolute; top: 1rem; right: 1rem; background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer; padding: 0.5rem; line-height: 1;
    border-radius: 50%; transition: background-color 0.2s ease, color 0.2s ease;
}
.close-modal-btn:hover { background-color: var(--border-color); color: var(--text-primary); }
.feedback-modal-content h3 { font-size: 1.5rem; color: var(--text-primary); margin-bottom: 0.5rem; text-align: center; }
.modal-subtitle { font-size: 1rem; color: var(--text-secondary); text-align: center; margin-bottom: 2rem; }
#feedbackModal .star-rating { justify-content: center; }
.thank-you-content { display: none; text-align: center; }
.thank-you-icon { font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
.feedback-modal-content.is-submitted .form-content { animation: fade-out 0.3s ease forwards; }
.feedback-modal-content.is-submitted .thank-you-content { display: block; animation: fade-in 0.3s ease 0.3s forwards; opacity: 0; }
.feedback-modal-content.is-submitted .close-modal-btn { display: none; }


/* ====================================================== */
/* 2. Shared Styles (Stars, Textarea) - UPDATED STAR CSS */
/* ====================================================== */
.star-rating {
    display: flex;
    gap: 10px;
    font-size: 2.5rem;
    cursor: pointer;
    user-select: none;
    margin-bottom: 1.5rem;
}
.star {
    color: var(--border-color);
    transition: color 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), text-shadow 0.2s ease;
}

/* FIX: This is the critical rule to make selected stars hold their color */
.star.active {
    color: var(--accent-color) !important;
    opacity: 1 !important;
}

/* On hover, all stars get the preview color/opacity */
.star-rating:hover .star {
    color: var(--accent-color);
    opacity: 0.5;
}

/* This resets the stars that come *after* the one you are hovering on */
.star-rating .star:hover ~ .star {
    color: var(--border-color);
    opacity: 1;
}

/* This styles the SPECIFIC star you are hovering on for a pop effect */
.star-rating:hover .star:hover {
    transform: scale(1.2) translateY(-2px);
    text-shadow: 0 0 15px var(--accent-glow);
    opacity: 1;
}

.star.is-selected-animation {
    animation: pulse-star 0.5s ease-out;
}
.star-rating.is-invalid {
    animation: shake-error 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
textarea#feedback, textarea#inline-feedback-text {
    width: 100%; margin-bottom: 1rem; padding: 0.8rem; font-size: 1rem;
    font-family: var(--font-main); color: var(--text-primary); background-color: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color); border-radius: 8px; resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea#feedback:focus, textarea#inline-feedback-text:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }
textarea#feedback::placeholder, textarea#inline-feedback-text::placeholder { color: var(--text-secondary); opacity: 0.7; }


/* ====================================================== */
/* 3. REVISED: Minimalist Inline Feedback Bar Styles */
/* ====================================================== */
#inline-feedback {
    padding-top: 0; padding-bottom: 80px;
    border-top: 1px solid var(--border-color); margin-top: 80px;
}
.feedback-bar {
    position: relative;
    background-color: var(--surface-color); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 1.25rem 2rem;
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    overflow: hidden;
    transition: all 0.4s ease;
}
.feedback-bar-trigger {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
}
.feedback-prompt-text {
    font-size: 1.1rem; font-weight: 500; color: var(--text-primary);
}
.feedback-prompt-icon {
    color: var(--text-secondary);
    transition: color 0.2s ease, transform 0.2s ease;
}
.feedback-bar-trigger:hover .feedback-prompt-icon {
    color: var(--accent-color);
    transform: scale(1.1);
}
/* The expanding content area */
.feedback-bar-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease, padding-top 0.5s ease;
}
.feedback-bar.is-expanded .feedback-bar-content {
    max-height: 300px;
    opacity: 1;
    padding-top: 1.5rem;
}
#inline-feedback-text { min-height: 80px; }
.feedback-bar-content #inlineStarRating { justify-content: flex-start; }
.feedback-bar-content .btn { float: right; }

/* Thank You State - CORRECTED */
#inline-thank-you {
    display: none;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
}
.feedback-bar.is-submitted .feedback-bar-trigger,
.feedback-bar.is-submitted .feedback-bar-content {
    display: none;
}
.feedback-bar.is-submitted #inline-thank-you {
    display: block;
}


/* ====================================================== */
/* 4. Keyframes */
/* ====================================================== */
@keyframes fade-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); pointer-events: none; } }
@keyframes fade-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse-star {
    0% { transform: scale(1.2); }
    50% { transform: scale(1.4); text-shadow: 0 0 25px var(--accent-color); }
    100% { transform: scale(1.2); }
}
@keyframes shake-error {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}