/* css/components/helpers.css */
a{
  transition:all var(--transition-base);
}

*:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

::selection{
  background:var(--primary);
  color:#fff;
}

::-webkit-scrollbar{
  width:12px;
}

::-webkit-scrollbar-track{
  background:var(--page-bg);
}

::-webkit-scrollbar-thumb{
  background:var(--primary);
  border-radius:6px;
}

::-webkit-scrollbar-thumb:hover{
  background:var(--primary-hover);
}

.yandex{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  background:#FC3F1D;
  color:#fff;
  border-radius:50%;
  font-weight:var(--font-black);
  font-size:16px;
}

.hidden{
  display:none !important;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.icon-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  cursor:pointer;
  user-select:none;
  transition:transform var(--transition-base), background var(--transition-base), opacity var(--transition-base);
}

.icon-btn--lg{
  width:52px;
  height:52px;
}

.icon-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:none;
}

.icon-btn:hover:not(:disabled){
  background:var(--primary-hover);
  transform:scale(1.06);
}

.icon-btn:active:not(:disabled){
  transform:scale(1.0);
}

.icon-btn__arrow{
  width:16px;
  height:16px;
  background:currentColor;

  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a1 1 0 0 1 1 1v13.59l4.3-4.3a1 1 0 1 1 1.4 1.42l-6.01 6.01a1 1 0 0 1-1.38 0l-6.01-6.01a1 1 0 1 1 1.4-1.42L11 17.59V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a1 1 0 0 1 1 1v13.59l4.3-4.3a1 1 0 1 1 1.4 1.42l-6.01 6.01a1 1 0 0 1-1.38 0l-6.01-6.01a1 1 0 1 1 1.4-1.42L11 17.59V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.icon-btn--up .icon-btn__arrow{ transform:rotate(180deg); }
.icon-btn--left .icon-btn__arrow{ transform:rotate(90deg); }
.icon-btn--right .icon-btn__arrow{ transform:rotate(-90deg); }

:root{
  --carousel-arrow-offset: -18px;
  --carousel-arrow-size: 46px;
  --carousel-arrow-icon: 22px;
  --carousel-arrow-outside: 56px;
}

.carousel{
  position:relative;
}

.carousel .carousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(calc(-50% + var(--carousel-arrow-offset)));

  width:var(--carousel-arrow-size);
  height:var(--carousel-arrow-size);
  border-radius:50%;

  background:linear-gradient(
    135deg,
    rgba(37,211,102,0.22),
    rgba(37,211,102,0.12)
  );
  border:2px solid rgba(37,211,102,0.35);

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

  cursor:pointer;
  user-select:none;
  transition:all .25s ease;

  font-size:0;
  line-height:0;
  z-index:5;
}

.carousel .carousel__arrow--prev{
  left:calc(var(--carousel-arrow-outside) * -1);
}

.carousel .carousel__arrow--next{
  right:calc(var(--carousel-arrow-outside) * -1);
}

.carousel .carousel__arrow > *{
  display:none !important;
}

.carousel .carousel__arrow::before{
  content:none !important;
}

.carousel .carousel__arrow::after{
  content:"";
  width:var(--carousel-arrow-icon);
  height:var(--carousel-arrow-icon);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='rgb(22,150,80)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.carousel .carousel__arrow--prev::after{
  transform:rotate(180deg);
}

.carousel .carousel__arrow:hover:not(:disabled){
  transform:translateY(calc(-50% + var(--carousel-arrow-offset))) translateY(-2px);
  box-shadow:0 10px 26px rgba(37,211,102,0.35);
}

.carousel .carousel__arrow:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.carousel .carousel__viewport{
  padding-top:12px;
  padding-bottom:12px;
}

.carousel .carousel__track{
  padding-left:12px;
  padding-right:12px;
}

@media (max-width:640px){
  :root{
    --carousel-arrow-offset: -12px;
    --carousel-arrow-size: 42px;
    --carousel-arrow-icon: 20px;
    --carousel-arrow-outside: 40px;
  }

  .carousel .carousel__viewport{
    padding-top:8px;
    padding-bottom:8px;
  }

  .carousel .carousel__track{
    padding-left:8px;
    padding-right:8px;
  }
}

@media print{
  .header,
  .hero__cta,
  .trust__cta,
  button,
  .btn{
    display:none !important;
  }
}