.asl-locator {
--asl-color-primary: #af202b;
--asl-color-primary-hover: #d12027;
--asl-color-secondary: #007537;
--asl-color-secondary-hover: #005c2b;
--asl-color-heading: #012027;
--asl-color-text: #212121;
--asl-color-muted: #8e8e8e;
--asl-color-subtext: #464646;
--asl-color-border: #b7b7b7;
--asl-color-border-light: #dddbd4;
--asl-color-bg: #ffffff;
--asl-color-page: #f4f1ea;
--asl-color-icon-bg: #f4f1ea;
--asl-color-phone-bg: #eaeaea;
--asl-radius-sm: 4px;
--asl-radius-md: 8px;
--asl-radius-lg: 10px;
--asl-radius-panel: 14px;
--asl-font: "Barlow Condensed", sans-serif;
--asl-map-height: 689px;
font-family: var(--asl-font);
color: var(--asl-color-text);
background: var(--asl-color-page);
box-sizing: border-box;
width: 100%;
}
.asl-locator *,
.asl-locator *::before,
.asl-locator *::after {
box-sizing: inherit;
} .asl-locator__hero {
text-align: center;
padding: 60px 16px 0;
max-width: 768px;
margin: 0 auto;
}
.asl-locator__title {
margin: 0 0 16px;
font-size: clamp(42px, 8vw, 70px);
font-weight: 700;
line-height: 1;
text-transform: uppercase;
color: var(--asl-color-heading);
letter-spacing: 0;
}
.asl-locator__subtitle {
margin: 0;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
color: var(--asl-color-subtext);
} .asl-locator__toolbar {
position: relative;
z-index: 5;
max-width: 1118px;
margin: 0 auto;
padding: 24px 16px 0;
}
.asl-locator__search-panel {
background: var(--asl-color-bg);
border: 1px solid var(--asl-color-border);
border-radius: var(--asl-radius-panel);
padding: 24px;
margin-bottom: 24px;
}
.asl-locator__search-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 24px;
align-items: stretch;
}
.asl-locator__field {
min-width: 0;
}
.asl-locator select.asl-select {
width: 100%;
margin: 0;
padding: 12px 36px 12px 12px;
font-size: 16px;
font-family: var(--asl-font);
font-weight: 400;
line-height: 22px;
color: var(--asl-color-text);
border: 1px solid var(--asl-color-border);
border-radius: var(--asl-radius-md);
background: var(--asl-color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23212121' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 6px;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.asl-locator select.asl-select:focus {
outline: 2px solid var(--asl-color-primary);
outline-offset: 1px;
} .asl-country-dd {
position: relative;
width: 100%;
}
.asl-country-dd button:not(.button-style):hover,
.asl-country-dd button:not(.button-style) {
background-color: transparent;
color: #000000;
}
.asl-country-dd__trigger {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin: 0;
padding: 12px 36px 12px 12px;
font-size: 16px;
font-family: var(--asl-font);
font-weight: 400;
line-height: 22px;
color: var(--asl-color-text);
border: 1px solid var(--asl-color-border);
border-radius: var(--asl-radius-md);
background: var(--asl-color-bg);
box-shadow: none;
cursor: pointer;
text-align: left;
-webkit-appearance: none;
appearance: none;
}
.asl-country-dd__trigger:focus {
outline: 2px solid var(--asl-color-primary);
outline-offset: 1px;
}
.asl-country-dd__arrow {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 6px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23212121' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
pointer-events: none;
transition: transform 0.2s ease;
}
.asl-country-dd.is-open .asl-country-dd__arrow {
transform: translateY(-50%) rotate(180deg);
}
.asl-country-dd__flag {
width: 24px;
height: 16px;
object-fit: contain;
border-radius: 2px;
flex-shrink: 0;
}
.asl-country-dd__label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asl-country-dd__list {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
margin: 0;
padding: 4px 0;
list-style: none;
background: var(--asl-color-bg);
border: 1px solid var(--asl-color-border);
border-radius: var(--asl-radius-md);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
z-index: 100;
max-height: 260px;
overflow-y: auto;
}
.asl-country-dd.is-open .asl-country-dd__list {
display: block;
}
.asl-country-dd__item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
cursor: pointer;
font-size: 15px;
font-family: var(--asl-font);
color: var(--asl-color-text);
transition: background-color 0.15s ease;
}
.asl-country-dd__item:hover {
background: var(--asl-color-page);
}
.asl-country-dd__item.is-selected {
font-weight: 600;
color: #ffffff;
background: #2563eb;
}
.asl-country-dd__item.is-selected:hover {
background: #1d4ed8;
}
.asl-country-dd__item-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asl-locator a.asl-btn,
.asl-locator button.asl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
padding: 12px 22px;
font-size: 16px;
font-family: var(--asl-font);
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0;
border-radius: var(--asl-radius-sm);
border: none;
background: var(--asl-color-primary);
color: #ffffff;
box-shadow: none;
cursor: pointer;
transition: background-color 0.15s ease;
-webkit-appearance: none;
appearance: none;
white-space: nowrap;
}
.asl-locator a.asl-btn:hover,
.asl-locator button.asl-btn:hover {
background: var(--asl-color-primary-hover);
color: #ffffff;
text-decoration: none;
}
.asl-locator button.asl-btn--search {
min-width: 160px;
}
.asl-locator button.asl-btn--directions {
background: var(--asl-color-secondary);
flex: 1;
min-width: 0;
padding: 12px 18px;
}
.asl-locator button.asl-btn--directions:hover,
.asl-locator a.asl-btn--directions:hover {
background: var(--asl-color-secondary-hover);
}
.asl-locator a.asl-btn--directions {
background: var(--asl-color-secondary);
flex: 1;
min-width: 0;
padding: 12px 18px;
}
.asl-locator a.asl-btn--phone {
width: 48px;
height: 48px;
padding: 0;
flex: 0 0 48px;
background: var(--asl-color-phone-bg);
color: var(--asl-color-text);
border-radius: var(--asl-radius-sm);
}
.asl-locator a.asl-btn--phone:hover {
background: #dcdcdc;
color: var(--asl-color-text);
} .asl-locator .asl-icon {
display: inline-block;
width: 18px;
height: 18px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.asl-locator .asl-icon--search {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cline x1='15' y1='15' x2='20.5' y2='20.5' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cline x1='15' y1='15' x2='20.5' y2='20.5' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.asl-locator .asl-icon--directions {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 16l8-8M16 8H9M16 8v7' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 16l8-8M16 8H9M16 8v7' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.asl-locator .asl-icon--phone {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.4 4.8 6.2 6.2l2.1-2.1c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.4 4.8 6.2 6.2l2.1-2.1c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E");
}
.asl-locator .asl-icon--clock {
width: 11px;
height: 11px;
background-color: var(--asl-color-primary);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
} .asl-locator__brand-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 0 auto 24px;
}
.asl-locator button.asl-brand-pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
margin: 0;
padding: 4px 16px;
font-family: var(--asl-font);
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
color: #000000;
background: var(--asl-color-bg);
border: 0.8px solid var(--asl-color-border-light);
border-radius: var(--asl-radius-md);
box-shadow: none;
cursor: pointer;
transition: border-color 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
.asl-locator button.asl-brand-pill.is-active {
border-color: var(--asl-color-primary);
}
.asl-locator button.asl-brand-pill:hover {
background: transparent;
}
.asl-locator button.asl-brand-pill img {
display: block;
height: 28px;
width: auto;
max-width: 81px;
object-fit: contain;
}
.asl-locator button.asl-brand-pill--logo {
padding: 4px 12px;
} .asl-locator__main {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(320px, 682px) 1fr;
align-items: stretch;
min-height: var(--asl-map-height);
background: var(--asl-color-bg);
direction:ltr;
}
.asl-locator__sidebar {
display: flex;
flex-direction: column;
background: var(--asl-color-bg);
padding: 24px 21px 24px 24px;
max-height: var(--asl-map-height);
overflow: hidden;
}
.asl-locator__results-summary {
margin: 0 0 12px;
font-size: 18px;
font-weight: 400;
line-height: 23px;
color: var(--asl-color-subtext);
}
.asl-locator__results-summary strong,
.asl-locator__results-summary .asl-highlight {
font-weight: 400;
color: var(--asl-color-primary);
}
.asl-locator__list {
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
padding-right: 4px;
}
.asl-locator__list,
.asl-modal__panel {
scrollbar-width: thin;
scrollbar-color: var(--asl-color-border-light) transparent;
}
.asl-locator__list::-webkit-scrollbar {
width: 5px;
}
.asl-locator__list::-webkit-scrollbar-thumb {
background-color: var(--asl-color-border-light);
border-radius: 999px;
}
.asl-loading,
.asl-empty {
padding: 24px 16px;
text-align: center;
color: var(--asl-color-muted);
font-size: 16px;
} .asl-card {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
background: var(--asl-color-bg);
border: 1px solid transparent;
border-radius: var(--asl-radius-lg);
padding: 18px 42px;
cursor: pointer;
transition: border-color 0.15s ease;
} .asl-card__top {
display: contents;
}
.asl-card:hover,
.asl-card.is-active {
border-color: var(--asl-color-primary);
}
.asl-card__icon {
flex: 0 0 59px;
width: 59px;
height: 59px;
display: flex;
align-items: center;
justify-content: center;
background: var(--asl-color-icon-bg);
border-radius: 999px;
overflow: hidden;
padding: 14px;
}
.asl-card__icon img {
display: block;
max-width: 100%;
max-height: 28px;
width: auto;
height: auto;
object-fit: contain;
}
.asl-card__body {
flex: 1;
min-width: 0;
max-width: 210px;
}
.asl-card__name {
margin: 0 0 2px;
font-size: 18px;
font-weight: 700;
line-height: 23px;
color: var(--asl-color-text);
}
.asl-card__address {
margin: 0 0 2px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: var(--asl-color-muted);
}
.asl-card__hours {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 13px;
font-weight: 500;
line-height: 18px;
color: var(--asl-color-muted);
}
.asl-card__actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
margin-top: 0;
} .asl-locator__map-wrap {
position: relative;
min-height: var(--asl-map-height);
}
.asl-locator__map {
width: 100%;
height: var(--asl-map-height);
}
.asl-map-error {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 24px;
text-align: center;
color: var(--asl-color-muted);
background: var(--asl-color-page);
font-size: 16px;
}
.asl-popup h4 {
margin: 0 0 4px;
font-size: 16px;
}
.asl-popup p {
margin: 2px 0;
font-size: 13px;
} .asl-locator__view-map {
display: none;
} [dir="rtl"] .asl-locator select.asl-select {
padding: 12px 12px 12px 36px;
background-position: left 12px center;
}
[dir="rtl"] .asl-country-dd__trigger {
padding: 12px 12px 12px 36px;
text-align: right;
}
[dir="rtl"] .asl-country-dd__arrow {
right: auto;
left: 12px;
}
[dir="rtl"] .asl-locator__sidebar {
padding: 24px 56px 24px 21px;
}
[dir="rtl"] .asl-card {
flex-direction: row-reverse;
}
[dir="rtl"] .asl-card__top {
flex-direction: row-reverse;
}
[dir="rtl"] .asl-card__body {
text-align: right;
}
[dir="rtl"] .asl-card__hours {
flex-direction: row-reverse;
}
[dir="rtl"] .asl-card__actions {
flex-direction: row-reverse;
}
[dir="rtl"] .asl-locator__search-row {
direction: rtl;
}
[dir="rtl"] .asl-locator__brand-pills {
direction: rtl;
}
.asl-locator__view-map[hidden] {
display: none !important;
} @media (max-width: 1024px) {
.asl-locator__main {
grid-template-columns: 1fr 1fr;
}
.asl-locator__sidebar {
padding: 24px 16px;
}
.asl-card {
padding: 18px 16px;
flex-direction: column;
align-items: stretch;
}
[dir="rtl"] .asl-card {
flex-direction: column;
}
.asl-card__top {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
}
.asl-card__actions {
width: 100%;
margin-top: 8px;
}
}
@media (max-width: 782px) {
.asl-locator{
background-color: var(--asl-color-bg);
}
.asl-locator__hero {
padding-top: 24px;
padding-bottom: 24px;
}
.asl-locator__search-row {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.asl-locator__search-row .asl-search-submit {
grid-column: 1 / -1;
}
.asl-locator__search-panel {
padding: 24px 16px;
background: var(--asl-color-bg);
border: none;
border-radius: 0;
margin-bottom: 20px;
}
.asl-locator__toolbar {
padding: 0;
background: var(--asl-color-bg);
}
.asl-locator button.asl-btn--search {
width: 100%;
}
.asl-locator__brand-pills {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
max-width: none;
padding: 0 16px 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-bottom: 0;
}
.asl-locator__brand-pills::-webkit-scrollbar {
display: none;
}
.asl-locator__main {
grid-template-columns: 1fr;
min-height: auto;
}
.asl-locator__map-wrap {
display: none;
order: -1;
min-height: 0 !important;
}
.asl-locator.asl-view-map .asl-locator__map-wrap {
display: block;
order: 0;
height: 540px;
min-height: 0 !important;
box-sizing: border-box;
}
.asl-locator.asl-view-map .asl-locator__sidebar {
display: none;
}
.asl-locator__sidebar {
height: 540px; overflow: hidden;
display: flex;
flex-direction: column;
padding: 24px 16px 24px;
box-sizing: border-box;
min-height: 0 !important;
}
.asl-locator__map {
height: 100% !important; min-height: 0 !important;
} .asl-card {
padding: 16px;
flex-direction: column;
align-items: stretch;
}
[dir="rtl"] .asl-card {
flex-direction: column;
}
.asl-card__top {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.asl-card__body {
max-width: none;
}
.asl-card__icon {
align-self: flex-start;
flex-shrink: 0;
}
.asl-card__actions {
width: 100%;
margin-top: 0;
}
.asl-locator__view-map {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 99999 !important;
width: 100% !important;
height: calc(56px + env(safe-area-inset-bottom)) !important;
margin: 0 !important;
padding: 0 8px env(safe-area-inset-bottom) !important;
box-sizing: border-box !important;
font-family: var(--asl-font);
font-size: 18px;
font-weight: 700;
line-height: 1 !important;
text-transform: uppercase;
color: #ffffff !important;
background: #012027 !important; border: none !important;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15) !important; cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color 0.2s ease;
border-radius: 0 !important;
transform: translate3d(0, 0, 0) !important;
-webkit-transform: translate3d(0, 0, 0) !important;
}
.asl-locator__view-map:hover,
.asl-locator__view-map:active {
background: var(--asl-color-primary); }
.asl-locator.asl-view-map .asl-locator__view-map { }
.asl-locator__view-map[hidden] {
display: none !important;
}
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}