/* ----- Filters ----- */
.locator-filters {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
}

.locator-filters .filter-container {
    position: relative;
}

.locator-filters select {
    appearance: none;
    width: 100%;
    padding: 6px 40px 6px 15px;
    border-radius: 4px;
    border: 2px solid var(--e-global-color-6114bc7);
    background-color: transparent;
    color: var(--e-global-color-6114bc7);
    font-family: var(--e-global-typography-5313933-font-family);
    font-size: var(--e-global-typography-5313933-font-size);
    font-weight: var(--e-global-typography-5313933-font-weight);
    line-height: var(--e-global-typography-5313933-line-height);
}

.locator-filters select option {
    background-color: var(--e-global-color-023fa27);
    color: var(--e-global-color-primary);
}

.locator-filters .filter-container::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 10px;
    height: 5px;
    transform: translateY(-50%);
    pointer-events: none;
    background-image: url('../img/select_icon_white.svg');
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
    .locator-filters {
        flex-direction: column;
        row-gap: 5px;
    }
}

/* ----- Map ----- */
.locator-map {
    width: 100%;
    height: 100%;
    z-index: 0;
}

@media screen and (max-width: 1024px) {
    .locator-map {
        min-height: 600px;
    }
}

@media screen and (max-width: 767px) {
    .locator-map {
        min-height: 400px;
    }
}

/* ----- Search ----- */
.locator-search {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.locator-search h2 {
    margin: 0;
    color: var(--e-global-color-text);
    font-family: var(--e-global-typography-dc3c3b6-font-family);
    font-size: var(--e-global-typography-dc3c3b6-font-size);
    font-weight: var(--e-global-typography-dc3c3b6-font-weight);
    line-height: var(--e-global-typography-dc3c3b6-line-height);
}

.locator-search .address-input-group {
    display: flex;
    gap: 10px;
}

.locator-search .address-input-group input {
    width: 100%;
    padding: 6px 15px;
    border: 1px solid rgba(0, 6, 10, 0.30);
    border-radius: 4px;
    background-color: var(--e-global-color-023fa27);
    color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-text-font-family);
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
}

.locator-search .address-input-group button {
    padding: 6px 15px;
    border: none;
    border-radius: 4px;
    background: var(--e-global-color-text);
    color: var(--e-global-color-6114bc7);
    transition: all 0.3s ease-in-out;
    font-family: var(--e-global-typography-83b0fd1-font-family);
    font-size: var(--e-global-typography-83b0fd1-font-size);
    font-weight: var(--e-global-typography-83b0fd1-font-weight);
    line-height: var(--e-global-typography-83b0fd1-line-height);
}

.locator-search .address-input-group button:hover {
    background: var(--e-global-color-primary);
}

.locator-search #search-status {
    display: none;
    color: #d9534f;
    font-style: italic;
    font-family: var(--e-global-typography-bd22909-font-family);
    font-size: var(--e-global-typography-bd22909-font-size);
    font-weight: var(--e-global-typography-bd22909-font-weight);
    line-height: var(--e-global-typography-bd22909-line-height);
}

/* ----- Results ----- */
.locator-results {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    min-height: 0;
}

.locator-results h2 {
    margin: 0;
    color: var(--e-global-color-text);
    font-family: var(--e-global-typography-dc3c3b6-font-family);
    font-size: var(--e-global-typography-dc3c3b6-font-size);
    font-weight: var(--e-global-typography-dc3c3b6-font-weight);
    line-height: var(--e-global-typography-dc3c3b6-line-height);
}

.locator-results #locator-list {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--e-global-color-primary) transparent;
}

#locator-list::-webkit-scrollbar {
    width: 6px;
}

#locator-list::-webkit-scrollbar-track {
    background: transparent;
}

#locator-list::-webkit-scrollbar-thumb {
    background-color: var(--e-global-color-primary);
    border-radius: 10px;
}

#locator-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--e-global-color-secondary);
}

.locator-results #locator-list .store-item {
    border-radius: 4px;
    background: rgba(0, 152, 195, 0.15);
    color: var(--e-global-color-primary);
    padding: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.locator-results #locator-list .store-item.active {
    background: rgba(117, 81, 245, 0.15);
}

.locator-results #locator-list .store-item .store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 10px;
}

.locator-results #locator-list .store-item .store-header .dist-badge {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-6114bc7);
    padding: 6px 10px;
    border-radius: 50px;
    font-family: var(--e-global-typography-bd22909-font-family);
    font-size: var(--e-global-typography-bd22909-font-size);
    font-weight: var(--e-global-typography-bd22909-font-weight);
    line-height: var(--e-global-typography-bd22909-line-height);
}

.locator-results #locator-list .store-item .store-header div {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.locator-results #locator-list .store-item .store-header div span {
    color: var(--e-global-color-text);
    background: var(--e-global-color-6114bc7);
    border: 1px solid rgba(0, 6, 10, 0.30);
    padding: 7px 12px;
    border-radius: 50px;
    height: 38px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-family: var(--e-global-typography-bd22909-font-family);
    font-size: var(--e-global-typography-bd22909-font-size);
    font-weight: var(--e-global-typography-bd22909-font-weight);
    line-height: 100%;
}


.locator-results #locator-list .store-item .store-header div span.store-type {
    border: none;
    padding: 7px 42px 7px 12px;
    position: relative;
    max-width: 175px;
}


.locator-results #locator-list .store-item .store-header div span.store-type::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 6px;
    width: 26px;
    height: 26px;
    transform: translateY(-50%);
    pointer-events: none;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.locator-results #locator-list .store-item .store-header div span.store-type.type-local {
    color: var(--e-global-color-6114bc7);
    background: #6FB341;
}

.locator-results #locator-list .store-item .store-header div span.store-type.type-local::after {
    background-image: url('icons/local_agent_legend.svg');
}

.locator-results #locator-list .store-item .store-header div span.store-type.type-local-new {
    color: var(--e-global-color-6114bc7);
    background: #034F8A;
}

.locator-results #locator-list .store-item .store-header div span.store-type.type-local-new::after {
    background-image: url('icons/local_agent_new_legend.svg');
}

.locator-results #locator-list .store-item .store-header div span.store-type.type-local-service {
    color: var(--e-global-color-6114bc7);
    background: linear-gradient(273deg, #6FB341 0.08%, #034F8A 99.92%);
}

.locator-results #locator-list .store-item .store-header div span.store-type.type-local-service::after {
    background-image: url('icons/local_agent_service_legend.svg');
}

.locator-results #locator-list .store-item .store-header div span.store-type.type-coverage {
    color: var(--e-global-color-6114bc7);
    background: linear-gradient(345deg, #7551F5 64.17%, #B5A0FF 89.32%);
}

.locator-results #locator-list .store-item .store-header div span.store-type.type-manager {
    color: var(--e-global-color-6114bc7);
    background: #034F8A;
}

.locator-results #locator-list .store-item .store-header div span.store-type.type-manager::after {
    background-image: url('icons/area_manager_legend.svg');
}

.locator-results #locator-list .store-item .store-header div span.store-type.type-distributor {
    color: var(--e-global-color-6114bc7);
    background: linear-gradient(273deg, #35CAF5 1.47%, #034F8A 98.5%);
}

.locator-results #locator-list .store-item .store-header div span.store-type.type-distributor::after {
    background-image: url('icons/distributor_legend.svg');
}

.locator-results #locator-list .store-item h4 {
    font-family: var(--e-global-typography-5313933-font-family);
    font-size: var(--e-global-typography-5313933-font-size);
    font-weight: var(--e-global-typography-5313933-font-weight);
    line-height: var(--e-global-typography-5313933-line-height);
    margin: 0;
}

.locator-results #locator-list .store-item .contact-details {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.locator-results #locator-list .store-item .contact-details span,
.locator-results #locator-list .store-item .contact-details a {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    align-items: center;
    color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-text-font-family);
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
}

.locator-results #locator-list .store-item .contact-details span.contact-company,
.locator-results #locator-list .store-item .contact-details span.contact-function,
.locator-results #locator-list .store-item .contact-details span.contact-domain {
    font-family: var(--e-global-typography-dc3c3b6-font-family);
    font-size: var(--e-global-typography-dc3c3b6-font-size);
    font-weight: var(--e-global-typography-dc3c3b6-font-weight);
    line-height: var(--e-global-typography-dc3c3b6-line-height);
}

.locator-results #locator-list .store-item .contact-details span.contact-cofinair_representative {
    display: inline-block;
    font-family: var(--e-global-typography-dc3c3b6-font-family);
    font-size: var(--e-global-typography-dc3c3b6-font-size);
    font-weight: var(--e-global-typography-dc3c3b6-font-weight);
    line-height: var(--e-global-typography-dc3c3b6-line-height);
}

.locator-results #locator-list .store-item .contact-details span.contact-cofinair_representative a {
    display: inline-block;
    font-family: var(--e-global-typography-dc3c3b6-font-family);
    font-size: var(--e-global-typography-dc3c3b6-font-size);
    font-weight: var(--e-global-typography-dc3c3b6-font-weight);
    line-height: var(--e-global-typography-dc3c3b6-line-height);
}

.locator-results #locator-list .store-item .contact-details a:hover {
    text-decoration: underline;
}

.locator-results #locator-list .store-item .contact-details a.contact-phone::before {
    content: '';
    display: inline-block;
    width: 25.769px;
    height: 26.181px;
    background-image: url('../img/phone_icon.svg');
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.locator-results #locator-list .store-item .contact-details a.contact-email::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 18px;
    background-image: url('../img/email_icon.svg');
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}