/**
Theme Name: Skyzit
Author: Romario
Author URI: https://sxovoc.com
Description: SkyZit Child — легкая дочерняя тема Astra для сайта по оформлению зарубежных карт Visa/Mastercard без выезда из России. Быстрая, адаптивная, SEO-оптимизированная.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skyzit
Template: astra
*/

/* ─── Текст с градиентом ──── */
.text-gradient {
  background: linear-gradient(135deg, #A7FFE9 0%, #92DEFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Кнопка с градиентом и анимацией блика ─────────────────────────────────
   Добавьте ID "btn-primary" к кнопке в Elementor
   Дополнительно класс "btn-primary" если нужно несколько кнопок
──────────────────────────────────────────────────────────────────────────── */

/* Keyframes блика — рассчитано на кнопку до 300px шириной */
@keyframes btn-flash {
  0%   { transform: translateX(-60px) skewX(-20deg); }
  20%  { transform: translateX(440px) skewX(-20deg); }
  100% { transform: translateX(440px) skewX(-20deg); }
}
 
/* Основные стили кнопки */
#btn-primary .elementor-button,
.btn-primary .elementor-button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0E56E1 0%, #588AF9 100%);
  border: 1px solid #3778E7 !important;
  isolation: isolate;
  transition: none;
}

/* Megafon стили кнопки */
#btn-green .elementor-button,
.btn-green .elementor-button {
  position: relative;
  overflow: hidden;
  background: #02b957;
  border: 1px solid #1bce6e !important;
  isolation: isolate;
  transition: none;
}
 
/* Hover-градиент через псевдоэлемент для плавности */
#btn-primary .elementor-button::before,
.btn-primary .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #588AF9 0%, #0E56E1 100%);
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}

/* Hover-градиент для Мегафона через псевдоэлемент для плавности */
#btn-green .elementor-button::before,
.btn-green .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #a0ea98 0%, #0cbc5b 100%);
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}
 
#btn-primary .elementor-button:hover::before,
.btn-primary .elementor-button:hover::before {
  opacity: 1;
}

#btn-green .elementor-button:hover::before,
.btn-green .elementor-button:hover::before {
  opacity: 1;
}
 
/* Элемент блика */
#btn-primary .elementor-button::after,
.btn-primary .elementor-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.4));
  transform: translateX(-100%) skewX(-20deg);
  animation: btn-flash 6s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Элемент блика Мегафон */
#btn-green .elementor-button::after,
.btn-green .elementor-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.4));
  transform: translateX(-100%) skewX(-20deg);
  animation: btn-flash 6s linear infinite;
  pointer-events: none;
  z-index: 1;
}
 
/* Текст поверх блика */
#btn-primary .elementor-button-content-wrapper,
.btn-primary .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
}

/* Текст поверх блика Мегафон */
#btn-green .elementor-button-content-wrapper,
.btn-green .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
}

/* ─── Постоянная бесшовная анимцая бегущей строки ─────────────────────────────────
   Добавьте класс "marquee-track" родительскому элементу
   Дополнительно класс "marquee-item" вложеному элементам
──────────────────────────────────────────────────────────────────────────── */
/* Секция-обёртка — назначьте класс marquee-overflow */
.marquee-overflow {
  overflow: hidden !important;
  max-width: 100% !important;
  contain: layout;
}

.marquee-overflow * {
  will-change: transform;
}

/* Трек — назначьте класс marquee-track */
.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}

/* Каждый блок — назначьте класс marquee-item */
.marquee-item {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Анимация */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Планшет */
@media (max-width: 1024px) {
  .marquee-track {
    animation-duration: 20s;
  }
}

/* Мобильные */
@media (max-width: 767px) {
  .marquee-track {
    animation-duration: 15s;
  }
}

/* ───Обводка с градиентом ────
Добавьте класс "border-trans"
─────────────────────────────── */
.border-trans {
  position: relative;
  border: none !important;
}

.border-trans::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.07) 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* ─── Свечение svg ────
Добавьте класс "svg-glow-1"
Добавьте класс "svg-glow-2"
─────────────────────────────── */
.svg-glow-1 {
  filter: drop-shadow(0 0 5px #0353DD) drop-shadow(0 0 15px #0353DD) drop-shadow(0 0 30px #0353DD);
}
.svg-glow-2 {
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #0353DD) drop-shadow(0 0 25px #0353DD) drop-shadow(0 0 40px #0353DD);
}
.svg-glow-3 {
  filter: drop-shadow(0 0 5px #61358A) drop-shadow(0 0 15px #61358A) drop-shadow(0 0 30px #61358A);
}

/* ─── Стиль формы ──── */
.sky-form  .e-form__buttons {
    margin-top: 40px;
}
.sky-form button.elementor-button.elementor-size-lg.e-form__buttons__wrapper__button.e-form__buttons__wrapper__button-previous {
    background: none;
    color: #88A9EF;
    padding-left: 0px;
    text-align: left;
    box-shadow: none;
}
.sky-form .elementor-field-group.e-form__buttons__wrapper.elementor-field-type-next {
    max-width: 40%;
    position: absolute;
    right: 0px;
}
.sky-form .elementor-field-type-html.elementor-field-group.elementor-column.elementor-field-group-field_69bcaac.elementor-col-100 {
    padding-bottom: 20px;
}
.sky-form .elementor-field-type-html.elementor-field-group.elementor-column.elementor-field-group-field_6153eab.elementor-col-100 {
    padding-bottom: 20px;
}
.sky-form .e-form__indicators.e-form__indicators--type-progress_bar {
    margin-bottom: -60px;
    padding-top: 50px;
}
.sky-form .elementor-field-type-step.elementor-column.elementor-field-group-field_b524700.elementor-col-100.e-form__step {
    padding-top: 80px;
}
.sky-form .elementor-field-type-html {
    text-align: center;
}
.sky-form .ab-text {
font-size: 27px;
font-weight: 600;
}
.sky-form label a {
    color: #E8E8E8;
}

.sky-form .elementor-field-subgroup {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
}

.sky-form .elementor-field-type-radio .elementor-field-option {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s;
    min-height: 110px;
}

.sky-form .elementor-field-type-radio .elementor-field-option input[type="radio"] {
    display: none;
}

.sky-form .elementor-field-type-radio .elementor-field-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;
    width: 100%;
}

.sky-form .elementor-field-type-radio .elementor-field-option label::before {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 8px auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Шаг 1 — goals */
.sky-form .elementor-field-group-goals .elementor-field-option:nth-child(1) label::before {
    background-image: url('/wp-content/uploads/2026/05/subscription-img.png');
}

.sky-form .elementor-field-group-goals .elementor-field-option:nth-child(2) label::before {
    background-image: url('/wp-content/uploads/2026/05/tourism-img.png');
}

.sky-form .elementor-field-group-goals .elementor-field-option:nth-child(3) label::before {
    background-image: url('/wp-content/uploads/2026/05/transfers-img.png');
}

/* Шаг 2 — field_1b0be05 */
.sky-form .elementor-field-group-date_card .elementor-field-option:nth-child(1) label::before {
    background-image: url('/wp-content/uploads/2026/05/urgently-img.png');
}

.sky-form .elementor-field-group-date_card .elementor-field-option:nth-child(2) label::before {
    background-image: url('/wp-content/uploads/2026/05/weeks-img.png');
}

.sky-form .elementor-field-group-date_card .elementor-field-option:nth-child(3) label::before {
    background-image: url('/wp-content/uploads/2026/05/months-img.png');
}

/* Наведение */
.sky-form .elementor-field-type-radio .elementor-field-option:hover,
.sky-form .elementor-field-type-radio .elementor-field-option:hover label {
    background: #FFFFFF;
    color: #0353DD !important;
}

/* Выбранный элемент */
.sky-form .elementor-field-type-radio .elementor-field-option:has(input[type="radio"]:checked),
.sky-form .elementor-field-type-radio .elementor-field-option:has(input[type="radio"]:checked) label {
    background: #FFFFFF;
    color: #0353DD !important;
}

.sky-form .elementor-field-type-radio .elementor-field-option:has(input[type="radio"]:checked)::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/uploads/2026/05/check-radiob.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* ─── Пластиковая карта эффект стекла ──── */
.glass-card {
  width: 390px;
  height: 242px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 0.3px solid rgba(255, 255, 255, 0.18);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    inset 0.3px 0 0 rgba(255, 255, 255, 0.18),
    inset 0 -10px 20px 0px rgba(115, 179, 240, 0.9),
    inset 0 -60px 60px -10px rgba(3, 83, 221, 0.75);
  position: relative;
  overflow: hidden;
}

@supports (-moz-appearance: none) {
  .glass-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(255, 255, 255, 0.04),
      inset 0 -10px 20px 0px rgba(115, 179, 240, 0.9),
      inset 0 -60px 60px -10px rgba(3, 83, 221, 0.75);
  }
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.48),
    transparent
  );
}

@supports (-moz-appearance: none) {
  .glass-card::before {
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.15),
      transparent
    );
  }
}

.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 390 242' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
  background-size: cover;
  pointer-events: none;
  mix-blend-mode: overlay;
}
/* Text-1 */
.glass-card-title {
  background: linear-gradient(
    135deg,
    #DFEEFA 0%,
    #DFEEFA 15%,
    #60EFFF 40%,
    #60EFFF 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: 
    drop-shadow(0px 3px 0.3px rgba(0, 0, 0, 0.5))
    drop-shadow(0px 0px 6px rgba(96, 239, 255, 0.6));
}
/* Text-2 */
.glass-card-title-2 {
  background: linear-gradient(
    135deg,
    #6FB1FC 0%,
    #6FB1FC 15%,
    #6FB1FC 40%,
    #4364F7 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: 
    drop-shadow(0px 3px 0.3px rgba(0, 0, 0, 0.5))
    drop-shadow(0px 0px 6px rgba(57, 84, 202, 0.6));
}
/* Text-3 */
.glass-card-title-3 {
  background: linear-gradient(
    135deg,
    #FFFFFF 0%,
    #D0D0D0 15%,
    #D0D0D0 40%,
    #D0D0D0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: 
    drop-shadow(0px 3px 0.3px rgba(0, 0, 0, 0.5))
    drop-shadow(0px 0px 6px rgba(208, 208, 208, 0.6));
}
/* Price shadow */
.price-shadow {
    filter: drop-shadow(0px 3px 0.3px rgba(0, 0, 0, 0.5));
}
.price-shadow-none {
    filter: drop-shadow(0px 3px 0.3px rgba(0, 0, 0, 0.2));
}

/* Обводка у колонки прайса центарльной */
.center-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  top: auto;
  left: 0;
  width: 1px;
  height: 80%;
  background: #4D5158;
}

.center-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 80%;
  background: #4D5158;
}

@media (max-width: 1024px) {
  .center-card::before,
  .center-card::after {
    display: none;
  }
}