/**
 * Press Ganey Elementor Widget Styles
 * Styled for Aspire Rural Health System
 * Colors: Teal primary (#008B8B / #007272), clean whites, neutral grays
 */

/* ========================================
   CSS CUSTOM PROPERTIES (Aspire Brand Colors)
   ======================================== */

:root {
    --pg-primary: #008B8B;
    --pg-primary-dark: #007272;
    --pg-primary-light: #e6f5f5;
    --pg-secondary: #2c5e5e;
    --pg-accent: #00b3b3;
    --pg-text-dark: #1a1a1a;
    --pg-text-medium: #4a4a4a;
    --pg-text-light: #6b6b6b;
    --pg-border: #e0e0e0;
    --pg-background: #ffffff;
    --pg-background-alt: #f8fafa;
    --pg-star-filled: #f5a623;
    --pg-star-empty: #d0d0d0;
    --pg-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --pg-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --pg-radius: 8px;
    --pg-radius-lg: 12px;
    --pg-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* ========================================
   COMMON STYLES
   ======================================== */

.press-ganey-widget-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: var(--pg-font-family);
}

.bf-widget {
    width: 100%;
}

/* Error message styling */
.press-ganey-error,
.pg-api-error {
    color: #c53030;
    padding: 20px;
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-radius: var(--pg-radius);
    font-size: 14px;
    line-height: 1.6;
}

/* Ensure proper spacing within the widget */
.press-ganey-widget-container > div {
    margin-bottom: 0;
}

/* Loading state placeholder for JS widget */
.press-ganey-widget-container:empty::before {
    content: 'Loading reviews...';
    display: block;
    padding: 40px;
    text-align: center;
    color: var(--pg-text-light);
    background: var(--pg-background-alt);
    border-radius: var(--pg-radius);
    font-size: 14px;
}

/* ========================================
   API WIDGET STYLES
   ======================================== */

.pg-api-widget {
    width: 100%;
    font-family: var(--pg-font-family);
}

.pg-api-widget * {
    box-sizing: border-box;
}

/* Summary section */
.pg-api-summary {
    background: var(--pg-background);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-lg);
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: var(--pg-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.pg-api-summary:hover {
    box-shadow: var(--pg-shadow-hover);
    transform: translateY(-2px);
}

.pg-api-summary h3 {
    color: var(--pg-primary-dark);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--pg-primary-light);
}

.pg-api-summary-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.pg-api-rating-number {
    font-size: 48px;
    font-weight: 700;
    color: var(--pg-primary);
    line-height: 1;
}

.pg-api-rating-meta {
    color: var(--pg-text-light);
    font-size: 14px;
    margin-top: 8px;
}

/* Star ratings */
.pg-stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.pg-stars svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.pg-star-filled {
    color: var(--pg-star-filled);
    fill: var(--pg-star-filled);
}

.pg-star-empty {
    color: var(--pg-star-empty);
    fill: var(--pg-star-empty);
}

/* AI Summary section */
.pg-api-ai-summary {
    background: linear-gradient(135deg, var(--pg-primary-light) 0%, #f0fafa 100%);
    border: 1px solid rgba(0, 139, 139, 0.2);
    border-left: 4px solid var(--pg-primary);
    border-radius: var(--pg-radius);
    padding: 24px;
    margin-bottom: 20px;
    transition: background-color 0.25s ease;
}

.pg-api-ai-summary h4 {
    color: var(--pg-primary-dark);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pg-api-ai-summary h4::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23008B8B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.pg-api-ai-summary p {
    color: var(--pg-text-medium);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

/* Comments section */
.pg-api-comments {
    background: var(--pg-background);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-lg);
    padding: 28px;
    box-shadow: var(--pg-shadow);
    transition: box-shadow 0.25s ease;
}

.pg-api-comments:hover {
    box-shadow: var(--pg-shadow-hover);
}

.pg-api-comments h3 {
    color: var(--pg-primary-dark);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 24px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--pg-primary-light);
}

/* Individual comment cards */
.pg-api-comment {
    background: var(--pg-background-alt);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    padding: 20px;
    margin-bottom: 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pg-api-comment:last-child {
    margin-bottom: 0;
}

.pg-api-comment:hover {
    background-color: #ffffff;
    border-color: var(--pg-primary);
}

.pg-api-comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.pg-api-comment-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pg-api-comment-rating .pg-stars svg {
    width: 18px;
    height: 18px;
}

.pg-api-comment-date {
    color: var(--pg-text-light);
    font-size: 13px;
}

.pg-api-comment-text {
    color: var(--pg-text-dark);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    quotes: '"' '"' ''' ''';
}

.pg-api-comment-text::before {
    content: open-quote;
    color: var(--pg-primary);
    font-size: 20px;
    font-weight: 600;
}

.pg-api-comment-text::after {
    content: close-quote;
    color: var(--pg-primary);
    font-size: 20px;
    font-weight: 600;
}

/* No comments message */
.pg-api-no-comments {
    text-align: center;
    padding: 40px 20px;
    color: var(--pg-text-light);
    font-size: 15px;
}

/* ========================================
   JS WIDGET OVERRIDES (Press Ganey Widget)
   Match Aspire brand colors
   ======================================== */

.bf-widget {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-text-dark) !important;
}

/* Apply font-family to all elements EXCEPT star icons */
.bf-widget *:not([class*="star"]):not([class*="Star"]):not([class*="rating-icon"]):not([class*="ratingIcon"]):not(.fa):not([class*="icon"]):not([class*="Icon"]):not(i) {
    font-family: var(--pg-font-family) !important;
}

/* Summary Section - specific Press Ganey classes */
.bf-widget .summary-title,
.bf-widget .summaryTitle {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-primary-dark) !important;
}

.bf-widget .overall-satisfaction,
.bf-widget .overallSatisfaction {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-text-dark) !important;
}

.bf-widget .overall-rating,
.bf-widget .overallRating {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-primary) !important;
}

.bf-widget .total-rating,
.bf-widget .totalRating {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-text-dark) !important;
}

.bf-widget .total-comments,
.bf-widget .totalComments {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-text-dark) !important;
}

/* Question Breakdown Section */
.bf-widget .question-breakdown-title,
.bf-widget .questionBreakdownTitle {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-primary-dark) !important;
}

.bf-widget .question,
.bf-widget .question-text,
.bf-widget .questionText {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-text-dark) !important;
}

.bf-widget .question-star-rating-score,
.bf-widget .questionStarRatingScore {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-primary) !important;
}

/* Comments Section */
.bf-widget .comments-title,
.bf-widget .commentsTitle {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-primary-dark) !important;
}

.bf-widget .comment-item,
.bf-widget .commentItem {
    font-family: var(--pg-font-family) !important;
}

.bf-widget .comment-content,
.bf-widget .commentContent {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-text-dark) !important;
}

.bf-widget .date,
.bf-widget .comment-date,
.bf-widget .commentDate {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-text-light) !important;
}

.bf-widget .overall-summary,
.bf-widget .overallSummary {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-text-dark) !important;
}

.bf-widget .view-more,
.bf-widget .viewMore {
    font-family: var(--pg-font-family) !important;
    color: var(--pg-primary) !important;
}

/* Additional common Press Ganey class patterns */
.bf-widget [class*="title"],
.bf-widget [class*="Title"] {
    font-family: var(--pg-font-family) !important;
}

.bf-widget [class*="text"],
.bf-widget [class*="Text"] {
    font-family: var(--pg-font-family) !important;
}

.bf-widget [class*="label"],
.bf-widget [class*="Label"] {
    font-family: var(--pg-font-family) !important;
}

/* Skip [class*="rating"] to preserve star icon fonts */

.bf-widget [class*="comment"],
.bf-widget [class*="Comment"] {
    font-family: var(--pg-font-family) !important;
}

.bf-widget [class*="summary"],
.bf-widget [class*="Summary"] {
    font-family: var(--pg-font-family) !important;
}

.bf-widget [class*="question"],
.bf-widget [class*="Question"] {
    font-family: var(--pg-font-family) !important;
}

.bf-widget [class*="score"],
.bf-widget [class*="Score"] {
    font-family: var(--pg-font-family) !important;
}

.bf-widget span,
.bf-widget p,
.bf-widget div,
.bf-widget label {
    font-family: var(--pg-font-family) !important;
}

/* Main widget container */
.bf-widget .widget-container {
    background: var(--pg-background) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-lg) !important;
    box-shadow: var(--pg-shadow) !important;
    padding: 24px !important;
    font-family: var(--pg-font-family) !important;
}

/* Section headers and titles */
.bf-widget .section-title,
.bf-widget .widget-title,
.bf-widget h2,
.bf-widget h3 {
    color: var(--pg-primary-dark) !important;
    font-family: var(--pg-font-family) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--pg-primary-light) !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
}

/* Question titles and labels */
.bf-widget .question-title,
.bf-widget .question-label,
.bf-widget .metric-label {
    color: var(--pg-text-dark) !important;
    font-family: var(--pg-font-family) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
}

/* Score display */
.bf-widget .score,
.bf-widget .rating-value,
.bf-widget .overall-score {
    color: var(--pg-primary) !important;
    font-weight: 700 !important;
}

/* Star ratings in JS widget - DO NOT override font-family here, stars use icon fonts */
.bf-widget .star,
.bf-widget .star-icon,
.bf-widget [class*="star"],
.bf-widget [class*="Star"] {
    color: var(--pg-star-filled) !important;
    font-family: inherit !important; /* Let stars use their original icon font */
}

.bf-widget .star-empty,
.bf-widget .star-icon.empty {
    color: var(--pg-star-empty) !important;
    font-family: inherit !important;
}

/* Progress bars / rating bars */
.bf-widget .progress-bar,
.bf-widget .rating-bar,
.bf-widget .bar-fill {
    background-color: var(--pg-primary) !important;
    border-radius: 4px !important;
}

.bf-widget .progress-bar-bg,
.bf-widget .rating-bar-bg,
.bf-widget .bar-background {
    background-color: var(--pg-primary-light) !important;
    border-radius: 4px !important;
}

/* Comment cards */
.bf-widget .comment,
.bf-widget .review-item,
.bf-widget .comment-card {
    background: var(--pg-background-alt) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: var(--pg-radius) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.bf-widget .comment:hover,
.bf-widget .review-item:hover,
.bf-widget .comment-card:hover {
    background-color: #ffffff !important;
    border-color: var(--pg-primary) !important;
}

/* Comment text */
.bf-widget .comment-text,
.bf-widget .review-text,
.bf-widget .comment-body {
    color: var(--pg-text-dark) !important;
    font-family: var(--pg-font-family) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* Comment metadata (date, etc.) */
.bf-widget .comment-date,
.bf-widget .review-date,
.bf-widget .meta-info {
    color: var(--pg-text-light) !important;
    font-family: var(--pg-font-family) !important;
    font-size: 13px !important;
}

/* Links */
.bf-widget a,
.bf-widget .link {
    color: var(--pg-primary) !important;
    text-decoration: none !important;
}

.bf-widget a:hover,
.bf-widget .link:hover {
    color: var(--pg-primary-dark) !important;
    text-decoration: underline !important;
}

/* Buttons */
.bf-widget button,
.bf-widget .btn,
.bf-widget .button {
    background-color: var(--pg-primary) !important;
    border: 1px solid var(--pg-primary) !important;
    color: #ffffff !important;
    border-radius: var(--pg-radius) !important;
    padding: 10px 20px !important;
    font-family: var(--pg-font-family) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.bf-widget button:hover,
.bf-widget .btn:hover,
.bf-widget .button:hover {
    background-color: var(--pg-primary-dark) !important;
    border-color: var(--pg-primary-dark) !important;
}

/* Pagination */
.bf-widget .pagination,
.bf-widget .pager {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
}

.bf-widget .pagination a,
.bf-widget .pager a,
.bf-widget .page-link {
    padding: 8px 12px !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 4px !important;
    color: var(--pg-text-dark) !important;
}

.bf-widget .pagination a:hover,
.bf-widget .pager a:hover,
.bf-widget .page-link:hover {
    background-color: var(--pg-primary-light) !important;
    border-color: var(--pg-primary) !important;
}

.bf-widget .pagination .active,
.bf-widget .pager .active,
.bf-widget .page-link.active {
    background-color: var(--pg-primary) !important;
    border-color: var(--pg-primary) !important;
    color: #ffffff !important;
}

/* Filter/Sort dropdowns */
.bf-widget select,
.bf-widget .dropdown {
    border: 1px solid var(--pg-border) !important;
    border-radius: var(--pg-radius) !important;
    padding: 8px 12px !important;
    background-color: var(--pg-background) !important;
    color: var(--pg-text-dark) !important;
    font-family: var(--pg-font-family) !important;
}

.bf-widget select:focus,
.bf-widget .dropdown:focus {
    border-color: var(--pg-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 139, 139, 0.2) !important;
}

/* Summary section */
.bf-widget .summary,
.bf-widget .rating-summary {
    background: var(--pg-background) !important;
    border-radius: var(--pg-radius) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

/* Question breakdown section */
.bf-widget .question-breakdown,
.bf-widget .metrics-section {
    background: var(--pg-background-alt) !important;
    border-radius: var(--pg-radius) !important;
    padding: 20px !important;
}

.bf-widget .question-row,
.bf-widget .metric-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--pg-border) !important;
}

.bf-widget .question-row:last-child,
.bf-widget .metric-row:last-child {
    border-bottom: none !important;
}

/* Loading state */
.bf-widget .loading,
.bf-widget .spinner {
    color: var(--pg-primary) !important;
}

/* No results message */
.bf-widget .no-results,
.bf-widget .empty-state {
    text-align: center !important;
    padding: 40px 20px !important;
    color: var(--pg-text-light) !important;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media screen and (max-width: 768px) {
    .press-ganey-widget-container {
        padding: 0;
    }
    
    .pg-api-summary,
    .pg-api-ai-summary,
    .pg-api-comments {
        padding: 20px;
        border-radius: var(--pg-radius);
    }
    
    .pg-api-summary h3,
    .pg-api-comments h3 {
        font-size: 18px;
    }
    
    .pg-api-summary-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .pg-api-rating-number {
        font-size: 40px;
    }
    
    .pg-api-comment {
        padding: 16px;
    }
    
    .pg-api-comment-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 480px) {
    .pg-api-summary,
    .pg-api-ai-summary,
    .pg-api-comments {
        padding: 16px;
    }
    
    .pg-api-rating-number {
        font-size: 36px;
    }
    
    .pg-stars svg {
        width: 20px;
        height: 20px;
    }
    
    .pg-api-comment-rating .pg-stars svg {
        width: 16px;
        height: 16px;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .pg-api-summary,
    .pg-api-ai-summary,
    .pg-api-comments {
        box-shadow: none !important;
        border: 1px solid #ddd;
    }
    
    .pg-api-widget {
        page-break-inside: avoid;
    }
    
    .pg-api-comment {
        page-break-inside: avoid;
    }
    
    .pg-api-summary:hover,
    .pg-api-comments:hover,
    .pg-api-comment:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ========================================
   ELEMENTOR EDITOR PREVIEW
   ======================================== */

.elementor-editor-active .pg-api-widget {
    pointer-events: none;
}

.elementor-editor-active .press-ganey-widget-container[id^="bf-bsr-comments-"]:empty::before {
    content: 'Press Ganey widget will load on the frontend.';
    display: block;
    padding: 40px;
    text-align: center;
    color: var(--pg-text-medium);
    background: var(--pg-primary-light);
    border: 2px dashed var(--pg-primary);
    border-radius: var(--pg-radius);
    font-family: var(--pg-font-family);
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.pg-api-widget:focus-within {
    outline: 2px solid var(--pg-primary);
    outline-offset: 2px;
}

.pg-api-comment:focus {
    outline: 2px solid var(--pg-primary);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .pg-api-summary,
    .pg-api-comments,
    .pg-api-comment,
    .pg-api-ai-summary {
        transition: none;
    }
    
    .pg-api-summary:hover,
    .pg-api-comments:hover {
        transform: none;
    }
}