/* ===========================
   GLOBAL
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

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

    background:linear-gradient(
    135deg,
    #F4F8FF,
    #EEF4FF,
    #FAFCFF);

    min-height:100vh;

    margin:0;

    overflow-x:hidden;
}


/* ===========================
   CONTAINER
=========================== */

.signup-container{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:80px 20px;

}


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

.signup-card{

    width:440px;

    max-width:90%;

    padding:26px 32px;
    background:rgba(255,255,255,.92);

    backdrop-filter:blur(20px);

    border-radius:30px;

    border:1px solid rgba(255,255,255,.8);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}
/* ===========================
   HEADING
=========================== */

.heading{

    text-align:center;

    margin-bottom:20px;

}

.heading h1{

    font-size:24px;

    margin-bottom:6px;

}

.heading p{

    font-size:14px;

}


/* ===========================
   INPUTS
=========================== */

.input-box{

    position:relative;

    margin-bottom:12px;

}

.input-box input{

    width:100%;

    height:50px;

    border:none;

    outline:none;

    border:1px solid #D9E4F2;

    border-radius:16px;

    padding-left:48px;

    padding-right:45px;

    font-size:14px;

    transition:.3s;

    background:#fff;

}

.input-box input:focus{

    border-color:#2D5BFF;

    box-shadow:0 0 0 4px rgba(45,91,255,.12);

}

.input-box i{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:#7A8CA5;

    font-size:20px;

}

.input-box i:first-child{

    left:18px;

}

.right-icon{

    right:18px;

    cursor:pointer;

}


/* ===========================
   TERMS
=========================== */

.terms{

    margin:6px 0 18px;

    font-size:13px;

    color:#555;

}

.terms label{

    display:flex;

    align-items:flex-start;

    gap:8px;

    line-height:1.5;

}

.terms input{

    margin-top:3px;

}

.terms a{

    color:#2D5BFF;

    text-decoration:none;

    font-weight:600;

}


/* ===========================
   BUTTON
=========================== */

.signup-btn{

    width:100%;

    height:50px;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:16px;

    background:linear-gradient(
    135deg,
    #2D5BFF,
    #4F7CFF);

    color:#fff;

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.signup-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 12px 30px rgba(45,91,255,.35);

}


/* ===========================
   DIVIDER
=========================== */

.divider{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:15px 0;

    position:relative;

}

.divider::before,
.divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#DDE7F5;

}

.divider span{

    margin:0 16px;

    font-size:13px;

    color:#8A95A5;

}


/* ===========================
   GOOGLE BUTTON
=========================== */

.google-btn{

    width:100%;

    height:50px;

    border-radius:16px;

    border:1px solid #DCE6F5;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:500;

    transition:.3s;

}

.google-btn:hover{

    background:#F6F9FF;

}

.google-btn img{

    width:20px;

}


/* ===========================
   BOTTOM
=========================== */

.bottom-text{

    text-align:center;

    margin-top:18px;

    font-size:14px;

    color:#666;

}

.bottom-text a{

    color:#2D5BFF;

    text-decoration:none;

    font-weight:600;

}


/* ===========================
   ANIMATION
=========================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:600px){

    body {
        padding: 10px;
        overflow-x: hidden;
    }

    .signup-card{

        width:95%;
        max-width: 100%;

        padding:20px 16px;

        border-radius:22px;

        transform: translateY(0);

        margin: 15px auto;

    }

    .heading h1{

        font-size:24px;

    }

    .form-row,
    .name-row,
    .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .input-box input,
    .role-select,
    .submit-btn,
    .btn {
        min-height: 44px;
        font-size: 15px;
    }

}

/* ===========================================
        PREMIUM BACKGROUND
=========================================== */

.background{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:-5;

}


/* ===============================
      Blueprint
================================ */

.background::before{

    content:"";

    position:absolute;

    inset:0;

   background:url("../images/floorplan.png")
center center;

background-size:cover;

background-repeat:no-repeat;

    opacity:.85;

    animation:blueprintFloat 18s ease-in-out infinite;

}


/* ===============================
      Gradient Overlay
================================ */

.background::after{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        135deg,
        rgba(15,23,42,.70),
        rgba(15,23,42,.75),
        rgba(15,23,42,.80)
    );
}


/* ===============================
      BLURRED CIRCLES
================================ */

.circle{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    animation:float 14s ease-in-out infinite;

}

.circle1{

    width:280px;
    height:280px;

    background:#4F7CFF;

    opacity:.18;

    top:-70px;
    left:-70px;

}

.circle2{

    width:350px;
    height:350px;

    background:#89B5FF;

    opacity:.14;

    bottom:-120px;
    right:-100px;

    animation-delay:2s;

}

.circle3{

    width:180px;
    height:180px;

    background:#3A63FF;

    opacity:.10;

    top:40%;
    left:70%;

}


/* ===============================
       PARTICLES
================================ */

.particles span{

    position:absolute;

    width:4px;
    height:4px;

    background:#7FA4FF;

    border-radius:50%;

    opacity:.45;

    animation:particleMove 15s linear infinite;

}

.particles span:nth-child(1){

    top:12%;
    left:20%;

}

.particles span:nth-child(2){

    top:25%;
    left:72%;

}

.particles span:nth-child(3){

    top:65%;
    left:15%;

}

.particles span:nth-child(4){

    top:80%;
    left:48%;

}

.particles span:nth-child(5){

    top:55%;
    left:88%;

}

.particles span:nth-child(6){

    top:38%;
    left:40%;

}

.particles span:nth-child(7){

    top:72%;
    left:67%;

}

.particles span:nth-child(8){

    top:18%;
    left:88%;

}


/* ===============================
      CARD GLOW
================================ */

.signup-card{

    position:relative;

}

.signup-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:30px;

    background:

    linear-gradient(
    135deg,
    rgba(255,255,255,.45),
    rgba(255,255,255,.08));

    z-index:-1;

    filter:blur(20px);

}


/* ===============================
      ANIMATIONS
================================ */

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(0px);

    }

}


@keyframes blueprintFloat{

    0%{

        transform:translateY(0px) scale(1);

    }

    50%{

        transform:translateY(-8px) scale(1.02);

    }

    100%{

        transform:translateY(0px) scale(1);

    }

}


@keyframes particleMove{

    0%{

        transform:translateY(0px);

        opacity:.2;

    }

    50%{

        transform:translateY(-18px);

        opacity:.8;

    }

    100%{

        transform:translateY(0px);

        opacity:.2;

    }

}
.signup-card{

    transition:.35s ease;

}

.signup-card{

    transform:translateY(-60px);

}