@import '../../../../assets/scss/abstracts/variables';
@import '../../../../assets/scss/abstracts/mixins';


.alignfull:has(#rdg-sticky-picks-bar.sticky_top) {
    overflow: visible !important;
    position: sticky;
    top: 0;
    z-index: 999;
}

#rdg-sticky-picks-bar {
    &.rdg-av-picks-sticky {
        width: 100%;
        margin: auto;
        padding: 15px 0px;

        >.rdg-sticky-picks-close-btn {
            display: none;
        }

        &.button-theme-default{            

            .container.content {
                width: 100%;
                display: flex;
                flex-direction: column;
        
                .custom-header-sports-nav {
                    flex-grow: 1; 
                    display: flex; 
                    align-items: center; 
                    justify-content: center; 
                    gap: 1rem; 
                    padding: 0 1rem;
                    flex-wrap: wrap;
                    transition: max-height 0.4s ease, opacity 0.3s ease;

                    #rdg-sticky-picks-expand-btn{
                        display: none;
                    }
        
                    .custom-header-sport-btn {
                        display: flex;
                        align-items: center;
                        padding: 0.3rem 0.875rem;
                        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
                        border: 2px solid transparent;
                        border-radius: 12px;
                        text-decoration: none;
                        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                        color: #1C4579;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
                                    0 1px 3px rgba(0, 0, 0, 0.06);
                        position: relative;
                        overflow: hidden;
                        min-width: 160px;
        
                        &::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: -100%;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                            transition: left 0.5s;
                        }
        
                        &:hover {
                            background: linear-gradient(135deg, #1C4579 0%, #2563A5 100%);
                            border-color: #1C4579;
                            transform: translateY(-2px) scale(1.01);
                            box-shadow: 0 4px 12px rgba(28, 69, 121, 0.2),
                                        0 2px 6px rgba(28, 69, 121, 0.12);
        
                            &::before {
                                left: 100%;
                            }
        
                            .custom-header-sport-name,
                            .custom-header-sport-picks {
                                color: white;
                            }
        
                            .custom-header-sport-picks {
                                background: rgba(255, 255, 255, 0.2);
                                color: white;
                            }
                        }
        
                        &:active {
                            transform: translateY(-1px) scale(0.99);
                        }
                    }
        
                    .custom-header-sport-info {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: 0.5rem;
                        position: relative;
                        z-index: 1;
                    }
        
                    .custom-header-sport-name {
                        font-weight: 700;
                        font-size: 0.875rem;
                        color: #1C4579;
                        white-space: nowrap;
                        letter-spacing: 0.3px;
                        transition: color 0.3s ease;
                    }
        
                    .custom-header-sport-picks {
                        font-weight: 600;
                        font-size: 0.8125rem;
                        color: #D4AF37;
                        white-space: nowrap;
                        padding: 0.125rem 0.5rem;
                        background: rgba(212, 175, 55, 0.1);
                        border-radius: 6px;
                        transition: all 0.3s ease;
                    }                                            
                }
            }
        }
    }
}

.acf-block-preview {
    .rdg-av-picks-sticky {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}


@media (max-width: 1400px) {

    #rdg-sticky-picks-bard {
        &.rdg-av-picks-sticky {
            
            &.button-theme-default{
                .container.content {
            
                    .custom-header-sports-nav {
            
                        .custom-header-sport-btn {
                            .custom-header-sport-btn {
                                padding: 0.3rem 0.75rem;
                            }
                        
                            .custom-header-sport-name {
                                font-size: 0.8125rem;
                            }
                        
                            .custom-header-sport-picks {
                                font-size: 0.75rem;
                                padding: 0.1rem 0.4rem;
                            }
                        }    
                    }
                }
            }
        }
    }
}

@media (max-width: 1320px) {

    #rdg-sticky-picks-bard {
        &.rdg-av-picks-sticky {
            
            &.button-theme-default{
                .container.content {
            
                    .custom-header-sports-nav {
            
                        .custom-header-sport-btn {

                            .custom-header-sport-btn {
                                padding: 0.3rem 0.625rem;
                            }
                        
                            .custom-header-sport-name {
                                font-size: 0.75rem;
                                letter-spacing: 0.2px;
                            }
                        
                            .custom-header-sport-picks {
                                font-size: 0.6875rem;
                            }
                        
                            .custom-header-sport-info {
                                gap: 0.375rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1260px) {


    #rdg-sticky-picks-bard {
        &.rdg-av-picks-sticky {
            
            &.button-theme-default{
                .container.content {
            
                    .custom-header-sports-nav {
            
                        .custom-header-sport-btn {
                            .custom-header-sport-btn {
                                padding: 0.25rem 0.5rem;
                                border-radius: 10px;
                            }
                        
                            .custom-header-sport-name {
                                font-size: 0.6875rem;
                            }
                        
                            .custom-header-sport-picks {
                                font-size: 0.625rem;
                            }
                        }
                    }
                }
            }
        }
    }

}


@media (max-width: 1220px) {
    
    .alignfull:has(#rdg-sticky-picks-bar.sticky_top) {
        position: fixed;
        bottom: 0;
        top: unset;
        width: 92%;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }

    .alignfull:has(#rdg-sticky-picks-bar.sticky_top.hidden) {
        display: none;
    }

    #rdg-sticky-picks-bar{
        &.rdg-av-picks-sticky {
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;

            >.rdg-sticky-picks-close-btn {
                display: flex;
                height: 40px;
                width: 40px;
                position: absolute;
                top: 0px;
                right: 0px;

                &::before {
                    content: "X";
                    position: absolute;
                    top: -10px;
                    right: -10px;
                    background: #2f2f2f;
                    color: #fff;
                    border-radius: 50%;
                    border: 2px solid #fff;
                    transition: left 0.5s;
                    display: flex;
                    flex-direction: column;
                    align-content: center;
                    justify-content: center;
                    align-items: center;
                    height: 30px;
                    font-size: 14px;
                    width: 30px;
                }                
            }

            .container.content {        
                .custom-header-sports-nav {       
                    height: 30px;
                    max-height: 30px;
                    transition: height 0.4s ease;

                    &.expanded {
                        max-height: 1000px; // Large value to accommodate all content
                        height: auto;

                        .custom-header-sport-btn {
    
                            &.first-btn {
                                min-width: 160px;
                            }                        
                        }

                        #rdg-sticky-picks-expand-btn {
                            order: -1;
                            max-width: 100%;

                            &::after {
                                transform: rotate(180deg);
                                top: calc(50% - 10px);
                            }
                        }
                    }

                    .custom-header-sport-btn {

                        &.first-btn {
                            width: 140px;
                            min-width: 140px;
                        }                        
                    }

                    #rdg-sticky-picks-expand-btn {
                        display: flex!important;
                        flex-direction: column;
                        align-content: center;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        max-width: 45%;
                        color: #fff;
                        background-color: #f97902;
                        border-radius: 10px;
                        height: 37px;
                        font-size: 14px;
                        font-weight: 600;
                        position: relative;
                        padding-right: 16px;
                        padding-left: 5px;
                        order: 0;
                        line-height: 14px;

                        &::after {
                            content: "⇪";
                            position: absolute;
                            top: calc(50% - 8px);
                            right: 10px;
                            font-size: 14px;
                            height: 18px;
                            color: inherit;
                        }
                    }
                }
            }
        }
    }
    
}