/* Elementor Widget Styles */
.elementor-memberstack .memberstack-login-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.elementor-memberstack .memberstack-login-form .form-group {
  margin-bottom: 15px;
}

.elementor-memberstack .memberstack-login-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: inherit;
}

.elementor-memberstack .memberstack-login-form input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
}

.elementor-memberstack .memberstack-login-form input:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 1px #0073aa;
}

.elementor-memberstack .memberstack-button {
  width: 100%;
  padding: 10px 20px;
  background: #0073aa;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.elementor-memberstack .memberstack-button:hover {
  background: #005177;
}

.elementor-memberstack .memberstack-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 767px) {
  .elementor-memberstack .memberstack-login-form {
    padding: 15px;
  }

  .elementor-memberstack .memberstack-button {
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* Error State */
.elementor-memberstack .memberstack-login-form input.error {
  border-color: #dc3232;
}

/* Success State */
.elementor-memberstack .memberstack-login-form input.success {
  border-color: #46b450;
}

/* Loading State */
.elementor-memberstack .memberstack-button.loading {
  opacity: 0.7;
  cursor: wait;
}

/* General form styles */
.memberstack-signup-form,
.memberstack-login-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Form groups */
.memberstack-signup-form .form-group,
.memberstack-login-form .form-group {
  margin-bottom: 20px;
}

/* Labels */
.memberstack-signup-form label,
.memberstack-login-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

/* Inputs */
.memberstack-signup-form input,
.memberstack-login-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.memberstack-signup-form input:focus,
.memberstack-login-form input:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
  background: #ffffff;
}

/* Submit buttons */
.memberstack-button {
  width: 100%;
  padding: 12px;
  background: #0073aa;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.3s ease;
  margin-top: 10px;
}

.memberstack-button:hover {
  background: #005a87;
}

.memberstack-login-form .social-login-buttons {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.memberstack-login-form .social-separator {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  width: 100%;
}

.memberstack-login-form .social-separator .social-separator-line {
  flex-grow: 1;
  height: 1px;
  background: #ddd;
}

.memberstack-login-form .social-separator span {
  padding: 0 10px;
  color: #999;
}

/* Social login buttons */
.social-login-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.social-login-button {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: all 0.2s ease;
  margin-bottom: 0 !important;
  /* margin-top: 0 !important; */
}

.social-login-button:before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: inherit;
}

.social-login-button svg {
  color: inherit;
  fill: currentColor;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .memberstack-signup-form,
  .memberstack-login-form {
    padding: 20px;
  }

  .memberstack-signup-form input,
  .memberstack-login-form input {
    padding: 10px;
  }
}

/* Error states */
.memberstack-signup-form input.error,
.memberstack-login-form input.error {
  border-color: #dc3232;
  background-color: #fff6f6;
}

/* Success states */
.memberstack-signup-form input.success,
.memberstack-login-form input.success {
  border-color: #46b450;
  background-color: #f7fff7;
}

/* Add to existing CSS */
.memberstack-signup-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
  background: #f8f9fa;
  min-height: 100px;
  resize: vertical;
}

.memberstack-signup-form textarea:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
  background: #ffffff;
}

.social-login-button {
  width: 100%;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
}

/* Social Login Button Icons */
.social-login-button::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* Hide default icon when using custom icons */
.social-login-button.custom-icon::before {
  display: none;
}

/* Default icons (SVG data URLs) */
.social-login-button.google:not(.custom-icon)::before {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="%23FFFFFF" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="%23FFFFFF" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="%23FFFFFF" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>');
}

.social-login-button.github:not(.custom-icon)::before {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96"><path fill="%23FFFFFF" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/></svg>');
}

.social-login-button.linkedin:not(.custom-icon)::before {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"/></svg>');
}

.social-login-button.facebook:not(.custom-icon)::before {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="%23FFFFFF" d="M36 18c0-9.941-8.059-18-18-18S0 8.059 0 18c0 8.984 6.582 16.444 15.188 17.784v-12.57H10.61V18h4.578v-3.967c0-4.518 2.691-7.012 6.805-7.012 1.971 0 4.033.352 4.033.352v4.433h-2.271c-2.238 0-2.934 1.388-2.934 2.811V18h4.992l-.797 5.213h-4.195v12.57C29.418 34.444 36 26.984 36 18z"/></svg>');
}

/* Button Style Updates */
.social-login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Google */
.social-login-button.google {
  background-color: #4285f4;
  color: #ffffff;
}

.social-login-button.google:hover {
  background-color: #3367d6;
}

/* GitHub */
.social-login-button.github {
  background-color: #24292f;
  color: #ffffff;
}

.social-login-button.github:hover {
  background-color: #1a1e23;
}

/* LinkedIn */
.social-login-button.linkedin {
  background-color: #0a66c2;
  color: #ffffff;
}

.social-login-button.linkedin:hover {
  background-color: #004182;
}

/* Facebook */
.social-login-button.facebook {
  background-color: #1877f2;
  color: #ffffff;
}

.social-login-button.facebook:hover {
  background-color: #0d5dc4;
}

/* Modal Button Styles */
.elementor-memberstack .memberstack-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #0073aa;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
}

.elementor-memberstack .memberstack-button:hover {
  background-color: #005177;
  color: #ffffff;
}

.elementor-memberstack .memberstack-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.3);
}

.elementor-memberstack .memberstack-button.elementor-animation-grow {
  transition: transform 0.3s ease;
}

.elementor-memberstack .memberstack-button.elementor-animation-grow:hover {
  transform: scale(1.05);
}

/* Profile Form Styles */
.memberstack-profile-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.memberstack-profile-form .form-group {
  margin-bottom: 20px;
}

.memberstack-profile-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.memberstack-profile-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.memberstack-profile-form input:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
  background: #ffffff;
}

.memberstack-profile-form .memberstack-button {
  width: 100%;
  padding: 12px;
  background: #0073aa;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease;
  margin-top: 10px;
  text-align: center;
}

.memberstack-profile-form .memberstack-button:hover {
  background: #005a87;
}

/* Password field specific styles */
.memberstack-profile-form input[type="password"] {
  letter-spacing: 0.1em;
}

/* Spacing between multiple forms */
.memberstack-profile-form-wrapper + .memberstack-profile-form-wrapper {
  margin-top: 30px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .memberstack-profile-form {
    padding: 20px;
  }

  .memberstack-profile-form input {
    padding: 10px;
  }

  .memberstack-profile-form .memberstack-button {
    padding: 10px;
    font-size: 14px;
  }
}

/* Status messages */
.memberstack-profile-form .form-message {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
  font-size: 14px;
  display: none;
}

.memberstack-profile-form .form-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  display: block;
}

.memberstack-profile-form .form-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  display: block;
}

/* Loading state */
.memberstack-profile-form.loading .memberstack-button {
  opacity: 0.7;
  cursor: wait;
}

.memberstack-profile-form.loading .memberstack-button::after {
  content: "...";
  display: inline-block;
  margin-left: 4px;
  animation: loading-dots 1s infinite;
}

@keyframes loading-dots {
  0%,
  20% {
    content: ".";
  }
  40%,
  60% {
    content: "..";
  }
  80%,
  100% {
    content: "...";
  }
}

.memberstack-form-title {
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
}

.elementor-widget-memberstack_login .memberstack-form-title,
.elementor-widget-memberstack_signup .memberstack-form-title,
.elementor-widget-memberstack_profile .memberstack-form-title,
.elementor-widget-memberstack_forgot_password .memberstack-form-title {
  color: #333;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .memberstack-form-title {
    font-size: 24px;
    margin-bottom: 15px;
  }
}

/* Elementor Widget Styles */
.elementor-memberstack .memberstack-login-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.elementor-memberstack .memberstack-login-form .form-group {
  margin-bottom: 15px;
}

.elementor-memberstack .memberstack-login-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: inherit;
}

.elementor-memberstack .memberstack-login-form input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
}

.elementor-memberstack .memberstack-login-form input:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 1px #0073aa;
}

.elementor-memberstack .memberstack-button {
  width: 100%;
  padding: 10px 20px;
  background: #0073aa;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.elementor-memberstack .social-separator {
  display: flex;
  align-items: center;
  margin: 12px 0;
  width: 100%;
}

.elementor-memberstack .social-separator .social-separator-line {
  flex-grow: 1;
  height: 1px;
  background: #ddd;
}

.elementor-memberstack .social-separator span {
  padding: 0 10px;
  color: #999;
}

.elementor-memberstack .memberstack-button:hover {
  background: #005177;
}

.elementor-memberstack .memberstack-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 767px) {
  .elementor-memberstack .memberstack-login-form {
    padding: 15px;
  }

  .elementor-memberstack .memberstack-button {
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* Error State */
.elementor-memberstack .memberstack-login-form input.error {
  border-color: #dc3232;
}

/* Success State */
.elementor-memberstack .memberstack-login-form input.success {
  border-color: #46b450;
}

/* Loading State */
.elementor-memberstack .memberstack-button.loading {
  opacity: 0.7;
  cursor: wait;
}

/* Profile Form Styles */
.memberstack-profile-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.memberstack-profile-form .form-group {
  margin-bottom: 20px;
}

.memberstack-profile-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.memberstack-profile-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.memberstack-profile-form input:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
  background: #ffffff;
}

.memberstack-profile-form .memberstack-button {
  width: 100%;
  padding: 12px;
  background: #0073aa;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease;
  margin-top: 10px;
  text-align: center;
}

.memberstack-profile-form .memberstack-button:hover {
  background: #005a87;
}

/* Password field specific styles */
.memberstack-profile-form input[type="password"] {
  letter-spacing: 0.1em;
}

/* Loading indicator */
.memberstack-profile-form .loading-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.memberstack-profile-form .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0073aa;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Plan Card Styles */
.memberstack-plan-card {
  max-width: 400px;
  margin: 0 auto 20px;
  text-align: center;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.memberstack-plan-card .card-inner {
  padding: 30px;
}

.memberstack-plan-card .plan-title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.memberstack-plan-card .plan-description {
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.memberstack-plan-card .plan-price {
  margin: 25px 0;
}

.memberstack-plan-card .price-amount {
  font-size: 48px;
  font-weight: 700;
  color: #333;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.memberstack-plan-card .price-currency {
  font-size: 28px;
  font-weight: 600;
  position: relative;
  top: -4px;
}

.memberstack-plan-card .price-number {
  font-size: 48px;
}

.memberstack-plan-card .price-period {
  color: #666;
  font-size: 16px;
  display: block;
  margin-top: 5px;
  font-weight: normal;
}

.memberstack-plan-card .plan-features {
  list-style: none;
  padding: 0;
  margin: 25px 0;
  text-align: left;
}

.memberstack-plan-card .plan-features li {
  margin-bottom: 12px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.memberstack-plan-card .feature-icon {
  color: #0073aa;
  margin-right: 10px;
  flex-shrink: 0;
}

/* Forgot Password Styles */
.memberstack-forgot-password-steps {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.step-indicator {
  font-size: 14px;
  margin-right: 20px;
  opacity: 0.7;
  font-weight: 500;
}

.step-indicator.active {
  opacity: 1;
  font-weight: 600;
}

.memberstack-forgot-password-form {
  display: none;
  max-width: 400px;
  margin: 0 auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.memberstack-forgot-password-form.active {
  display: block;
}

.memberstack-forgot-password-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.memberstack-forgot-password-form input:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
  background: #ffffff;
}

.memberstack-success-message {
  display: none;
  max-width: 400px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.success-content {
  padding: 30px;
  text-align: center;
}

.success-content .memberstack-button {
  margin-top: 20px;
  width: 100%;
  display: inline-block;
}

.elementor-memberstack .memberstack-signup-form .memberstack-button:hover,
.elementor-memberstack .memberstack-login-form .memberstack-button:hover {
  background: #005177;
  color: #ffffff;
}

/* Social login button hover states - ensuring consistency */
.elementor-memberstack .social-login-button:hover,
.elementor-memberstack .memberstack-signup-form .social-login-button:hover {
  opacity: 0.9;
  transition: all 0.2s ease;
}

/* Consistent styling for form fields on hover */
.elementor-memberstack .memberstack-login-form input:hover,
.elementor-memberstack .memberstack-signup-form input:hover {
  border-color: #0073aa;
  background-color: #fafafa;
}

/* Add consistent focus states */
.elementor-memberstack .memberstack-login-form input:focus,
.elementor-memberstack .memberstack-signup-form input:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 1px #0073aa;
  background-color: #ffffff;
}

/* Unified form field styles for all Memberstack forms */
.memberstack-signup-form input,
.memberstack-login-form input,
.memberstack-profile-form input,
.memberstack-forgot-password-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.memberstack-signup-form input:focus,
.memberstack-login-form input:focus,
.memberstack-profile-form input:focus,
.memberstack-forgot-password-form input:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
  background: #ffffff;
}

/* Form group spacing */
.memberstack-signup-form .form-group,
.memberstack-login-form .form-group,
.memberstack-profile-form .form-group,
.memberstack-forgot-password-form .form-group {
  margin-bottom: 20px;
}

/* Consistent label styling */
.memberstack-signup-form label,
.memberstack-login-form label,
.memberstack-profile-form label,
.memberstack-forgot-password-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

/* Consistent button styling */
.memberstack-button {
  width: 100%;
  padding: 12px;
  background: #0073aa;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.3s ease;
  margin-top: 10px;
}

.memberstack-button:hover {
  background: #005a87;
}

.memberstack-editor-notice {
  background-color: #f7f7f7;
  border: 1px dashed #ccc;
  padding: 10px;
  margin-bottom: 15px;
  text-align: center;
  font-weight: bold;
  color: #555;
}

.memberstack-gated-container {
  position: relative;
  min-height: 100px;
}

.elementor-editor-active .memberstack-gated-container {
  border: 1px dashed #7652e2;
  padding: 15px;
}

/* Memberstack Gated Content Container styles */
.memberstack-gated-container {
  position: relative;
  border: 2px solid #7652e2;
  padding: 15px;
  border-radius: 5px;
  background-color: rgba(118, 82, 226, 0.05);
  min-height: 100px;
}

.memberstack-editor-notice {
  background-color: #7652e2;
  color: white;
  padding: 10px 15px;
  margin-bottom: 15px;
  text-align: center;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.memberstack-editor-notice h4 {
  margin: 5px 0;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.memberstack-editor-notice p {
  margin: 5px 0;
  font-size: 14px;
}

.memberstack-editor-notice .dashicons {
  font-size: 24px;
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

.memberstack-container-placeholder {
  padding: 20px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px dashed #7652e2;
  border-radius: 5px;
  font-style: italic;
  color: #7652e2;
}

.elementor-editor-active .memberstack-gated-container:before {
  content: "Memberstack Gated Content";
  position: absolute;
  top: -20px;
  left: 10px;
  background: #7652e2;
  color: white;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 3px;
  z-index: 9;
}