.az-directory__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

.az-directory__panel {
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(20, 35, 58, .1);
  border-radius: 12px;
  box-shadow: 0 18px 38px rgba(14, 40, 64, .08);
}

.az-directory__tools { display: grid; gap: 16px; margin-bottom: 20px; }
.az-directory__search { display: grid; gap: 7px; }
.az-directory__search label { color: #14233a; font-weight: 800; }
.az-directory__search input {
  width: 100%; min-height: 48px; padding: 0 14px; color: #14233a;
  background: #fff; border: 1px solid rgba(20, 35, 58, .24); border-radius: 8px; font: inherit;
}
.az-directory__search input:focus-visible { border-color: #007fa6; box-shadow: 0 0 0 4px rgba(0, 127, 166, .16); outline: 0; }

.az-directory__letters { display: flex; flex-wrap: wrap; gap: 6px; }
.az-directory__letters a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px;
  padding: 0 10px; color: #34465a; background: #f4f8fb; border: 1px solid rgba(20, 35, 58, .12);
  border-radius: 8px; font-weight: 800; text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.az-directory__letters a:hover, .az-directory__letters a:focus-visible,
.az-directory__letters a.is-active { color: #fff; background: #006f92; border-color: #006f92; }
.az-directory__letters a:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.az-directory__letter-all { min-width: 96px !important; }
.az-directory__submit { justify-self: start; min-height: 44px; padding: 0 20px; color: #fff; background: #006f92; border: 0; border-radius: 8px; font: inherit; font-weight: 800; cursor: pointer; }
.az-directory__submit:hover, .az-directory__submit:focus-visible { background: #004f69; }
[data-az-directory].is-enhanced .az-directory__submit { display: none; }

.az-directory__status { margin: 0 0 16px; color: #526173; font-family: var(--font-numeric); font-size: .92rem; }
.az-directory__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.az-directory__list li { min-width: 0; }
.az-directory__list a {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
  min-height: 66px; padding: 12px 14px 12px 38px; color: #14233a; background: #fff;
  border: 1px solid rgba(20, 35, 58, .1); border-radius: 10px; font-size: 1rem; text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
[dir="rtl"] .az-directory__list a { padding: 12px 38px 12px 14px; }
.az-directory__list a::before {
  content: ""; position: absolute; top: 21px; inset-inline-start: 16px; width: 8px; height: 8px;
  background: #007fa6; border-radius: 50%; box-shadow: 0 0 0 4px rgba(0, 127, 166, .14);
}
.az-directory__list a:hover, .az-directory__list a:focus-visible { color: #004a6a; background: #eef8fb; border-color: rgba(0, 127, 166, .3); box-shadow: 0 10px 22px rgba(14, 40, 64, .07); }
.az-directory__list span:first-child { min-width: 0; font-weight: 700; line-height: 1.45; }
.az-directory__list small { grid-column: 1; color: #5f6874; font-style: italic; font-weight: 500; line-height: 1.35; }
.az-directory__list svg { align-self: center; grid-column: 2; grid-row: 1 / span 2; color: #006f92; }
.az-directory__empty { margin: 0; padding: 18px; color: #526173; background: #f8fafc; border: 1px dashed rgba(20, 35, 58, .24); border-radius: 10px; }

@media (max-width: 991.98px) {
  .az-directory__layout { grid-template-columns: 1fr; }
  .az-directory__letters { gap: 8px; }
  .az-directory__letters a { min-width: 48px; min-height: 48px; padding-inline: 14px; font-size: 1.06rem; }
}
@media (max-width: 767.98px) {
  .az-directory__panel { padding: 16px; }
  .az-directory__list { grid-template-columns: 1fr; }
}