/* ===== RANKED OFFERS STYLES ===== */

/* Ranked offer card with rank number as part of left edge */
.no-wagering-page .ranked-offer,
.signup-offers-page .ranked-offer,
.sports-offers-page .ranked-offer,
.casino-bonus-page .ranked-offer,
.blog-page .ranked-offer {
    display: flex;
    align-items: stretch;
    position: relative;
    gap: 0;
    background: white;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Hover removed from ranked offer box – no transform/shadow on hover */

/* Rank number as left edge of box – 18px on mobile, rank 40px / score 35px on desktop (OFFER RANK: X SCORE: X/10) */
.no-wagering-page .rank-number,
.signup-offers-page .rank-number,
.sports-offers-page .rank-number,
.casino-bonus-page .rank-number,
.blog-page .rank-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    font-size: 18px !important; /* 18px mobile – overridden at 1024px+ (rank 40px, score 35px) */
    font-weight: 800;
    background: #022e4a;
    color: white;
    padding: 1rem 0.75rem;
    position: relative;
    flex-shrink: 0;
    border-radius: 0.75rem 0 0 0.75rem; /* Desktop: match box left side; mobile overrides to 0 */
}

/* Gold styling for rank #1 – border-radius overridden to 0 in max-width: 1023px block */
.no-wagering-page .rank-gold,
.signup-offers-page .rank-gold,
.casino-bonus-page .rank-gold,
.blog-page .rank-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a1a2e;
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Green styling for ranks #2-5 */
.no-wagering-page .rank-green,
.signup-offers-page .rank-green,
.casino-bonus-page .rank-green,
.blog-page .rank-green {
    background: linear-gradient(135deg, #00cc5a 0%, #00a047 100%);
    color: white;
}

/* Rank #1 gets extra visual emphasis with gold gradient */

/* Content wrapper (everything except rank number) */
.no-wagering-page .offer-content-wrapper,
.signup-offers-page .offer-content-wrapper,
.sports-offers-page .offer-content-wrapper,
.casino-bonus-page .offer-content-wrapper,
.blog-page .offer-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

/* Reduce vertical spacing - tighten everything up - metrics-row starts directly */
.no-wagering-page .offer-top-row,
.signup-offers-page .offer-top-row,
.sports-offers-page .offer-top-row,
.casino-bonus-page .offer-top-row,
.blog-page .offer-top-row {
    margin-bottom: 0 !important; /* Match skeleton – zero CLS on load */
}

.no-wagering-page .key-terms-section,
.signup-offers-page .key-terms-section,
.sports-offers-page .key-terms-section,
.casino-bonus-page .key-terms-section,
.blog-page .key-terms-section {
    margin-top: 1rem !important;
    padding-top: 0 !important; /* Removed padding-top - closes box up perfectly */
}

/* Override default offer-card styles for ranked offers */
.no-wagering-page .ranked-offer.offer-card,
.signup-offers-page .ranked-offer.offer-card,
.sports-offers-page .ranked-offer.offer-card,
.casino-bonus-page .ranked-offer.offer-card,
.blog-page .ranked-offer.offer-card {
    padding: 0;
}

/* 768–1023px: rank/score on top (same as mobile); 1024px+ = rank left of offer */
@media (max-width: 1023px) {
    /* Flex-direction column: rank and score over the top of each offer */
    .signup-offers-page .offer-card.ranked-offer,
    .casino-signup-offers-page .offer-card.ranked-offer,
    .casino-bonus-page .offer-card.ranked-offer,
    .no-wagering-page .offer-card.ranked-offer,
    .no-deposit-free-spins-page .offer-card.ranked-offer,
    .sports-offers-page .offer-card.ranked-offer {
        flex-direction: column !important;
    }
    
    /* Mobile: square top (so coloured rank strip is pointed), rounded bottom only */
    .no-wagering-page .ranked-offer,
    .signup-offers-page .ranked-offer,
    .casino-bonus-page .ranked-offer,
    .no-wagering-page .ranked-offer.offer-card,
    .signup-offers-page .ranked-offer.offer-card,
    .casino-bonus-page .ranked-offer.offer-card,
    .casino-signup-offers-page .offer-card.ranked-offer,
    .no-deposit-free-spins-page .offer-card.ranked-offer,
    .sports-offers-page .offer-card.ranked-offer {
        border-radius: 0 0 0.75rem 0.75rem !important; /* Top square so rank strip is pointed */
        overflow: hidden !important; /* Override overflow: visible from styles-new.css */
    }
    /* Skeleton on mobile: show full width (right half visible) – override overflow so claim/logo/metrics not clipped */
    .signup-offers-page .offer-card.ranked-offer.skeleton-shimmer,
    .casino-signup-offers-page .offer-card.ranked-offer.skeleton-shimmer,
    .casino-bonus-page .offer-card.ranked-offer.skeleton-shimmer,
    .no-wagering-page .offer-card.ranked-offer.skeleton-shimmer,
    .no-deposit-free-spins-page .offer-card.ranked-offer.skeleton-shimmer {
        overflow: visible !important;
    }
    
    /* Rank number: centered horizontal layout – 18px; fully rigid corners (no rounding) 768–1024 */
    .no-wagering-page .rank-number,
    .signup-offers-page .rank-number,
    .casino-bonus-page .rank-number,
    .casino-signup-offers-page .rank-number,
    .no-deposit-free-spins-page .rank-number,
    .sports-offers-page .rank-number,
    .signup-offers-page .ranked-offer:first-child .rank-number,
    .signup-offers-page .ranked-offer:first-child .rank-number.rank-gold,
    .signup-offers-page .ranked-offer:last-child .rank-number,
    .casino-bonus-page .ranked-offer:first-child .rank-number.rank-gold,
    .casino-bonus-page .ranked-offer:last-child .rank-number,
    .no-deposit-free-spins-page .ranked-offer:first-child .rank-number.rank-gold,
    .no-wagering-page .ranked-offer:first-child .rank-number.rank-gold,
    .no-wagering-page .ranked-offer:last-child .rank-number,
    .blog-page .ranked-offer:first-child .rank-number,
    .blog-page .ranked-offer:last-child .rank-number {
        min-width: auto !important;
        width: 100% !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        padding: 0.75rem 1rem !important;
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        gap: 0.75rem !important;
    }
    /* 768–1024: force rank-gold (first offer) rigid corners – no rounded */
    .signup-offers-page .ranked-offer:first-child .rank-number.rank-gold,
    .casino-bonus-page .ranked-offer:first-child .rank-number.rank-gold,
    .no-wagering-page .ranked-offer:first-child .rank-number.rank-gold,
    .no-deposit-free-spins-page .ranked-offer:first-child .rank-number.rank-gold,
    .blog-page .ranked-offer:first-child .rank-number.rank-gold {
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    
    /* Add "OFFER RANK: " before the rank number */
    .no-wagering-page .rank-number::before,
    .signup-offers-page .rank-number::before,
    .casino-bonus-page .rank-number::before {
        content: "OFFER RANK: " !important;
        font-size: 18px !important;
        font-weight: 700 !important; /* Increased font weight */
    }
    
    /* Style the score div to show "SCORE: " before it and "/10" after it */
    .no-wagering-page .rank-number > div,
    .signup-offers-page .rank-number > div,
    .casino-bonus-page .rank-number > div {
        font-size: 18px !important; /* 18px on mobile */
        font-weight: 700 !important; /* Increased font weight - override inline 400 */
        margin: 0 !important; /* Remove all margins */
        display: inline !important; /* Ensure it displays inline with rank */
        white-space: nowrap !important; /* Prevent wrapping of score/10 */
    }
    
    /* Add "SCORE: " before the score div content (with space after colon to match "OFFER RANK: 1") */
    .no-wagering-page .rank-number > div::before,
    .signup-offers-page .rank-number > div::before,
    .casino-bonus-page .rank-number > div::before {
        content: "SCORE: " !important; /* Space after colon - should display as "SCORE: 9.7" */
        font-size: 18px !important;
        font-weight: 700 !important;
        margin-right: 0.25rem !important; /* Increased gap between "SCORE:" and the number */
    }
    
    /* Add "/10" after the score div content */
    .no-wagering-page .rank-number > div::after,
    .signup-offers-page .rank-number > div::after,
    .casino-bonus-page .rank-number > div::after {
        content: "/10" !important;
        font-size: 18px !important;
        font-weight: 700 !important; /* Increased font weight */
    }
    
    /* Content wrapper: ensure it doesn't interfere with parent's rounded corners */
    .no-wagering-page .offer-content-wrapper,
    .signup-offers-page .offer-content-wrapper,
    .casino-bonus-page .offer-content-wrapper {
        background: transparent; /* Ensure no background interferes with parent's rounded corners */
    }
    
    /* Mobile: logo left, blurb right on same line; blurb vertically centred to middle of logo */
    .no-wagering-page .offer-top-row,
    .signup-offers-page .offer-top-row,
    .casino-bonus-page .offer-top-row,
    .no-deposit-free-spins-page .offer-top-row,
    .blog-page .offer-top-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    .no-wagering-page .offer-top-row .logo-section,
    .signup-offers-page .offer-top-row .logo-section,
    .casino-bonus-page .offer-top-row .logo-section,
    .no-deposit-free-spins-page .offer-top-row .logo-section,
    .blog-page .offer-top-row .logo-section {
        flex-shrink: 0 !important;
        align-self: center !important;
    }
    /* Blurb centred in right-hand space: equal space between logo and right edge */
    .no-wagering-page .offer-top-row .offer-details,
    .signup-offers-page .offer-top-row .offer-details,
    .casino-bonus-page .offer-top-row .offer-details,
    .no-deposit-free-spins-page .offer-top-row .offer-details,
    .blog-page .offer-top-row .offer-details {
        flex: 1 !important;
        min-width: 0 !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .no-wagering-page .offer-top-row .offer-details .offer-blurb-text,
    .signup-offers-page .offer-top-row .offer-details .offer-blurb-text,
    .casino-bonus-page .offer-top-row .offer-details .offer-blurb-text,
    .no-deposit-free-spins-page .offer-top-row .offer-details .offer-blurb-text,
    .blog-page .offer-top-row .offer-details .offer-blurb-text {
        text-align: center !important;
    }
    
    .no-wagering-page .offer-top-row,
    .signup-offers-page .offer-top-row {
        margin-bottom: 0 !important;
    }
    
    .no-wagering-page .metrics-row,
    .signup-offers-page .metrics-row,
    .casino-bonus-page .metrics-row,
    .sports-offers-page .metrics-row,
    .blog-page .metrics-row {
        padding-top: 12px !important; /* Sleek, tighter padding */
        padding-bottom: 5px !important;
    }
    
    .no-wagering-page .key-terms-section,
    .signup-offers-page .key-terms-section {
        margin-top: 1rem !important;
        padding-top: 0 !important; /* Removed padding-top */
    }
}

/* Mobile – OFFER RANK / SCORE: 18px (all labels and scores) */
@media (max-width: 1023px) {
    .no-wagering-page .rank-number,
    .signup-offers-page .rank-number,
    .casino-bonus-page .rank-number,
    .blog-page .rank-number {
        font-size: 18px !important;
    }
    .no-wagering-page .rank-number::before,
    .signup-offers-page .rank-number::before,
    .casino-bonus-page .rank-number::before,
    .no-wagering-page .rank-number > div,
    .signup-offers-page .rank-number > div,
    .casino-bonus-page .rank-number > div,
    .no-wagering-page .rank-number > div::before,
    .signup-offers-page .rank-number > div::before,
    .casino-bonus-page .rank-number > div::before,
    .no-wagering-page .rank-number > div::after,
    .signup-offers-page .rank-number > div::after,
    .casino-bonus-page .rank-number > div::after {
        font-size: 18px !important;
    }
}

/* Desktop – OFFER RANK: 40px, SCORE (and labels): 35px */
@media (min-width: 1024px) {
    .no-wagering-page .rank-number,
    .signup-offers-page .rank-number,
    .casino-bonus-page .rank-number,
    .blog-page .rank-number {
        min-width: 80px;
        font-size: 40px !important; /* Rank number (e.g. "1") */
    }
    .no-wagering-page .rank-number::before,
    .signup-offers-page .rank-number::before,
    .casino-bonus-page .rank-number::before {
        font-size: 40px !important; /* "OFFER RANK: " */
    }
    .no-wagering-page .rank-number > div,
    .signup-offers-page .rank-number > div,
    .casino-bonus-page .rank-number > div,
    .no-wagering-page .rank-number > div::before,
    .signup-offers-page .rank-number > div::before,
    .casino-bonus-page .rank-number > div::before,
    .no-wagering-page .rank-number > div::after,
    .signup-offers-page .rank-number > div::after,
    .casino-bonus-page .rank-number > div::after {
        font-size: 30px !important; /* "SCORE: ", score value, "/10" */
    }

    .no-wagering-page .offer-content-wrapper,
    .signup-offers-page .offer-content-wrapper,
    .casino-bonus-page .offer-content-wrapper,
    .blog-page .offer-content-wrapper {
        padding: 1.5rem; /* Reduced from 2.5rem - moves top part further up */
    }

    /* Last offer: .rank-number bottom-right must be flat (no rounding) so it sits flush with the card – casino-bonus, no-deposit, no-wagering pages */
    .casino-bonus-page #offers-list .ranked-offer:last-child .rank-number,
    .no-deposit-free-spins-page #offers-list .ranked-offer:last-child .rank-number,
    .no-wagering-page #offers-list .ranked-offer:last-child .rank-number {
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0.75rem !important;
    }

    /* Seamless rank strip: 1px overlap removes sub-pixel white lines between rank-number blocks (positions 4–5, 18–19, 30–31, etc.) */
    .signup-offers-page #offers-list .ranked-offer:not(:last-child) .rank-number,
    .casino-signup-offers-page #offers-list .ranked-offer:not(:last-child) .rank-number,
    .casino-bonus-page #offers-list .ranked-offer:not(:last-child) .rank-number,
    .no-deposit-free-spins-page #offers-list .ranked-offer:not(:last-child) .rank-number,
    .no-wagering-page #offers-list .ranked-offer:not(:last-child) .rank-number {
        margin-bottom: -1px !important;
    }
}

/* 550px-767px: Rank number horizontal layout and vertical stack layout – 18px for rank/score */
@media (min-width: 550px) and (max-width: 767px) {
    /* Rank number: centered horizontal layout with "OFFER RANK: X SCORE: X/10" on one line */
    .no-wagering-page .rank-number,
    .signup-offers-page .rank-number,
    .casino-bonus-page .rank-number {
        min-width: auto !important;
        width: 100% !important;
        flex-direction: row !important;
        justify-content: center !important; /* Center positioning */
        align-items: center !important;
        font-size: 18px !important; /* 18px on mobile */
        font-weight: 700 !important; /* Increased font weight */
        padding: 0.75rem 1rem !important;
        border-radius: 0 !important; /* Mobile: solid corners, no rounding */
        gap: 0.75rem !important; /* Increased gap between rank and score */
    }
    
    /* Add "OFFER RANK: " before the rank number */
    .no-wagering-page .rank-number::before,
    .signup-offers-page .rank-number::before,
    .casino-bonus-page .rank-number::before {
        content: "OFFER RANK: " !important;
        font-size: 18px !important;
        font-weight: 700 !important; /* Increased font weight */
    }
    
    /* Style the score div to show "SCORE: " before it and "/10" after it */
    .no-wagering-page .rank-number > div,
    .signup-offers-page .rank-number > div,
    .casino-bonus-page .rank-number > div {
        font-size: 18px !important; /* 18px on mobile */
        font-weight: 700 !important; /* Increased font weight - override inline 400 */
        margin: 0 !important; /* Remove all margins */
        display: inline !important; /* Ensure it displays inline with rank */
        white-space: nowrap !important; /* Prevent wrapping of score/10 */
    }
    
    /* Add "SCORE: " before the score div content (with space after colon to match "OFFER RANK: 1") */
    .no-wagering-page .rank-number > div::before,
    .signup-offers-page .rank-number > div::before,
    .casino-bonus-page .rank-number > div::before {
        content: "SCORE: " !important; /* Space after colon - should display as "SCORE: 9.7" */
        font-size: 18px !important;
        font-weight: 700 !important;
        margin-right: 0.25rem !important; /* Increased gap between "SCORE:" and the number */
    }
    
    /* Add "/10" after the score div content */
    .no-wagering-page .rank-number > div::after,
    .signup-offers-page .rank-number > div::after,
    .casino-bonus-page .rank-number > div::after {
        content: "/10" !important;
        font-size: 18px !important;
        font-weight: 700 !important; /* Increased font weight */
    }
    
    /* Vertical stack layout - logo, blurb, metrics, claim button, key terms */
    /* Reduce padding to minimize height */
    .no-wagering-page .offer-content-wrapper,
    .signup-offers-page .offer-content-wrapper,
    .casino-bonus-page .offer-content-wrapper {
        padding: 1rem !important; /* Reduced from 1.25rem */
    }
    
    /* Mobile: logo left, blurb right on same line; blurb vertically centred to middle of logo */
    .no-wagering-page .offer-top-row,
    .signup-offers-page .offer-top-row,
    .casino-bonus-page .offer-top-row,
    .no-deposit-free-spins-page .offer-top-row,
    .blog-page .offer-top-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 1rem !important;
        margin-bottom: 0 !important; /* Match skeleton – zero CLS on load */
    }
    
    /* Logo section - left aligned */
    .no-wagering-page .offer-top-row .logo-section,
    .signup-offers-page .offer-top-row .logo-section,
    .casino-bonus-page .offer-top-row .logo-section,
    .no-deposit-free-spins-page .offer-top-row .logo-section,
    .sports-offers-page .offer-top-row .logo-section,
    .blog-page .offer-top-row .logo-section {
        order: 1 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        align-self: center !important;
    }
    
    /* Offer details (blurb) - centred in right-hand space: equal space between logo and right edge */
    .no-wagering-page .offer-top-row .offer-details,
    .signup-offers-page .offer-top-row .offer-details,
    .casino-bonus-page .offer-top-row .offer-details,
    .no-deposit-free-spins-page .offer-top-row .offer-details,
    .sports-offers-page .offer-top-row .offer-details,
    .blog-page .offer-top-row .offer-details {
        order: 2 !important;
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
        margin-bottom: 0.5rem !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .no-wagering-page .offer-top-row .offer-details .offer-blurb-text,
    .signup-offers-page .offer-top-row .offer-details .offer-blurb-text,
    .casino-bonus-page .offer-top-row .offer-details .offer-blurb-text,
    .no-deposit-free-spins-page .offer-top-row .offer-details .offer-blurb-text,
    .sports-offers-page .offer-top-row .offer-details .offer-blurb-text,
    .blog-page .offer-top-row .offer-details .offer-blurb-text {
        text-align: center !important;
    }
    
    /* Offer actions (claim button) - hidden in top row, will show below metrics */
    .no-wagering-page .offer-top-row .offer-actions,
    .signup-offers-page .offer-top-row .offer-actions,
    .casino-bonus-page .offer-top-row .offer-actions,
    .no-deposit-free-spins-page .offer-top-row .offer-actions {
        display: none !important;
    }
    
    
    /* Reduce metrics row spacing */
    .no-wagering-page .metrics-row,
    .signup-offers-page .metrics-row,
    .casino-bonus-page .metrics-row {
        margin-top: 0 !important; /* No top margin - spacing comes from blurb margin-bottom */
    }
    
    /* Visible gap between metrics bar and claim button (550px–767px) */
    .no-wagering-page .mobile-claim-btn,
    .signup-offers-page .mobile-claim-btn,
    .casino-bonus-page .mobile-claim-btn {
        margin-top: 1rem !important;
    }
    
    /* Reduce key terms spacing */
    .no-wagering-page .key-terms-section,
    .signup-offers-page .key-terms-section,
    .casino-bonus-page .key-terms-section {
        padding-top: 0 !important; /* Removed padding-top */
    }
}