/* Custom Login Form Styles - Force Override All Elementor Styles */
.custom-login-form-container {
  max-width: 400px !important;
  margin: 50px auto !important;
  padding: 30px !important;
  background: #f7f7f7 !important;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.custom-login-form-container label {
  font-weight: bold !important;
  font-family: inherit !important;
  color: inherit !important;
  margin: 0 !important;
}

.auth-method {
  transition: all 0.3s ease !important;
}

.auth-method:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.input-field {
  transition: border-color 0.3s ease !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.input-field:focus {
  border-color: var(--hayllo-violet) !important;
  outline: none !important;
  box-shadow: none !important;
}

.floating-label {
  transition: all 0.3s ease !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 1 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.input-field:focus + .floating-label,
.input-field:not(:placeholder-shown) + .floating-label {
  transform: translateY(-24px) scale(0.85) !important;
  background-color: white !important;
  padding: 0 4px !important;
  color: var(--hayllo-violet) !important;
}

.phone-input-container {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.country-code {
  width: 80px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

.phone-number {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

.tab-button {
  transition: all 0.3s ease !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.tab-button.active {
  border-bottom: 2px solid var(--hayllo-violet) !important;
  color: var(--hayllo-violet) !important;
}

/* Universal selectors to override any Elementor interference */
*[class*='custom-login'] {
  box-sizing: border-box !important;
}

/* Force all form elements within login container */
.custom-login-form-container input,
.custom-login-form-container select,
.custom-login-form-container button,
.custom-login-form-container label,
.custom-login-form-container div {
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.custom-login-form-container input {
  background-color: white !important;
  border: 1px solid #d1d5db !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  outline: none !important;
}

.custom-login-form-container button {
  cursor: pointer !important;
  border: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  text-align: center !important;
  vertical-align: middle !important;
  user-select: none !important;
  outline: none !important;
}

.custom-login-form-container select {
  background-color: white !important;
  border: 1px solid #d1d5db !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  outline: none !important;
  appearance: menulist !important;
}

/* Force Tailwind classes to work */
[class*='tw-'] {
  box-sizing: border-box !important;
}

/* Override any Elementor reset or normalize */
.custom-login-form-container * {
  box-sizing: border-box !important;
}

.custom-login-form-container *:before,
.custom-login-form-container *:after {
  box-sizing: border-box !important;
}