.store-locator {
    padding: 15px 0px;
    background-color: var(--violet-lightest);
}

.nav-tabs {
    border: 0px !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link {
    padding: 10px 48px !important;
    /* some dought */
}

.store-locator-tabs {
    margin: 11px 0px 38px 0px !important;
}

.nav-tabs .nav-link {
    /* padding: 0px !important; */
    margin-bottom: 0px !important;
    font-size: var(--fs-nl);
    font-family: var(--font-semibold);
    font-weight: 700;
    background-color: white !important;
    color: var(--violet-darkest) !important;
    border-radius: 16px !important;
    border: 0.5px solid var(--violet-darkest) !important;
    width: 100% !important;
}

.nav-tabs .nav-link.active {
    font-weight: 700;
    background-color: var(--violet-darkest) !important;
    color: white !important;
}

.branch {
    padding: 23px;
    border-radius: 12px;
    /* height: 833px; */
}

.store-locator-card {
    background-color: #eff0ff;
    padding: 24px;
    border-radius: 12px;
}

.store-locator-card p {
    margin: 0px;
}

.store-locator-card .store-name {
    color: var(--violet-heading);
    font-family: var(--font-semibold);
    font-weight: 600;
}

.store-locator-card .store-timing {
    color: #808080;
    font-size: var(--fs-sm);
}

.store-locator-card .store-address {
    font-family: var(--font-regular);
}

.store-locator-card button {
    all: unset;
    padding: 10px 20px;

    font-size: var(--fs-md);
    font-family: var(--font-bold);

    background-color: var(--violet-darkest);
    border: none;
    color: white;
    border-radius: 12px;
}

.store-locator-card a {
    color: #2198f7;
}

.map {
    height: 801px;
}

.map img {
    border-radius: 12px;
}

.store-locator-card-container {
    height: 752px;
    overflow-y: scroll;
}

.searchbar input {
    background-color: var(--violet-lightest) !important;
}

.searchbar {
    background-color: var(--violet-lightest) !important;
}

/* scrollbar */

.store-locator-card-container {
    height: 752px;
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #bdbdee #f3f3ff; /* thumb | track */
}

/* For Chrome, Edge, Safari */
.store-locator-card-container::-webkit-scrollbar {
    all: unset;
    width: 8px; /* scrollbar width */
}

.store-locator-card-container::-webkit-scrollbar-track {
    all: unset;
    background: #f3f3ff; /* light violet background like your design */
    border-radius: 10px;
}

.store-locator-card-container::-webkit-scrollbar-thumb {
    all: unset;
    background-color: #bdbdee; /* light violet scrollbar thumb */
    border-radius: 10px;
    border: 2px solid #f3f3ff; /* small padding effect */
}

.store-locator-card-container::-webkit-scrollbar-thumb:hover {
    all: unset;
    background-color: #8e8edd; /* slightly darker on hover */
}

.store-locator-tabs {
    white-space: nowrap !important;
    /* justify-content: center; */
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.store-locator-tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

@media (max-width: 1000px) {
    .nav-tabs .nav-link {
        font-size: var(--fs-md);
    }

    .store-locator-tabs {
        white-space: nowrap !important;
        justify-content: start;
    }
}

@media (max-width: 650px) {
    .map {
        height: 500px;
    }
    .store-locator-card button {
        all: unset;
        padding: 10px 15px;

        font-size: var(--fs-sm);
        font-family: var(--font-bold);

        background-color: var(--violet-darkest);
        border: none;
        color: white;
        border-radius: 12px;
    }
}

.searchbar-store input {
    border: none !important;
    outline: none;
    width: 100%;
    padding-left: 10px;
    background-color: #e5e6ff;
    transition: 0.22s;
}

.searchbar-store {
    /* background-color: var(--violet-lightest); */
    background-color: #e5e6ff;

    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: var(--fs-sm);
    transition: 0.22s;
    width: 100% !important;
}

.searchbar-store:hover input {
    background-color: white;
}

.searchbar-store:hover {
    background-color: white;
}

.searchbar-store:hover .search-icon {
    display: none;
}

.searchbar-store:hover {
    border: 0.5px solid black;
}

.searchbar-store span {
    display: none;
}

.searchbar-store:hover span {
    display: block;
}