/* ===== RESPONSIVE STYLES ===== */
/* All media queries consolidated from all CSS files */

/* ===== BASE STYLES (No Media Query) ===== */

/* Base product-offer-image styling - CRITICAL ORIGINAL RULE */
.logooffer-stacked .product-offer-image {
    width: 100%;
    height: 128px;
    object-fit: cover;
}

/* Base carousel styling for logooffer-stacked */
.logooffer-stacked:has(.carousel-container) .site-main-inner-area {
    padding-top: 2rem;
}

/* ===== MOBILE STYLES (max-width: 767px) ===== */
@media screen and (max-width: 767px) {
    /* Body and Base Typography */
    body {
        font-size: 14px !important;
    }

    /* Badge Styling */
    .badge, .badge span {
        color: #484848 !important;
    }

    /* Carousel - Hidden on Mobile */
    .carousel-container {
        display: none !important;
    }

    /* Hero Section / Home Image */
    .home-image {
        min-height: 260px !important;
        padding-bottom: 2rem !important;
        background-position: left center !important;
    }

    /* Mobile: hide product-image, show offerImage-wrapper */
    .logooffer-stacked .product-image {
        display: none;
    }

    .logooffer-stacked .offerImage-wrapper {
        display: block;
    }

    /* Mobile: Fix rating-wrapper grid layout to stack vertically */
    .logooffer-stacked .top-choices .rating-wrapper {
        position: static !important;
        transform: none !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "score"
            "wordScore"
            "stars" !important;
        align-items: start !important;
        row-gap: 0 !important;
        width: fit-content !important;
        justify-self: center !important;
        margin: 0 auto !important;
    }

    /* Mobile: Scale down rating elements and ensure proper grid positioning */
    .logooffer-stacked .top-choices .rating-pt {
        font-size: 20px !important;
        line-height: 1 !important;
        position: static !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .logooffer-stacked .top-choices .word-score-container {
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .logooffer-stacked .top-choices .word-score {
        font-size: 11px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .logooffer-stacked .top-choices .star-rating-wrapper {
        transform: scale(0.6) !important;
        transform-origin: center top !important;
        position: static !important;
        justify-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Chart Card Adjustments */
    .logooffer-stacked .top-choices:has(.ribbon-wrapper) .product-start {
        margin-top: 1.5rem !important;
    }

    .vendor_Ro.top-choices:has(.ribbon-container) .product-start > .card-body {
        padding-top: 1.5rem !important;
    }

    .top-choices .product-start {
        height: 75px;
    }

    #chartCard1 .product-start {
        height: 80px;
    }

    .condensedMobile .globalChartMobile .product-start {
        height: fit-content !important;
    }

    .top-choices#chartCard1 .product-start .card-body {
        padding-top: 1rem !important;
    }

    .top-choices .card .product-details-list li:nth-child(1) {
        font-size: 13px !important;
    }

    .top-choices .card .product-details-list li {
        font-size: 13px !important;
    }

    .product-pricing .card-body {
        width: 100%;
    }

    .rating-wrapper {
        transform: translate(0, 20px);
    }

    #chartCard1 .rating-wrapper {
        transform: translate(0, 25px);
    }

    #chartCard1:has(.word-score-container) .rating-wrapper {
        transform: translate(0, 25px);
    }

    /* Product Image */
    .product-details .card-body {
        padding-top: 0 !important;
    }

    .top-choices .card .product-image {
        width: 150px;
        position: relative;
    }

    /* Below The Fold Content */
    .article-title {
        font-size: 22px !important;
    }

    .article-subtitle {
        font-size: 18px !important;
    }

    .article-highlight {
        font-size: 16px;
    }

    .article-desc, .article-list li, a.article-link {
        font-size: 14px;
    }

    /* Reviews and Articles Index */
    .reviews-section-two .products {
        margin-top: -25px !important;
    }

    /* Reviews and Articles Longform */
    .review-details-two .pros-cons-list {
        flex-direction: column;
    }

    .review-details-two .pros-list, .review-details-two .cons-list {
        flex: 0 0 100%;
    }

    .faq-area .accordianHeader {
        font-size: 14px !important;
    }

    /* Vendor Image Sizing for Various Sections */
    .condensedMobile .globalChartMobile .rating-wrapper,
    .condensedMobile .globalChartMobile .product-image {
        position: static;
        transform: none !important;
        width: 125px;
    }

    .condensedMobile .globalChartMobile .product-image {
        margin-left: 0 !important;
    }

    /* Secondary Chart */
    .global-chart .top-choices.second-chart-card .card .product-image {
        transform: translate(-50%, 20%);
    }

    .global-chart .second-chart-card .product-image {
        margin-left: 0 !important;
    }

    .global-chart.logooffer-stacked .second-chart-card .rating-wrapper {
        position: absolute !important;
        transform: translate(-30px, 20px) !important;
    }

    /* Logo Offer Stacked - CRITICAL MOBILE LAYOUT RULES */
    .logooffer-stacked .product-start {
        height: fit-content !important;
        padding: 0 1rem !important;
    }

    .logooffer-stacked .global-mobile-start {
        width: 100%;
        display: grid;
        grid-template-columns: .25fr 1fr .5fr;
        column-gap: .25rem;
        grid-template-areas: 'chartRank vendorLogo ratingWrapper';
    }

    .logooffer-stacked #chartCardBottom .global-mobile-start {
        grid-template-columns: 1fr .5fr;
        grid-template-areas: 'vendorLogo ratingWrapper';
    }

    /* CRITICAL ORIGINAL RULE: Mobile product-image positioning */
    .logooffer-stacked .product-image {
        position: static !important;
        transform: none !important;
        width: 135px !important;
        margin: 0 !important;
    }

    .logooffer-stacked .rating-wrapper {
        position: static !important;
        transform: none !important;
        width: fit-content;
        justify-self: center;
    }

    /* CRITICAL ORIGINAL RULE: Mobile offerImage sizing */
    .logooffer-stacked .offerImage-wrapper {
        width: 100%;
    }

    .logooffer-stacked .product-offer-image {
        display: block;
        margin: 0 auto !important;
        padding: 0 1rem;
        max-width: 256px;
    }

    .logooffer-stacked .rating-pt {
        text-align: center !important;
    }

    .logooffer-stacked .product-details {
        margin-top: 10px;
    }

    /* Review Index Vendor */
    .reviewIndexVendor .product-image {
        width: 125px !important;
    }

    /* Review Details */
    .review-details-two .hero-image-section .product-image {
        width: 200px;
    }

    /* Reviews Section Product Images */
    .reviews-section .top-choices .card .product-image {
        width: 155px;
        position: relative;
    }

    .review-details .top-choices .card .product-image {
        margin-left: 0 !important;
        width: 160px;
    }
}

/* ===== EXTRA SMALL MOBILE (max-width: 576px) ===== */
@media screen and (max-width: 576px) {
    .badge, .badge span {
        color: #484848 !important;
    }

    .home-image {
        height: fit-content !important;
        padding-bottom: 1rem !important;
    }

    .home-image .p-3 {
        padding: .5rem 1rem !important;
    }

    .reviews-section .top-choices .card .product-image {
        width: 155px;
        position: relative;
    }
}

/* ===== SMALL MOBILE (min-width: 576px, max-width: 767px) ===== */
@media screen and (min-width: 576px) and (max-width: 767px) {
    .reviews-section .top-choices .card .product-image {
        width: 155px;
        position: relative;
    }
}

/* ===== TABLET AND UP (min-width: 768px) ===== */
@media screen and (min-width: 768px) {
    /* Reviews and Articles */
    .review-details-two .pros-cons-list {
        flex-direction: row;
    }

    .review-details-two .pros-list, .review-details-two .cons-list {
        flex: 0 0 50%;
        margin: 0 .75rem;
    }

    /* Product Image - Desktop */
    .logooffer-stacked .product-offer-image {
        display: none;
    }

    /* Desktop: hide offerImage-wrapper, show product-image */
    .logooffer-stacked .offerImage-wrapper {
        display: none;
    }

    /* CRITICAL ORIGINAL RULE: Desktop product-image visibility and basic sizing */
    .logooffer-stacked .product-image {
        display: block;
        position: static;
        width: 135px;
    }

    /* Logo Offer Stacked Desktop Layout */
    .logooffer-stacked .product-start {
        padding-bottom: .5rem;
    }

    .logooffer-stacked .offerImage-wrapper {
        margin: 3rem auto .5rem auto;
        padding: 1rem;
    }

    .logooffer-stacked .top-choices:has(.vendor-review-platform-wrapper) .offerImage-wrapper {
        margin-top: 1rem;
        margin-bottom: 0;
    }

    /* Vendor Logo Sizing */
    .card-body .product-image {
        width: 160px;
    }
}

/* ===== TABLET (min-width: 768px, max-width: 991px) ===== */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .logooffer-stacked .product-start:has(.offerImage-wrapper) .product-image {
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .logooffer-stacked .carousel-products {
        margin-top: -35px;
    }

    .logooffer-stacked .product-image {
        width: 145px;
    }

    .logooffer-stacked .product-start:has(.offerImage-wrapper) .product-image {
        transform: translate(-50%, -24%);
        top: 24%;
    }

    .logooffer-stacked #chartCardBottom .product-start:has(.offerImage-wrapper) .product-image {
        transform: translate(-50%, 0);
        top: 0;
    }

    /* Vendor Logo */
    .card-body .product-image {
        width: 160px;
    }
}

/* ===== SMALL DESKTOP (min-width: 992px, max-width: 1199px) ===== */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    /* Product Image */
    .logooffer-stacked .product-start:has(.offerImage-wrapper) .product-image {
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .logooffer-stacked .product-start:has(.offerImage-wrapper) .product-image {
        transform: translate(-50%, -20px);
        top: 25%;
    }

    .logooffer-stacked #chartCardBottom .product-start:has(.offerImage-wrapper) .product-image {
        transform: translate(-50%, -10%);
        top: 0;
    }

    .logooffer-stacked .product-offer-image {
        margin-top: 2rem !important;
    }

    /* Vendor Logo */
    .card-body .product-image {
        width: 160px;
    }
}

/* ===== MEDIUM SCREENS (max-width: 1023px) ===== */
@media screen and (max-width: 1023px) {
    /* Product Image */
    .logooffer-stacked .product-offer-image {
        object-fit: contain !important;
    }
}

/* ===== MEDIUM TO LARGE (max-width: 1199px) ===== */
@media screen and (max-width: 1199px) {
    /* Product Image */
    .logooffer-stacked .product-details {
        margin-top: 0 !important;
    }

    .logooffer-stacked #chartCard1 .product-details,
    .logooffer-stacked #chartCard2 .product-details,
    .logooffer-stacked #chartCard3 .product-details {
        margin-top: 1rem !important;
    }

    .logooffer-stacked .top-choices .offerImage-wrapper {
        display: none;
    }

    .logooffer-stacked #chartCard1.top-choices .offerImage-wrapper,
    .logooffer-stacked #chartCard2.top-choices .offerImage-wrapper,
    .logooffer-stacked #chartCard3.top-choices .offerImage-wrapper,
    .logooffer-stacked #chartCard4.top-choices .offerImage-wrapper {
        display: block !important;
    }
}

/* ===== LARGE DESKTOP (min-width: 1200px) ===== */
@media screen and (min-width: 1200px) {
    /* Chart Card */
    .top-choices .card .product-details-list li:nth-child(1) {
        font-size: 15px !important;
    }

    .top-choices .card .product-details-list li {
        font-size: 12px !important;
        text-indent: -1.3rem !important;
    }

    /* Product Image Positioning */
    .logooffer-stacked .product-start:has(.offerImage-wrapper) .product-image {
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .logooffer-stacked .product-start:has(.offerImage-wrapper) .product-image {
        transform: translate(-50%, -18%);
        top: 18%;
    }

    .logooffer-stacked #chartCardBottom .product-start:has(.offerImage-wrapper) .product-image {
        transform: translate(-50%, -10%);
        top: 10%;
    }

    /* Hover Effects */
    .logooffer-stacked #chartCard4.top-choices:hover .product-image,
    .logooffer-stacked #chartCard5.top-choices:hover .product-image,
    .logooffer-stacked #chartCard6.top-choices:hover .product-image,
    .logooffer-stacked #chartCard7.top-choices:hover .product-image,
    .logooffer-stacked #chartCard8.top-choices:hover .product-image,
    .logooffer-stacked #chartCard9.top-choices:hover .product-image,
    .logooffer-stacked #chartCard10.top-choices:hover .product-image {
        width: 165px !important;
        content: " " !important;
    }

    /* Carousel Container Padding */
    .logooffer-stacked:has(.carousel-container) .site-main-inner-area {
        padding-top: 2rem;
    }

    /* Vendor Logo */
    .card-body .product-image {
        width: 165px;
    }
}

/* ===== EXTRA LARGE DESKTOP (min-width: 1350px) ===== */
@media screen and (min-width: 1350px) {
    /* Large screen adjustments if any */
}

/* ===== ADDITIONAL UTILITY MEDIA QUERIES ===== */

@media (max-width: 769px) {
    /* Additional mobile tweaks */
}

@media (max-width: 991px) {
    /* Additional tablet tweaks */
}

@media (min-width: 992px) {
    /* Desktop base tweaks */
}

@media (max-width: 400px) {
    /* Extra small mobile */
}

@media (max-width: 480px) {
    /* Small mobile */
}

/* ==========================================================================
   BING ADS COMPLIANCE - RESPONSIVE STYLES
   Merged from bing-compliance.css
   ========================================================================== */

/* Tablet - Review Section */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .review-section {
    padding-top: 30px !important;
  }

  .footer__disclaimer-text {
    font-size: 0.6875rem !important;
    line-height: 1.55 !important;
    padding: 0.75rem 0.9375rem 0.75rem !important;
  }
}

/* Mobile - Review Section and Footer */
@media screen and (max-width: 767px) {
  .review-section {
    padding-top: 0 !important;
  }

  .footer__disclaimer-text {
    font-size: 0.625rem !important;
    line-height: 1.5 !important;
    padding: 0.5rem 0.625rem 0.625rem !important;
    text-align: left !important;
  }

  /* Mobile Typography Adjustments */
  .navbar-brand img {
    max-width: 180px !important;
  }

  .home-title {
    font-size: 28px !important;
  }

  .home-subtitle {
    font-size: 16px !important;
    display: block !important;
  }

  /* Align section titles with home-title */
  #why-compare-container .section-title,
  .how-rank-mobile-inline .how-rank-title {
    font-size: 28px !important;
    font-weight: 600;
    color: #000000;
  }

  /* Align section text with home-subtitle */
  .why-compare-description,
  .how-rank-mobile-inline p {
    font-size: 16px !important;
  }

  /* Make a-disclosure smaller on mobile */
  .a-disclosure {
    font-size: 9px !important;
    line-height: 1.3 !important;
    padding: 8px 12px !important;
  }
}

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