.tab-content-overlay {
  /* background: transparent; */
  background: rgba(0, 0, 0, 0.33);
  border: 0;
  left: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  width: 100%;
  height: 100%;
  visibility: hidden;
  will-change: transform, opacity;
  z-index: 9;
}

/* Затемнение фона на мобильных устройствах */
@media (max-width: 480px) {
  .context-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }
}

.navbar {
  display: none;
}

@media (max-width: 768px) {
  .tarif-page {
    max-height: 90%;
    overflow-y: auto;
  }
  .tab-content {
    overflow: hidden;
    background-color: #f1f2f3;
    padding: 0 !important;
  }
  .tab-content .settings-page,
  .tab-content .notify-page,
  .tab-content .tarif-page,
  .tab-content #general-form {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body:has(.settings-page) .navbar,
  body:has(.notify-page) .navbar,
  body:has(.tarif-page) .navbar,
  body:has(#general-form) .navbar {
    display: block;
    transition: all 0.15s;
  }

  .settings-page,
  .notify-page {
    transition: all 0.15s;
  }

  body:has(.settings-column.active) .tab-content-overlay,
  body:has(.nav-tabs.active) .tab-content-overlay {
    visibility: visible;
    opacity: 1;
  }
  .nav-tabs {
    max-width: 80% !important;
    width: 280px !important;
  }

  .contact-list,
  #general-form,
  .tarif-page,
  .navbar {
    transition: all 0.15s;
  }
  #general-form {
    flex-direction: column-reverse;
    overflow: auto;
  }

  .general-form-left-side {
    overflow: unset;
    height: auto;
  }

  .general-form-right-side {
    max-width: 100%;
    height: auto;
    padding: 0;
    margin-bottom: 20px;
  }

  .general-form-left-side .form-row {
    flex-direction: column;
  }

  .panel {
    display: flex;
    max-height: 100%;
    overflow: hidden;
  }

  .general-form-right-side > img {
    aspect-ratio: 1/1;
    object-fit: cover;
    height: auto;
  }

  .contact-message {
    text-wrap: wrap;
  }

  .contact-area:has(.start-screen) {
    display: none;
  }

  .contact-wrapper {
    grid-template-columns: 1fr;
  }

  .panel:has(.contact-area-header) {
    padding: 0;
  }

  .contact-area-message-list {
    padding: 66px 10px 60px 10px;
  }

  .panel .tab-content {
    max-height: inherit;
    flex-grow: 1;
  }

  .panel:has(.contact-area-header) .contact-area {
    max-height: 100dvh;
    height: 100%;
  }

  .panel:has(.contact-area-header) .nav-tabs,
  .panel:has(.contact-area-header) .contact-list {
    display: none;
  }

  .contact-area-header {
    height: 60px;
  }

  .contact-area-header__image {
    width: 32px;
    aspect-ratio: 1/1;
  }

  .return-back {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    font-size: 24px;
    cursor: pointer;
  }

  .code-form-wrapper .button-row {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
  }
  .code-form-wrapper .button-row button {
    width: 100%;
  }
  .bot-banner {
    padding: 20px 0;
  }
  .message-settings > .button-f {
    margin-top: 20px !important;
    margin-bottom: 10px;
  }
  .message-settings {
    height: auto;
  }
  .contact-area-message-list {
    padding-bottom: 85px;
  }
  .notify-page-tabs button {
    width: 100%;
  }
  .tab-content:has(.settings-page),
  .tab-content:has(.notify-page) {
    overflow-y: auto;
  }
  .form-row {
    width: 100% !important;
  }
  textarea[placeholder="Или введите инструкции вручную..."] {
    height: 100%;
  }
  #general-form {
    padding-bottom: 100px;
  }
}

@media (max-width: 1024px) {
  .account-dropdown-menu .nav-link {
    width: unset;
  }
  .account-dropdown-menu .nav-link span {
    font-size: 14px !important;
  }
  .tarif-page,
  .navbar,
  #general-form,
  .contact-list,
  .settings-page,
  .notify-page,
  .tab-content-overlay {
    transition: all 0.15s;
  }
  body:has(.settings-column.active) .tab-content-overlay,
  body:has(.nav-tabs.active) .tab-content-overlay {
    visibility: visible;
    opacity: 1;
  }
  body:has(.settings-column.active) .tarif-page,
  body:has(.settings-column.active) .navbar,
  body:has(.settings-column.active) #general-form,
  body:has(.settings-column.active) .settings-page,
  body:has(.settings-column.active) .notify-page,
  body:has(.nav-tabs.active) .tarif-page,
  body:has(.nav-tabs.active) .settings-page,
  body:has(.nav-tabs.active) .navbar,
  body:has(.nav-tabs.active) #general-form,
  body:has(.nav-tabs.active) .notify-page {
    transform: perspective(500px) translateZ(-60px);
  }

  .code-form-wrapper .button-row {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .notify-page {
    padding-right: 1.5rem;
  }
}

.settings-page > h3,
.notify-page > h3,
.tarif-page > h3,
.general-form-left-side > .form-section:first-child > h3 {
  padding-top: 24px;
}

.settings-page > button {
  margin-top: 20px !important;
  margin-bottom: 20px;
}