/* ═══════════════════════════════════════════════════════════════════════════
   УЛУЧШЕННЫЙ UI/UX СТРАНИЦЫ ОПЛАТЫ WOOCOMMERCE
   Дата: 2026-08-23
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes payment-pulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(255, 196, 0, 0.7),
                0 8px 32px rgba(255, 196, 0, 0.4);
  }
  50% { 
    box-shadow: 0 0 0 15px rgba(255, 196, 0, 0),
                0 12px 40px rgba(255, 196, 0, 0.5);
  }
}

@keyframes payment-shine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Кнопка Оплатить */
.woocommerce-checkout #payment button[type="submit"],
.woocommerce-checkout #place_order,
.woocommerce-order-pay #order_review button[type="submit"],
.woocommerce button.button.alt,
form.checkout button[type="submit"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-width: 280px !important;
  padding: 20px 48px !important;
  font-family: Outfit, -apple-system, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: 0.03em !important;
  color: #0A0A0A !important;
  background: linear-gradient(135deg, #FFC400 0%, #FFD700 50%, #FFC400 100%) !important;
  background-size: 200% 100% !important;
  border: 2px solid rgba(255, 215, 0, 0.5) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 0 0 0 rgba(255, 196, 0, 0.7),
    0 8px 32px rgba(255, 196, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  animation: payment-pulse 2.5s ease-in-out infinite !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.woocommerce-checkout #payment button[type="submit"]::before,
.woocommerce-checkout #place_order::before,
.woocommerce-order-pay #order_review button[type="submit"]::before,
.woocommerce button.button.alt::before {
  content:  !important;
  position: absolute !important;
  top: 0 !important;
  left: -200% !important;
  width: 200% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent) !important;
  animation: payment-shine 3s infinite !important;
}

.woocommerce-checkout #payment button[type="submit"]::after,
.woocommerce-checkout #place_order::after,
.woocommerce-order-pay #order_review button[type="submit"]::after,
.woocommerce button.button.alt::after {
  content: 💳 !important;
  font-size: 1.4em !important;
  filter: grayscale(0.3) !important;
}

.woocommerce-checkout #payment button[type="submit"]:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-order-pay #order_review button[type="submit"]:hover,
.woocommerce button.button.alt:hover {
  transform: translateY(-4px) scale(1.03) !important;
  background: linear-gradient(135deg, #FFD700 0%, #FFC400 50%, #FFD700 100%) !important;
  box-shadow: 
    0 16px 48px rgba(255, 196, 0, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.4) !important;
  animation: none !important;
}

@media (max-width: 768px) {
  .woocommerce-checkout #payment button[type="submit"],
  .woocommerce-checkout #place_order,
  .woocommerce button.button.alt {
    width: 100% !important;
    padding: 18px 32px !important;
    font-size: 1.125rem !important;
  }
}

/* Более специфичный селектор для кнопки оплаты */
.woocommerce-order-pay #order_review button[type="submit"],
.woocommerce-order-pay .button,
body.woocommerce-order-pay input[type="submit"],
body.woocommerce-order-pay button[type="submit"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-width: 280px !important;
  padding: 20px 48px !important;
  font-family: Outfit, -apple-system, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: 0.03em !important;
  color: #0A0A0A !important;
  background: linear-gradient(135deg, #FFC400 0%, #FFD700 50%, #FFC400 100%) !important;
  background-size: 200% 100% !important;
  border: 2px solid rgba(255, 215, 0, 0.5) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 8px 32px rgba(255, 196, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.woocommerce-order-pay #order_review button[type="submit"]:hover,
.woocommerce-order-pay .button:hover,
body.woocommerce-order-pay input[type="submit"]:hover,
body.woocommerce-order-pay button[type="submit"]:hover {
  transform: translateY(-4px) scale(1.03) !important;
  background: linear-gradient(135deg, #FFD700 0%, #FFC400 50%, #FFD700 100%) !important;
  box-shadow: 
    0 16px 48px rgba(255, 196, 0, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

@media (max-width: 768px) {
  .woocommerce-order-pay #order_review button[type="submit"],
  .woocommerce-order-pay .button,
  body.woocommerce-order-pay input[type="submit"],
  body.woocommerce-order-pay button[type="submit"] {
    width: 100% !important;
    padding: 18px 32px !important;
    font-size: 1.125rem !important;
    min-width: unset !important;
  }
}