/* --- 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: left; margin-bottom: 2rem; font-family: 'Poppins'; }
.pixi-header h2 { font-size: 2rem; font-weight: 700; margin: 0 0 0.5rem 0; }
.pixi-header p { font-size: 1rem; color: #666; margin: 0; }

/* General animation for elements (unchanged) */
.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: .9rem; border: 1px solid #909090; background-color: #f9f9f9;
    border-radius: 11px; box-sizing: border-box; transition: all 0.2s ease; height: 45px; font-family: 'Poppins';
}
.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; font-family: 'Poppins'; }
.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: #000000 !important; background-color: #000000 !important; border: 1px solid #000000; border-radius: 11px; 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; font-family: 'Poppins'; }
.pixi-footer .pixi-login-prompt a { color: #0d69ff; font-weight: 600; text-decoration: none; }
.btn-text { font-weight: 800; font-size: 18px; font-family: 'Poppins'; }


/* --- 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;
}

/* --- NEW CSS FOR CONFIRMATION FIELD ANIMATION --- */

/* Base hidden state for confirmation fields */
.pixi-form-field.pixi-confirm-field {
    display: none; /* Hidden by default */
    overflow: hidden; /* Hide content when collapsed */
    
    /* Initial physical/visual state when about to be revealed */
    max-height: 0;
    opacity: 0;
    transform: translateY(20px); /* Start point of the slide animation */
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    /* No transitions or animations defined here. JS will control */
}

/* Class applied by JS to trigger the reveal */
.pixi-form-field.pixi-confirm-field.visible-animated {
    display: block; /* Make it visible in flow */
    
    /* End physical/visual state */
    max-height: 200px; /* Expands to full height */
    opacity: 1; /* Fades in */
    transform: translateY(20px); /* Slides up to position */
    margin-bottom: 1rem !important; /* Restore margin */
    padding-top: 0rem !important; /* Restore padding */
    padding-bottom: 2.9rem !important;

    /* Apply the animation here */
    animation: pixi-slide-fade-in 0.6s ease-out forwards !important;
    
    /* Add transitions for smooth max-height/margin/padding changes if any 
    transition: max-height 0.4s ease-out,
                margin-bottom 0.4s ease-out,
                padding-top 0.4s ease-out,
                padding-bottom 0.4s ease-out;*/
}