/* ==========================================================
   Author Forgot Password Page
========================================================== */

.author-forgot-password-page{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #fff8f0 0%,
        #fff5ed 40%,
        #fffaf7 100%
    );

}

/* ==========================================================
   Background Glow
========================================================== */

.author-forgot-password-page::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-180px;

    right:-170px;

    border-radius:50%;

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

    filter:blur(12px);

    pointer-events:none;

}

.author-forgot-password-page::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-150px;

    bottom:-170px;

    border-radius:50%;

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

    filter:blur(12px);

    pointer-events:none;

}

/* ==========================================================
   Left Panel
========================================================== */

.author-brand-panel{

    position:relative;

    z-index:5;

    padding-right:60px;

}

.brand-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    background:#fff;

    color:#ff7a18;

    font-weight:700;

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

}

.author-brand-panel h1{

    font-size:56px;

    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:#677384;

    margin-bottom:35px;

}

/* ==========================================================
   Feature Cards
========================================================== */

.brand-features{

    display:grid;

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

    gap:18px;

}

.brand-features div{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    border-radius:18px;

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

    backdrop-filter:blur(16px);

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

    transition:.35s;

}

.brand-features div:hover{

    transform:translateY(-6px);

}

.brand-features i{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#fff;

    font-size:22px;

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

}

.brand-features span{

    font-weight:600;

    color:#1f2d3d;

}

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

.forgot-password-card{

    position:relative;

    border:none;

    border-radius:26px;

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

    backdrop-filter:blur(20px);

    box-shadow:0 30px 80px rgba(0,0,0,.12);

    overflow:hidden;

}

.forgot-password-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:26px;

    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.90),
        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;

    pointer-events:none;

}

.forgot-password-card .card-body{

    position:relative;

    z-index:2;

}

/* ==========================================================
   Icon
========================================================== */

.forgot-icon{

    width:90px;

    height:90px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#fff;

    font-size:38px;

    background:

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

    box-shadow:0 20px 40px rgba(255,122,24,.35);

}

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

.forgot-password-card h2{

    color:#172033;

    font-size:34px;

    font-weight:700;

}

.forgot-password-card p{

    color:#6c7787;

}

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

.form-label{

    font-size:14px;

    font-weight:600;

    color:#425164;

}

.form-control{

    height:54px;

    border-radius:14px;

    border:1px solid #e7e7e7;

    padding:12px 18px;

    box-shadow:none;

    transition:.3s;

}

.form-control:focus{

    border-color:#ff7a18;

    box-shadow:0 0 0 .2rem rgba(255,122,24,.15);

}

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

.forgot-btn{

    height:54px;

    border:none;

    border-radius:14px;

    color:#fff;

    font-size:16px;

    font-weight:700;

    background:

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

    transition:.35s;

}

.forgot-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 35px rgba(255,122,24,.35);

}

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

.forgot-password-card a{

    color:#ff7a18;

    text-decoration:none;

    font-weight:600;

}

.forgot-password-card a:hover{

    text-decoration:underline;

}

/* ==========================================================
   Alerts
========================================================== */

.alert{

    border:none;

    border-radius:14px;

}

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

@media(max-width:991px){

.author-brand-panel{

display:none;

}

.author-forgot-password-page{

padding:40px 0;

}

.forgot-password-card{

margin:auto;

}

}

@media(max-width:576px){

.forgot-password-card .card-body{

padding:30px 22px;

}

.forgot-password-card h2{

font-size:28px;

}

.form-control{

height:50px;

}

.forgot-btn{

height:50px;

}

}

/* ==========================================================
Focused Input
========================================================== */

.focused .form-label{

    color:#ff7a18;

    transition:.3s;

}

.form-control.is-valid{

    border-color:#198754;

    box-shadow:0 0 0 .2rem rgba(25,135,84,.12);

}

.form-control.is-invalid{

    border-color:#dc3545;

}

.form-control.is-invalid:focus{

    box-shadow:0 0 0 .2rem rgba(220,53,69,.12);

}