/* =========================================================
   KUZPAY UI — Safe Layer v1.0
   Мягкие улучшения: плавность, фокусы, тени.
   Минимальная специфичность, без изменений макета.
   ========================================================= */

/* 1) Плавный скролл (где поддерживается) */
html { scroll-behavior: smooth; }

/* 2) Сглаживание шрифтов и лёгкий GPU-композитинг */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 3) Базовые анимации для кликабельных элементов */
a, button, .btn, .cmn--btn, .btn-active2, .radio3 a, .radio3 label  {
  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
  will-change: transform, box-shadow;
}

/* 5) Аккуратный focus-visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.cmn--btn:focus-visible,
.btn-active2:focus-visible {
  outline: none;
  box-shadow: 0 0 4px rgba(59,113,254,.15);
  border-color: rgba(59,113,254,.35);
}


/* 6) Карточка оплаты/формы — лёгкое “стекло” */
.find__searchcard {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.68));
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* 7) Чипсы/варианты — чуть выразительнее */
.find__searchcard .gap-3 a,
.radio3 a,
.radio3 label,
.radio3 .btn {
  border-radius: 12px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 10px rgba(0,119,255,.08);
  color: #0a0a0a;
  font-weight: 600;
  white-space: nowrap;
}


/* 7b) Активные варианты */
.find__searchcard .gap-3 a.btn-active2,
.radio3 input[type="radio"]:checked + label,
.radio3 a.btn-active2 {
  background: linear-gradient(135deg, #3b71fe, #00b7ff) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 10px 22px rgba(0,119,255,.35);
}


/* 8) Инпуты — мягкий фон и фокус */
input,
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  box-shadow: 0 6px 16px rgba(0,0,0,.03);
  transition: border-color .25s ease, box-shadow .25s ease;
}

input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(59,113,254,.40) !important;
  box-shadow: 0 0 4px rgba(59,113,254,.12);
  outline: none;
}


/* 9) Главная кнопка оплаты — глубже тень */
.cmn--btn {
  border: 1px solid rgba(255,255,255,.55) !important;
  background: linear-gradient(135deg, #3871fe, #00b7ff) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(0,119,255,.35);
}


/* 10) «Применить промокод» — как основная кнопка */
.promo__hidden-block .btn-active2 {
  border-radius: 12px !important;
  background: linear-gradient(135deg, #3871fe, #00b7ff) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 8px 16px rgba(0,119,255,.25);
}

/* 11) Livewire: плавное show/hide */
[wire\:loading] { will-change: opacity, transform; }

.fade-smooth       { opacity: 1; transition: opacity .25s ease; }
.fade-smooth.hide  { opacity: 0; }

.slide-smooth      { transform: translateY(0); transition: transform .25s ease, opacity .25s ease; opacity: 1; }
.slide-smooth.hide { transform: translateY(6px); opacity: .0; }

/* 12) Мобильный лёгкий фильтр */
@media (max-width: 768px) {
  .find__searchcard, .cmn--btn, .btn, .btn-active2 {
    filter: saturate(1.02) contrast(.99);
  }
}


/* 13) Уважение системной настройки “уменьшить движения” */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* базово — одна колонка, обе строки скрываем/раскрываем через rows */
.promo__hidden-block{
  display: grid !important;
  grid-template-rows: 0fr;        /* закрыто */
  grid-template-columns: 1fr;     /* мобила: одна колонка */
  gap: .5rem !important;
  overflow: hidden;
  transition: grid-template-rows .25s ease;
  contain: layout paint;
  will-change: grid-template-rows;
  box-sizing: border-box;
}

/* открыто */
.promo__hidden-block.is-open{
  grid-template-rows: 1fr;
}
.promo__hidden-block.is-open > *{
  opacity: 1;
}

/* на md повторяем прежнюю логику: инпут — 1fr, кнопка — авто */
@media (min-width: 768px){
  .promo__hidden-block{
    grid-template-columns: 1fr auto;  /* как твой md:flex-row */
    align-items: center;
  }
  .promo__hidden-block button{
    width: auto;                       /* кнопка не растягивается на 100% */
  }
}

/* уважение системной настройки «уменьшить движение» */
@media (prefers-reduced-motion: reduce){
  .promo__hidden-block,
  .promo__hidden-block > *{ transition: none; }
}
/*# sourceMappingURL=/sm/cb4335d1b03e933ed85cb59fffa60cf51f07567ed09831438c60f59afd166464.map */
/* ======== Smooth Performance Engine KUZPAY ======== */

/* Гладкий скролл (iOS + Android) */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Улучшение рендера текста */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Оптимизация GPU */
* {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg {
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0); /* включаем GPU */
}

/* Плавные hover/active (очень мягко) */
a, button, .btn, .radio3 label {
  transition: all .25s cubic-bezier(.25,.1,.25,1);
  will-change: transform, opacity, background;
}

/* Плавные фокусы */
input, textarea {
  transition: box-shadow .25s, border-color .25s;
  will-change: transform;
}

/* Мягкое затухание при смене блоков (Livewire!) */
.fade-smooth {
  transition: opacity .2s ease;
  opacity: 1;
}
.fade-smooth[wire\:loading] {
  opacity: .4;
}