/**
 * Betformatics Slots CSS
 *
 * Slot machine card grid styling with bf- prefix to avoid theme conflicts.
 * Uses CSS variables from variables.css for consistency.
 *
 * @package Betformatics
 * @since 1.0.0
 */

/* ==========================================================================
   GRID LAYOUT
   ========================================================================== */

.bf-slots-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(var(--bf-card-min-width, 280px), 1fr)) !important;
    gap: var(--bf-grid-gap, 20px) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* ==========================================================================
   CARD BASE
   ========================================================================== */

.bf-slot-card {
    display: flex !important;
    flex-direction: column !important;
    background: var(--bf-gradient-card, linear-gradient(75deg, rgba(126, 217, 87, 0.15), rgba(255, 255, 0, 0.15)), rgba(0, 0, 0, 0.75)) !important;
    border: var(--bf-border-width, 2px) solid var(--bf-border-color, #7ed957) !important;
    border-radius: var(--bf-border-radius-lg, 10px) !important;
    box-shadow: var(--bf-shadow-card, 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px rgba(126, 217, 87, 0.2)) !important;
    overflow: hidden !important;
    transition: transform var(--bf-transition-base, 0.3s ease), border-color var(--bf-transition-base, 0.3s ease), box-shadow var(--bf-transition-base, 0.3s ease) !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bf-slot-card:hover {
    border-color: var(--bf-border-color-hover, #ffff00) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--bf-shadow-card-hover, 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 0, 0.3), 0 0 30px rgba(126, 217, 87, 0.3)) !important;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

/* Left badges container (rating + rtp side by side) */
.bf-slot-badges-left {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: var(--bf-z-badge, 2) !important;
}

.bf-slot-badge {
    display: inline-block !important;
    padding: var(--bf-spacing-xs, 4px) 10px !important;
    background: var(--bf-bg-overlay, rgba(0, 0, 0, 0.9)) !important;
    color: var(--bf-primary, #7ed957) !important;
    font-family: var(--bf-font-family, inherit) !important;
    font-size: 10px !important;
    font-weight: var(--bf-font-weight-bold, 700) !important;
    border-radius: var(--bf-border-radius-sm, 4px) !important;
    border: 1px solid rgba(126, 217, 87, 0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: var(--bf-line-height-tight, 1.2) !important;
    white-space: nowrap !important;
}

/* Standalone positioned badge (provider on right) */
.bf-slot-badge-right {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: var(--bf-z-badge, 2) !important;
}

/* ==========================================================================
   IMAGE CONTAINER
   ========================================================================== */

.bf-slot-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 150px !important;
    padding: 15px 15px 5px 15px !important;
    background: var(--bf-bg-subtle, rgba(0, 0, 0, 0.2)) !important;
    box-sizing: border-box !important;
}

.bf-slot-img a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
}

.bf-slot-img img {
    display: block !important;
    width: 100% !important;
    height: 130px !important;
    max-height: 130px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: var(--bf-border-radius-md, 6px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Placeholder when no image */
.bf-slot-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--bf-gradient-placeholder, linear-gradient(135deg, rgba(126, 217, 87, 0.2), rgba(255, 255, 0, 0.1))) !important;
}

.bf-slot-placeholder span {
    font-size: 48px !important;
    opacity: 0.5 !important;
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

/* Title */
.bf-slot-title {
    display: block !important;
    margin: 0 !important;
    padding: 10px var(--bf-spacing-md, 12px) var(--bf-spacing-xs, 4px) var(--bf-spacing-md, 12px) !important;
    font-family: var(--bf-font-family, inherit) !important;
    font-size: var(--bf-font-size-lg, 15px) !important;
    font-weight: var(--bf-font-weight-bold, 700) !important;
    line-height: var(--bf-line-height-normal, 1.3) !important;
    text-align: left !important;
    color: var(--bf-text-link, #7ed957) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
}

.bf-slot-title:hover {
    color: var(--bf-accent, #ffff00) !important;
    text-decoration: none !important;
}

/* Max Win */
.bf-slot-maxwin {
    display: block !important;
    margin: 0 !important;
    padding: 0 var(--bf-spacing-md, 12px) var(--bf-spacing-sm, 8px) var(--bf-spacing-md, 12px) !important;
    font-family: var(--bf-font-family, inherit) !important;
    font-size: var(--bf-font-size-base, 12px) !important;
    font-weight: var(--bf-font-weight-normal, 400) !important;
    line-height: var(--bf-line-height-normal, 1.3) !important;
    text-align: left !important;
    color: var(--bf-text-secondary, #aaaaaa) !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.bf-slot-btns {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--bf-spacing-sm, 8px) !important;
    padding: 0 var(--bf-spacing-md, 12px) var(--bf-spacing-sm, 8px) var(--bf-spacing-md, 12px) !important;
    margin-top: auto !important;
}

/* Button Base */
.bf-slot-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    padding: 10px var(--bf-spacing-md, 12px) !important;
    min-height: 38px !important;
    font-family: var(--bf-font-family, inherit) !important;
    font-size: var(--bf-font-size-base, 12px) !important;
    font-weight: var(--bf-font-weight-bold, 700) !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-radius: var(--bf-border-radius, 5px) !important;
    box-shadow: var(--bf-shadow-button, 0 2px 4px rgba(0, 0, 0, 0.3)) !important;
    cursor: pointer !important;
    transition: all var(--bf-transition-base, 0.3s ease) !important;
    box-sizing: border-box !important;
}

/* Primary Button (Play) */
.bf-slot-btn-play {
    background: var(--bf-gradient-button-primary, linear-gradient(180deg, #4a9c2d 0%, #3d8526 100%)) !important;
    color: var(--bf-text-primary, #ffffff) !important;
    border: none !important;
}

.bf-slot-btn-play:hover {
    background: var(--bf-gradient-button-primary-hover, linear-gradient(180deg, #5cb82e 0%, #4a9c2d 100%)) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--bf-shadow-button-hover, 0 4px 8px rgba(0, 0, 0, 0.4)) !important;
    color: var(--bf-text-primary, #ffffff) !important;
}

/* Secondary Button (Read More) */
.bf-slot-btn-more {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--bf-primary, #7ed957) !important;
    border: 1px solid rgba(126, 217, 87, 0.3) !important;
}

.bf-slot-btn-more:hover {
    background: rgba(126, 217, 87, 0.2) !important;
    border-color: var(--bf-primary, #7ed957) !important;
    color: var(--bf-text-primary, #ffffff) !important;
}

/* ==========================================================================
   TERMS & CONDITIONS
   ========================================================================== */

.bf-slot-terms {
    display: block !important;
    margin: 0 !important;
    padding: 0 var(--bf-spacing-md, 12px) 10px var(--bf-spacing-md, 12px) !important;
    font-family: var(--bf-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif) !important;
    font-size: var(--bf-font-size-xs, 9px) !important;
    font-weight: var(--bf-font-weight-normal, 400) !important;
    line-height: var(--bf-line-height-tight, 1.2) !important;
    text-align: center !important;
    color: var(--bf-text-muted, #888888) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.2px !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .bf-slots-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--bf-card-min-width-mobile, 240px), 1fr)) !important;
        gap: var(--bf-grid-gap-mobile, 12px) !important;
    }

    .bf-slot-img {
        height: 130px !important;
        padding: var(--bf-spacing-sm, 8px) var(--bf-spacing-md, 12px) !important;
    }

    .bf-slot-img img {
        height: 110px !important;
        max-height: 110px !important;
    }

    .bf-slot-title {
        padding: var(--bf-spacing-sm, 8px) 10px var(--bf-spacing-xs, 4px) 10px !important;
        font-size: var(--bf-font-size-md, 14px) !important;
    }

    .bf-slot-maxwin {
        padding: 0 10px 6px 10px !important;
        font-size: var(--bf-font-size-sm, 11px) !important;
    }

    .bf-slot-btn {
        padding: var(--bf-spacing-sm, 8px) 10px !important;
        font-size: var(--bf-font-size-sm, 11px) !important;
        min-height: 34px !important;
    }

    .bf-slot-terms {
        padding: 0 10px var(--bf-spacing-sm, 8px) 10px !important;
        font-size: 8px !important;
    }
}

@media (max-width: 480px) {
    .bf-slots-grid {
        grid-template-columns: 1fr !important;
        gap: var(--bf-grid-gap-mobile, 12px) !important;
    }

    /* Keep buttons side-by-side on mobile */
    .bf-slot-btns {
        flex-direction: row !important;
        gap: 6px !important;
    }

    .bf-slot-btn {
        flex: 1 1 0 !important;
        padding: 8px 6px !important;
        font-size: 10px !important;
    }
}

/* ==========================================================================
   FILTER BUTTONS
   ========================================================================== */

.bf-slots-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
}

.bf-slots-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    min-height: 36px !important;
    font-family: var(--bf-font-family, inherit) !important;
    font-size: var(--bf-font-size-base, 12px) !important;
    font-weight: var(--bf-font-weight-bold, 700) !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-radius: var(--bf-border-radius, 5px) !important;
    cursor: pointer !important;
    transition: all var(--bf-transition-base, 0.3s ease) !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--bf-text-secondary, #aaaaaa) !important;
    border: 1px solid rgba(126, 217, 87, 0.3) !important;
}

.bf-slots-filter-btn:hover {
    background: rgba(126, 217, 87, 0.2) !important;
    border-color: var(--bf-primary, #7ed957) !important;
    color: var(--bf-text-primary, #ffffff) !important;
}

.bf-slots-filter-btn.active {
    background: var(--bf-gradient-button-primary, linear-gradient(180deg, #4a9c2d 0%, #3d8526 100%)) !important;
    color: var(--bf-text-primary, #ffffff) !important;
    border: none !important;
    box-shadow: var(--bf-shadow-button, 0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.bf-slots-filter-btn.active:hover {
    background: var(--bf-gradient-button-primary-hover, linear-gradient(180deg, #5cb82e 0%, #4a9c2d 100%)) !important;
}

/* Loading state */
.bf-slots-filter-btn.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .bf-slots-filters {
        gap: 6px !important;
        margin-bottom: 12px !important;
    }

    .bf-slots-filter-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
        min-height: 32px !important;
    }
}