/* ============================================
   RESPONSIVE FIXES - MOBILE FIRST APPROACH
   Arquivo: responsive-fixes.css
   ============================================ */

/* ============================================
   BASE ADJUSTMENTS FOR ALL SCREENS
   ============================================ */

* {
    box-sizing: border-box;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* Prevent horizontal overflow */
body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   LARGE DESKTOP (>1440px)
   ============================================ */
@media (min-width: 1441px) {
    .container {
        max-width: 1400px;
        padding: 0 40px;
    }
}

/* ============================================
   DESKTOP (1025px - 1440px)
   ============================================ */
@media (max-width: 1440px) and (min-width: 1025px) {
    .container {
        max-width: 1200px;
        padding: 0 30px;
    }
}

/* ============================================
   LARGE TABLET (901px - 1024px)
   ============================================ */
@media (max-width: 1024px) and (min-width: 901px) {
    .container {
        padding: 0 25px;
    }
    
    /* Header */
    .logo-text {
        font-size: 22px;
    }
    
    .main-nav a {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    /* Hero Section */
    .main-title {
        font-size: 34px;
    }
    
    .rating-card {
        padding: 35px;
        gap: 35px;
    }
    
    .rating-left {
        flex: 0 0 280px;
    }
    
    /* Section Titles */
    .section-title {
        font-size: 30px;
    }
    
    .section-subtitle {
        font-size: 15px;
    }
    
    /* Pricing - Already handled in main CSS */
}

/* ============================================
   TABLET (769px - 900px)
   ============================================ */
@media (max-width: 900px) and (min-width: 769px) {
    .container {
        padding: 0 20px;
    }
    
    /* Header */
    .main-nav {
        gap: 8px;
    }
    
    .main-nav a {
        font-size: 13px;
        padding: 6px 10px;
    }
    
    /* Hero */
    .main-title {
        font-size: 30px;
    }
    
    .rating-card {
        padding: 30px;
        gap: 30px;
    }
    
    .rating-left {
        flex: 0 0 250px;
    }
    
    .rating-score {
        font-size: 64px;
    }
    
    /* Quick Summary */
    .quick-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Pros/Cons */
    .pros-cons-grid {
        gap: 20px;
    }
    
    /* Section spacing */
    section {
        padding: 50px 0;
    }
}

/* ============================================
   TABLET (481px - 768px)
   ============================================ */
@media (max-width: 768px) and (min-width: 481px) {
    .container {
        padding: 0 20px;
    }
    
    /* Header */
    .main-nav {
        display: none;
    }
    
    .logo-text {
        font-size: 20px;
    }
    
    /* Hero Section */
    .main-title {
        font-size: 28px;
        line-height: 1.3;
    }
    
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .author-avatar {
        width: 60px;
        height: 60px;
    }
    
    /* Rating Card */
    .rating-card {
        flex-direction: column;
        padding: 25px;
        gap: 25px;
    }
    
    .rating-left {
        flex: 0 0 auto;
        width: 100%;
        text-align: center;
    }
    
    .rating-right {
        width: 100%;
    }
    
    .rating-right h2 {
        font-size: 26px;
        text-align: center;
    }
    
    .overall-rating {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .rating-score {
        font-size: 60px;
    }
    
    .rating-breakdown {
        margin: 20px 0;
    }
    
    .rating-item {
        font-size: 13px;
    }
    
    .rating-bar {
        min-width: 100px;
    }
    
    /* CTA Button */
    .cta-button {
        max-width: 100%;
        font-size: 15px;
        padding: 14px 25px;
    }
    
    /* Quick Summary */
    .quick-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .stat-badge {
        padding: 18px 15px;
    }
    
    /* Standout Section */
    .standout-box {
        padding: 30px 20px;
    }
    
    /* Pros/Cons */
    .pros-cons-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Ingredients */
    .ingredients-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* User Reviews */
    .reviews-summary {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* FAQ */
    .faq-grid {
        padding: 0 10px;
    }
    
    /* Verdict */
    .verdict-card {
        padding: 30px 20px;
    }
    
    .final-rating {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    /* Sticky Footer CTA - Tablet */
    .sticky-footer-cta {
        padding: 10px 20px;
    }
    
    .sticky-cta-content {
        gap: 15px;
    }
    
    .sticky-cta-info strong {
        font-size: 16px;
    }
    
    .sticky-offer {
        font-size: 12px;
    }
    
    .sticky-cta-button {
        font-size: 14px;
        padding: 11px 24px;
    }
    
    /* Section spacing */
    section {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 26px;
    }
    
    .section-subtitle {
        font-size: 14px;
    }
}

/* ============================================
   MOBILE (361px - 480px)
   ============================================ */
@media (max-width: 480px) and (min-width: 361px) {
    .container {
        padding: 0 15px;
    }
    
    /* ============================================
       PRICING SECTION - MOBILE FIX
       ============================================ */
    
    .pricing-section {
        padding: 40px 0 !important;
        overflow: hidden;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .pricing-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        transform: none !important;
        margin: 0 !important;
    }
    
    .pricing-card.popular,
    .pricing-card.maximum-value {
        transform: none !important;
        scale: 1 !important;
        border-width: 2px !important;
    }
    
    .pricing-card:hover {
        transform: translateY(-2px) !important;
    }
    
    .pricing-card.popular:hover,
    .pricing-card.maximum-value:hover {
        transform: translateY(-2px) !important;
    }
    
    .pricing-image {
        padding: 20px 15px !important;
        min-height: 160px !important;
    }
    
    .pricing-image img {
        max-width: 150px !important;
        max-height: 110px !important;
    }
    
    .pricing-header {
        padding: 20px 15px 12px !important;
    }
    
    .pricing-body {
        padding: 20px 15px 15px !important;
    }
    
    .pricing-btn {
        width: calc(100% - 30px) !important;
        margin: 0 15px 12px !important;
    }
    
    /* ============================================
       END PRICING FIX
       ============================================ */
    
    /* Footer Disclosure */
    .disclosure-text {
        font-size: 10px !important;
        padding: 0 10px;
    }
    
    /* Header */
    .disclosure-banner p {
        font-size: 11px;
        padding: 0 5px;
    }
    
    .logo-text {
        font-size: 18px;
    }
    
    .main-nav {
        display: none;
    }
    
    /* Hero Section */
    .breadcrumb {
        font-size: 12px;
    }
    
    .main-title {
        font-size: 22px;
        line-height: 1.3;
    }
    
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .author-avatar {
        width: 55px;
        height: 55px;
    }
    
    .author-name {
        font-size: 14px;
    }
    
    .author-credentials {
        font-size: 12px;
    }
    
    .publish-date {
        font-size: 11px;
    }
    
    /* Rating Card */
    .rating-card {
        flex-direction: column;
        padding: 20px 15px;
        gap: 20px;
    }
    
    .rating-left {
        width: 100%;
    }
    
    .product-image img {
        max-width: 200px;
    }
    
    .trust-badges {
        gap: 6px;
    }
    
    .badge-item {
        font-size: 10px;
        padding: 5px 10px;
    }
    
    .rating-right {
        width: 100%;
    }
    
    .rating-right h2 {
        font-size: 24px;
        text-align: center;
    }
    
    .rating-score {
        font-size: 52px;
    }
    
    .rating-stars {
        font-size: 28px;
    }
    
    .rating-text {
        font-size: 13px;
    }
    
    .review-count {
        font-size: 11px;
    }
    
    .rating-breakdown {
        margin: 15px 0;
    }
    
    .rating-item {
        font-size: 12px;
        padding: 8px 0;
    }
    
    .rating-item span:first-child {
        font-size: 12px;
    }
    
    .rating-bar {
        min-width: 80px;
        height: 6px;
    }
    
    .rating-item span:last-child {
        font-size: 12px;
    }
    
    .special-offer-banner {
        padding: 10px;
        margin: 15px 0;
    }
    
    .offer-text,
    .guarantee-text {
        font-size: 12px;
    }
    
    /* CTA Button */
    .cta-button {
        max-width: 100%;
        font-size: 14px;
        padding: 13px 22px;
        margin: 12px 0;
    }
    
    .cta-subtext {
        font-size: 11px;
    }
    
    /* Quick Summary */
    .summary-box {
        padding: 20px 15px;
    }
    
    .summary-box h2 {
        font-size: 20px;
    }
    
    .summary-box p {
        font-size: 14px;
    }
    
    .quick-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .stat-badge {
        padding: 15px 12px;
    }
    
    .stat-icon {
        font-size: 28px;
    }
    
    .stat-info strong {
        font-size: 18px;
    }
    
    .stat-info span {
        font-size: 12px;
    }
    
    /* Standout Section */
    .standout-box {
        padding: 25px 15px;
    }
    
    .standout-box h2 {
        font-size: 20px;
    }
    
    .standout-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .feature-highlight {
        padding: 15px;
    }
    
    .feature-icon {
        font-size: 32px;
    }
    
    .feature-highlight h3 {
        font-size: 16px;
    }
    
    .feature-highlight p {
        font-size: 13px;
    }
    
    /* Pros/Cons */
    .pros-cons-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .pros-box,
    .cons-box {
        padding: 20px 15px;
    }
    
    .pros-box h3,
    .cons-box h3 {
        font-size: 20px;
    }
    
    .pros-box li,
    .cons-box li {
        font-size: 13px;
        padding: 8px 0;
    }
    
    /* Detailed Analysis */
    .analysis-content h3 {
        font-size: 20px;
    }
    
    .analysis-content p {
        font-size: 14px;
    }
    
    .info-box {
        padding: 15px;
        margin: 15px 0;
    }
    
    .info-box p {
        font-size: 13px;
    }
    
    /* Ingredients */
    .ingredients-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .ingredient-card {
        padding: 20px 15px;
    }
    
    .ingredient-header h3 {
        font-size: 18px;
    }
    
    .ingredient-icon {
        font-size: 32px;
    }
    
    .dosage-info {
        font-size: 12px;
    }
    
    .ingredient-card p {
        font-size: 13px;
    }
    
    /* User Reviews */
    .reviews-summary {
        flex-direction: column;
        gap: 15px;
        padding: 20px 15px;
    }
    
    .stat-number {
        font-size: 40px;
    }
    
    .stat-label {
        font-size: 13px;
    }
    
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .review-card {
        padding: 18px 15px;
    }
    
    .reviewer-name {
        font-size: 14px;
    }
    
    .review-date {
        font-size: 11px;
    }
    
    .review-text {
        font-size: 13px;
    }
    
    /* FAQ */
    .faq-grid {
        padding: 0 5px;
    }
    
    .faq-item {
        padding: 18px 15px;
    }
    
    .faq-question {
        font-size: 16px;
    }
    
    .faq-answer p {
        font-size: 13px;
    }
    
    /* Methodology */
    .methodology-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .method-item {
        padding: 20px 15px;
    }
    
    .method-number {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    .method-item h3 {
        font-size: 16px;
    }
    
    .method-item p {
        font-size: 13px;
    }
    
    /* Verdict */
    .verdict-card {
        padding: 25px 15px;
    }
    
    .score-circle {
        width: 150px;
        height: 150px;
    }
    
    .score-number {
        font-size: 52px;
    }
    
    .score-label {
        font-size: 13px;
    }
    
    .final-rating {
        flex-direction: column;
        gap: 15px;
    }
    
    .final-cta-button {
        font-size: 15px;
        padding: 14px 24px;
    }
    
    /* Disclaimer */
    .disclaimer-box {
        padding: 20px 15px;
    }
    
    .disclaimer-box h3 {
        font-size: 18px;
    }
    
    .disclaimer-box p {
        font-size: 12px;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .footer-col h4 {
        font-size: 16px;
    }
    
    .footer-col p,
    .footer-col a {
        font-size: 13px;
    }
    
    /* Sticky Footer CTA - Mobile */
    .sticky-footer-cta {
        padding: 10px 15px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
        bottom: 0 !important;
        margin: 0 !important;
    }
    
    .sticky-cta-content {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        padding: 0;
    }
    
    .sticky-cta-info {
        text-align: center;
        gap: 6px;
    }
    
    .sticky-cta-info strong {
        font-size: 16px;
    }
    
    .sticky-offer {
        font-size: 11px;
        line-height: 1.4;
    }
    
    .sticky-cta-button {
        width: 100%;
        font-size: 14px;
        padding: 12px 20px;
        justify-content: center;
        margin: 0;
    }

    
    /* Section spacing */
    section {
        padding: 35px 0;
    }
    
    .section-title {
        font-size: 22px;
        margin-bottom: 15px;
    }
    
    .section-subtitle {
        font-size: 13px;
        margin-bottom: 25px;
    }
}

/* ============================================
   SMALL MOBILE (320px - 360px)
   ============================================ */
@media (max-width: 360px) {
    .container {
        padding: 0 12px;
    }
    
    /* ============================================
       PRICING SECTION - SMALL MOBILE FIX
       ============================================ */
    
    .pricing-section {
        padding: 35px 0 !important;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    
    .pricing-card {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
    
    .pricing-card.popular,
    .pricing-card.maximum-value {
        transform: none !important;
    }
    
    .pricing-image {
        padding: 18px 12px !important;
        min-height: 150px !important;
    }
    
    .pricing-image img {
        max-width: 140px !important;
        max-height: 100px !important;
    }
    
    .pricing-header {
        padding: 18px 12px 10px !important;
    }
    
    .pricing-body {
        padding: 18px 12px 12px !important;
    }
    
    .pricing-btn {
        width: calc(100% - 24px) !important;
        margin: 0 12px 10px !important;
        font-size: 13px !important;
        padding: 11px 18px !important;
    }
    
    /* ============================================
       END PRICING FIX
       ============================================ */
    
    /* Hero */
    .main-title {
        font-size: 20px;
    }
    
    .rating-card {
        padding: 15px 12px;
    }
    
    .rating-score {
        font-size: 48px;
    }
    
    .product-image img {
        max-width: 180px;
    }
    
    /* CTA */
    .cta-button {
        font-size: 13px;
        padding: 12px 20px;
    }
    
    /* Stats */
    .stat-badge {
        padding: 12px 10px;
    }
    
    .stat-icon {
        font-size: 24px;
    }
    
    .stat-info strong {
        font-size: 16px;
    }
    
    /* All sections */
    section {
        padding: 30px 0;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .section-subtitle {
        font-size: 12px;
    }
    
    /* Sticky Footer CTA - Small Mobile */
    .sticky-footer-cta {
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
        bottom: 0 !important;
    }
    
    .sticky-cta-content {
        gap: 8px;
        padding: 0;
    }
    
    .sticky-cta-info strong {
        font-size: 15px;
    }
    
    .sticky-offer {
        font-size: 10px;
    }
    
    .sticky-cta-button {
        font-size: 13px;
        padding: 11px 18px;
        margin: 0;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .sticky-footer-cta,
    .header,
    .main-nav,
    .disclosure-banner {
        display: none !important;
    }
    
    .cta-button,
    .pricing-btn {
        display: none !important;
    }
    
    section {
        page-break-inside: avoid;
    }
}