/* ==========================================================
   Author Register Page
========================================================== */

.author-register-page{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #fff8f0 0%,
        #fff4eb 35%,
        #fff7f5 100%
    );

}

/* ==========================================================
   Floating Background
========================================================== */

.author-register-page::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-180px;

    right:-150px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(255,157,0,.18),
    transparent 70%);

    filter:blur(10px);

}

.author-register-page::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    bottom:-150px;

    left:-150px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(255,94,98,.14),
    transparent 70%);

    filter:blur(10px);

}

/* ==========================================================
   Brand Panel
========================================================== */

.author-brand-panel{

    position:relative;

    z-index:5;

    padding-right:60px;

}

.brand-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    background:#ffffff;

    color:#ff7a18;

    font-weight:700;

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

}

.author-brand-panel h1{

    font-size:58px;

    font-weight:800;

    line-height:1.15;

    margin:28px 0;

    color:#172033;

}

.author-brand-panel h1 span{

    background:

    linear-gradient(
        135deg,
        #ff9d00,
        #ff7a18,
        #ff5e62
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
background-clip:text;
}

.author-brand-panel p{

    font-size:18px;

    line-height:1.8;

    color:#606b7d;

    margin-bottom:35px;

}

/* ==========================================================
   Features
========================================================== */

.brand-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.brand-features div{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    border-radius:18px;

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

    backdrop-filter:blur(16px);

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:.35s;

}

.brand-features div:hover{

    transform:translateY(-6px);

}

.brand-features i{

    width:54px;

    height:54px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    background:

    linear-gradient(
        135deg,
        #ff9d00,
        #ff7a18,
        #ff5e62
    );

}

.brand-features span{

    font-weight:600;

    color:#1f2d3d;

}

/* ==========================================================
   Card
========================================================== */

.register-card{

    position:relative;

    border:none;

    border-radius:26px;

    overflow:hidden;

    backdrop-filter:blur(20px);

    background:

    rgba(255,255,255,.88);

    box-shadow:

    0 30px 80px rgba(0,0,0,.12);

}

.register-card::before{

    content:"";

    position:relative;

    inset:0;

    padding:1px;

    border-radius:26px;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.9),

        rgba(255,255,255,.15)

    );

     /* Standard */
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

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

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

/* ==========================================================
   Typography
========================================================== */

.register-card h2{

    font-size:32px;

    font-weight:700;

    color:#16213e;

}

.register-card p{

    color:#7a8596;

}

/* ==========================================================
   Form
========================================================== */

.form-label{

    font-size:14px;

    font-weight:600;

    color:#3f4b5d;

}

.form-control{

    height:52px;

    border-radius:14px;

    border:1px solid #e8e8e8;

    padding:12px 18px;

    font-size:15px;

    transition:.3s;

    box-shadow:none;

}

.form-control:focus{

    border-color:#ff7a18;

    box-shadow:

    0 0 0 .2rem rgba(255,122,24,.15);

}

.form-check-label{

    font-size:14px;

}

/* ==========================================================
   Button
========================================================== */

.register-btn{

    height:54px;

    border:none;

    border-radius:14px;

    font-size:16px;

    font-weight:700;

    color:#fff;

    background:

    linear-gradient(

        135deg,

        #ff9d00,

        #ff7a18,

        #ff5e62

    );

    transition:.35s;

}

.register-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 18px 35px rgba(255,122,24,.35);

}

/* ==========================================================
   Links
========================================================== */

.register-card a{

    color:#ff7a18;

    text-decoration:none;

}

.register-card a:hover{

    text-decoration:underline;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:991px){

.author-brand-panel{

display:none;

}

.author-register-page{

padding:35px 0;

}

.register-card{

margin:auto;

}

}

@media(max-width:576px){

.register-card .card-body{

padding:28px 22px;

}

.register-card h2{

font-size:28px;

}

.form-control{

height:48px;

}

.register-btn{

height:50px;

}

}


.strength{

    margin-top:8px;

    font-size:13px;

    font-weight:600;

}

.weak{

    color:#dc3545;

}

.medium{

    color:#ff9800;

}

.strong{

    color:#198754;

}

.match{

    margin-top:8px;

    font-size:13px;

    font-weight:600;

}

.match.success{

    color:#198754;

}

.match.error{

    color:#dc3545;

}