/* ============================================
   KASTOMIZACIYA VIDZHETA VERIFIKACII TELEFONA
   Pereopisyvaem stili pod brendinq proekta
   ============================================ */

/* Osnovnoy konteyner vidzheta - lovim vse varianty */
#phone-verify-widget,
#phone-verify-widget > div,
[class*="verify-widget"],
[class*="Verify-widget"],
[id*="verify-widget"],
.verify-widget-container {
  font-family: 'Montserrat', 'Arial', sans-serif !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  max-width: 100% !important;
}

/* Novoe okno vidzheta */
#phone-verify-widget .idgtl-verify-widget-component-container {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
}

#phone-verify-widget .widget-component {
  width: 100% !important;
  max-width: 420px !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 32px !important;
}

#phone-verify-widget .pick-channel-section {
  width: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

#phone-verify-widget .channels {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Zagolovok */
.verify-widget-title,
.verify-widget-header,
#phone-verify-widget .section-title span {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

#phone-verify-widget .section-title span strong {
  display: inline !important;
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 26px !important;
}

#phone-verify-widget .channels {
  margin-top: 20px !important;
}

#phone-verify-widget .widget-loading,
#phone-verify-widget [class*="loading"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#phone-verify-widget .widget-loading *,
#phone-verify-widget [class*="loading"] * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#phone-verify-widget [class*="loader"],
#phone-verify-widget [class*="Loader"],
#phone-verify-widget [class*="preloader"],
#phone-verify-widget [class*="Preloader"] {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

#phone-verify-widget [class*="loader"] *,
#phone-verify-widget [class*="Loader"] *,
#phone-verify-widget [class*="preloader"] *,
#phone-verify-widget [class*="Preloader"] * {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

#phone-verify-widget .confirmation-message-component span {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#phone-verify-widget .confirmation-message-component span::after {
  content: "ПРОВЕРЬТЕ КОД ИЗ СООБЩЕНИЯ" !important;
  display: block !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Opisanie teksta */
.verify-widget-description,
.verify-widget-text {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Knopki vybora metoda verifikacii */
.verify-widget-method-button,
.verify-widget-channel-button,
#phone-verify-widget .button-channel-component {
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: all 0.3s ease !important;
  padding: 16px 22px !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.verify-widget-method-button:hover,
.verify-widget-channel-button:hover,
#phone-verify-widget .button-channel-component:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) !important;
}

.verify-widget-method-button.active,
.verify-widget-channel-button.active,
#phone-verify-widget .button-channel-component.active {
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#phone-verify-widget .button-channel-component .channel-name span {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* Osnovnaya knopka deystviya */
.verify-widget-button,
.verify-widget-submit-button,
button[class*="verify"] {
  background: linear-gradient(135deg, #003631 0%, #1ec000 100%) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif !important;
  text-transform: none !important;
  box-shadow: 0 10px 30px rgba(30, 192, 0, 0.35) !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.verify-widget-button:hover,
.verify-widget-submit-button:hover {
  box-shadow: 0 12px 35px rgba(30, 192, 0, 0.45) !important;
  transform: translateY(-2px) !important;
}

.verify-widget-button:active,
.verify-widget-submit-button:active {
  transform: translateY(0) !important;
}

.verify-widget-button:disabled,
.verify-widget-submit-button:disabled {
  background: #cccccc !important;
  box-shadow: none !important;
  opacity: 0.6 !important;
}

/* Pole vvoda koda */
.verify-widget-code-input,
.verify-widget-input,
input[class*="verify"] {
  border-radius: 10px !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: 'Courier New', monospace !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  text-align: center !important;
  letter-spacing: 8px !important;
  transition: all 0.3s ease !important;
}

#phone-verify-widget input {
  background: transparent !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
}

#phone-verify-widget input:focus {
  border-color: #1ec000 !important;
  box-shadow: 0 0 0 3px rgba(30, 192, 0, 0.1) !important;
}

/* Skryt' placeholder s nomerom telefona */
#phone-verify-widget input::placeholder,
#phone-verify-widget input::-webkit-input-placeholder,
#phone-verify-widget input::-moz-placeholder,
#phone-verify-widget input:-ms-input-placeholder,
#phone-verify-widget input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1 !important;
}

/* Skryt' hint/label s nomerom */
#phone-verify-widget label,
#phone-verify-widget [class*="hint"],
#phone-verify-widget [class*="helper"],
#phone-verify-widget [class*="label"] {
  color: rgba(255, 255, 255, 0.7) !important;
}

.verify-widget-code-input:hover,
.verify-widget-input:hover {
  border-color: rgba(30, 192, 0, 0.6) !important;
}

.verify-widget-code-input:focus,
.verify-widget-input:focus {
  border-color: #1ec000 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30, 192, 0, 0.1) !important;
}

.verify-widget-code-input.error,
.verify-widget-input.error {
  border-color: #d32f2f !important;
  animation: shake 0.3s ease !important;
}

/* Animaciya oshibki */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

/* Soobshchenie ob oshibke */
.verify-widget-error,
.verify-widget-error-message {
  padding: 12px !important;
  margin: 12px 0 !important;
  background: #ffebee !important;
  color: #d32f2f !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  text-align: center !important;
  border-left: 4px solid #d32f2f !important;
}

/* Soobshchenie ob uspekhe */
.verify-widget-success,
.verify-widget-success-message {
  padding: 12px !important;
  margin: 12px 0 !important;
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  text-align: center !important;
  border-left: 4px solid #1ec000 !important;
}

/* Taymer povtornoy otpravki */
.verify-widget-resend,
.verify-widget-retry {
  text-align: center !important;
  margin-top: 16px !important;
  font-size: 14px !important;
  color: #666666 !important;
  font-family: 'Montserrat', sans-serif !important;
}

.verify-widget-resend-button,
.verify-widget-retry-button {
  background: none !important;
  border: none !important;
  color: #1ec000 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin-left: 4px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.verify-widget-resend-button:hover,
.verify-widget-retry-button:hover {
  color: #003631 !important;
  transform: none !important;
}

.verify-widget-resend-button:disabled,
.verify-widget-retry-button:disabled {
  color: #999999 !important;
  text-decoration: none !important;
  cursor: not-allowed !important;
}

/* Taymer */
.verify-widget-timer {
  font-weight: 700 !important;
  color: #1ec000 !important;
}

/* Indikator zagruzki */
.verify-widget-loading,
.verify-widget-spinner-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
	gap: 8px !important;
	padding: 0 !important;
	min-height: 80px !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

#phone-verify-widget .widget-loading,
#phone-verify-widget [class*="loading"] {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

#phone-verify-widget [class*="loading"] > * {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.verify-widget-spinner {
	border: 3px solid rgba(255, 255, 255, 0.25) !important;
	border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Skryvat' logotip i-Digital (esli nuzhen) */
/* Raskommentiruyte esli khrotite skryt' logotip */
/*
.verify-widget-logo,
.verify-widget-branding {
  display: none !important;
}
*/

/* Konteyner kapchi */
.verify-widget-captcha,
.verify-widget-captcha-container {
  margin: 20px 0 !important;
  display: flex !important;
  justify-content: center !important;
}

/* Vse vlozhennye elementy vidzheta - ubiraem lishniye otstup i bordery */
#phone-verify-widget * {
  box-sizing: border-box !important;
}

#phone-verify-widget > div > div {
  margin: 0 !important;
  padding: 16px 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Knopki metoda (SMS/Telegram) */
#phone-verify-widget button[type="button"],
#phone-verify-widget .channel-button,
#phone-verify-widget [class*="channel"] button {
  margin: 8px 4px !important;
  padding: 14px 24px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid rgba(0, 54, 49, 0.2) !important;
  color: #003631 !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

#phone-verify-widget button[type="button"]:hover,
#phone-verify-widget .channel-button:hover {
  border-color: #1ec000 !important;
  background: rgba(30, 192, 0, 0.05) !important;
  transform: translateY(-2px) !important;
}

#phone-verify-widget button[type="button"]:active,
#phone-verify-widget button[type="button"][class*="active"],
#phone-verify-widget button[type="button"][class*="selected"] {
  background: linear-gradient(135deg, #003631 0%, #1ec000 100%) !important;
  border-color: #1ec000 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(30, 192, 0, 0.3) !important;
}

/* Adaptivnost' dlya mobil'nykh ustroystv */
@media (max-width: 480px) {
  .verify-widget-container {
    padding: 16px !important;
  }
  
  .verify-widget-code-input,
  .verify-widget-input {
    font-size: 20px !important;
    letter-spacing: 6px !important;
  }
  
  .verify-widget-title,
  .verify-widget-header {
    font-size: 18px !important;
  }
  
  .verify-widget-button,
  .verify-widget-submit-button {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
  
  #phone-verify-widget button[type="button"] {
    margin: 6px 2px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
}