/* Casino List Container - using Flexbox for multi-column layout */
.casino-list-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap into the next row */
    gap: 10px; /* Space between items */
    justify-content: space-around; /* Distribute items evenly */
    padding: 20px;
}

/* Individual Casino Item (same as before) */
.casino-item {
    background-color: #000000;
    border: 1px solid #3e3e3e;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 10px 30px 0px rgba(145.3234375, 44.54479279891305, 137.68869168931184, 0.5);
    transition: transform 0.3s ease;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    width: 100%;
    min-width: 280px;
    max-width: 280px;        /* Optional: Limit the container size */
    margin: 10px;
    display: flex;
    flex-direction: column;
}


/* Highlighted Casino Logo Styling (keep this if using highlighted mode) */
.casino-item img {
    width: 200px;              /* Scale to fit container */
    height: auto;             /* Maintain aspect ratio */
    max-height: 150px;        /* Max height constraint */
    object-fit: contain;     /* Preserve the full image without cropping */
    object-position: center;  /* Ensure the image is centered inside the container */
    display: block;           /* Remove any space below the image */
    margin: 0 auto;           /* Center the image inside the container */
}

.casino-item:hover {
    border: 1px solid #7732C5;
    border-radius: 8px;
}

/* Update this for both highlighted and non-highlighted items */
.casino-bonus {
    color: #ffcc00;
    font-size: 1.3em;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ffcc00;
    border-radius: 10px;
    background-color: #17161d;
}

/* Terms Text for All Items */
.casino-terms-text {
    color: #ffffff;
    font-size: 1.1rem;
    margin-top: 10px;
}

/* Terms Link Styling */
.casino-terms-link a {
    font-size: 0.8rem;
    text-decoration-color: #ffffff;
    
}

.casino-terms-link a:hover {
    text-decoration: underline;
    text-decoration-color: #ffffff;
}

/* Visit Casino Button */
.casino-btn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #000000;
    border: 0.5px solid;
    border-color: #C025FF;
    border-radius: 5px;
    padding: 5px 70px;
    font-size: 1rem;
}

/* More specific selector to override Elementor */
.elementor .casino-btn {
    box-shadow: 0px 10px 30px 0px rgba(145.3234375, 44.54479279891305, 137.68869168931184, 0.5);
}

.elementor .casino-btn:hover {
    color: #FFFFFF;
}

/* MOBILE VIEW STYLES */
@media (max-width: 768px) { /* Target devices with width 768px or smaller */
    
    .casino-item {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid #3e3e3e;
        min-width: 280px;
        max-width: 769px;
        display: flow;
    }
    
    /* Bonus offer below the title */
    .casino-bonus {
        font-size: 1.1em;
        margin-bottom: 10px;
        text-align: center;
        width: 100%;
        padding: 10px;
        margin-right:50px;
        border: 1px solid #3e3e3e;
        border-radius: 10px;
        background-color: #17161d;
    }

    /* Visit button centered */
    .casino-btn {
        text-align: center; /* Center the button on mobile */
        width: 100%; /* Full width for better visibility */
    }

    /* Centered terms text */
    .casino-terms-text,
    .casino-terms-link {
        text-align: center;
        font-size: 0.9em;
        margin-bottom: 10px;
    }
}