/* Main container for the bookmakers list */
.cag-bookmakers-list-wrapper {
    font-family: 'Inter', sans-serif;
    padding: 25px; /* Slightly more generous padding */
    background-color: #f7f9fc; /* Very light blue-grey background */
    border-radius: 12px; /* Nicer rounded corners */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); /* More pronounced, softer shadow */
    margin: 25px auto; /* Center the wrapper and maintain vertical margin */
    max-width: 1280px; /* Wider max-width for better desktop display */
    overflow: hidden; /* Ensure everything stays within bounds */
}

/* Main title for the list section */
.cag-list-main-title {
    font-size: 2.8em; /* Larger, more impactful title */
    font-weight: 900; /* Extra bold */
    color: #2c3e50;
    text-align: center;
    margin-bottom: 45px; /* Increased space below title */
    padding-bottom: 15px;
    position: relative;
    letter-spacing: -0.8px; /* Tighter letter spacing for impact */
    line-height: 1.2;
}

.cag-list-main-title::after {
    content: '';
    display: block;
    width: 120px; /* Longer accent line */
    height: 4px; /* Slightly thicker accent line */
    background: linear-gradient(90deg, #3498db, #2980b9); /* Professional blue gradient */
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Individual list item (each bookmaker) */
.cag-list-item {
    display: grid;
    /* Optimized grid columns for visual hierarchy:
       Rank/Badge | Logo/Info | Offer (Big) | Value (Big) | Action Button */
    grid-template-columns: 90px 2fr 2.5fr 1.2fr 1.5fr; /* Tuned proportions */
    align-items: center;
    border: 1px solid #e9ecef; /* Subtle border */
    border-radius: 10px; /* Nicer rounded corners */
    margin-bottom: 18px; /* Increased vertical spacing between items */
    background-color: #ffffff;
    padding: 20px 25px; /* More padding for a premium feel */
    transition: all 0.25s ease-in-out; /* Smoother transition */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); /* Light initial shadow */
    position: relative; /* For badge positioning */
    overflow: hidden;
}

.cag-list-item:last-child {
    margin-bottom: 0;
}

.cag-list-item:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); /* More prominent lift and shadow */
    transform: translateY(-5px);
}

/* Column styles */
.cag-list-col {
    padding: 0 10px; /* Consistent internal padding */
}

/* Rank/Badge Column */
.cag-list-rank-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    height: 100%;
    padding-left: 0;
}

.cag-list-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg, #28a745, #218838); /* Green gradient */
    color: #ffffff;
    font-size: 0.65em; /* Slightly larger, more legible */
    font-weight: bold;
    padding: 5px 10px;
    border-bottom-right-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

/* Specific badge colors for visual distinction */
.cag-badge-top-sportsbook { background: linear-gradient(45deg, #f39c12, #e67e22); } /* Orange */
.cag-badge-best-value { background: linear-gradient(45deg, #27ae60, #2ecc71); }    /* Green */
.cag-badge-highly-rated { background: linear-gradient(45deg, #3498db, #5faee7); }  /* Blue */
.cag-badge-new-sportsbook { background: linear-gradient(45deg, #9b59b6, #8e44ad); } /* Purple */


.cag-list-position {
    font-size: 1.6em; /* Larger, more prominent rank number */
    font-weight: 900;
    color: #2c3e50;
    margin-top: 30px; /* Adjusted space for absolute badge */
    margin-bottom: 0;
}

/* Info Column (Logo, Title, Rating) */
.cag-list-info-col {
    display: flex;
    flex-direction: column; /* Stack logo/title block and payment methods below */
    align-items: flex-start;
    gap: 15px; /* Space between logo/title block and payment methods */
    padding: 0 10px;
}

.cag-list-logo-wrap {
    display: flex;
    align-items: center;
    gap: 15px; /* More space between logo and text */
    width: 100%; /* Take full width of parent flex container */
}

.cag-list-logo {
    width: 60px; /* Slightly larger logo size */
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* More defined shadow */
}

.cag-list-logo img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

.cag-list-title-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1; /* Allow title/rating to take space */
}

.cag-list-title {
    font-size: 1.25em; /* More prominent title font size */
    font-weight: 700;
    color: #34495e;
    margin: 0;
    line-height: 1.3;
}

/* Prominent Rating */
.cag-list-rating-prominent {
    display: flex;
    align-items: center;
    font-size: 1.1em; /* Larger font for prominent rating */
    font-weight: 700;
    color: #34495e; /* Stronger color */
    margin-top: 5px; /* Space below title */
}

.cag-list-stars-large {
    color: #f1c40f; /* Vibrant yellow for stars */
    margin-right: 6px;
    font-size: 1.1em; /* Slightly larger stars */
}
.cag-rating-value-large {
    font-size: 1em; /* Value next to stars */
    color: #555;
    margin-right: 10px;
}

.cag-list-review-link-prominent {
    color: #3498db;
    text-decoration: none;
    margin-left: 8px; /* More space */
    font-size: 0.9em; /* Consistent with rating font size */
    font-weight: 600;
    transition: color 0.2s ease;
}

.cag-list-review-link-prominent:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* Offer Text Column - HIGH IMPACT */
.cag-list-offer-col {
    padding: 0 15px;
}

.cag-list-offer-text {
    font-size: 1.3em; /* SIGNIFICANTLY LARGER offer text */
    font-weight: 800; /* Extra bold */
    color: #2c3e50; /* Stronger color */
    line-height: 1.3;
    margin-bottom: 8px; /* More space */
    text-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Subtle text shadow for depth */
}

.cag-list-bonus-code {
    font-size: 0.85em; /* Slightly larger bonus code */
    color: #6c757d;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.cag-code-highlight {
    background-color: #eaf6ff;
    border: 1px solid #d4edff;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    color: #007bff;
    margin-right: 6px;
    white-space: nowrap;
}

.cag-copy-icon {
    cursor: pointer;
    color: #7f8c8d;
    font-size: 0.9em; /* Slightly larger icon */
    margin-left: 4px;
    transition: color 0.2s ease;
}

.cag-copy-icon:hover {
    color: #0056b3;
}

/* Bonus Value Column - HIGH IMPACT */
.cag-list-bonus-value-col {
    text-align: center;
}

.cag-list-bonus-value {
    font-size: 0.95em; /* Clear and readable */
    color: #7f8c8d;
    margin-bottom: 5px; /* More space */
}

.cag-value-amount {
    font-size: 2.2em; /* HUGE bonus value amount */
    font-weight: 900;
    color: #27ae60; /* Strong green for value */
    display: block;
    margin-top: 5px; /* More space */
    text-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

/* Actions Column (Claim Button) - HIGH IMPACT */
.cag-list-actions-col {
    display: flex;
    flex-direction: column; /* Stack button and advantages */
    align-items: flex-end; /* Align to the right */
    gap: 15px; /* Space between button and advantages list */
    padding-right: 0;
}

.cag-list-claim-button {
    display: inline-block;
    background: linear-gradient(90deg, #28a745, #218838); /* Strong green gradient */
    color: #fff;
    padding: 12px 25px; /* Larger padding for a substantial button */
    border-radius: 30px; /* More rounded pill shape */
    font-size: 1em; /* Clear font size */
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother animation */
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); /* Stronger shadow */
    white-space: nowrap;
    min-width: 140px; /* Ensure a decent minimum width */
    position: relative; /* For potential future icons/effects */
    overflow: hidden;
}

.cag-list-claim-button::before { /* Subtle overlay effect on hover */
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    transform: skewX(-20deg);
}

.cag-list-claim-button:hover::before {
    left: 100%;
}

.cag-list-claim-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    background: linear-gradient(90deg, #218838, #28a745); /* Slightly darker gradient on hover */
}

/* Advantages */
.cag-list-pros {
    list-style: none; /* Remove default list style */
    margin: 0;
    padding: 0;
    width: 100%; /* Take full width of parent flex container */
    text-align: right; /* Align advantages to the right */
}

.cag-list-pros li {
    font-size: 0.85em; /* Smaller font for advantages */
    color: #555;
    margin-bottom: 5px; /* Space between advantages */
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align icon and text to the right */
}

.cag-pro-icon {
    color: #28a745; /* Green checkmark */
    margin-left: 5px; /* Space between text and icon (reversed for right alignment) */
    font-size: 0.9em;
}

/* Terms Row (at the very bottom of each item) */
.cag-list-terms-row {
    grid-column: 2 / -1; /* Start after the rank column */
    margin-top: 0px; /* Further REDUCED: Minimal top margin */
    padding-top: 0px; /* Further REDUCED: Minimal top padding */
    padding-bottom: 0px; /* Further REDUCED: Minimal bottom padding */
    border-top: 1px dashed #e9ecef;
    padding-left: 10px;
    padding-right: 10px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping of the row itself */
    gap: 3px; /* Adjust gap */
}

.cag-list-terms-link {
    font-size: 0.75em;
    color: #7f8c8d;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    flex-shrink: 0;
    margin: 0; /* Ensure no extra margins */
    padding: 0; /* Ensure no extra padding */
    line-height: 1; /* Further REDUCED: Compact line height */
}

.cag-list-terms-link:hover {
    color: #e74c3c;
    text-decoration: underline;
}

/* Payment Methods */
.cag-list-payment-methods {
    display: flex;
    flex-wrap: nowrap; /* PREVENT WRAPPING OF INTERNAL ITEMS */
    gap: 2px; /* Further REDUCED: Minimal gap between payment icons */
    margin-left: auto;
    align-items: center;
    flex-shrink: 0;
    margin: 0; /* Ensure no extra margins */
    padding: 0; /* Ensure no extra padding */
}

.cag-payment-method-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 51px;
    /* overflow: hidden; */
    /* border: 1px solid #e0e0e0; */
    border-radius: 4px;
    background-color: #fefefe;
    padding: 0px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    /* margin: 0; */
}

.cag-payment-method-item img {
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
    border: 1px solid #e0d6d6;
}


/* No Bookmakers Message */
.cag-no-casas {
    text-align: center;
    padding: 30px;
    font-size: 1.1em;
    color: #7f8c8d;
    background-color: #f0f2f5;
    border-radius: 8px;
    margin: 15px auto;
    max-width: 800px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* Responsive Adjustments */
/* Tablets and larger mobiles (768px to 1024px) */
@media (max-width: 1024px) {
    .cag-list-item {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: auto auto auto;
        padding: 15px 20px;
    }

    .cag-list-rank-col {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        align-items: flex-start;
        text-align: left;
        padding-left: 0;
        position: static;
        margin-top: 0;
    }
    .cag-list-badge {
        position: static;
        margin-bottom: 5px;
        left: auto;
        top: auto;
    }
    .cag-list-position {
        font-size: 1.2em;
        margin-top: 0;
    }

    .cag-list-info-col {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 10px;
        gap: 10px;
    }

    .cag-list-logo {
        width: 50px;
        height: 50px;
    }
    .cag-list-title {
        font-size: 1.1em;
    }
    .cag-list-rating-prominent {
        font-size: 0.9em;
    }
    .cag-list-review-link-prominent {
        font-size: 0.85em;
        margin-left: 5px;
    }

    .cag-list-offer-col {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        padding: 0 10px;
        text-align: left;
    }
    .cag-list-offer-text {
        font-size: 1.1em;
    }
    .cag-list-bonus-code {
        align-items: flex-start;
    }

    .cag-list-bonus-value-col {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        text-align: right;
        padding-right: 0;
    }
    .cag-value-amount {
        font-size: 1.8em;
    }

    .cag-list-actions-col {
        grid-column: 2 / 3;
        grid-row: 2 / 4;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-right: 0;
    }
    .cag-list-claim-button {
        width: 100%;
        max-width: 180px;
        font-size: 0.9em;
        padding: 10px 15px;
    }
    .cag-list-pros {
        text-align: center;
    }
    .cag-list-pros li {
        justify-content: center;
        font-size: 0.8em;
    }

    /* Tablet-specific adjustments for terms row: stay horizontal if possible */
    .cag-list-terms-row {
        grid-column: 1 / -1; /* Span full width of item for tablets */
        margin-top: 2px; /* Adjusted margin for tablets */
        padding-top: 2px; /* Adjusted padding for tablets */
        padding-bottom: 2px; /* Consistent padding */
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        padding-left: 20px;
        padding-right: 20px;
    }
    .cag-list-terms-link {
        margin-bottom: 0;
        text-align: left;
    }
    .cag-list-payment-methods {
        margin-left: auto;
        margin-right: 0;
        justify-content: flex-end;
        width: auto;
        flex-wrap: nowrap; /* Ensure payment methods themselves don't wrap */
    }
}

/* Smaller mobiles (up to 767px) - Single column, fully stacked layout */
@media (max-width: 767px) {
    .cag-bookmakers-list-wrapper {
        padding: 15px;
        margin: 15px 0;
    }

    .cag-list-main-title {
        font-size: 2em;
        margin-bottom: 25px;
    }

    .cag-list-item {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center all items within the card */
        padding: 15px;
        margin-bottom: 15px;
        gap: 15px; /* Space between major stacked sections */
    }

    .cag-list-col {
        width: 100%; /* Each column takes full width on mobile */
        padding: 0; /* Remove internal column padding */
        text-align: center; /* Center text within each column */
        margin-bottom: 0; /* Gap handled by parent .cag-list-item */
    }

    /* Specific column adjustments for mobile stacking order */
    .cag-list-rank-col {
        order: 1; /* First element in stack */
        padding-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px; /* Space between badge and position */
    }
    .cag-list-badge {
        position: static; /* Remove absolute positioning on mobile */
        margin-bottom: 0; /* Remove extra margin */
        font-size: 0.6em;
    }
    .cag-list-position {
        font-size: 1.3em;
        margin-top: 0;
    }

    .cag-list-info-col {
        order: 2; /* Second element in stack */
        flex-direction: column;
        gap: 8px;
        align-items: center; /* Center logo and title/rating */
    }
    .cag-list-logo-wrap {
        flex-direction: column; /* Stack logo and title/rating block */
        gap: 5px;
    }
    .cag-list-logo {
        width: 200px;
        height: 90px;
        margin-bottom: 0;
    }
    .cag-list-title {
        font-size: 1em;
    }
    .cag-list-rating-prominent {
        flex-direction: column; /* Stack stars/value and review link */
        margin-top: 3px;
        font-size: 0.85em;
        align-items: center; /* Center them */
    }
    .cag-list-review-link-prominent {
        margin-left: 0;
        margin-top: 3px;
    }
    
    .cag-list-offer-col {
        order: 3; /* Third element in stack */
        padding: 0;
    }
    .cag-list-offer-text {
        font-size: 1.1em;
    }
    /* Removed bonus code specific styles as the element is no longer there */

    .cag-list-bonus-value-col {
        order: 4; /* Fourth element in stack */
        flex-direction: column;
        align-items: center;
        padding: 0;
    }
    .cag-value-amount {
        font-size: 1.8em;
        margin-left: 0;
        margin-top: 5px;
    }

    .cag-list-actions-col {
        order: 5; /* Fifth element in stack */
        padding-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px; /* Space between button and advantages */
    }
    .cag-list-claim-button {
        width: 90%; /* Slightly narrower button */
        max-width: 250px;
        padding: 10px 20px;
        font-size: 1em;
    }
    .cag-list-pros {
        margin-top: 0; /* Gap handled by parent */
        text-align: center;
    }
    .cag-list-pros li {
        justify-content: center;
        font-size: 0.75em;
    }

    /* Mobile-specific adjustments for terms row: explicitly stack and center */
    .cag-list-terms-row {
        order: 6; /* Last element in stack */
        margin-top: 10px; /* More space before terms row */
        padding-top: 10px;
        padding-bottom: 10px;
        flex-direction: column; /* Stack terms link and payment methods */
        justify-content: center;
        align-items: center;
        padding-left: 15px;
        padding-right: 15px;
        gap: 8px; /* Adjusted gap */
    }
    .cag-list-terms-link {
        margin-bottom: 0;
        text-align: center;
    }
    .cag-list-payment-methods {
        margin: 0 auto;
        justify-content: center;
        width: auto;
        flex-wrap: wrap; /* Allow payment methods to wrap on very small screens */
        gap: 5px;
    }
    .cag-payment-method-item {
        width: 65px; /* Adjust size for mobile */
        height: 24px;
        padding: 1px;
    }
}