/* STYLES THAT ARE NOT FETCHED FROM WF */
/* !!!MUST!!! ADD COMMENT FOR EACH STYLE */

/* Improve text clarity and legibility across all devices */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga", "kern";
}

/* FORMS */

button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

/* Hide arrows for numeric fields Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide arrows for numeric fields Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Toggle */
.toggle_area:checked ~ .toggle_handle {
  transform: translateX(0.875rem);
}

.toggle_area:checked ~ .toggle_label {
  background-color: rgb(121, 106, 239);
}

/* Dropdown. Show item delete icon when hover over dropdown link */
.app_dropdown-link:hover .dropdown-link-icon-right {
  opacity: 1;
}

.app_dropdown-opened {
  z-index: 901 !important;
}

.app_input-wrapper:has(.app_dropdown-opened) .form-label {
  z-index: 902 !important;
}

.app_dropdown-opened nav {
  display: block !important;
}

label {
font-weight: inherit;
}

/* RADIO BUTTONS */
/* Classic */
.radio_label {  
  border-radius: var(--border-radius--small);
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  padding: .5rem 0;
  transition: all .2s;
  display: flex;
  gap: .75rem;
  position: relative;
}

.radio_label input[type="radio"] {
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  accent-color: var(--color-text-tokens--color-text-secondary-active);
  cursor: pointer;  
}

.radio_label input[type="radio"]:checked {
  accent-color: var(--color-text-tokens--color-text-accent-default);
}

.radio_label:hover:has(input[type="radio"]:not(:checked))
  input[type="radio"] {
  accent-color: var(--color-text-tokens--color-text-accent-default);
}

.radio_label:hover:has(input[type="radio"]:not(:checked))
  .radio_text {
  color: var(--color-text-tokens--color-text-accent-default);
}

.radio_label:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--colors-global-brand--global-turquoise-400);
  outline-offset: 2px;
}



/* Classic Webflow  
.radio_label:hover .radio_input:not(:checked) + .radio_circle_wrap,
.radio_label:hover .radio_input:not(:checked) + .radio_circle_wrap + .radio_text {
  color: var(--color-text-tokens--color-text-accent-default);
}

.radio_input:checked + .radio_circle_wrap {
  color: var(--color-text-tokens--color-text-accent-default);
}


.radio_input:checked + .radio_circle_wrap .radio_circle_inner {
  opacity: 1;
}

.radio_input:focus-visible {
  outline-color: var(--colors-global-brand--global-turquoise-400);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px;
}
  */


/* Button */
.radio_btn_label:has(input:checked) {
color: white;
background-color: var(--color-bg-tokens--color-bg-fill-accent-active);
}


/* Checkbox */
.checkbox_input:checked {
  background-color: var(--color-bg-tokens--color-bg-fill-tertiary-active);
  border-color: var(--color-bg-tokens--color-bg-fill-tertiary-active);
}

/* Base checkmark */
.checkbox_input::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  border-radius: 1px;
  opacity: 0;
  transform: scale(0) rotate(45deg);
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.checkbox_input:checked::after {
  transform: scale(1) rotate(45deg);
  opacity: 1;
}

/* Circle checkbox variation */
.checkbox_input.is-cicrle::after {
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(45deg);
}

.checkbox_input.is-cicrle:checked::after {
  transform: translate(-50%, -50%) scale(1) rotate(45deg);
}


/* MENU */
.app_footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

/* Changing main menu icons color on hover and active */
.menu-btn:hover .menu-icon path[fill="#FFFFFF"],
.menu-btn:active .menu-icon path[fill="#FFFFFF"],
.menu-btn.is-current .menu-icon path[fill="#FFFFFF"] {
  fill: #796aef;
}

.menu-btn:hover .menu-icon path[stroke="#FFFFFF"],
.menu-btn:active .menu-icon path[stroke="#FFFFFF"],
.menu-btn.is-current .menu-icon path[stroke="#FFFFFF"] {
  stroke: #796aef;
}

.menu-btn:hover .menu-icon path[fill="#796AEF"],
.menu-btn:active .menu-icon path[fill="#796AEF"],
.menu-btn.is-current .menu-icon path[fill="#796AEF"] {
  fill: #ffffff;
}

.menu-btn:hover .menu-icon path[stroke="#796AEF"],
.menu-btn:active .menu-icon path[stroke="#796AEF"],
.menu-btn.is-current .menu-icon path[stroke="#796AEF"] {
  stroke: #ffffff;
}

.menu-icon path {
  transition: fill 0.2s, stroke 0.2s;
}

/* Changing transaction background on hover except API label*/
.transaction_wrap:has(.transaction_header:hover):not(
    :has(.transaction_header:hover .api-label-clickable:hover)
  ) {
  background-color: rgba(44, 44, 52, 0.03);
}

/* NAVBAR (top bar, includes page title, search, plus btn ) */

/* Add padding-top for mobile */
@container main (max-width: 991px) {
  .nav_block {
    padding-top: calc(env(safe-area-inset-top, 0) + 1rem);
  }
}



/* Hide overflow text under elipsis */
.truncate-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-1-line {
  max-width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hiding scrollbar in fields with long values like "API key" but keeping it scrollable */
.app_clipboard-value {
  -ms-overflow-style: none; /* IE 10+ */
  overflow: -moz-scrollbars-none; /* Firefox*/
}
.app_clipboard-value::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}


/* Hides focus outline for programmatically focused elements (like modal close btn),
   but keeps it for keyboard navigation (Tab), preserving accessibility */   
.modal-main *:focus:not(:focus-visible) {
  outline: none;
}

/* PAYOUTS screen: move arrows on hover */
.payout_summary:hover .payout_arrow {
  transform: translateX(0.25rem);
}

/* КИВАЕМ СТРЕЛКОЙ ВНИЗ-ВВЕРХ ПОДСКАЗЫВАЯ, ЧТО ЕСТЬ РАСКРЫВАШКА */
/* ключевые кадры для короткого движения вниз-вверх */
@keyframes nudgeDown {
  0% { transform: translateY(0); }
  50% { transform: translateY(0.25rem); }
  100% { transform: translateY(0); }
}

/* запуск анимации только для неповернутой стрелки */
.payout_summary:hover .payout_arrow-down:not(.rotated),
.transaction_header:hover .payout_arrow-down:not(.rotated) {
  animation: nudgeDown 0.3s ease;
}

/* стрелка повернута (при открытом блоке) */
.payout_arrow-down.rotated {
  transform: rotate(180deg);
}

/* PAYLINKS MEDIA UPLOAD */
.media_upload_label.has-image .media_icon-upload {
  opacity: 0;
  pointer-events: none;
}

/* SPINNER - вращающаяся дуга 32×32px, используется внутри кнопок во время загрузки */
.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 6.4px solid transparent;
  animation: spinner-bulqg1 0.96s infinite linear alternate,
    spinner-oaa3wk 1.92s infinite linear;
}
.spinner.is-white { border-color: #FFFFFF; }
.spinner.is-cyan  { border-color: #00c3d2; }

@keyframes spinner-bulqg1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }

  12.5% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }

  62.5% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }

  75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
  }

  100% {
    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
  }
}

@keyframes spinner-oaa3wk {
  0% {
    transform: scaleY(1) rotate(0deg);
  }

  49.99% {
    transform: scaleY(1) rotate(135deg);
  }

  50% {
    transform: scaleY(-1) rotate(0deg);
  }

  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}