.sv-captcha *,
.sv-captcha *::before,
.sv-captcha *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
   --sv-item-width: 50px;
   --sv-item-height: 50px;
   --sv-gap: 8px;
   --sv-padding: 20px;
}

.sv-captcha {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 9999999;
}
.sv-captcha-inner {
   padding: var(--sv-padding);
}
.loading .sv-captcha-inner {
   pointer-events: none;
}
.sv-captcha h2 {
   font-size: 16px;
   text-align: center;
   margin-bottom: 5px;
}
.sv-captcha span {
   display: block;
   margin-bottom: 15px;
   font-size: 14px;
   text-align: center;
}
.sv-captcha .sv-captcha-items {
   position: relative;
   touch-action: none;
   height: var(--sv-item-height);
}
.sv-captcha .sv-captcha-item {
   position: absolute;
   top: 0;
   left: 0;
   width: var(--sv-item-width);
   height: var(--sv-item-height);
   background-color: #FFFFFF;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 10px;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   cursor: grab;
   transition: left 0.3s;
   -webkit-tap-highlight-color: transparent;
}
.sv-captcha .sv-captcha-item.grabbing {
   cursor: grabbing;
   transition: none;
   z-index: 999999;
}
.check-sv-captcha {
   position: relative;
   display: block;
   width: 100%;
   padding: 10px;
   margin-top: 15px;
   height: 42px;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   background-color: grey;
   outline: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   -webkit-tap-highlight-color: transparent;
}
.check-sv-captcha.loading {
   pointer-events: none;
   opacity: 0.7;
}
.check-sv-captcha .loader {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
}
.check-sv-captcha .loader::before {
   content: '';
   width: 25px;
   height: 25px;
   border: 3px solid #FFF;
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
}
@keyframes rotation {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

/* iOS-специфические стили с классом .apple */
.apple.sv-captcha {
   background-color: rgba(0, 0, 0, 0.6);
}
.apple .sv-captcha-inner {
   background-color: rgba(255, 255, 255, 0.95);
   border-radius: 20px;
   padding: var(--sv-padding);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   width: 100%;
}
.apple.sv-captcha h2 {
   font-family: sans-serif, Arial;
   font-size: 18px;
   font-weight: 600;
   color: #1c2526;
}
.apple.sv-captcha span {
   font-family: sans-serif, Arial;
   color: #1c2526;
}
.apple.sv-captcha .sv-captcha-item {
   background-color: #FFFFFF;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   /* color: #1c2526; */
}
.apple.sv-captcha .sv-captcha-item.grabbing {
   transform: scale(1.05);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.apple .check-sv-captcha {
   background-color: #007aff;
   color: #FFFFFF;
   padding: 12px;
   font-family: sans-serif, Arial;
   font-size: 16px;
   font-weight: 500;
   border-radius: 12px;
}
@media (hover: hover) {
   .apple .check-sv-captcha:hover {
      background-color: #0062cc;
   }   
}
.apple .check-sv-captcha:active {
   background-color: #0051a8;
}
@media (prefers-color-scheme: dark) {
   .apple.sv-captcha {
      background-color: rgba(0, 0, 0, 0.7);
   }
   .apple .sv-captcha-inner {
      background-color: rgba(28, 28, 30, 0.95);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
   }
   .apple.sv-captcha h2 {
      color: #ffffff;
   }
   .apple.sv-captcha span {
      color: #ffffff;
   }
   .apple.sv-captcha .sv-captcha-item {
      background-color: #2c2c2e;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }
   .apple.sv-captcha .sv-captcha-item.grabbing {
      background-color: #363638;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   }
   .apple .check-sv-captcha {
      background-color: #0a84ff;
   }
   @media (hover: hover) {
      .apple .check-sv-captcha:hover {
         background-color: #007aff;
      }   
   }
   .apple .check-sv-captcha:active {
      background-color: #0066cc;
   }
}

/* Android-специфические стили с классом .android (светлая тема) */
.android.sv-captcha {
   background-color: rgba(0, 0, 0, 0.6);
}
.android .sv-captcha-inner {
   background-color: #ffffff; /* Белый фон для светлой темы */
   border-radius: 16px;
   padding: var(--sv-padding);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
   width: 100%;
}
.android.sv-captcha h2 {
   font-family: 'Roboto', sans-serif;
   font-size: 18px;
   font-weight: 500;
   color: #202124; /* Темный текст для светлой темы */
   margin-bottom: 16px;
}
.android.sv-captcha span {
   font-family: 'Roboto', sans-serif;
   color: #202124;
}
.android.sv-captcha .sv-captcha-item {
   background-color: #f5f5f5; /* Светло-серый фон для элементов */
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.android.sv-captcha .sv-captcha-item.grabbing {
   transform: scale(1.03);
   background-color: #eeeeee; /* Чуть темнее при активации */
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   transition: transform 0.1s, background-color 0.1s;
}
.android .check-sv-captcha {
   background-color: #6200ee; /* Основной цвет Material Design */
   color: #ffffff;
   padding: 12px;
   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   font-weight: 500;
   border-radius: 8px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}
@media (hover: hover) {
   .android .check-sv-captcha:hover {
      background-color: #7c4dff;
   }   
}
.android .check-sv-captcha:active {
   background-color: #3700b3;
}

/* Android темная тема с использованием media-запроса или дополнительного класса */
@media (prefers-color-scheme: dark) {
   .android.sv-captcha {
      background-color: rgba(0, 0, 0, 0.7);
   }
   .android .sv-captcha-inner {
      background-color: #212121; /* Темный фон Material Design */
      border-radius: 16px;
      padding: var(--sv-padding);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
      width: 100%;
   }
   .android.sv-captcha h2 {
      font-size: 18px;
      font-weight: 500;
      color: #ffffff; /* Белый текст для темной темы */
      margin-bottom: 16px;
   }
   .android.sv-captcha span {
      color: #ffffff;
   }
   .android.sv-captcha .sv-captcha-item {
      background-color: #303030; /* Серый фон для элементов */
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }
   .android.sv-captcha .sv-captcha-item.grabbing {
      transform: scale(1.03);
      background-color: #424242; /* Более светлый оттенок при активации */
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      transition: transform 0.1s, background-color 0.1s;
   }
   .android .check-sv-captcha {
      background-color: #bb86fc; /* Более мягкий акцентный цвет для темной темы */
      color: #ffffff;
      padding: 12px;
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      font-weight: 500;
      border-radius: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
   }
   @media (hover: hover) {
      .android .check-sv-captcha:hover {
         background-color: #d1aaff;
      }   
   }
   .android .check-sv-captcha:active {
      background-color: #985eff;
   }
}