/* ==========================================================
   GLOBEVEST REGISTER
   STYLE.CSS
   PART 1
   Reset • Variables • Layout • Logo • Card
========================================================== */

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

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

/* ==========================
   VARIABLES
========================== */

:root{

    --bg:#18051f;
    --card:#261132;
    --card-2:#2b1538;

    --border:rgba(255,255,255,.07);

    --white:#ffffff;
    --text:#bbaec8;

    --yellow:#FDB913;
    --orange:#FFB726;
    --purple:#C256FF;
    --purple-dark:#8A37FF;

    --radius:24px;

    --transition:.35s ease;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--bg);

    color:#fff;

    overflow-x:hidden;

    min-height:100vh;

}

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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--purple);

    border-radius:50px;

}

/* ==========================
   LINKS
========================== */

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

input{

    font-family:inherit;

}

/* ==========================
   PAGE
========================== */

.register-page{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:60px 20px;

    position:relative;

}

/* ==========================
   BACKGROUND GLOW
========================== */

.bg-glow{

    position:fixed;

    border-radius:50%;

    filter:blur(120px);

    z-index:-1;

    opacity:.25;

}

.glow-1{

    width:450px;

    height:450px;

    top:-180px;

    left:-120px;

    background:#b243ff;

}

.glow-2{

    width:500px;

    height:500px;

    bottom:-200px;

    right:-150px;

    background:#ffbf3d;

    opacity:.12;

}

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

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:30px;

    font-size:24px;

    font-weight:800;

}

.logo-icon{

    width:36px;

    height:36px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #FDB913,
        #C256FF
    );

    color:#18051f;

    font-size:16px;

}

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

.register-card{

    width:100%;

    max-width:470px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:30px;

    padding:38px;

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

    position:relative;

}

.register-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    padding:1px;

    background:linear-gradient(
        rgba(255,255,255,.08),
        rgba(255,255,255,0)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

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

.card-header{

    text-align:center;

    margin-bottom:34px;

}

.card-header h1{

    font-size:44px;

    font-weight:800;

    margin-bottom:10px;

    letter-spacing:-1px;

}

.card-header p{

    color:var(--text);

    font-size:17px;

}

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

@media(max-width:600px){

    .register-card{

        padding:28px;

        border-radius:24px;

    }

    .card-header h1{

        font-size:34px;

    }

    .logo{

        font-size:20px;

    }

}

@media(max-width:420px){

    .register-page{

        padding:30px 16px;

    }

    .register-card{

        padding:22px;

    }

    .card-header h1{

        font-size:30px;

    }

}

/* ==========================================================
   PART 2
   FORM ELEMENTS
========================================================== */

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

form{

    width:100%;

}

.form-group{

    margin-bottom:22px;

}

/* ==========================
   LABELS
========================== */

.form-group label{

    display:block;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    color:#d9cde3;

    margin-bottom:10px;

    text-transform:uppercase;

}

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

.form-group input{

    width:100%;

    height:56px;

    padding:0 18px;

    border-radius:18px;

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

    background:#311a41;

    color:#fff;

    font-size:16px;

    outline:none;

    transition:.35s ease;

}

.form-group input::placeholder{

    color:#8e7d9d;

}

.form-group input:hover{

    border-color:rgba(255,255,255,.12);

}

.form-group input:focus{

    border-color:#b94eff;

    background:#351d46;

    box-shadow:
        0 0 0 4px rgba(194,86,255,.12);

}

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

.password-field{

    position:relative;

}

.password-field input{

    padding-right:55px;

}

.toggle-password{

    position:absolute;

    top:50%;

    right:16px;

    transform:translateY(-50%);

    width:36px;

    height:36px;

    border-radius:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#9b8ca9;

    transition:.3s;

}

.toggle-password:hover{

    color:#fff;

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

}

/* ==========================
   CHECKBOX
========================== */

.checkbox-group{

    margin:10px 0 28px;

}

.checkbox{

    display:flex;

    align-items:flex-start;

    gap:14px;

    cursor:pointer;

    user-select:none;

}

.checkbox input{

    display:none;

}

.checkmark{

    width:22px;

    height:22px;

    border-radius:7px;

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

    background:#311a41;

    position:relative;

    flex-shrink:0;

    transition:.3s;

}

.checkbox input:checked + .checkmark{

    background:linear-gradient(
        135deg,
        #FDB913,
        #C256FF
    );

    border:none;

}

.checkbox input:checked + .checkmark::after{

    content:"✓";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-52%);

    color:#16051f;

    font-size:13px;

    font-weight:800;

}

.checkbox-text{

    color:#b9a9c8;

    font-size:14px;

    line-height:1.6;

}

.checkbox-text a{

    color:#FDB913;

    font-weight:600;

}

.checkbox-text a:hover{

    text-decoration:underline;

}

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

.submit-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #FDB913 0%,
        #C256FF 100%
    );

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:#18051f;

    font-size:20px;

    font-weight:700;

    cursor:pointer;

    transition:.35s ease;

    box-shadow:
        0 10px 30px rgba(194,86,255,.18);

}

.submit-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(194,86,255,.25);

}

.submit-btn:active{

    transform:scale(.98);

}

.submit-btn i{

    transition:.3s;

}

.submit-btn:hover i{

    transform:translateX(5px);

}

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

.footer-text{

    margin-top:24px;

    color:#9b8ca9;

    font-size:15px;

    text-align:center;

}

.footer-text a{

    color:#FDB913;

    font-weight:600;

}

.footer-text a:hover{

    text-decoration:underline;

}

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

@media (max-width:600px){

    .form-group input{

        height:52px;

        font-size:15px;

    }

    .submit-btn{

        height:54px;

        font-size:18px;

    }

}

@media (max-width:420px){

    .form-group{

        margin-bottom:18px;

    }

    .form-group label{

        font-size:11px;

    }

    .checkbox-text{

        font-size:13px;

    }

    .submit-btn{

        font-size:17px;

    }

}

/* ==========================================================
   PART 3
   ANIMATIONS • BACKGROUND • UTILITIES
========================================================== */

/* ==========================
   FLOATING CARD ANIMATION
========================== */

.register-card{

    animation:cardFade .8s ease forwards;

}

@keyframes cardFade{

    from{

        opacity:0;

        transform:translateY(30px) scale(.98);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

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

.logo{

    animation:logoDrop .8s ease;

}

@keyframes logoDrop{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.form-group{

    animation:fadeUp .6s ease forwards;

    opacity:0;

}

.form-group:nth-child(1){animation-delay:.1s;}
.form-group:nth-child(2){animation-delay:.2s;}
.form-group:nth-child(3){animation-delay:.3s;}
.form-group:nth-child(4){animation-delay:.4s;}
.form-group:nth-child(5){animation-delay:.5s;}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================
   BACKGROUND PATTERN
========================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background-image:

        radial-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:28px 28px;

    pointer-events:none;

    z-index:-2;

}

/* ==========================
   GLOW BORDER
========================== */

.register-card:hover{

    border-color:rgba(194,86,255,.18);

}

/* ==========================
   INPUT AUTOFILL
========================== */

input:-webkit-autofill{

    -webkit-box-shadow:
        0 0 0 1000px #311a41 inset !important;

    -webkit-text-fill-color:#fff !important;

}

/* ==========================
   FOCUS RING
========================== */

*:focus-visible{

    outline:2px solid rgba(194,86,255,.35);

    outline-offset:2px;

}

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

::selection{

    background:#FDB913;

    color:#1a0822;

}

/* ==========================
   PLACEHOLDER
========================== */

::placeholder{

    opacity:1;

}

/* ==========================
   DISABLED
========================== */

button:disabled{

    opacity:.6;

    cursor:not-allowed;

}

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

.submit-btn.loading{

    pointer-events:none;

    opacity:.85;

}

.submit-btn.loading span{

    visibility:hidden;

}

.submit-btn.loading::after{

    content:"";

    position:absolute;

    width:22px;

    height:22px;

    border-radius:50%;

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

    border-top-color:#18051f;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================
   RIPPLE EFFECT
========================== */

.submit-btn{

    position:relative;

    overflow:hidden;

}

.submit-btn::before{

    content:"";

    position:absolute;

    inset:0;

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

    opacity:0;

    transition:.3s;

}

.submit-btn:hover::before{

    opacity:1;

}

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

@media(max-width:768px){

    .logo{

        margin-bottom:22px;

    }

    .register-card{

        width:100%;

    }

}

@media(max-width:480px){

    .logo{

        font-size:18px;

    }

    .logo-icon{

        width:32px;

        height:32px;

        border-radius:10px;

    }

    .footer-text{

        font-size:13px;

        padding:0 10px;

    }

}

/* ==========================================================
   END OF STYLE.CSS
========================================================== */