/*====================================================
SWAPSTORE GROUP
SIGNUP PAGE
====================================================*/

/*==============================
GOOGLE FONT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
RESET
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

/*==============================
COLORS
==============================*/

:root{

    --primary:#0B4F9C;
    --secondary:#2F80ED;
    --success:#27AE60;
    --danger:#DC3545;

    --dark:#1F2937;
    --gray:#6B7280;

    --white:#FFFFFF;
    --background:#F4F8FC;

    --shadow:0 15px 40px rgba(0,0,0,.08);

    --radius:18px;

}

/*==============================
BODY
==============================*/

body{

    background:linear-gradient(180deg,#F8FBFF,#EDF5FF);

    color:var(--dark);

    min-height:100vh;

    overflow-x:hidden;

    padding-top:100px;

    padding-bottom:40px;

    position:relative;

}

/*==============================
BACKGROUND EFFECTS
==============================*/

body::before{

    content:"";

    position:fixed;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(47,128,237,.15);

    filter:blur(70px);

    z-index:-1;

}

body::after{

    content:"";

    position:fixed;

    width:350px;

    height:350px;

    right:-120px;

    bottom:-120px;

    border-radius:50%;

    background:rgba(39,174,96,.12);

    filter:blur(70px);

    z-index:-1;

}

/*==============================
HEADER
==============================*/

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 6%;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    box-shadow:0 5px 25px rgba(0,0,0,.05);

    z-index:9999;

}

/*==============================
LOGO
==============================*/

.logo-area{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo-area img{

    width:60px;

    height:60px;

    object-fit:contain;

    filter:drop-shadow(0 0 10px rgba(47,128,237,.35));

}

.logo-area h2{

    color:var(--primary);

    font-size:24px;

    font-weight:700;

}

.logo-area p{

    color:var(--gray);

    font-size:13px;

}

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

.back-btn{

    text-decoration:none;

    color:#fff;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    padding:12px 24px;

    border-radius:40px;

    transition:.35s;

    font-weight:600;

    box-shadow:0 10px 25px rgba(47,128,237,.25);

}

.back-btn:hover{

    transform:translateY(-3px);

}

.back-btn i{

    margin-right:8px;

}

/*==============================
LAYOUT
==============================*/

.signup-section{

    width:90%;

    max-width:1350px;

    margin:auto;

    display:grid;

    grid-template-columns:470px 1fr;

    gap:70px;

    align-items:center;

}

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

.signup-card{

    background:rgba(255,255,255,.96);

    border-radius:22px;

    padding:40px;

    box-shadow:var(--shadow);

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

}

/*==============================
TITLE
==============================*/

.title{

    margin-bottom:35px;

}

.title h2{

    color:var(--primary);

    font-size:34px;

    margin-bottom:10px;

}

.title p{

    color:var(--gray);

    line-height:1.8;

}

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

.input-group{

    margin-bottom:22px;

}

.input-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    font-size:15px;

    color:var(--dark);

}

.input-group label i{

    color:var(--secondary);

    margin-right:8px;

}

.input-group input{

    width:100%;

    height:54px;

    border:1px solid #D8E3EF;

    border-radius:12px;

    padding:0 18px;

    outline:none;

    font-size:15px;

    transition:.3s;

    background:#fff;

}

.input-group input:focus{

    border-color:var(--secondary);

    box-shadow:0 0 0 4px rgba(47,128,237,.10);

}

/*==============================
PASSWORD
==============================*/

.password-box{

    position:relative;

}

.password-box span{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:var(--gray);

    transition:.3s;

}

.password-box span:hover{

    color:var(--primary);

}

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

.register-btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 12px 28px rgba(47,128,237,.25);

    margin-top:10px;

}

.register-btn:hover{

    transform:translateY(-3px);

}

.register-btn i{

    margin-right:10px;

}

/*==============================
LOGIN LINK
==============================*/

.login-link{

    margin-top:30px;

    text-align:center;

    color:var(--gray);

    font-size:15px;

}

.login-link a{

    text-decoration:none;

    color:var(--primary);

    font-weight:700;

}

.login-link a:hover{

    color:var(--secondary);

}

/*====================================================
SIGNUP IMAGE
====================================================*/

.signup-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.signup-image img{

    width:100%;

    max-width:700px;

    animation:floatImage 5s ease-in-out infinite;

    transition:.4s;

}

.signup-image img:hover{

    transform:scale(1.03);

}

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

/*====================================================
SUCCESS MESSAGE
====================================================*/

.success{

    background:#EAF9F0;

    color:var(--success);

    border-left:5px solid var(--success);

    padding:15px 18px;

    border-radius:12px;

    margin-bottom:25px;

    font-size:15px;

    line-height:1.7;

    animation:fadeIn .4s ease;

}

/*====================================================
ERROR MESSAGE
====================================================*/

.error{

    background:#FDEEEE;

    color:var(--danger);

    border-left:5px solid var(--danger);

    padding:15px 18px;

    border-radius:12px;

    margin-bottom:25px;

    font-size:15px;

    line-height:1.7;

    animation:fadeIn .4s ease;

}

/*====================================================
FOOTER
====================================================*/

footer{

    width:100%;

    text-align:center;

    padding:25px;

    margin-top:60px;

    color:var(--gray);

    font-size:14px;

}

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

.signup-card{

    transition:.35s;

}

.signup-card:hover{

    transform:translateY(-6px);

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

}

/*====================================================
INPUT HOVER
====================================================*/

.input-group input:hover{

    border-color:var(--secondary);

}

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

.register-btn:active{

    transform:scale(.98);

}

.register-btn:disabled{

    cursor:not-allowed;

    opacity:.7;

}

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

.register-btn.loading{

    pointer-events:none;

}

.register-btn.loading::after{

    content:"";

    width:18px;

    height:18px;

    margin-left:10px;

    display:inline-block;

    border:3px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*====================================================
SCROLLBAR
====================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EDF4FB;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(var(--primary),var(--secondary));

    border-radius:20px;

}

/*====================================================
TEXT SELECTION
====================================================*/

::selection{

    background:var(--secondary);

    color:#fff;

}

/*====================================================
FADE IN
====================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.signup-card,
.signup-image{

    animation:fadeIn .7s ease;

}

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

@media (max-width:1100px){

    .signup-section{

        grid-template-columns:1fr;

        gap:50px;

    }

    .signup-card{

        max-width:600px;

        width:100%;

        margin:auto;

    }

    .signup-image{

        order:-1;

    }

    .signup-image img{

        max-width:450px;

    }

}

/*====================================================
MOBILE
====================================================*/

@media (max-width:768px){

    body{

        padding-top:85px;

        padding-bottom:30px;

    }

    header{

        height:80px;

        padding:0 20px;

    }

    .logo-area img{

        width:48px;

        height:48px;

    }

    .logo-area h2{

        font-size:20px;

    }

    .logo-area p{

        display:none;

    }

    .back-btn{

        padding:10px 16px;

        font-size:14px;

    }

    .back-btn i{

        margin-right:5px;

    }

    .signup-section{

        width:95%;

        grid-template-columns:1fr;

        gap:35px;

    }

    .signup-card{

        padding:30px 22px;

    }

    .title{

        text-align:center;

    }

    .title h2{

        font-size:28px;

    }

    .title p{

        font-size:15px;

    }

    .signup-image img{

        max-width:320px;

    }

    .register-btn{

        height:54px;

    }

}

/*====================================================
SMALL MOBILE
====================================================*/

@media (max-width:480px){

    header{

        padding:0 15px;

    }

    .logo-area{

        gap:10px;

    }

    .logo-area img{

        width:42px;

        height:42px;

    }

    .logo-area h2{

        font-size:17px;

    }

    .back-btn{

        padding:9px 14px;

        font-size:13px;

    }

    .signup-card{

        padding:25px 18px;

        border-radius:18px;

    }

    .title h2{

        font-size:24px;

    }

    .title p{

        font-size:14px;

    }

    .input-group{

        margin-bottom:18px;

    }

    .input-group label{

        font-size:14px;

    }

    .input-group input{

        height:50px;

        font-size:14px;

        padding:0 15px;

    }

    .register-btn{

        height:50px;

        font-size:15px;

    }

    .login-link{

        font-size:14px;

    }

    .signup-image img{

        max-width:260px;

    }

    footer{

        font-size:13px;

        padding:20px 15px;

    }

}

/*====================================================
LARGE DESKTOP
====================================================*/

@media (min-width:1600px){

    .signup-section{

        max-width:1500px;

    }

    .signup-card{

        padding:50px;

    }

    .title h2{

        font-size:38px;

    }

}

/*====================================================
ACCESSIBILITY
====================================================*/

input:focus,
button:focus,
a:focus{

    outline:3px solid rgba(47,128,237,.25);

    outline-offset:3px;

}

/*====================================================
SMOOTH TRANSITIONS
====================================================*/

a,
button,
input,
.signup-card,
.signup-image img,
.back-btn{

    transition:all .3s ease;

}

/*====================================================
DISABLE IMAGE SELECTION
====================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}

/*====================================================
AUTOFILL FIX
====================================================*/

input:-webkit-autofill{

    -webkit-box-shadow:0 0 0px 1000px #ffffff inset;

    -webkit-text-fill-color:#1F2937;

}

/*====================================================
END OF FILE
====================================================*/

/*====================================================
TOAST NOTIFICATION
====================================================*/

.toast{

    position:fixed;

    top:105px;

    right:25px;

    min-width:320px;

    max-width:420px;

    background:#fff;

    border-radius:14px;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    z-index:99999;

    animation:toastIn .4s ease;

}

.toast.success{

    border-left:5px solid #27AE60;

}

.toast.error{

    border-left:5px solid #DC3545;

}

.toast i{

    font-size:26px;

}

.toast.success i{

    color:#27AE60;

}

.toast.error i{

    color:#DC3545;

}

.toast-content{

    flex:1;

}

.toast-content h4{

    margin-bottom:4px;

    font-size:16px;

}

.toast-content p{

    font-size:14px;

    color:#666;

    line-height:1.5;

}

.toast-close{

    cursor:pointer;

    color:#888;

    font-size:18px;

}

.toast-hide{

    animation:toastOut .35s forwards;

}

@keyframes toastIn{

    from{

        opacity:0;

        transform:translateX(100%);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes toastOut{

    to{

        opacity:0;

        transform:translateX(120%);

    }

}

@media(max-width:768px){

    .toast{

        left:15px;

        right:15px;

        min-width:auto;

        width:auto;

        top:90px;

    }

}