/**
 * Course Review Popup — Production overrides
 * Scoped to: form.tutor-course-review-popup-form
 *
 * IMPORTANT: tutor-quiz.css applies `display:grid !important` and other aggressive
 * styles to `.tutor-modal-body.tutor-text-center` (intended for the quiz abandon modal).
 * Those rules break this popup. We must use !important to undo them.
 */

/* ============================================================
   1. OVERLAY
   ============================================================ */
form.tutor-course-review-popup-form .tutor-modal-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

/* ============================================================
   2. MODAL CONTAINER — true vertical + horizontal center
   ============================================================ */
form.tutor-course-review-popup-form.tutor-modal.tutor-is-active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

/* ============================================================
   3. MODAL WINDOW — proper sizing, no stretching
   ============================================================ */
form.tutor-course-review-popup-form .tutor-modal-window {
    margin: 0 !important;
    min-height: unset !important;
    max-width: 520px !important;
    width: 100% !important;
    pointer-events: auto !important;
}

/* ============================================================
   4. CONTENT CARD — white bg, soft shadow, rounded corners
   ============================================================ */
form.tutor-course-review-popup-form .tutor-modal-content.tutor-modal-content-white {
    background-color: #fff !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
}

/* ============================================================
   5. MODAL BODY — undo grid from tutor-quiz.css, use normal flow
   tutor-quiz.css: .tutor-modal-body.tutor-text-center { display:grid!important }
   ============================================================ */
form.tutor-course-review-popup-form .tutor-modal-body.tutor-text-center {
    display: block !important;
    padding: 32px 32px 28px !important;
    min-height: auto !important;
    gap: 0 !important;
}

/* Undo grid-row assignments from tutor-quiz.css */
form.tutor-course-review-popup-form .tutor-modal-body.tutor-text-center div,
form.tutor-course-review-popup-form .tutor-modal-body.tutor-text-center p {
    grid-row: unset !important;
}

/* ============================================================
   6. CLOSE BUTTON — properly positioned
   ============================================================ */
form.tutor-course-review-popup-form .tutor-iconic-btn.tutor-modal-close-o {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 2 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

form.tutor-course-review-popup-form .tutor-iconic-btn.tutor-modal-close-o:hover {
    color: #374151 !important;
    background-color: #f3f4f6 !important;
}

/* ============================================================
   7. HEADING
   ============================================================ */
form.tutor-course-review-popup-form .tutor-modal-body .tutor-fs-3 {
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
}

/* ============================================================
   8. SUBHEADING — "Select Rating"
   ============================================================ */
form.tutor-course-review-popup-form .tutor-modal-body .tutor-fs-6 {
    font-size: 0.9375rem !important;
    color: #6b7280 !important;
    margin-bottom: 4px !important;
}

/* ============================================================
   9. STAR RATINGS
   ============================================================ */
form.tutor-course-review-popup-form .tutor-ratings {
    margin-top: 12px !important;
    margin-bottom: 4px !important;
}

form.tutor-course-review-popup-form .tutor-ratings-stars {
    font-size: 36px !important;
}

form.tutor-course-review-popup-form .tutor-ratings i {
    cursor: pointer !important;
    transition: transform 0.15s ease !important;
}

form.tutor-course-review-popup-form .tutor-ratings i:hover {
    transform: scale(1.15) !important;
}

/* ============================================================
   10. TEXTAREA — full width, proper sizing
   ============================================================ */
form.tutor-course-review-popup-form textarea.tutor-form-control {
    display: block !important;
    width: 100% !important;
    min-height: 120px !important;
    padding: 12px 16px !important;
    margin-top: 20px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #374151 !important;
    background-color: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

form.tutor-course-review-popup-form textarea.tutor-form-control:focus {
    outline: none !important;
    border-color: var(--tutor-color-primary, #500000) !important;
    box-shadow: 0 0 0 3px rgba(80, 0, 0, 0.08) !important;
}

form.tutor-course-review-popup-form textarea.tutor-form-control::placeholder {
    color: #9ca3af !important;
}

/* ============================================================
   11. BUTTON ROW — flex row, centered, properly spaced
   ============================================================ */
form.tutor-course-review-popup-form .tutor-modal-body .tutor-d-flex.tutor-my-48 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 24px !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
    position: static !important;
    width: auto !important;
}

/* ============================================================
   12. CANCEL BUTTON
   ============================================================ */
form.tutor-course-review-popup-form .tutor-btn.tutor-review-popup-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

form.tutor-course-review-popup-form .tutor-btn.tutor-review-popup-cancel:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
}

/* ============================================================
   13. SUBMIT BUTTON
   ============================================================ */
form.tutor-course-review-popup-form .tutor-btn.tutor_submit_review_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background-color: var(--tutor-color-primary, #500000) !important;
    border: 1px solid var(--tutor-color-primary, #500000) !important;
    color: #fff !important;
    margin-left: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

form.tutor-course-review-popup-form .tutor-btn.tutor_submit_review_btn:hover {
    background-color: var(--tutor-color-primary-hover, #3d0000) !important;
    border-color: var(--tutor-color-primary-hover, #3d0000) !important;
    color: #fff !important;
}

form.tutor-course-review-popup-form .tutor-btn.tutor_submit_review_btn:disabled,
form.tutor-course-review-popup-form .tutor-btn.tutor_submit_review_btn.is-loading {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ============================================================
   14. RESPONSIVE — mobile
   ============================================================ */
@media (max-width: 600px) {
    form.tutor-course-review-popup-form.tutor-modal.tutor-is-active {
        padding: 16px !important;
    }

    form.tutor-course-review-popup-form .tutor-modal-window {
        max-width: none !important;
    }

    form.tutor-course-review-popup-form .tutor-modal-body.tutor-text-center {
        padding: 24px 20px 20px !important;
    }

    form.tutor-course-review-popup-form .tutor-modal-body .tutor-fs-3 {
        font-size: 1.2rem !important;
    }

    form.tutor-course-review-popup-form .tutor-ratings-stars {
        font-size: 30px !important;
    }

    form.tutor-course-review-popup-form .tutor-modal-body .tutor-d-flex.tutor-my-48 {
        flex-direction: column !important;
    }

    form.tutor-course-review-popup-form .tutor-btn.tutor-review-popup-cancel,
    form.tutor-course-review-popup-form .tutor-btn.tutor_submit_review_btn {
        width: 100% !important;
        justify-content: center !important;
        margin-left: 0 !important;
    }
}