/**
 * COMPLETE REVIEW PAGE FIX
 * 
 * This single file fixes:
 * 1. Ugly huge spacing between sections
 * 2. Dark text on dark background in final verdict (makes it WHITE)
 * 3. Overall professional appearance
 */

/* ========================================
   PART 1: FIX SPACING - MAKE IT TIGHT
   ======================================== */

/* Reduce massive section padding */
.review-section {
    padding: 30px 40px !important;
    margin: 0 !important;
}

/* Tighter paragraph spacing */
.section-content p,
.section-content-inner p,
.review-section p {
    margin-bottom: 15px !important;
    margin-top: 0 !important;
    line-height: 1.75 !important;
}

/* First/last paragraph cleanup */
.section-content > p:first-child,
.section-content-inner > p:first-child {
    margin-top: 0 !important;
}

.section-content > p:last-child,
.section-content-inner > p:last-child {
    margin-bottom: 0 !important;
}

/* Tighter heading spacing */
.section-title {
    margin-bottom: 20px !important;
}

.section-content h2,
.section-content-inner h2 {
    margin-top: 25px !important;
    margin-bottom: 15px !important;
}

.section-content h3,
.section-content-inner h3 {
    margin-top: 20px !important;
    margin-bottom: 12px !important;
}

.section-content h4,
.section-content-inner h4 {
    margin-top: 18px !important;
    margin-bottom: 10px !important;
}

/* First heading - no top margin */
.section-content > h2:first-child,
.section-content > h3:first-child,
.section-content > h4:first-child {
    margin-top: 0 !important;
}

/* Tighter list spacing */
.section-content ul,
.section-content ol,
.section-content-inner ul,
.section-content-inner ol {
    margin: 15px 0 !important;
    padding-left: 30px !important;
}

.section-content li,
.section-content-inner li {
    margin-bottom: 10px !important;
}

/* Hide empty paragraphs */
.section-content p:empty,
.section-content-inner p:empty {
    display: none !important;
}

/* Kill double line breaks */
.section-content br + br,
.section-content-inner br + br {
    display: none !important;
}

/* Reduce rating box spacing */
.overall-rating-display {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

/* Tighter pros/cons */
.pros-cons-grid {
    margin: 25px auto !important;
}

.pros-box,
.cons-box {
    padding: 25px !important;
}

/* ========================================
   PART 2: FIX FINAL VERDICT - WHITE TEXT!
   ======================================== */

/* CRITICAL: Make final verdict text BRIGHT WHITE */
.final-verdict {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important;
    color: white !important;
    padding: 40px !important;
}

/* Gold heading */
.final-verdict h2 {
    color: #fbbf24 !important;
    font-size: 3rem !important;
    font-weight: 900 !important;
    margin-bottom: 25px !important;
}

/* WHITE paragraphs in final verdict */
.final-verdict p,
.final-verdict .section-content-inner p,
.final-verdict-content p {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.2rem !important;
    line-height: 1.9 !important;
    margin-bottom: 18px !important;
}

/* White headings in final verdict */
.final-verdict h3,
.final-verdict .section-content-inner h3 {
    color: #fbbf24 !important;
    font-size: 1.8rem !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
}

.final-verdict h4,
.final-verdict .section-content-inner h4 {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.4rem !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
}

/* White lists in final verdict */
.final-verdict ul,
.final-verdict ol,
.final-verdict .section-content-inner ul,
.final-verdict .section-content-inner ol {
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 18px 0 !important;
}

.final-verdict li,
.final-verdict .section-content-inner li {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.15rem !important;
    line-height: 1.8 !important;
    margin-bottom: 10px !important;
}

/* Gold bold text in final verdict */
.final-verdict strong,
.final-verdict b,
.final-verdict .section-content-inner strong,
.final-verdict .section-content-inner b {
    color: #fbbf24 !important;
    font-weight: 700 !important;
}

/* Gold links in final verdict */
.final-verdict a,
.final-verdict .section-content-inner a {
    color: #fbbf24 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

.final-verdict a:hover,
.final-verdict .section-content-inner a:hover {
    color: #fde68a !important;
}

/* ========================================
   PART 3: GENERAL IMPROVEMENTS
   ======================================== */

/* Better button spacing */
.section-content .btn-primary,
.section-content .hero-cta-button {
    margin: 15px 0 !important;
}

/* Better image spacing */
.section-content img,
.section-content-inner img {
    margin: 20px 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
}

/* Better blockquote styling */
.section-content blockquote,
.section-content-inner blockquote {
    border-left: 4px solid #fbbf24 !important;
    background: #fef3c7 !important;
    padding: 18px 22px !important;
    margin: 20px 0 !important;
    border-radius: 0 12px 12px 0 !important;
    color: #78350f !important;
}

/* Clean section borders */
.review-section + .review-section {
    border-top: 1px solid rgba(0,0,0,0.05) !important;
}

/* ========================================
   PART 4: OVERRIDE INLINE STYLES
   ======================================== */

/* Force proper spacing even with inline styles */
.section-content [style*="margin"],
.section-content-inner [style*="margin"] {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* But DON'T override final verdict colors */
.final-verdict [style*="color"] {
    color: rgba(255, 255, 255, 0.95) !important;
}

.final-verdict strong[style*="color"],
.final-verdict b[style*="color"],
.final-verdict a[style*="color"] {
    color: #fbbf24 !important;
}

/* ========================================
   PART 5: MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .review-section {
        padding: 20px !important;
    }
    
    .final-verdict {
        padding: 30px 20px !important;
    }
    
    .final-verdict h2 {
        font-size: 2.25rem !important;
    }
    
    .section-content p,
    .final-verdict p {
        font-size: 1.05rem !important;
    }
}

/* ========================================
   PART 6: ENSURE READABILITY
   ======================================== */

/* Make sure regular content is dark text */
.review-section:not(.final-verdict) p,
.review-section:not(.final-verdict) li,
.review-section:not(.final-verdict) h2,
.review-section:not(.final-verdict) h3,
.review-section:not(.final-verdict) h4 {
    color: #374151 !important;
}

.review-section:not(.final-verdict) h2,
.review-section:not(.final-verdict) h3,
.review-section:not(.final-verdict) h4 {
    color: #1f2937 !important;
}

/* But final verdict is WHITE */
.final-verdict,
.final-verdict * {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Except gold elements */
.final-verdict h2,
.final-verdict h3,
.final-verdict strong,
.final-verdict b,
.final-verdict a {
    color: #fbbf24 !important;
}

.final-verdict h4 {
    color: rgba(255, 255, 255, 0.9) !important;
}