:root {
    --bm_marker: url('bm-marker.png');
    --clock: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7V12L14.5 10.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%23BFEA44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    --location: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256' enable-background='new 0 0 256 256' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23BFEA44' d='M118.4,10.1c-11,2-17.3,4-24.9,7.9C72.9,28.6,58.6,47.7,53.9,71.2c-1.4,6.9-1.2,21,0.3,27.9c4.6,21.3,17.3,44,38.9,69.3c5.7,6.7,24.5,25.8,31.1,31.6l3.9,3.4l3.9-3.4c6.5-5.8,25.3-24.9,31-31.6c21.7-25.5,34.5-48.4,38.9-69.7c1.5-7.1,1.6-20.7,0.2-27.6c-4.6-23.4-19-42.7-39.6-53.2c-6.1-3.1-10.9-4.9-17.8-6.5c-4.5-1.1-6.8-1.3-15.2-1.4C124.1,10,119.1,10,118.4,10.1z M138.5,32c16.6,3.4,30.3,13.9,37.8,29.1c4.1,8.4,5.4,13.8,5.5,23.2c0,6.6-0.2,8.3-1.4,13c-5.2,20.8-21.1,45.2-46.7,71.7l-5.7,5.8l-4.6-4.8c-27.6-28.8-43.2-52.8-48.3-74.5c-1.5-6.3-1.3-17.1,0.5-23.7c5.3-20,21.4-35.4,41.3-39.6C123.4,30.7,132.1,30.7,138.5,32z'/%3E%3Cpath fill='%23BFEA44' d='M120.4,59.3c-9.5,3-16.3,10.2-18.4,19.3c-3.5,14.9,5.8,29.4,20.7,32.5c2,0.4,4.3,0.8,5.3,0.8c1,0,3.4-0.4,5.3-0.8c10.2-2.2,18.3-10,20.7-20c3.2-13.8-4.8-27.6-18.4-31.8C131.5,58,124.4,58,120.4,59.3z'/%3E%3Cpath fill='%23BFEA44' d='M67.4,177.4c-3.9,3.1-7.1,6.4-9.6,10.1c-9.4,13.9-5.5,30.8,9.8,42.2c9.9,7.4,22.2,12.2,39.2,15.2c5.6,1,8.1,1.1,21.2,1.1c13,0,15.7-0.1,21.2-1.1c26.2-4.6,43.8-14.6,51.1-29.1c6.5-12.9,2-27.9-11.4-38.2l-3-2.3l-2.6,3c-1.4,1.7-4.5,5.3-7,8.1c-2.5,2.8-4.4,5.2-4.4,5.4c0,0.2,0.5,0.5,1.2,0.8c2,0.9,6.9,5.8,8,7.8c1.2,2.4,1.2,3.7,0,6.3c-3.3,7.3-17.3,14.1-35.2,17.3c-7.2,1.3-28.7,1.3-35.9,0c-17.6-3.1-31.9-10.1-35.2-17.3c-1.2-2.6-1.2-3.9,0-6.3c1.1-2,6-6.9,8-7.8c0.7-0.3,1.2-0.7,1.2-0.8c0-0.2-1.4-1.9-3.2-3.9c-1.8-1.9-4.9-5.5-6.9-7.9s-3.8-4.4-4-4.3C69.8,175.6,68.6,176.4,67.4,177.4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    --directions: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 105.93 122.88'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M56.92,73.14a1.62,1.62,0,0,1-1.86.06A65.25,65.25,0,0,1,38.92,58.8,51.29,51.29,0,0,1,28.06,35.37C26.77,27.38,28,19.7,32,13.45a27,27,0,0,1,6-6.66A29.23,29.23,0,0,1,56.36,0,26,26,0,0,1,73.82,7.12a26,26,0,0,1,4.66,5.68c4.27,7,5.19,16,3.31,25.12A55.29,55.29,0,0,1,56.92,73.14Zm-19,.74V101.7l30.15,13V78.87a65.17,65.17,0,0,0,6.45-5.63v41.18l25-12.59v-56l-9.61,3.7a61.61,61.61,0,0,0,2.38-7.81l9.3-3.59A3.22,3.22,0,0,1,105.7,40a3.18,3.18,0,0,1,.22,1.16v62.7a3.23,3.23,0,0,1-2,3L72.72,122.53a3.23,3.23,0,0,1-2.92,0l-35-15.17L4.68,122.53a3.22,3.22,0,0,1-4.33-1.42A3.28,3.28,0,0,1,0,119.66V53.24a3.23,3.23,0,0,1,2.32-3.1L18.7,43.82a58.63,58.63,0,0,0,2.16,6.07L6.46,55.44v59l25-12.59V67.09a76.28,76.28,0,0,0,6.46,6.79ZM55.15,14.21A13.72,13.72,0,1,1,41.43,27.93,13.72,13.72,0,0,1,55.15,14.21Z'/%3E%3C/svg%3E");
}

.bm_marker {
    background-image: var(--bm_marker);
    background-size: 100% 100%;
    background-position: center;
}

/* Bookmaker Map Wrapper */
.bookmakers_shortcode_wrapper {
    padding-top: 20px;
    #bookmaker-map-wrapper {
        width: 100%;
        position: relative;
        /* aspect-ratio: 2.35 /1; */
        /* height: fit-content; */
        height: 674px;
        margin: auto;
        display: flex;
        /* padding: 0 24px; */
        .active_point_container {
            width: 0;
            transform: scaleX(0);
            transform-origin: left center;
            transition: all 0.3s ease-in-out;
            padding-right: 0;
            /* border-radius: 8px; */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: center;
            overflow: hidden;
            background-color: rgba(49, 56, 58, 0.6);
            border: 1px solid rgba(191, 234, 68, 0.16);
            box-shadow: inset 3px 3px 4px 0 rgba(191, 234, 68, 0.17);
            color: white;
            font-family: "Inter Custom", Sans-serif;

            * {
                margin: 0;
            }
            
            .title, .address, .work_hours {
                transition: opacity 0.25s ease-in-out;
            }

            .back {
                position: relative;
                cursor: pointer;
                text-align: start;
                padding-left: 24px;
                &::before {
                    content: '';
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%) rotate(180deg);
                    background: no-repeat center/100% var(--chevron);
                }
            }
            
            .title {
                font-weight: 600;
                line-height: 120%;
                font-size: 28px;
                letter-spacing: -0.1px;
                padding-bottom: 20px;
            }
            
            h3 {
                font-weight: 400;
                font-size: 24px;
                line-height: 120%;
            }
            
            .logo {
                height: 48px;
                background-image: var(--bm_marker);
                padding-bottom: 4px;
            }

            .address_img {
                height: 32px;
                background-image: var(--location);
            }

            .address {
                padding-bottom: 20px;
            }
            
            .work_hours_img {
                height: 32px;
                background-image: var(--clock);    
            }
            
            .work_hours {
                padding-bottom: 20px;
            }

            .address_img, .work_hours_img, .logo {
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }

            .image_swiper {
                transition: opacity 0.25s ease-in-out;
                height: 100px;
                width: 100%;
                overflow: hidden; 
                .swiper-slide {
                    /* width: auto !important; */
                    width: auto;
                    height: 100%;

                    img {
                        height: 100%;
                        width: auto;
                        display: block; /* Removes bottom whitespace */
                        object-fit: contain;
                    }
                }
                .swiper-button-prevv,
                .swiper-button-nextt {
                    display: flex;
                    position: absolute;
                    align-items: center;
                    justify-content: center;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 1;
                    cursor: pointer;
                    &[aria-disabled="true"]{
                        opacity: 0.5;
                        cursor: auto;
                    }
                    svg {
                        fill: none;
                        width: 36px;
                        height: 36px;
                        polyline {
                            fill: none;
                            filter: drop-shadow(1px 0 0 rgba(0,0,0,0.25)) 
                                drop-shadow(-1px 0 0 rgba(0,0,0,0.25)) 
                                drop-shadow(0 1px 0 rgba(0,0,0,0.25)) 
                                drop-shadow(0 -1px 0 rgba(0,0,0,0.25));
                        }
                    }
                }
                .swiper-button-nextt {
                    right: 0;
                }
            }

            .google_nav {
                margin: 20% auto 0;
                display: flex;
                gap: 12px;      
                align-items: center;
                justify-content: center;
                width: fit-content;
                background-color: transparent;
                font-size: 14px;
                font-weight: 700;
                line-height: 1;
                color: #0C1113;
                background-image: linear-gradient(90deg, #A6CD36EE 0%, #728E1F 100%);
                box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
                border-style: solid;
                border-width: 0px 0px 0px 0px;
                border-color: #A6CD36;
                border-radius: 4px 4px 4px 4px;
                padding: 10px 32px 10px 32px;
                .directions_icon {
                    width: 30px;
                    height: 30px;
                    display: block;
                    background: center no-repeat var(--directions);
                }
                .directions_text {
                    display: inline-block;
                }
            }
            
            &.active {
                padding: 32px;
                margin-right: 16px;
                width: 35%;
                transform: scaleX(1);
                transform-origin: left center;
                transition: all 0.3s ease-in-out;
            }
        }

        /* Search Container */
        #bookmaker-search-container {
            position: absolute;
            top: 25px;
            right: 15%;
            width: 20%;
            min-width: 300px;
            z-index: 1;
            border-radius: 30px;
        }
        
        /* Search Input */
        #bookmaker-city-search {
            width: 100%;
            max-width: 400px;
            padding: 12px 20px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 35px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        #bookmaker-city-search:focus {
            outline: none;
            border-color: #A6CD36;
            box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
        }
        
        /* Search Results Dropdown */
        #bookmaker-search-results {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            max-width: 400px;
            max-height: 300px;
            overflow-y: auto;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            margin-top: 5px;
            display: none;
            z-index: 1000;
            &.active {
                display: block;
            }
        }
    }

    .search-result-item {
        padding: 12px 20px;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.2s ease;
    }

    .search-result-item:last-child {
        border-bottom: none;
    }

    .search-result-item:hover {
        background-color: #f5f5f5;
    }

    .search-result-item strong {
        color: #333;
        font-weight: 600;
    }

    .search-result-item small {
        color: #666;
        display: block;
        margin-top: 4px;
    }

    /* Map Container */
    #bookmaker-map {
        width: 100%;
        height: 100%;
        min-height: 612px;
        /* border-radius: 8px; */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background-color: #1a1c23; /* Matches the map landscape color */
    }

    /* General Button Styling with Icons */
    button[class*="icon"],
    .button-with-icon,
    .icon-button {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    /* WordPress Admin Gallery Button */
    #bookmaker-gallery-button {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    /* Google Maps Control Buttons with Icons */
    .gm-control-active {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Custom Map Controls */
    .custom-map-control {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        border: 2px solid #fff;
        border-radius: 3px;
        box-shadow: 0 2px 6px rgba(0,0,0,.3);
        cursor: pointer;
        margin: 10px;
        padding: 8px 12px;
        text-align: center;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .custom-map-control:hover {
        background-color: #f5f5f5;
    }

    .custom-map-control i,
    .custom-map-control svg,
    .custom-map-control .icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        /* #bookmaker-map {
            height: 400px;
        } */

        #bookmaker-city-search {
            max-width: 100%;
        }

        #bookmaker-search-results {
            max-width: 100%;
        }

        .bookmaker-info-window {
            max-width: 280px;
        }

        .bookmaker-gallery {
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        }

        .bookmaker-gallery img {
            height: 80px;
        }

        .bookmaker-lightbox-prev,
        .bookmaker-lightbox-next {
            width: 50px;
            height: 50px;
            font-size: 30px;
        }

        .bookmaker-lightbox-close {
            width: 40px;
            height: 40px;
            font-size: 30px;
            top: 10px;
            right: 10px;
        }
    }

    @media (max-width: 480px) {
        .bookmaker-lightbox-prev {
            left: 10px;
        }

        .bookmaker-lightbox-next {
            right: 10px;
        }

        .bookmaker-lightbox img {
            max-width: 95%;
            max-height: 80%;
        }
    }

    /* Loading Indicator */
    .bookmaker-loading {
        text-align: center;
        padding: 20px;
        color: #666;
    }

    .bookmaker-loading:after {
        content: '...';
        animation: bookmaker-dots 1.5s steps(4, end) infinite;
    }

    @keyframes bookmaker-dots {
        0%, 20% { content: '.'; }
        40% { content: '..'; }
        60%, 100% { content: '...'; }
    }

    /* Accessibility improvements */
    .bookmaker-lightbox-close:focus,
    .bookmaker-lightbox-prev:focus,
    .bookmaker-lightbox-next:focus {
        outline: 2px solid #4285f4;
        outline-offset: 2px;
    }

    /* Smooth scrollbar for search results */
    #bookmaker-search-results::-webkit-scrollbar {
        width: 8px;
    }

    #bookmaker-search-results::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    #bookmaker-search-results::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    #bookmaker-search-results::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .cities_section {
        padding: 41px 19.5px;
        width: 100%;
        margin: auto;
        max-width: 1314px;
        display: flex;
        flex-direction: row;
        gap: 48px;

        * {
            margin: 0;
        }
        
        .cities {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 27.5%;
            .city {
                background-color: rgba(49, 56, 58, 0.6);
                cursor: pointer;
                padding: 16px 40px 16px 18px;
                border-radius: 10px;
                div {
                    font-family: "Inter Custom", Sans-serif;
                    span:first-child {
                        color: rgba(157, 159, 166, 1);
                        font-size: 20px;
                        font-weight: 600;
                        line-height: 150%;
                        font-family: inherit;
                        letter-spacing: 0;
                        transition: color 0.25s;
                    }
                    span:last-child {
                        color: rgba(157, 159, 166, 1);
                        font-size: 18px;
                        font-weight: 400;
                        line-height: 120%;
                        font-family: inherit;
                        letter-spacing: 0;
                        transition: color 0.25s;
                    }
                }
                &:hover div span,
                &.active div span {
                    color: white;
                    transition: color 0.25s;
                }
            }
        }
        
        .points_wrapper {
            position: relative;
            min-height: 250px;
            width: 68.7%;
            max-height: 250px;
            transition: all 0.3s;
            height: 10000px;

            .points {
                position: absolute;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 24px;
                top: 0;
                left: 0;
                width: 100%;
                opacity: 0;
                transform: translateY(20px);
                max-height: 0;
                overflow: hidden;
                pointer-events: none;
                transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease;
                &.active {
                    opacity: 1;
                    transform: translateY(0);
                    max-height: 10000px;
                    pointer-events: auto;
                    .point {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                
                .point {
                    background-color: rgba(49, 56, 58, 0.6);
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    padding: 22px 48px 18px 28px;            
                    font-family: "Inter Custom", Sans-serif;
                    border-radius: 10px;
                    border: 1px solid rgba(191, 234, 68, 0.16);
                    box-shadow: inset 3px 3px 4px 0 rgba(191, 234, 68, 0.17);
                    opacity: 0;
                    transform: translateY(10px);
                    transition: opacity 0.3s ease, transform 0.3s ease;
                    
                    h2 {
                        font-family: inherit;
                        text-decoration: underline;
                        line-height: 150%;
                        font-size: 16px;
                        font-weight: 600;
                        cursor: pointer;
                        color: white;
                    }
                    p {
                        font-family: inherit;
                        color: rgba(157, 159, 166, 1);
                        line-height: 20px;
                        font-size: 14px;
                        font-weight: 400;
                        letter-spacing: 0.25px;
                    }
                }
            }
        }
    }
}

@media(max-width: 1280px){
    .bookmakers_shortcode_wrapper {
        #bookmaker-map-wrapper {
            height: 660px;
            .active_point_container.active {
                padding: 16px;
                width: 40%;
            }
        }
    }
}
@media(max-width: 1024px) {
    .bookmakers_shortcode_wrapper {
        padding-top: 15px;
        #bookmaker-map-wrapper {
            height: auto;
            flex-direction: column;
            .active_point_container {
                width: 100%;
                max-height: 0;
                .image_swiper {
                    max-width: 400px;
                    margin: auto;
                }
                .google_nav {
                    margin: 32px auto 0;
                }
                &.active {
                    width: 100%;
                    max-height: 1000px;
                    margin-right:0;
                }
            }
            #bookmaker-map {
                aspect-ratio: 2.35 /1;
            }
        }
        .cities_section {
            padding: 32px 19.5px;
            gap: 36px;
            .cities {
                width: 45%;
            }
            .points_wrapper {
                width: 60%;
                .points {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        }
    }
}

@media(max-width: 768px) {
    .bookmakers_shortcode_wrapper {
        padding-top: 10px;
        #bookmaker-map-wrapper {
            aspect-ratio: unset;
            #bookmaker-map {
                height: 658px;
            }
            #bookmaker-search-container {
                width: 80%;
                max-width: 300px;
                min-width: unset;
                right: 50%;
                transform: translateX(50%);
            }
        }
        .cities_section {
            flex-direction: column;
            align-items: center;
            gap: 24px;
            padding: 24px 19.5px;
            .cities {
                width: 100%;
            }
            .points_wrapper {
                width: 100%;
                max-width: 277px;
                .points {
                    grid-template-columns: repeat(1, 1fr);
                }
            }
        }
    }
}