/**
 * Sticky Button Bar Styles (sticky-button-bar.css)
 */

/* --- SMOOTH SCROLL & SCROLL OFFSET --- */
html {
    scroll-behavior: smooth !important;
}

/* Desktop (screens > 1024px) */
#fresh-deals,
#coop-deals {
	scroll-margin-top: 25rem;
}
#member-sales {
	scroll-margin-top: 12rem;
}

/* Tablet (screens <= 1024px) */
@media screen and (max-width: 1024px) {
    #fresh-deals,
    #coop-deals {
        scroll-margin-top: 10rem;
    }
    #member-sales {
        scroll-margin-top: 10rem;
    }
}

/* Mobile (screens <= 799px) */
@media screen and (max-width: 799px) {
    #fresh-deals,
    #coop-deals,
    #member-sales {
        scroll-margin-top: 11.5rem;
    }
}

/* --- MAIN BAR STYLES --- */
.wp-block-acf-sticky-button-bar.sticky-button-bar-section {
    width: 100%;
    padding-top: 4rem;
    padding-bottom: 1.75rem;
    background: var(--wp--preset--color--quaternary);
    margin-top: -3.38rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: sticky;
    top: 10rem;
    z-index: 3;
    box-sizing: border-box;
    opacity: 1;
    pointer-events: auto;
    /* <<< NEW >>> Add 'top' to the transition for smooth sliding */
    transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out, top 0.4s ease-in-out;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}


/* This class adds a shadow when the bar is stuck */
.wp-block-acf-sticky-button-bar.sticky-button-bar-section.is-sticky {
    box-shadow: hsla(0, 0%, 0%, 0.1) 0 0.5rem 1rem;
}

/* This class fades the bar out */
.wp-block-acf-sticky-button-bar.sticky-button-bar-section.is-fading-out {
    opacity: 0;
    pointer-events: none;
}

/* --- INNER CONTENT & BUTTONS --- */
.sticky-button-bar-section .sbb-inner-content {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 74rem);
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 0 2rem;
}

.sticky-button-bar-section .sbb-intro-text-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.sticky-button-bar-section .sbb-intro-text {
    text-align: center;
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--cabin);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

.sticky-button-bar-section .sbb-buttons-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.sticky-button-bar-section .sbb-button-wrapper {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 30%;
    max-width: 22.9375rem;
    min-width: 17.5rem;
    /*height: 6.25rem;*/
    background-color: transparent;
    border-radius: 0.9375rem;
    outline: 3px solid var(--wp--preset--color--primary);
    outline-offset: -3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    padding: 0.625rem;
    box-sizing: border-box;
    text-align: center;
}

/* ... (rest of the button and text content styles remain the same) ... */

.sticky-button-bar-section .sbb-text-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: .5rem;
    margin-top: .1rem;
}

.sticky-button-bar-section .sbb-button-title {
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--gill-sans);
    font-size: var(--wp--preset--font-size--medium-large);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin-bottom: 0.3125rem;
    margin-top: 0;
}

.sticky-button-bar-section .sbb-button-tagline {
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--gill-sans);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0.027em;
    margin: 0;
    transition: color 0.3s ease-in-out;
}

.sticky-button-bar-section .sbb-animated-bg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4.125rem;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    top: 4.5625rem;
    z-index: -1;
    transition: top 0.3s ease-in-out;
    box-sizing: border-box;
}

/* --- RESPONSIVE MEDIA QUERIES --- */

/* Tablet (<= 1024px) */
@media screen and (max-width: 1024px) {
    .wp-block-acf-sticky-button-bar.sticky-button-bar-section {
        padding-top: 2.5rem;
        gap: 2rem;
        top: 7.5rem;
    }
}

/* Mobile (<= 799px) */
@media screen and (max-width: 799px) {
   .wp-block-acf-sticky-button-bar.sticky-button-bar-section {
        padding-top: 3.5rem;
        gap: 1rem;
        position: sticky; /* <<< Ensures it is sticky on mobile */
        top: 8rem; /* <<< Sets the initial sticky position for mobile */
    }
    .sticky-button-bar-section .sbb-inner-content {
        gap: 1rem;
    }
    .sticky-button-bar-section .sbb-button-wrapper {
        height: 4.5rem;
    }
    .sticky-button-bar-section .sbb-animated-bg {
        top: 3.8rem;
    }
    .sticky-button-bar-section .sbb-buttons-container {
        gap: .5rem;
    }
    .sticky-button-bar-section .sbb-button-wrapper:hover .sbb-animated-bg { 
        top: 2.1rem !important; 
    }

}

/* ... (background color and hover styles remain the same) ... */
.sticky-button-bar-section .sbb-animated-bg-1 { background-color: var(--wp--preset--color--tertiary); }
.sticky-button-bar-section .sbb-animated-bg-2 { background-color: var(--wp--preset--color--secondary); }
.sticky-button-bar-section .sbb-animated-bg-3 { background-color: var(--wp--preset--color--primary); }

.sticky-button-bar-section .sbb-button-wrapper:hover .sbb-animated-bg { top: 2.6rem; }
.sticky-button-bar-section .sbb-button-2-wrapper:hover .sbb-button-tagline,
.sticky-button-bar-section .sbb-button-3-wrapper:hover .sbb-button-tagline { color: var(--wp--preset--color--quaternary); }
.sticky-button-bar-section .sbb-button-1-wrapper:hover .sbb-button-tagline { color: var(--wp--preset--color--primary); }