/* --- Modern Styling for ISOLATED Custom Signup Form --- */
.pixi-signup-wrapper { background-color: #ffffff; padding: 3rem 1.5rem; font-family: -apple-system, sans-serif; }
.pixi-signup-wrapper.no-style { background-color: transparent; padding: 0; }
.pixi-card { max-width: 480px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.07); color: #1a1a1a; border: 2px solid rgb(226, 226, 226); }
.pixi-header { text-align: center; margin-bottom: 2rem; }
.pixi-header h2 { font-size: 2.25rem; font-weight: 700; margin: 0 0 0.5rem 0; }
.pixi-header p { font-size: 1rem; color: #666; margin: 0; }

.pixi-animate { opacity: 0; transform: translateY(20px); animation: pixi-slide-fade-in 0.6s ease-out forwards; }
@keyframes pixi-slide-fade-in { to { opacity: 1; transform: translateY(0); } }

.pixi-card .pixi-form-field { margin-bottom: 1rem; position: relative; }
.pixi-card .pixi-form-field label { display: none; }
.pixi-card .pixi-form-field input[type="text"],
.pixi-card .pixi-form-field input[type="email"],
.pixi-card .pixi-form-field input[type="password"] {
    width: 100%; padding: 0.9rem 1rem; font-size: 1rem; border: 1px solid #e0e0e0; background-color: #f9f9f9;
    border-radius: 8px; box-sizing: border-box; transition: all 0.2s ease;
}
.pixi-card .pixi-form-field input::placeholder { color: #999; }
.pixi-card .pixi-form-field input:focus { border-color: #333; background-color: #fff; outline: none; box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.2); }

.pixi-error { background-color: #fbeaea; color: #c0392b; font-size: initial; border: 1px solid #e4a9a9; border-radius: 8px; padding: 0.9rem 1rem; margin-bottom: 1rem; font-weight: 500; display: none; }
.pixi-card.shake-animation { animation: pixi-shake 0.6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes pixi-shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

.pixi-tos-field { text-align: left; font-size: 0.9rem; color: #555; margin-bottom: 1.5rem; }
.pixi-tos-field .pixi-label-inline { display: inline !important; cursor: pointer; }
.pixi-tos-field input[type="checkbox"] { margin-right: 0.5rem; width: auto; }
.pixi-tos-field a { color: #0d69ff; text-decoration: none; font-weight: 500; }
.pixi-tos-field a:hover { text-decoration: underline; }

.pixi-form-submit { margin-top: 1rem; }
.pixi-btn-submit { position: relative; width: 100%; padding: .75rem 1.25rem; font-size: 1rem; line-height: 1.5; font-weight: 600; color: #ffffff !important; background-color: #000000 !important; border: 1px solid #000000; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.pixi-btn-submit:hover { background-color: #333333 !important; border-color: #333333 !important; }

.pixi-btn-submit.is-loading { background-color: #555555 !important; border-color: #555555 !important; cursor: wait; }
.pixi-btn-submit.is-loading .btn-text { visibility: hidden; opacity: 0; }
.pixi-btn-submit.is-loading .btn-spinner { opacity: 1; }
.btn-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: pixi-spin 0.8s linear infinite; opacity: 0; }
@keyframes pixi-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.pixi-footer { text-align: center; margin-top: 2rem; }
.pixi-footer .pixi-login-prompt { color: #666; }
.pixi-footer .pixi-login-prompt a { color: #0d69ff; font-weight: 600; text-decoration: none; }
.btn-text { font-weight: 800; font-size: larger; font-family: 'Avenir-Black'; }


/* --- Animated Gradient Button Style --- */

/* This targets the button when it has BOTH classes */
.pixi-btn-submit.animated-gradient {
  animation: pixi-animateBg 4s linear infinite;
  background-image: linear-gradient(90deg,#fac7cc,#fd327b,#fd8e34,#e0f25a,#fac7cc,#fd327b);
  background-size: 500% 100%;
  border: none; /* The gradient looks best without a border */
}

/* We also need a hover state for the gradient button */
.pixi-btn-submit.animated-gradient:hover {
  /* You can add a subtle effect, like a brightness change, or leave it as is */
  filter: brightness(1.1);
}

/* And a loading state for the gradient button */
.pixi-btn-submit.animated-gradient.is-loading {
    animation: none; /* Stop the gradient animation when loading */
    background-image: none; /* Remove the gradient */
    background-color: #555555 !important;
}

/* We use a unique animation name to avoid conflicts */
@keyframes pixi-animateBg {
  0% { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

/* Error message font */
.pmpro_message.pmpro_error {
font-size: initial;
}