/*
 * Единое боковое меню каталожных разделов.
 * Разметка приходит из /local/modules/ajva.system/lib/side-menu.php.
 *
 * Важно: положение меню больше не зависит от локального CSS конкретной
 * страницы. На desktop его верх дополнительно выравнивает side-menu.js
 * относительно нижней границы общей шапки.
 */

@media (min-width: 1025px) {
  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) {
    box-sizing: border-box !important;
    width: 214px !important;
    min-width: 214px !important;
    max-width: 214px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 21px !important;
    align-self: start !important;
    justify-self: end !important;
    color: #fff !important;
    font-family: var(--ajva-font, "Gilroy", Arial, Helvetica, sans-serif) !important;
    transform: translateY(var(--ajva-catalog-side-menu-offset, 0px));
    transition: none !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #30b0b0 !important;
    border-radius: 8px !important;
    background: #30b0b0 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-indent: 0 !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-synthesis: none !important;
    line-height: 1.06 !important;
    overflow-wrap: anywhere !important;
    list-style: none !important;
    transition: opacity .2s ease, transform .2s ease !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link.is-active,
  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link[aria-current="page"] {
    background: #fff !important;
    color: #1c7c85 !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link::before,
  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link::after {
    content: none !important;
    display: none !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link:focus-visible {
    outline: 2px solid #fcc049 !important;
    outline-offset: 3px !important;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link:not(.is-active):not([aria-current="page"]):hover {
    opacity: .92 !important;
    transform: translateY(-1px) !important;
  }
}

/* На планшете меню становится общим компактным блоком перед содержимым. */
@media (max-width: 1024px) {
  div[class*="__layout"]:has(> .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin)),
  div[class*="__grid"]:has(> .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin)),
  div[class*="__hero-grid"]:has(> .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin)) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) {
    box-sizing: border-box !important;
    width: min(100%, 860px) !important;
    min-width: 0 !important;
    max-width: 860px !important;
    margin: 10px auto 22px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row dense !important;
    column-gap: 12px !important;
    row-gap: 16px !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    order: -1 !important;
    transform: none !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 1px solid #30b0b0 !important;
    border-radius: 9px !important;
    background: #30b0b0 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: var(--ajva-font, "Gilroy", Arial, Helvetica, sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.14 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    list-style: none !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link:has(br),
  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"] > .ajva-catalog-side-nav__link[href$="/repay/app/"],
  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"] > .ajva-catalog-side-nav__link[href$="/repay/autopay/"],
  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"] > .ajva-catalog-side-nav__link[href$="/repay/vtb/"] {
    grid-column: 1 / -1 !important;
  }

  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="about"] > .ajva-catalog-side-nav__link[href$="/about/partners_store_smart1080/"] {
    grid-column: auto !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link.is-active,
  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link[aria-current="page"] {
    background: #fff !important;
    color: #1c7c85 !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link::before,
  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link::after {
    content: none !important;
    display: none !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link:focus-visible {
    outline: 2px solid #fcc049 !important;
    outline-offset: 2px !important;
  }
}

@media (max-width: 900px) {
  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="about"] > .ajva-catalog-side-nav__link[href$="/about/partners_store_smart1080/"] {
    grid-column: 1 / -1 !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 18px !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link {
    min-height: 37px !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"] {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
  }

  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"] > .ajva-catalog-side-nav__link,
  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"] > .ajva-catalog-side-nav__link:has(br),
  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"] > .ajva-catalog-side-nav__link[href$="/repay/app/"],
  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"] > .ajva-catalog-side-nav__link[href$="/repay/autopay/"],
  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"] > .ajva-catalog-side-nav__link[href$="/repay/vtb/"] {
    grid-column: auto !important;
    min-height: 44px !important;
    padding: 7px 12px !important;
  }

  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"] > .ajva-catalog-side-nav__link:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) {
    width: 100% !important;
    max-width: none !important;
    margin: 10px 0 22px !important;
    row-gap: clamp(14px, 5vw, 20px) !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link {
    min-height: 36px !important;
    padding: 5px 9px !important;
    font-size: 11.5px !important;
    line-height: 1.12 !important;
  }

  /* В меню погашения нечётный последний пункт занимает всю строку. */
  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"] > .ajva-catalog-side-nav__link:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 380px) {
  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) {
    column-gap: 8px !important;
    row-gap: 15px !important;
    margin-bottom: 20px !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link {
    min-height: 34px !important;
    padding: 5px 7px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 330px) {
  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) {
    grid-template-columns: 1fr !important;
  }

  .ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) > .ajva-catalog-side-nav__link {
    grid-column: 1 !important;
  }
}

/* Цвет текста на основных бирюзовых CTA-кнопках. */
.ajva-oncard-main [class*="__cta"],
.ajva-oncard-vtb [class*="__cta"],
.ajva-oncard-sber [class*="__cta"],
.ajva-oncard-tbank [class*="__cta"],
.ajva-oncard-other [class*="__cta"],
.ajva-repay__cta,
.ajva-office-detail__cta,
.ajva-office__partner-button,
.ajva-faq__quick-link,
.ajva-contacts__button--secondary,
.ajva-system__button--primary,
.ajva-main-calc__gos,
.ajva-main-calc__submit {
  color: #fff !important;
}

/* =========================
   OFFICE PAGES — RESPONSIVE NAV
   На промежуточных и планшетных ширинах офисный сайдбар скрыт:
   основной контент получает всю доступную ширину.
========================= */
@media (max-width: 1200px) {
  .ajva-office__side-nav.ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin),
  .ajva-office-detail__side-nav.ajva-catalog-side-nav:not(.ajva-catalog-side-nav--admin) {
    display: none !important;
  }

  .ajva-office__layout:has(> .ajva-office__side-nav.ajva-catalog-side-nav),
  .ajva-office-detail__layout:has(> .ajva-office-detail__side-nav.ajva-catalog-side-nav) {
    display: block !important;
  }

  .ajva-office__content,
  .ajva-office-detail__content {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Repay desktop: keep the header alignment in document flow so the footer
 * cannot slide underneath the visually shifted side menu. The same 32px
 * clearance is kept below the menu as above it. */
@media (min-width: 1025px) {
  .ajva-catalog-side-nav[data-ajva-catalog-side-menu="repay"]:not(.ajva-catalog-side-nav--admin) {
    transform: none !important;
    margin-top: var(--ajva-catalog-side-menu-offset, 0px) !important;
    margin-bottom: 32px !important;
  }
}