/**
 * TPG Reviews - Pixel-Perfect Responsive Styles
 * Matching Figma Design Specifications Exactly
 * 
 * Breakpoints:
 * - BP6: Desktop (1280px+) - Card: 1322px
 * - BP5: Small Desktop (1024-1279px) - Card: 826px
 * - BP4: Large Tablet (840-1023px) - Card: 840px
 * - BP3: Tablet (590-839px) - Card: 600px
 * - BP2: Small Mobile (480-589px) - Card: 542px
 * - BP1: Mobile (≤479px) - Card: 453px
 */

/* =========================================
   HIDE LEGACY TPG/LIFTERLMS REVIEWS ELEMENTS
   These appear BEFORE .tpg-reviews-section
   ========================================= */

/* Hide the old black star rating display completely */
.tpg-rating-display {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Hide the "Reviews" h3 heading - multiple approaches for browser compatibility */

/* Modern browsers: hide h3 that's followed by .tpg-rating-display */
h3.tab-content-title:has(+ .tpg-rating-display) {
    display: none !important;
}

/* Fallback: specifically target the Reviews tab container */
#lesson-review > h3.tab-content-title:first-child {
    display: none !important;
}

/* Additional fallback using adjacent sibling (hide h3 before tpg-rating-display) */
h3.tab-content-title + .tpg-rating-display {
    /* Already hidden above, but this ensures the relationship is targeted */
}

/* Hook class for JavaScript fallback if needed */
.tpg-legacy-hide {
    display: none !important;
}

/* =========================================
   BASE STYLES
   ========================================= */
.tpg-reviews-section {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    letter-spacing: 0.00096em;
    box-sizing: border-box;
    width: 100%;
    max-width: 1322px;
    margin: 0 auto;
}

.tpg-reviews-section *,
.tpg-reviews-section *::before,
.tpg-reviews-section *::after {
    box-sizing: border-box;
}

/* =========================================
   REVIEW HEADER
   ========================================= */
.tpg-reviews-section .tpg-reviews-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    gap: 16px !important;
    position: relative !important;
}

.tpg-reviews-section .tpg-reviews-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.tpg-reviews-section .tpg-reviews-rating-summary {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* Large Header Stars (25.78px ≈ 26px) */
.tpg-reviews-section .tpg-reviews-header-stars {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
}

.tpg-reviews-section .tpg-reviews-header-stars .tpg-star {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tpg-reviews-section .tpg-reviews-header-stars .tpg-star svg {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    display: block !important;
}

/* Rating Info */
.tpg-reviews-section .tpg-reviews-rating-info {
    display: flex !important;
    flex-direction: column !important;
}

.tpg-reviews-section .tpg-reviews-rating-value {
    font-weight: 600 !important;
    font-size: 22px !important;
    line-height: 34px !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tpg-reviews-section .tpg-reviews-rating-count {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 26px !important;
    color: #8A8E90 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Write Review Button - Default State (B6/B5: Desktop) */
.tpg-reviews-section .tpg-write-review-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(to top, #f05a28, #f99351) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #FBFBFB !important;
    text-decoration: none !important;
    width: 180px !important;
    height: 38px !important;
    padding: 7px 24px 8px !important;
    font-size: 18px !important;
    line-height: 24px !important;
    margin: 0 !important;
}

/* Write Review Button - Hover & Click State (gradient reversed) */
.tpg-reviews-section .tpg-write-review-btn:hover,
.tpg-reviews-section .tpg-write-review-btn:active,
.tpg-reviews-section .tpg-write-review-btn:focus {
    background: linear-gradient(to bottom, #f05a28, #f99351) !important;
    color: #FBFBFB !important;
    text-decoration: none !important;
}

/* =========================================
   REVIEWS LIST
   ========================================= */
.tpg-reviews-section .tpg-reviews-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* =========================================
   REVIEW CARD - BP6 Desktop (1280px+)
   Figma: #F0F4F7 bg, 50px avatar, 20px/32px name, 14px stars, 18px/28px body
   ========================================= */
.tpg-reviews-section .tpg-review-card {
    background: #F0F4F7 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    position: relative !important;
    width: 100% !important;
    min-height: 186px !important;
    padding: 24px !important;
    gap: 16px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 20px 0 !important;
}

/* ID-level specificity to beat OceanWP's #content article resets */
#tab-reviews .tpg-reviews-list .tpg-review-card {
    margin-bottom: 20px !important;
}

#tab-reviews .tpg-reviews-list .tpg-review-card:last-child,
.tpg-reviews-section .tpg-review-card:last-child {
    margin-bottom: 0 !important;
}

/* Avatar: 50px × 50px */
.tpg-reviews-section .tpg-review-avatar {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #ccc !important;
}

.tpg-reviews-section .tpg-review-avatar img {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Review Content */
.tpg-reviews-section .tpg-review-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Header Row: User Info + Date */
.tpg-reviews-section .tpg-review-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

/* User Info: Name + Stars */
.tpg-reviews-section .tpg-review-user-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* User Name: 20px/32px bold (Figma: Heading-4) */
.tpg-reviews-section .tpg-review-user-name {
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 32px !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Small Review Stars (14.17px ≈ 14px) */
.tpg-reviews-section .tpg-review-stars {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
}

.tpg-reviews-section .tpg-review-stars .tpg-star {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tpg-reviews-section .tpg-review-stars .tpg-star svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    display: block !important;
}

/* Review Date: 16px/26px */
.tpg-reviews-section .tpg-review-date {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 26px !important;
    color: #8A8E90 !important;
    text-align: right !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Review Title: bold line between stars and body (not in Figma design, 
   kept for functionality — styled to blend naturally with body text) */
.tpg-reviews-section .tpg-review-title {
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #000000 !important;
    margin: 8px 0 2px 0 !important;
    padding: 0 !important;
}

/* Review Body: 18px/28px (Figma) */
.tpg-reviews-section .tpg-review-body {
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    letter-spacing: 0.00096em !important;
    color: #4A4A4A !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================
   PAGINATION — Matches course archive style
   (.tpg-page-btn, .tpg-page-info)
   ========================================= */
.tpg-reviews-section .tpg-reviews-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    margin-top: 30px !important;
    padding: 24px 0 !important;
}

.tpg-reviews-section .tpg-page-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #F8904F 0%, #F1612D 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
    transition: opacity 0.2s ease, transform 0.1s ease !important;
    min-height: auto !important;
}

.tpg-reviews-section .tpg-page-btn:hover:not(:disabled) {
    opacity: 0.9 !important;
    transform: scale(1.05) !important;
}

.tpg-reviews-section .tpg-page-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.tpg-reviews-section .tpg-page-btn svg {
    width: 12px !important;
    height: auto !important;
}

.tpg-reviews-section .tpg-page-info {
    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #8A8E90 !important;
}

.tpg-reviews-section .tpg-page-info .tpg-current-range,
.tpg-reviews-section .tpg-page-info .tpg-total-count {
    font-weight: 400 !important;
    color: #8A8E90 !important;
}

/* Loading state for reviews list during pagination */
.tpg-reviews-section .tpg-reviews-list.loading {
    opacity: 0.5 !important;
    pointer-events: none !important;
    transition: opacity 0.2s !important;
}

/* =========================================
   EMPTY STATE
   ========================================= */
.tpg-reviews-section .tpg-reviews-empty {
    text-align: center !important;
    padding: 48px 24px !important;
    background: #F0F4F7 !important;
}

.tpg-reviews-section .tpg-reviews-empty-text {
    font-size: 18px !important;
    line-height: 28px !important;
    color: #8A8E90 !important;
    margin-bottom: 16px !important;
}

/* =========================================
   BP5: Small Desktop (1024px - 1279px)
   Card: 826px × 186px
   Body: 18px/28px
   ========================================= */
@media (max-width: 1279px) {
    .tpg-reviews-section {
        max-width: 826px !important;
        padding: 0 24px !important;
    }
    
    .tpg-reviews-section .tpg-reviews-rating-value {
        font-size: 20px !important;
        line-height: 32px !important;
    }
    
    .tpg-reviews-section .tpg-review-user-name {
        font-size: 20px !important;
        line-height: 32px !important;
    }
    
    .tpg-reviews-section .tpg-review-body {
        font-size: 18px !important;
        line-height: 28px !important;
    }
    
    .tpg-reviews-section .tpg-page-info {
        font-size: 18px !important;
    }
    
    .tpg-reviews-section .tpg-page-btn {
        width: 54px !important;
        height: 54px !important;
    }
}

/* =========================================
   BP4: Large Tablet (840px - 1023px)
   Card: 840px × 186px
   Button: 165px, padding 9px 24px
   ========================================= */
@media (max-width: 1023px) {
    .tpg-reviews-section {
        max-width: 840px !important;
    }
    
    .tpg-reviews-section .tpg-write-review-btn {
        width: 165px !important;
        padding: 9px 24px !important;
    }
}

/* =========================================
   BP3: Tablet (590px - 839px)
   Card: 600px × 210px
   Button: 165px, padding 9px 24px
   ========================================= */
@media (max-width: 839px) {
    .tpg-reviews-section {
        max-width: 600px !important;
    }
    
    .tpg-reviews-section .tpg-review-card {
        min-height: 210px !important;
    }
    
    .tpg-reviews-section .tpg-write-review-btn {
        width: 165px !important;
        padding: 9px 24px !important;
        font-size: 16px !important;
    }
    
    .tpg-reviews-section .tpg-reviews-pagination {
        gap: 12px !important;
    }
    
    .tpg-reviews-section .tpg-page-btn {
        width: 50px !important;
        height: 50px !important;
    }
    
    .tpg-reviews-section .tpg-page-info {
        font-size: 16px !important;
    }
}

/* =========================================
   BP2: Small Mobile (480px - 589px)
   Card: 542px × 215px
   Button: 165px, padding 9px 24px
   ========================================= */
@media (max-width: 589px) {
    .tpg-reviews-section {
        max-width: 542px !important;
        padding: 0 24px !important;
    }
    
    .tpg-reviews-section .tpg-review-card {
        min-height: 215px !important;
    }
    
    .tpg-reviews-section .tpg-write-review-btn {
        width: 165px !important;
        padding: 9px 24px !important;
    }
}

/* =========================================
   BP1: Mobile (≤479px)
   Card: 453px × 239px
   Header stacks, date moves to top-right
   ========================================= */
@media (max-width: 479px) {
    .tpg-reviews-section {
        max-width: 453px !important;
        padding: 0 13px !important;
    }
    
    /* Header Layout Changes */
    .tpg-reviews-section .tpg-reviews-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .tpg-reviews-section .tpg-reviews-header-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
    }
    
    .tpg-reviews-section .tpg-reviews-rating-summary {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .tpg-reviews-section .tpg-reviews-rating-info {
        margin-top: 8px !important;
    }
    
    /* Button Position */
    .tpg-reviews-section .tpg-write-review-btn {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 165px !important;
        padding: 9px 24px !important;
        font-size: 16px !important;
    }
    
    /* Card Changes */
    .tpg-reviews-section .tpg-review-card {
        min-height: 239px !important;
    }
    
    /* Date moves to absolute position */
    .tpg-reviews-section .tpg-review-date {
        position: absolute !important;
        top: 24px !important;
        right: 24px !important;
    }
    
    .tpg-reviews-section .tpg-review-header-row {
        flex-direction: column !important;
    }
}

/* =========================================
   REVIEW FORM MODAL STYLES
   ========================================= */

/* Overlay */
.tpg-review-modal-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
}

.tpg-review-modal-overlay.active {
    display: flex !important;
}

/* Modal Container - B6 Default (1280px+) */
.tpg-review-modal {
    width: 792px !important;
    max-width: 95vw !important;
    background: #F0F4F7 !important;
    padding: 42px 32px 44px !important;
    position: relative !important;
    box-sizing: border-box !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Header */
.tpg-review-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 52px !important;
}

.tpg-review-modal-title {
    font-family: 'Lora', serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 40px !important;
    letter-spacing: -0.00208em !important;
    text-transform: capitalize !important;
    color: #212122 !important;
    margin: 0 !important;
}

.tpg-review-modal-close {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 10px !important;
    margin: -10px -10px 0 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.tpg-review-modal-close:hover {
    opacity: 0.8 !important;
}

.tpg-review-modal-close:focus,
.tpg-review-modal-close:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Rating Group - Desktop: Two columns */
.tpg-review-rating-group {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin-bottom: 22px !important;
}

/* Criteria Column */
.tpg-review-criteria-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.tpg-review-criteria-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 8px !important;
}

.tpg-review-criteria-info {
    min-width: 140px !important;
    flex-shrink: 0 !important;
}

.tpg-review-criteria-label {
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.00096em !important;
    color: #000000 !important;
    display: block !important;
}

.tpg-review-criteria-description {
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: #666666 !important;
    display: block !important;
    margin-top: 2px !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
}

.tpg-review-star-input {
    display: flex !important;
    gap: 5px !important;
}

.tpg-review-star-input .tpg-star-btn {
    cursor: pointer !important;
    display: inline-block !important;
    transition: transform 0.1s ease !important;
}

.tpg-review-star-input .tpg-star-btn:hover {
    transform: scale(1.1) !important;
}

/* Divider - Vertical on desktop */
.tpg-review-divider {
    width: 1px !important;
    height: 111px !important;
    background: #BEBEBE !important;
    margin: 0 32px !important;
    align-self: center !important;
}

/* Overall Column */
.tpg-review-overall-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.tpg-review-overall-label {
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.00096em !important;
    color: #000000 !important;
}

.tpg-review-overall-display {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.tpg-review-overall-stars {
    display: flex !important;
    gap: 7px !important;
}

.tpg-review-overall-text {
    font-family: 'Lora', serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 40px !important;
    letter-spacing: -0.00208em !important;
    text-transform: capitalize !important;
    color: #212122 !important;
}

/* Textarea Group */
.tpg-review-textarea-group {
    margin-bottom: 34px !important;
}

/* Title Group */
.tpg-review-title-group {
    margin-bottom: 16px !important;
}

.tpg-review-title-label {
    display: block !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.00096em !important;
    color: #000000 !important;
    margin-bottom: 5px !important;
}

.tpg-review-title-input {
    width: 100% !important;
    height: 48px !important;
    padding: 12px 16px !important;
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    color: #000000 !important;
    box-sizing: border-box !important;
}

.tpg-review-title-input:focus {
    outline: 2px solid #F37138 !important;
    outline-offset: -2px !important;
}

.tpg-review-textarea-label {
    display: block !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.00096em !important;
    color: #000000 !important;
    margin-bottom: 5px !important;
}

.tpg-review-textarea {
    width: 100% !important;
    height: 146px !important;
    padding: 21px 16px !important;
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 0 !important;
    resize: vertical !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #000000 !important;
    box-sizing: border-box !important;
}

.tpg-review-textarea:focus {
    outline: 2px solid #F37138 !important;
    outline-offset: -2px !important;
}

/* Button Group */
.tpg-review-modal-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
}

.tpg-review-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 109px !important;
    height: 44px !important;
    background: linear-gradient(to top, #f05a28, #f99351) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 150% !important;
    text-transform: uppercase !important;
    color: #FBFBFB !important;
}

.tpg-review-submit-btn:hover {
    background: linear-gradient(to bottom, #f05a28, #f99351) !important;
}

.tpg-review-submit-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

.tpg-review-cancel-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 150% !important;
    text-transform: uppercase !important;
    color: #F99351 !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.tpg-review-cancel-btn:hover {
    opacity: 0.8 !important;
}

.tpg-review-cancel-btn:focus,
.tpg-review-cancel-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

/* =========================================
   Modal B5: 1024px - 1279px
   ========================================= */
@media (max-width: 1279px) {
    .tpg-review-modal {
        width: 796px !important;
    }
    
    .tpg-review-modal-title {
        font-size: 26px !important;
        line-height: 36px !important;
    }
}

/* =========================================
   Modal B4: 840px - 1023px
   ========================================= */
@media (max-width: 1023px) {
    .tpg-review-modal {
        width: 840px !important;
        padding: 42px 36px 44px !important;
    }
}

/* =========================================
   Modal B3: 590px - 839px
   Layout switches to stacked
   ========================================= */
@media (max-width: 839px) {
    .tpg-review-modal {
        width: 600px !important;
        padding: 40px 36px 44px !important;
    }
    
    .tpg-review-modal-title {
        font-size: 24px !important;
        line-height: 36px !important;
    }
    
    .tpg-review-modal-header {
        margin-bottom: 40px !important;
    }
    
    /* Stack the rating group */
    .tpg-review-rating-group {
        flex-direction: column !important;
        gap: 22px !important;
    }
    
    /* Divider becomes horizontal */
    .tpg-review-divider {
        width: 100% !important;
        height: 1px !important;
        margin: 0 !important;
    }
    
    /* Overall column adjustments */
    .tpg-review-overall-column {
        width: 100% !important;
    }
    
    .tpg-review-overall-text {
        font-size: 24px !important;
        line-height: 40px !important;
    }
    
    /* Button adjustments */
    .tpg-review-submit-btn {
        width: 101px !important;
        font-size: 16px !important;
    }
    
    .tpg-review-cancel-btn {
        font-size: 16px !important;
    }
}

/* =========================================
   Modal B2: 480px - 589px
   ========================================= */
@media (max-width: 589px) {
    .tpg-review-modal {
        width: 541px !important;
        padding: 40px 28px 44px !important;
    }
}

/* =========================================
   Modal B1: ≤479px
   ========================================= */
@media (max-width: 479px) {
    .tpg-review-modal {
        width: 453px !important;
        max-width: calc(100vw - 28px) !important;
        padding: 40px 20px 44px !important;
    }
    
    .tpg-review-criteria-label {
        min-width: 100px !important;
        font-size: 13px !important;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .tpg-review-modal {
        padding: 30px 16px 36px !important;
    }
    
    .tpg-review-criteria-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .tpg-review-criteria-label {
        min-width: 100% !important;
    }
}