/* =========================================================
   ОБЩИЙ БЛОК АЛФАВИТА
   ========================================================= */
.alphabet-wrapper {
  width: var(--content-grid-width, var(--content-track-width, calc(100% - 245px)));
  margin-top: var(--catalog-vertical-gap, 6px);
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  row-gap: 6px;

  /* Не даём алфавиту заезжать под правые кнопки */
  max-width: var(--content-grid-width, var(--content-track-width, calc(100% - 245px)));
  min-width: 0;
  justify-self: start;

  position: relative;
  z-index: 2;
}


/* =========================================================
   ОБЩАЯ СЕТКА ДЛЯ РЯДОВ
   31 колонка под русский алфавит
   ========================================================= */
.alphabet-row {
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  min-width: 0;
}


/* =========================================================
   РУССКИЙ РЯД
   ========================================================= */
.alphabet-ru {
  grid-row: 1;
  grid-column: 1 / -1;
}


/* =========================================================
   ВТОРОЙ РЯД: АНГЛИЙСКИЙ
   ========================================================= */
.alphabet-en {
  grid-row: 2;
  grid-column: 1 / -1;
}


/* =========================================================
   ТРЕТИЙ РЯД: 0-9
   ========================================================= */
.alphabet-num {
  grid-row: 2;
  grid-column: 31 / 32;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  min-width: 0;
}


/* =========================================================
   ОБЩИЙ СТИЛЬ КНОПОК АЛФАВИТА
   ========================================================= */
.alphabet-btn {
  width: 100%;
  min-width: 0;
  
  min-height: 26px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);

  background: transparent;

  color: rgba(255, 255, 255, 0.6);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  text-align: center;
  

  text-shadow: none;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.28);

  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
}


/* =========================================================
   НАВЕДЕНИЕ
   ========================================================= */
.alphabet-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255,255,255,0.28);
  color: #ffffff;
  transform: translateY(-1px);
}


/* =========================================================
   АКТИВНАЯ КНОПКА
   ========================================================= */
.alphabet-btn.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(140,180,255,0.42);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(120,160,220,0.12),
    0 2px 6px rgba(0,0,0,0.30);
}


/* =========================================================
   НЕАКТИВНАЯ / ТУСКЛАЯ КНОПКА
   ========================================================= */
.alphabet-btn.dimmed {
  opacity: 0.08;
}


/* =========================================================
   АНГЛИЙСКИЕ КНОПКИ
   Идут с 1 по 26 колонку, ровно слева направо
   ========================================================= */
.alphabet-en-slot-1  { grid-column: 1; }
.alphabet-en-slot-2  { grid-column: 2; }
.alphabet-en-slot-3  { grid-column: 3; }
.alphabet-en-slot-4  { grid-column: 4; }
.alphabet-en-slot-5  { grid-column: 5; }
.alphabet-en-slot-6  { grid-column: 6; }
.alphabet-en-slot-7  { grid-column: 7; }
.alphabet-en-slot-8  { grid-column: 8; }
.alphabet-en-slot-9  { grid-column: 9; }
.alphabet-en-slot-10 { grid-column: 10; }
.alphabet-en-slot-11 { grid-column: 11; }
.alphabet-en-slot-12 { grid-column: 12; }
.alphabet-en-slot-13 { grid-column: 13; }
.alphabet-en-slot-14 { grid-column: 14; }
.alphabet-en-slot-15 { grid-column: 15; }
.alphabet-en-slot-16 { grid-column: 16; }
.alphabet-en-slot-17 { grid-column: 17; }
.alphabet-en-slot-18 { grid-column: 18; }
.alphabet-en-slot-19 { grid-column: 19; }
.alphabet-en-slot-20 { grid-column: 20; }
.alphabet-en-slot-21 { grid-column: 21; }
.alphabet-en-slot-22 { grid-column: 22; }
.alphabet-en-slot-23 { grid-column: 23; }
.alphabet-en-slot-24 { grid-column: 24; }
.alphabet-en-slot-25 { grid-column: 25; }
.alphabet-en-slot-26 { grid-column: 26; }

.menu-btn:hover,
.system-btn:hover,
.alphabet-btn:hover,
.btn-video:hover,
.btn-audio:hover,
.btn-text:hover,
.btn-photo:hover {
  filter: brightness(1.2);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}

.menu-btn.active,
.system-btn.active,
.alphabet-btn.active,
.btn-video.active,
.btn-audio.active,
.btn-text.active,
.btn-photo.active {
  filter: brightness(1.25);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

@media (max-width: 999px) {
  .alphabet-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .alphabet-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    min-width: 0;
    padding-bottom: 2px;
  }

  .alphabet-ru {
    grid-row: auto;
    grid-column: auto;
  }

  .alphabet-en {
    grid-row: auto;
    grid-column: auto;
  }

  .alphabet-num {
    grid-row: auto;
    grid-column: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
  }

  .alphabet-btn {
    flex: 0 0 24px;
    min-width: 24px;
    min-height: 24px;
    font-size: 12px;
    padding: 0;
  }

  .alphabet-num .alphabet-btn {
    min-width: 44px;
  }
}

@media (min-width: 1000px) and (max-width: 1400px) {
  .alphabet-wrapper {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .alphabet-row {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
  }

  .alphabet-btn {
    min-width: 22px;
    min-height: 22px;
    font-size: 11px;
  }
}