/* Show it is fixed to the top */
body {
    min-height: 75rem;
    padding-top: 4.5rem;
}

.website-logo {
    height: 30px;
}


/* Base variables (tweak to your brand) */
:root {
    --carousel-height: 60px;
    --gap: 1px;
    --radius: 12px;
    --btn-size: 44px;
    --btn-bg: rgba(0,0,0,0.6);
    --btn-bg-hover: rgba(0,0,0,0.75);
    --btn-color: #fff;
    --border: rgba(255,255,255,0.18);
}

/* Container */
.carousel {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    width: min(1100px, 94vw);
    margin: 1rem auto;
}


ul.carousel-track {
    list-style: none;
    padding: 0;
    margin-left: -20px;
    margin-top: -20px;
    margin-bottom: 20px
}

    ul.carousel-track li {
        position: relative;
        box-sizing: border-box;
        float: left;
        margin-top: 20px;
        padding-left: 20px;
    }

        ul.carousel-track li a {
            display: block;
            color: #FFF;
        }

        ul.carousel-track li .icon {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding-bottom: 1px;
            border: 3px solid #FFF;
            box-shadow: 0 0 1px rgba(0,0,0,0.3);
            overflow: hidden
        }

            ul.carousel-track li .icon img {
                position: absolute;
                left: 0;
                top: 0
            }

        ul.carousel-track li .name-container {
            height: 56px;
            padding: 7px 0;
            line-height: 42px;
            align-items: center;
            justify-content: center;
            text-align: center;
            background-color: #333;
        }

        ul.carousel-track li .rate {
            display: flex;
            height: 36px;
            padding: 7px 0;
            align-items: end;
            justify-content: right;
        }

            ul.carousel-track li .rate u {
                text-decoration: none;
                color: red;
            }

        ul .carousel-track li .name {
            color: #F37500;
            font-size: 16px;
            line-height: 18px;
            text-align: center
        }

        ul.carousel-track li .btn-block {
            height: 42px
        }

    ul.carousel-track a {
        text-decoration: none
    }

@media only screen and (max-width: 750px) {
    ul.carousel-track li {
        margin-top: 10px
    }
}


/* The track (scrollable strip of slides) */
.carousel-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 50%;
    gap: var(--gap);
    padding-inline: var(--gap);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    outline: none; /* We'll show focus on slides */
    scrollbar-width: none;
}

/* Each slide */
.slide {
    scroll-snap-align: center;
}

    .slide .name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 10pt;
        padding-left: 10px;
        padding-right: 10px;
    }
/* Make slides partially visible on larger screens (multi-item view) */
@media (min-width: 700px) {
    .carousel-track {
        grid-auto-columns: 25%; /* show part of next slide */
    }
}

@media (min-width: 1000px) {
    .carousel-track {
        grid-auto-columns: 20%; /* show more slides at once */
    }
}

/* Prev/Next buttons */
.carousel-btn {
    appearance: none;
    width: var(--btn-size);
    height: var(--btn-size);
    border-radius: 999px;
    border: none;
    background: var(--btn-bg);
    color: var(--btn-color);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 150ms ease, transform 120ms ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

    .carousel-btn:hover {
        background: var(--btn-bg-hover);
        transform: translateY(-1px);
    }

    .carousel-btn:active {
        transform: translateY(0);
    }

    .carousel-btn:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    /* Place buttons over the track (optional overlay style) */
    .carousel-btn.prev {
        grid-column: 1;
    }

    .carousel-btn.next {
        grid-column: 3;
    }

/* Optional: visible focus for slides when keyboard-tabbing */
.slide:focus-within,
.slide:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 4px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .carousel-track {
        scroll-behavior: auto;
    }

    .carousel-btn {
        transition: none;
    }
}