/* Updated version of blocks/login-form/style.css */

.memberstack-login-form,
.memberstack-login-form-preview {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}

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

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

.memberstack-login-form input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

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

.memberstack-button {
  width: 100%;
  padding: 10px;
  background: #0073aa;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 15px;
}

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

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

.memberstack-login-form-editor {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 4px;
}

/* Social Login Buttons */
.social-login-buttons {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-login-button {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: background-color 0.2s ease;
}

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

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

.social-login-button.google:hover {
  background-color: #4285f4;
  color: white;
}

.social-login-button.google:before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%234285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/><path fill="%2334A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/><path fill="%23FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z"/><path fill="%23EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/></svg>');
}

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

.social-login-button.facebook:hover {
  background-color: #1877f2;
  color: white;
}

.social-login-button.facebook:before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%231877F2" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>');
}

/* LinkedIn Button */
.social-login-button.linkedin {
  border-color: #0077b5;
  color: #0077b5;
}

.social-login-button.linkedin:hover {
  background-color: #0077b5;
  color: white;
}

.social-login-button.linkedin:before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%230077B5" 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 0h.003z"/></svg>');
}

/* GitHub Button */
.social-login-button.github {
  border-color: #333;
  color: #333;
}

.social-login-button.github:hover {
  background-color: #333;
  color: white;
}

.social-login-button.github:before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23333" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.009-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.835c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.138 20.168 22 16.419 22 12c0-5.523-4.477-10-10-10z"/></svg>');
}

.social-login-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Responsive Styles */
@media (max-width: 480px) {
  .memberstack-login-form,
  .memberstack-login-form-preview {
    margin: 10px;
    padding: 15px;
  }

  .social-login-button {
    font-size: 14px;
  }
}

/* Custom Palette Colors */
.memberstack-color-palette {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.color-option {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  cursor: pointer;
  border-radius: 50%;
  transition: box-shadow 0.2s ease;
}

.color-option:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}