/* =====================================
   TWIN FLAME VISIONS
   AFFILIATE SIGNUP PAGE
   FIRE & ICE THEME
===================================== */


* {
    box-sizing:border-box;
}


body {

    margin:0;

    min-height:100vh;

    background:
    linear-gradient(
        rgba(5,5,15,.88),
        rgba(25,5,25,.92)
    ),
    url("../images/celestialbackground.png");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    color:#ffffff;

    font-family:'Poppins', sans-serif;

}



/* MAIN WRAPPER */

.affiliate-signup-wrapper {

    max-width:1100px;

    margin:auto;

    padding:70px 20px;

}




/* =====================================
   HERO
===================================== */


.affiliate-hero {

    text-align:center;

    padding:55px 35px;

    border-radius:24px;


    background:

    linear-gradient(
        135deg,
        rgba(255,50,50,.15),
        rgba(120,220,255,.12)
    );


    border:

    1px solid rgba(255,255,255,.18);


    box-shadow:

    0 25px 60px rgba(0,0,0,.55);


    backdrop-filter:blur(12px);

}



.affiliate-hero h1 {

    margin-top:25px;

    font-family:'Playfair Display',serif;

    font-size:48px;

    line-height:1.15;

    color:#ffffff;


    text-shadow:

    0 0 20px rgba(255,60,60,.45);

}



.affiliate-hero p {

    max-width:700px;

    margin:20px auto 0;

    font-size:18px;

    color:#e8e8e8;

}



.affiliate-image {

    display:none;

}





/* =====================================
   FORM CARD
===================================== */


.affiliate-form-card {


    margin-top:40px;


    padding:45px;


    border-radius:24px;


    background:

    rgba(10,10,20,.82);


    border:

    1px solid rgba(255,255,255,.15);


    box-shadow:

    0 20px 50px rgba(0,0,0,.6);


    backdrop-filter:blur(15px);

}




.affiliate-form-card h2 {


    text-align:center;


    font-family:'Playfair Display',serif;


    font-size:34px;


    margin-bottom:35px;


    color:#ffffff;


}





/* FORM */

#affiliate-signup-form {


    display:flex;

    flex-direction:column;

    gap:14px;

}



#affiliate-signup-form label {


    margin-top:12px;


    font-family:'Montserrat',sans-serif;


    font-weight:600;


    color:#f4f4f4;


}





#affiliate-signup-form input,

#affiliate-signup-form textarea {


    width:100%;


    padding:15px;


    border-radius:12px;


    border:

    1px solid rgba(255,255,255,.25);


    background:

    rgba(255,255,255,.08);


    color:white;


    font-size:15px;


    font-family:'Poppins',sans-serif;


}



#affiliate-signup-form input::placeholder,

#affiliate-signup-form textarea::placeholder {


    color:#bbbbbb;

}




#affiliate-signup-form input:focus,

#affiliate-signup-form textarea:focus {


    outline:none;


    border-color:#ff3b5c;


    box-shadow:

    0 0 15px rgba(255,59,92,.35);


}





/* CHECKBOX */

.checkbox {


    display:flex;

    align-items:center;

    gap:10px;


    margin-top:20px;


    font-size:14px;


}



.checkbox input {


    width:auto!important;

}





/* BUTTON */


#affiliate-submit {


    margin-top:25px;


    padding:16px;


    border:none;


    border-radius:30px;


    cursor:pointer;


    font-family:'Montserrat',sans-serif;


    font-weight:700;


    font-size:17px;


    color:white;



    background:

    linear-gradient(

        135deg,

        #ff1744,

        #dd11aa

    );



    box-shadow:

    0 10px 30px rgba(255,23,68,.35);


    transition:.3s ease;

}




#affiliate-submit:hover {


    transform:translateY(-3px);


    box-shadow:

    0 15px 40px rgba(255,23,68,.55);


}





/* =====================================
   BENEFITS
===================================== */


.affiliate-benefits {


    margin-top:50px;


    padding:40px;


    border-radius:24px;


    background:

    rgba(10,10,20,.75);


    border:

    1px solid rgba(255,255,255,.15);


}



.affiliate-benefits h2 {


    text-align:center;


    font-family:'Playfair Display',serif;


    font-size:36px;


}





.benefit-grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));


    gap:25px;


    margin-top:30px;

}





.benefit-card {


    padding:30px;


    border-radius:18px;


    background:

    linear-gradient(

        145deg,

        rgba(255,50,50,.15),

        rgba(120,220,255,.12)

    );


    border:

    1px solid rgba(255,255,255,.18);


}




.benefit-card h3 {


    font-family:'Playfair Display',serif;


    color:#ffffff;


    font-size:24px;


}




.benefit-card p {


    color:#dddddd;

}




/* MOBILE */


@media(max-width:700px){


    .affiliate-hero h1 {

        font-size:34px;

    }


    .affiliate-form-card,

    .affiliate-benefits {

        padding:25px;

    }


}

.affiliate-success-message {

margin-top:25px;

padding:25px;

background:
linear-gradient(
135deg,
rgba(255,215,0,.15),
rgba(221,17,170,.15)
);

border:1px solid #d4af37;

border-radius:18px;

text-align:center;

box-shadow:
0 0 25px rgba(212,175,55,.25);

}


.affiliate-success-message h3 {

font-family:'Playfair Display', serif;

color:#ffd700;

font-size:26px;

margin-bottom:10px;

}


.affiliate-success-message p {

font-family:'Poppins', sans-serif;

color:white;

line-height:1.6;

}