@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* =======================================================
*
* 	Template Style
*   (Оптимизированная версия)
*
* ======================================================= */
body {
  font-family: "Google Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  color: #333333;
  background: #fff;
}

#page {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

/* Стили для offcanvas сохранены, т.к. они могут управляться JS */
.offcanvas #page {
  overflow: hidden;
  position: absolute;
}

.offcanvas #page:after {
  -webkit-transition: 2s;
  -o-transition: 2s;
  transition: 2s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.7);
  content: "";
}

a {
  color: #086eff;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

a:hover,
a:active,
a:focus {
  color: #086eff;
  outline: none;
  text-decoration: none;
}

p {
  margin-bottom: 30px;
}

h1,
h2,
h3,
h4,
h5,
h6,
figure {
  /* Сохраняем все заголовки на всякий случай */
  color: #000;
  font-family: "Google Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
}


.btn {
  /* Keep base button styles */

  margin-bottom: 4px;
  font-family: "Google Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 8px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  padding: 8px 20px;
}

.btn.btn-lg {
  padding: 18px 36px !important;
}

.btn:hover,
.btn:active,
.btn:focus {
  box-shadow: none !important;
  outline: none !important;
}

.btn-primary {
  background: #086eff;
  color: #fff;
  border: 2px solid #086eff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #1863d0 !important;
  border-color: #1863d0 !important;
}

.input-group-btn {
  width: auto !important;
  /* display: flex; Add flex if needed for alignment */
}

.last-checked-date {
  font-size: smaller;
  color: #909090;
}


/* Сначала скрываем все иконки состояния */
.test-status-icon {
  display: none;
}

/* Анимация вращения для иконок загрузки */
.state-loading svg.pending,
.state-pending svg.pending {
  animation: spin 1s linear infinite;
}

/* Показываем нужную иконку в зависимости от состояния родителя */
[data-test-state="loading"] .test-status-icon.state-loading,
[data-test-state="pending"] .test-status-icon.state-pending,
[data-test-state="success"] .test-status-icon.state-success,
[data-test-state="error"] .test-status-icon.state-error {
  display: inline-block;
}

/* Дополнительные стили для красоты (опционально) */
.test-details-content {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.test-details-content ul {
  padding-left: 20px;
  margin-bottom: 0;
}

.test-status-icon {
  display: none;
  vertical-align: middle;
  /* Для лучшего выравнивания */
}

[data-test-state="loading"] .test-status-icon.state-loading,
[data-test-state="pending"] .test-status-icon.state-pending,
[data-test-state="success"] .test-status-icon.state-success,
[data-test-state="error"] .test-status-icon.state-error {
  display: inline-block;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.state-loading svg.pending,
.state-pending svg.pending {
  animation: spin 1s linear infinite;
}

/* --- НОВЫЕ СТИЛИ ДЛЯ ЦВЕТА --- */

/* Синий для загрузки и ожидания */
[data-test-state="loading"] .test-status-icons,
[data-test-state="pending"] .test-status-icons {
  color: #0d6efd;
  /* Стандартный синий цвет Bootstrap */
}

/* Зеленый для успеха */
[data-test-state="success"] .test-status-icons {
  color: #198754;
  /* Стандартный зеленый цвет Bootstrap */
}

/* Красный для ошибки */
[data-test-state="error"] .test-status-icons {
  color: #dc3545;
  /* Стандартный красный цвет Bootstrap */
}

.test-status-icons {
  align-self: baseline;
}

.test-details-content {
  font-size: 12px;
}

.row-pb-md {
  padding-bottom: 4em !important;
}

/* 
.atms-loader { 
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #fff;
} */

.js .animate-box {
  /* Keep initial state for JS animations */
  opacity: 0;
}

/* Стили для результатов AJAX сохранены */
.default-test-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.3s;
}

.default-test-header {
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.default-test-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0 20px;
}

.default-test-item.active .default-test-content {
  max-height: 500px;
  padding: 0 20px 15px;
}

.default-test-content .description p {
  margin-bottom: 6px;
}

.default-test-content .description {
  padding: 15px;
  margin-top: 10px;
  font-size: 12px;
  border-top: 1px solid #eeeeee;
}

.test-item {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.test-name {
  display: contents;
}

.test-status {
  flex-shrink: 0;
  width: 30px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
}

.test-info {
  flex-grow: 1;
  width: 30%;
  margin-bottom: auto;
}

.test-result {
  width: 70%;
}

.redirect-chain {
  margin-top: 5px;
  border-left: 2px solid #eee;
  padding-left: 15px;
}

.redirect-item {
  background: #f8f9fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.redirect-item .code {
  display: inline-block;
  width: 50px;
  font-weight: bold;
  color: #666;
}

.redirect-item .url {
  color: #2c3e50;
  word-break: break-all;
}

.test-status .icon.success {
  color: #198754;
}

.test-status .icon.error {
  color: #dc3545;
}

.test-status .icon.pending {
  color: #337ab7;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.default-test-item .test-info p {
  margin: auto;
}

.default-test-item .test-item {
  font-size: 12px;
}

#results {
  font-size: 12px;
}

/* Конец стилей для результатов AJAX */

::-webkit-selection {
  color: #fff;
  background: #086eff;
}

::-moz-selection {
  color: #fff;
  background: #086eff;
}

::selection {
  color: #fff;
  background: #086eff;
}

.atms-nav {
  background: #fff;
  position: fixed;
  /* Сохранено, т.к. это важное поведение навигации */
  width: inherit;
  z-index: 1;
}

.atms-nav .top-menu {
  padding: 20px 0;
  border-bottom: 1px solid #f8f8f8;
}

.atms-nav #atms-logo {
  font-size: 32px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Google Sans", "Helvetica Neue", sans-serif;
}

.atms-nav #atms-logo a span {
  color: #086eff;
}

.atms-nav a {
  padding: 5px 10px;
  color: #000;
}

.mt-100 {
  margin-top: 100px;
}

.mt-150 {
  margin-top: 150px;
}



.atms-nav ul {
  padding: 0;
  margin: 5px 0 0 0;
}

.atms-nav ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline;
}

.atms-nav ul li a {
  font-size: 18px;
  padding: 30px 15px;
  color: rgba(0, 0, 0, 0.7);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.atms-nav ul li a:hover,
.atms-nav ul li a:focus,
.atms-nav ul li a:active {
  color: black;
}

.atms-nav ul li.has-dropdown {
  position: relative;
}

.atms-nav ul li.has-dropdown .dropdown {
  width: 140px;
  -webkit-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  z-index: 1002;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0;
  text-align: left;
  background: #000;
  padding: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: 0s;
  /* Transition likely handled by JS or hover */
  -o-transition: 0s;
  transition: 0s;
}

.atms-nav ul li.has-dropdown .dropdown:before {
  bottom: 100%;
  left: 40px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #000;
  border-width: 8px;
  margin-left: -8px;
}

.atms-nav ul li.has-dropdown .dropdown li {
  display: block;
  margin-bottom: 7px;
}

.atms-nav ul li.has-dropdown .dropdown li:last-child {
  margin-bottom: 0;
}

.atms-nav ul li.has-dropdown .dropdown li a {
  padding: 2px 0;
  display: block;
  color: #999999;
  line-height: 1.2;
  text-transform: none;
  font-size: 13px;
  letter-spacing: 0;
}

.atms-nav ul li.has-dropdown .dropdown li a:hover {
  color: #fff;
}

/* Hover behavior for dropdown parent */
.atms-nav ul li.has-dropdown:hover a,
.atms-nav ul li.has-dropdown:focus a {
  color: #000;
}

/* Showing dropdown on hover likely handled by JS or :hover on parent */
/* .atms-nav ul li.has-dropdown:hover .dropdown { ... } - Add if needed */


.atms-nav ul li.btn-cta a {
  padding: 30px 0px !important;
  /* Keep important if needed */
  color: #fff;
}

.domain-form .input-group {
  border: 1px solid #cccccc;
  border-radius: 8px;
  transition: border-color 0.3s ease;
  padding: 4px;
  background: white;
  display: flex;
  align-items: center;
  height: 56px;
  /* Фиксированная высота для всей строки */
}

.domain-form .input-group:focus-within {
  border-color: #066eff;
  box-shadow: 0 0 0 2px rgba(6, 110, 255, 0.1);
}

.domain-form .form-control {
  border: none !important;
  box-shadow: none !important;
  flex: 1;
  height: 100%;
  padding: 0 20px;
  margin-right: 8px;
  /* Отступ от кнопки */
}

.domain-form .btn-primary {
  border: none !important;
  background: #066eff !important;
  border-radius: 6px !important;
  width: 48px;
  /* Фиксированная ширина кнопки */
  height: 48px;
  /* Фиксированная высота кнопки */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  /* Отступ от правого края контейнера */
}

/* Иконка стрелки */
.btn-arrow {
  width: 24px;
  height: 24px;
  fill: white;
}

/* Адаптация под мобильные устройства */
@media (max-width: 768px) {
  .domain-form .input-group {
    height: 48px;
  }

  .domain-form .btn-primary {
    width: 40px;
    height: 40px;
  }

  .btn-arrow {
    width: 20px;
    height: 20px;
  }
}

.input-group-lg {
  margin-bottom: 20px;
  z-index: 0;
}


.atms-nav ul li.btn-cta a span {
  background: #086eff;
  padding: 4px 10px;
  display: inline-block;
  /* Simpler display */
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  border-radius: 8px;
}

.atms-nav ul li.btn-cta a:hover span {
  -webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
}

.atms-nav ul li.active>a {
  color: #000 !important;
  position: relative;
}

.atms-nav ul li.active>a:after {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  content: '';
  width: 30px;
  height: 2px;
  background: #086eff;
  margin: 0 auto;
}

.atms-cover {
  background-image: repeating-radial-gradient(circle at center center, transparent 0px, transparent 13px, rgba(0, 0, 0, 0.03) 13px, rgba(0, 0, 0, 0.03) 24px, transparent 24px, transparent 62px, rgba(0, 0, 0, 0.03) 62px, rgba(0, 0, 0, 0.03) 96px), repeating-radial-gradient(circle at center center, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 14px, rgb(255, 255, 255) 14px, rgb(255, 255, 255) 18px, rgb(255, 255, 255) 18px, rgb(255, 255, 255) 28px, rgb(255, 255, 255) 28px, rgb(255, 255, 255) 32px);
  background-size: 21px 21px;
}

#atms-header .display-tc,
.atms-cover .display-tc {
  /* .atms-cover используется в #atms-header */
  display: table-cell !important;
  vertical-align: middle;
}

#atms-header .display-tc h1,
.atms-cover .display-tc h1 {
  margin: 0;
  padding: 0;
  color: black;
  margin-bottom: 20px;
  font-size: 54px;
  line-height: 1.3;
  font-weight: 300;
  /* Keep if specific weight is needed */
}

@media screen and (max-width: 768px) {

  #atms-header .display-tc h1,
  .atms-cover .display-tc h1 {
    font-size: 30px;
  }
}

/* H2 styles removed as no H2 inside .display-tc in HTML */

#atms-header .display-tc .btn,
.atms-cover .display-tc .btn {
  padding: 15px 30px;
  /* Base padding for header buttons */
  color: #fff;
  border: none !important;
  /* Keep important if needed */
  font-size: 18px;
  /* Keep font size */
}

@media screen and (max-width: 768px) {
  #atms-header .display-tc .btn .atms-cover .display-tc .btn {
    width: 80%;
    margin: 0 auto;
  }
}

#atms-header .display-tc .btn.btn-learn,
.atms-cover .display-tc .btn.btn-learn {
  background: #e8e8eb;
  border: none;
  color: #000 !important;
}

#atms-header .display-tc .btn.btn-learn:hover,
#atms-header .display-tc .btn.btn-learn:focus,
.atms-cover .display-tc .btn.btn-learn:hover,
.atms-cover .display-tc .btn.btn-learn:focus {
  background: #e8e8eb !important;
  color: #000 !important;
}

#atms-header .display-tc .btn.btn-demo,
.atms-cover .display-tc .btn.btn-demo {
  background: #066eff;
  border: none;
}

#atms-header .display-tc .btn.btn-demo:hover,
#atms-header .display-tc .btn.btn-demo:focus,
.atms-cover .display-tc .btn.btn-demo:hover,
.atms-cover .display-tc .btn.btn-demo:focus {
  background: #1863d0 !important;
  color: #fff !important;
}

/* General hover for header buttons */
#atms-header .display-tc .btn:hover,
.atms-cover .display-tc .btn:hover {
  background: #1863d0 !important;
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15) !important;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15) !important;
}

/* Focus state for accessibility */
#atms-header .display-tc .btn:focus,
.atms-cover .display-tc .btn:focus {
  color: #fff !important;
}

#atms-header .display-tc .form-inline .form-group,
.atms-cover .display-tc .form-inline .form-group {
  width: 100% !important;
  margin-bottom: 10px;
}

#atms-header .display-tc .form-inline .form-control,
.atms-cover .display-tc .form-inline .form-control {
  width: 100%;
  background: #fff;
  border: none;
}

#atms-features {
  background: #c5ddff;
}

#atms-features .services-padding {
  padding: 7em 0;
}

#atms-features .feature-left {
  margin-bottom: 40px;
  float: left;
}



#atms-features .feature-left .icon {
  display: table;
  float: left;
  text-align: center;
  width: 60px;
  height: 60px;
  background: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

#atms-features .feature-left .icon i {
  display: table-cell;
  vertical-align: middle;
  height: 60px;
  font-size: 30px;
  color: #086eff !important;
}

#atms-features .feature-left .feature-copy {
  float: right;
  width: 78%;
}



#atms-features .feature-left h3 {
  font-size: 24px;
  font-weight: 400;
}

#atms-features .feature-left p {
  font-size: 15px;
}

#atms-features .feature-left p:last-child {
  margin-bottom: 0;
}

#atms-features .feature-left p a {
  color: #000 !important;
}

.icon-arrow-right22:before {
  content: "\eab0";
}

#atms-wireframe {
  padding: 7em 0;
  clear: both;
  border: none !important;
}

#atms-wireframe blockquote {
  border: none;
  padding: 0;
  font-weight: bold;
}

.user-frame {
  width: 90%;
  padding: 3em;
  -webkit-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.13);
  -moz-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.13);
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.13);
}

.logo-block .version {
  font-size: 0.5em;
  color: #cacaca;
  margin-left: 10px;
  width: -webkit-fill-available;
}

sup {
  top: -1.5em;
}

.logo-desc {
  color: #a8a8a8;
  font-size: 0.8em;
}

.footer-block .logo-block .atms-logo .text {
  color: #000;
  text-transform: uppercase;
}

.footer-block .logo-block .atms-logo .dot {
  color: #086eff;
}

.logo-block .atms-logo {
  line-height: normal;
}

.atms-footer-links {
  list-style: none;
  padding: 0;
  margin: 15px 0 0;
}

.atms-footer-links a {
  text-decoration: none;
  color: #555;
  font-size: 12px;
  display: inline-block;
  position: relative;
  padding-left: 15px;
  transition: color 0.2s ease;
}

.atms-footer-links a::before {
  content: "›";
  position: absolute;
  left: 0;
  color: #aaa;
  font-size: 14px;
}

.atms-footer-links a:hover {
  color: #555;
}

.mb-20 {
  margin-bottom: 20px;
}


.logo-block {
  display: flex;
  align-items: center;
}

.menu-1 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-1 ul li {
  display: inline-block;
  margin-left: 20px;
  position: relative;
}

.menu-1 ul li a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  padding-bottom: 5px;
  position: relative;
}

.menu-1 ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background-color: #086eff;
  transition: width 0.3s ease;
}

.menu-1 ul li a:hover::after {
  width: 100%;
}

@media screen and (max-width: 992px) {
  #atms-features .feature-left {
    margin-bottom: 30px;
  }

  .footer-block h2,
  .footer-block h3,
  .footer-block h4,
  .footer-block h5,
  .footer-block h6 {
    margin: 0px;
  }

  .footer-block .atms-footer-links {
    margin: 0px;
  }


}

@media screen and (max-width: 768px) {
  #atms-wireframe {
    padding: 3em 0;
  }
}



@media screen and (max-width: 480px) {
  #atms-features .feature-left .feature-copy {
    width: 70%;
  }
}

@media screen and (max-width: 768px) {
  .user-frame {
    width: 100%;
    margin-bottom: 3em;
  }

  #atms-features .feature-left .feature-copy {
    width: 84%;
  }

  .atms-nav .menu-1 {
    display: none;
  }
}

.user-frame h3 {
  line-height: 34px;
}

.user-frame p {
  color: rgba(0, 0, 0, 0.6);
}

.user-frame span {
  font-weight: bold;
}

.user-frame small {
  color: #2A528A;
}

#atms-wireframe,
#atms-footer {
  padding: 7em 0;
  clear: both;
}

.atms-social-icons {
  margin: 0;
  padding: 0;
}

.atms-social-icons li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
}

.atms-social-icons li a {
  display: inline-block;
  color: #086eff;
  padding-left: 10px;
  padding-right: 10px;
}

.atms-social-icons li a i {
  font-size: 20px;
}

.atms-heading {
  margin-bottom: 5em;
}


.atms-heading h2 {
  font-size: 40px;
  margin-bottom: 20px;
  line-height: 1.5;
  color: #000;
}

.atms-heading p {
  font-size: 18px;
  line-height: 1.5;
  color: #828282;
}


#atms-footer .atms-footer-links {
  padding: 0;
  margin: 0;
}

#atms-footer .atms-widget h4 {
  margin-bottom: 30px;
  font-size: 20px;
}

#atms-footer .copyright .block {
  display: block;
}

.form-control {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  border: none;
  border: 2px solid rgba(0, 0, 0, 0.1);
  font-size: 18px;
  font-weight: 300;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

.form-control:focus,
.form-control:active {
  box-shadow: none;
  border: 2px solid rgba(0, 0, 0, 0.8);
}

input[type="text"].form-control {
  height: 50px;
}

#atms-header input[type="text"].form-control {
  height: 46px;
}

.form-group {
  margin-bottom: 30px;
}

#atms-offcanvas a {
  color: rgba(0, 0, 0);
}

#atms-offcanvas a:hover {
  color: rgba(255, 255, 255, 0.8);
}

#atms-offcanvas ul {
  padding: 0;
  margin: 0;
}

#atms-offcanvas ul li {
  padding: 0;
  margin: 0;
  list-style: none;
}

#atms-offcanvas ul li>ul {
  padding-left: 20px;
  display: none;
}

#atms-offcanvas ul li.offcanvas-has-dropdown>a {
  display: block;
  position: relative;
}

#atms-offcanvas ul li.offcanvas-has-dropdown>a:after {
  position: absolute;
  right: 0px;
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\ebfc";
  font-size: 20px;
  color: rgba(255, 255, 255, 0.2);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

#atms-offcanvas ul li.offcanvas-has-dropdown.active a:after {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}


.gototop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.gototop.active {
  opacity: 1;
  visibility: visible;
}

.gototop a {
  width: 50px;
  height: 50px;
  display: table;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

.gototop a i {
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}

.gototop a:hover,
.gototop a:active,
.gototop a:focus {
  text-decoration: none;
  outline: none;
}


.atms-nav-toggle {
  width: 25px;
  height: 25px;
  cursor: pointer;
  text-decoration: none;
  top: 25px !important;
  position: absolute;
  right: 0px;
  z-index: 2001;
  padding: 6px 0 0 0;
  display: none;
  border-bottom: none !important;
}

.atms-nav-toggle.active i::before,
.atms-nav-toggle.active i::after {
  background: #fff;
}

.atms-nav-toggle:hover,
.atms-nav-toggle:focus,
.atms-nav-toggle:active {
  outline: none;
  border-bottom: none !important;
}

.atms-nav-toggle i {
  position: fixed;
  display: inline-block;
  width: 25px;
  height: 2px;
  color: #252525;
  font: bold 14px / .4 Helvetica;
  text-transform: uppercase;
  /* text-indent: -55px; */
  background: #252525;
  transition: all .2s ease-out;
}

.atms-nav-toggle i::before,
.atms-nav-toggle i::after {
  content: '';
  width: 25px;
  height: 2px;
  background: #252525;
  position: absolute;
  left: 0;
  transition: all .2s ease-out;
}

.atms-nav-toggle i::before {
  top: -7px;
}

.atms-nav-toggle i::after {
  bottom: -7px;
}

.atms-nav-toggle:hover i::before {
  top: -10px;
}

.atms-nav-toggle:hover i::after {
  bottom: -10px;
}

.atms-nav-toggle.active i {
  background: transparent;
}

.atms-nav-toggle.active i::before {
  top: 0;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.atms-nav-toggle.active i::after {
  bottom: 0;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

#atms-header .input-group-btn .btn {
  padding: 8px 10px;
  height: 46px;
  margin-top: 4px;
  margin-right: auto;
}

#atms-footer .atms-footer-links li {
  padding: 0;
  margin: 0;
  list-style: none;
}

#atms-footer .atms-footer-links li a {
  color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

#atms-footer .atms-footer-links li a:hover {
  text-decoration: underline;
}

#atms-footer .atms-widget {
  margin-bottom: 30px;
}


@media screen and (max-width: 768px) {
  #atms-offcanvas {
    display: block;
  }

  .atms-nav-toggle {
    display: block;
  }

  #atms-header .input-group-btn .btn {
    padding: 8px 10px;
    height: 40px;
    margin: auto;
  }

  #atms-wireframe,
  #atms-footer {
    padding: 3em 0;
  }

  #atms-footer .atms-footer-links {
    margin-bottom: 30px;
  }

  #atms-footer .atms-widget {
    text-align: left;
  }
}

/* =======================================================
*   СТИЛИ ДЛЯ НОВОГО OFF-CANVAS МЕНЮ СЛЕВА (ДОБАВЛЕНИЯ/ИЗМЕНЕНИЯ)
* ======================================================= */

/* --- 1. Стилизация и Позиционирование Бургера в Шапке --- */

/* Обертка для бургера (добавлена в HTML) */
.atms-burger-wrap {
  display: none;
  float: right;
  /* width: auto; */
  text-align: right;
  height: 40px;
  top: -15px;
}

/* Сама кнопка-бургер (изменяем существующие стили) */
.atms-nav-toggle {
  /* Убираем absolute/fixed, если были */
  position: relative;
  /* Меняем на relative или static */
  display: inline-block;
  /* Встраиваем в поток обертки */
  width: 25px;
  height: 25px;
  vertical-align: middle;
  margin-right: 5px;
  /* Убираем top/right/left/bottom, если были */
  /* Убеждаемся, что z-index не слишком высокий, если он был */
  z-index: auto;
  /* Или не задаем */
  /* Остальные стили для i и псевдоэлементов (палочки) остаются как есть */
  /* ... (ваши стили для .atms-nav-toggle i, i::before, i::after) ... */
}

/* Анимация бургер -> крестик (изменяем/добавляем active) */
/* Убедитесь, что цвета подходят */
.atms-nav-toggle.active i {
  background: transparent;
}

.atms-nav-toggle.active i::before {
  top: 0;
  /* background: #333; /* Цвет крестика на светлом фоне хедера */
  transform: rotateZ(45deg);
}

.atms-nav-toggle.active i::after {
  bottom: 0;
  /* background: #333; /* Цвет крестика на светлом фоне хедера */
  transform: rotateZ(-45deg);
}

/* Показываем бургер и скрываем десктопное меню на мобильных */
@media screen and (max-width: 768px) {
  .url-checker-form .second-button {
    display: grid;
  }

  /* Показываем обертку бургера */
  .atms-nav .atms-burger-wrap {
    display: block;
    padding: 0;
    margin-right: 35px;
  }

  /* Мобильные стили для хедера для правильного выравнивания */
  .atms-nav .top-menu {
    padding: 15px 0;
  }

  .atms-nav #atms-logo {
    font-size: 28px;
    line-height: 40px;
  }

  .atms-nav .col-xs-2 {
    width: auto;
    float: left;
  }

  .atms-nav .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

@media screen and (min-width: 769px) {

  /* Явно скрываем обертку на десктопе */
  .atms-nav .atms-burger-wrap {
    display: none;
  }
}

/* --- Конец стилей бургера --- */


/* --- 2. Панель Offcanvas (ЗАМЕНЯЕМ старые стили #atms-offcanvas) --- */
/* Удалите СТАРЫЕ правила для #atms-offcanvas */
#atms-offcanvas {
  position: fixed;
  /* Важно: fixed, а не absolute */
  top: 0;
  left: 0;
  /* Позиция слева */
  bottom: 0;
  width: 100%;
  max-width: 85%;
  height: 100vh;
  background: #ffffff;
  /* Фон меню */
  color: #fff;
  z-index: 2100;
  /* Очень высокий z-index */
  padding: 0;
  overflow-y: auto;
  transform: translateX(-100%);
  /* Скрыто слева */
  transition: transform 0.35s ease-out;
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  /* Убираем старые стили, если были: right, transform: translateX(270px) */
}

/* Правило для показа меню (ЗАМЕНЯЕМ старое) */
body.offcanvas #atms-offcanvas {
  transform: translateX(0%);
  /* Показать */
}

/* --- Конец стилей панели Offcanvas --- */


/* --- 3. Внутренняя структура Offcanvas (НОВЫЕ стили) --- */
/* Хедер внутри offcanvas */
.offcanvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* Логотип внутри offcanvas */
.offcanvas-logo {
  /* Копируем стили из #atms-logo, но меняем цвет */
  font-size: 24px;
  font-weight: 700;
  font-family: "Google Sans", "Helvetica Neue", sans-serif;
  /* Ваш шрифт */
}

.offcanvas-logo a {
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
}

.offcanvas-logo a span {
  color: #086eff;
}

/* Цвет точки */

/* Кнопка закрытия (крестик) внутри offcanvas */
.offcanvas-close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
}

.offcanvas-close i {
  display: none;
}

/* Используем псевдоэлементы */
.offcanvas-close::before,
.offcanvas-close::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: rgba(0, 0, 0);
  transition: background-color 0.3s ease;
}

.offcanvas-close::before {
  transform: rotate(45deg);
}

.offcanvas-close::after {
  transform: rotate(-45deg);
}

.offcanvas-close:hover::before,
.offcanvas-close:hover::after {
  background-color: #fff;
}

/* Основная навигация внутри offcanvas */
.offcanvas-nav {
  padding: 15px 20px;
  margin: 0;
  list-style: none;
  flex-grow: 1;
}

.offcanvas-nav li {
  margin: 0 0 2px 0;
  padding: 0;
  list-style: none;
  display: block;
}

.offcanvas-nav li a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
  border-radius: 4px;
}

.offcanvas-nav li a:hover,
.offcanvas-nav li.active>a {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.offcanvas-nav li.active>a:after {
  display: none;
}

/* Убираем десктопное подчеркивание */

/* Выпадающие списки в offcanvas */
.offcanvas-nav .offcanvas-has-dropdown>a {
  position: relative;
  padding-right: 35px;
}

.offcanvas-nav .offcanvas-has-dropdown>a:after {
  content: "\eabc";
  /* Ваша иконка стрелки вниз */
  font-family: 'icomoon';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.3s ease;
}

.offcanvas-nav .offcanvas-has-dropdown.active>a:after {
  transform: translateY(-50%) rotate(180deg);
}

.offcanvas-nav .offcanvas-has-dropdown ul {
  padding-left: 15px;
  display: none;
  margin: 5px 0 8px 0;
  list-style: none;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.offcanvas-nav .offcanvas-has-dropdown ul li {
  margin-bottom: 0;
}

.offcanvas-nav .offcanvas-has-dropdown ul li a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 10px;
}

.offcanvas-nav .offcanvas-has-dropdown ul li a:hover,
.offcanvas-nav .offcanvas-has-dropdown ul li.active>a {
  color: #fff;
  background-color: transparent;
}

/* Кнопка Login внутри offcanvas */
.offcanvas-nav li.btn-cta {
  margin-top: 15px;
  padding: 0 10px;
}

.offcanvas-nav li.btn-cta a {
  display: block;
  padding: 10px 15px !important;
  color: #fff;
  border: 1px solid #086eff;
  border-radius: 8px;
  background-color: transparent;
  text-align: center;
  font-size: 16px;
}

.offcanvas-nav li.btn-cta a:hover {
  background-color: #086eff;
  color: #fff;
}

.offcanvas-nav li.btn-cta a span {
  display: inline;
  background: none;
  padding: 0;
}

/* --- Конец стилей внутренней структуры --- */


/* --- 4. Оверлей и Блокировка Фона (НОВЫЕ/ИЗМЕНЕННЫЕ) --- */
/* Удалите старое правило для .offcanvas #page:after, если оно было */
body.offcanvas::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1900;
  /* Ниже #atms-offcanvas */
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

body.offcanvas::before {
  opacity: 1;
  visibility: visible;
}

/* Блокировка прокрутки фона */
/* Удалите старое правило .offcanvas #page { overflow: hidden; }, если было */
body.overflow.offcanvas {
  overflow: hidden;
  /* Можно добавить position: fixed; width: 100%; height: 100%; если overflow не сработает на iOS */
  /* position: fixed;
  width: 100%;
     height: 100%; */
}

/* --- Конец стилей Оверлея и Блокировки --- */


/* --- 5. Анимации для десктопного dropdown (Добавить, если отсутствуют) --- */
.animated-fast {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeInUpMenu {

  /* или другая анимация, если хотите */
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpMenu {
  animation-name: fadeInUpMenu;
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}

.fadeOutDown {
  animation-name: fadeOutDown;
}

/* --- Конец стилей анимации --- */


/* --- 6. Стили для кнопки Наверх (gototop) --- */
/* Убедитесь, что эти стили есть и кнопка имеет классы 'gototop js-gotop' */
/* Базовые стили .gototop у вас уже есть, добавляем/уточняем .active и внутренние */
.gototop {
  /* Ваши стили position, bottom, right, z-index, opacity, visibility, transition */
}

.gototop.active {
  opacity: 1;
  visibility: visible;
}

.gototop a {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.gototop a:hover {
  background: rgba(0, 0, 0, 0.8);
}

.gototop a i {
  height: auto;
  display: inline;
  font-size: 20px;
  line-height: 1;
}

/* Добавьте иконку через псевдоэлемент */
.gototop a i::before {
  content: '\eab6';
  /* Пример иконки стрелки вверх (замените на свою) */
  font-family: 'icomoon';
}