/**
 * Highest Scorer Shortcode Styles
 * 
 * Styles for the highest scorer carousel/grid display
 */

.highest_score_list.our-club {
    margin: 20px 0;
    position: relative !important;
    z-index: 1 !important;
}

.highest_score_list .icons-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: center !important;
    width: 100% !important;
}

.highest_score_list .icon-item {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    text-align: center !important;
    padding: 10px !important;
}

.highest_score_list .icon-item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    color: inherit !important;
}

.highest_score_list .icon-item img {
    width: 102px !important;
    height: 102px !important;
    border-radius: 50% !important;
    margin-bottom: 10px !important;
    object-fit: contain !important;
}

.highest_score_list .icon-item .name {
    font-weight: 600 !important;
    color: #333 !important;
    margin: 10px 0 5px !important;
    font-size: 12px !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* Responsive for mobile */
@media (max-width: 768px) {

    .highest_score_list .icons-container {
        flex-wrap: wrap !important;
    }

    .highest_score_list .icon-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .highest_score_list .icon-item img {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Desktop Swiper Styles - Default to show on desktop */
.highest_score_list.our-club .swiper-container,
.highest_score_list.our-club .desktop-swiper {
    display: block !important;
    width: 100%;
    padding: 10px 0;
    position: relative;
    z-index: 1; /* Keep swiper behind other page elements */
    overflow: hidden !important; /* Prevent slides from overflowing */
}

/* Swiper Wrapper - Force horizontal layout */
.highest_score_list .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    height: auto !important; /* Override Swiper's inline height */
    width: 100% !important;
    flex-wrap: nowrap !important;
}

/* Swiper Slides - Force 4 items horizontally */
.highest_score_list .swiper-slide {
    width: 25% !important; /* Show exactly 4 items */
    flex: 0 0 25% !important; /* Prevent flex grow/shrink */
    max-width: 25% !important; /* Enforce max width */
    margin-right: 0 !important; /* Remove extra margin */
    text-align: center !important;
    padding: 15px;
    border-radius: 10px;
    transition: transform 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    z-index: 1; /* Keep slides behind other content */
}

/* Swiper navigation and pagination */
.highest_score_list .swiper-button-next,
.highest_score_list .swiper-button-prev {
    color: #007cba;
}

.highest_score_list .swiper-pagination-bullet-active {
    background: #007cba;
}

/* Mobile Grid Styles - Completely hidden on desktop */
.highest_score_list.our-club .mobile-grid {
    display: none !important; /* Override any inline styles or conflicting CSS */
    visibility: hidden !important; /* Extra hiding */
    opacity: 0 !important; /* Make invisible */
    height: 0 !important; /* Remove from layout */
    overflow: hidden !important; /* Hide any overflow */
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 20px 0;
}

.highest_score_list .mobile-grid-item {
    text-align: center !important;
    padding: 15px;
    border-radius: 10px;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Hover Effects */
.highest_score_list .swiper-slide:hover,
.highest_score_list .mobile-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* Image Styles - Desktop size reduced by 15% (from 80px to 68px) */
.highest_score_list img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

/* Text Styles */
.highest_score_list .name,
.highest_score_list .player-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 10px 0 5px;
    word-wrap: break-word;
    max-width: 100%;
    text-align: center;
}

.highest_score_list .category-title {
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

/* Link Styles */
.highest_score_list a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Swiper Accessibility */
.highest_score_list .swiper-notification {
    position: absolute;
    left: -10000px;
    opacity: 0;
    z-index: -1000;
}

/* Desktop styles - Force proper display above 768px */
@media screen and (min-width: 769px) {
    /* Ensure desktop swiper shows on larger screens */
    .highest_score_list.our-club .desktop-swiper,
    .highest_score_list.our-club .swiper-container {
        display: block !important; /* Ensure swiper shows */
    }
    
    /* Force mobile grid to stay completely hidden on larger screens */
    .highest_score_list.our-club .mobile-grid {
        display: none !important; /* Absolutely force hide on desktop */
        visibility: hidden !important; /* Extra hiding */
        opacity: 0 !important; /* Make invisible */
        height: 0 !important; /* Remove from layout */
        overflow: hidden !important; /* Hide any overflow */
    }
}

/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {
    /* Hide desktop swiper on mobile and tablet */
    .highest_score_list.our-club .desktop-swiper,
    .highest_score_list.our-club .swiper-container {
        display: none !important; /* Force hide swiper on mobile */
    }
    
    /* Show mobile grid on mobile and tablet - reset all hiding properties */
    .highest_score_list.our-club .mobile-grid {
        display: grid !important; /* Force show grid on mobile */
        visibility: visible !important; /* Make sure it's visible */
        opacity: 1 !important; /* Make sure it's opaque */
        height: auto !important; /* Reset height */
        overflow: visible !important; /* Reset overflow */
    }
    
    .highest_score_list img {
        width: 60px;
        height: 60px;
    }
    
    .highest_score_list .player-score {
        font-size: 20px;
    }
    
    .highest_score_list .name,
    .highest_score_list .player-name {
        font-size: 12px;
    }
}

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

    .highest_score_list .mobile-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .highest_score_list .mobile-grid-item {
        padding: 10px;
    }
}

/* Z-index fix to ensure content below swiper stays on top */
.highest_score_list ~ * {
    position: relative;
    z-index: 10; /* Higher than swiper */
}

/* Limit swiper to show only 4 items at once - Combined with wrapper styles above */