/* =========================================================
   BOOK A FRIEND — LOGIN PAGE
========================================================= */

.login-page{
    min-height:100vh;
    background:#000;
}

.login-main{
    padding-top:var(--header-h);
    background:#000;
}

.login-hero-section{
    position:relative;
    min-height:calc(100svh - var(--header-h));
    isolation:isolate;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Dark photographic background behind the login information */
.login-bg{
    position:absolute;
    inset:0;
    z-index:-2;
    background-image:url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=2200&q=90");
    background-size:cover;
    background-position:center;
    transform:scale(1.035);
}

.login-bg-overlay{
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(circle at 50% 42%, rgba(10,22,35,.24), rgba(0,0,0,.72) 72%),
        linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.76));
}

.login-center{
    width:100%;
    min-height:calc(100svh - var(--header-h));
    padding:70px 24px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-panel{
    width:min(450px,100%);
    padding:38px 38px 31px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:24px;
    background:rgba(255,255,255,.96);
    box-shadow:0 35px 90px rgba(0,0,0,.42);
    text-align:left;
}

.login-brand-mark{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    margin-bottom:21px;
    border-radius:15px;
    background:#edf7fd;
    color:var(--blue);
    font-size:27px;
    font-weight:800;
}

.login-eyebrow{
    display:block;
    margin-bottom:12px;
    color:var(--blue);
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
}

.login-panel h1{
    margin:0;
    font-size:clamp(38px,4.5vw,54px);
    line-height:1.01;
    font-weight:800;
    letter-spacing:-.065em;
}

.login-panel h1 em{
    color:var(--blue);
    font-style:normal;
}

.login-description{
    margin:17px 0 24px;
    color:#626a73;
    font-size:14px;
    line-height:1.75;
}

.login-google{
    min-height:54px;
    background:#fff;
}

.login-divider{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:22px 0;
}

.login-divider::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:1px;
    background:#e2e4e7;
}

.login-divider span{
    position:relative;
    z-index:1;
    padding:0 12px;
    background:#fff;
    color:#9298a0;
    font-size:11px;
}

.login-back-button{
    min-height:51px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d9dde1;
    border-radius:12px;
    color:#242a30;
    font-size:12px;
    font-weight:800;
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.login-back-button:hover{
    background:#f5f6f7;
    border-color:#c9cdd1;
    transform:translateY(-1px);
}

.login-note{
    margin:20px 2px 0;
    color:#858b92;
    font-size:9.5px;
    line-height:1.7;
    text-align:center;
}

.login-note a{text-decoration:underline}

@media(max-width:900px){
    .login-hero-section{
        min-height:calc(100svh - 64px);
    }

    .login-center{
        min-height:calc(100svh - 64px);
        padding:55px 20px;
    }
}

@media(max-width:600px){
    .login-bg{
        background-position:center;
    }

    .login-bg-overlay{
        background:
            radial-gradient(circle at 50% 45%, rgba(10,22,35,.16), rgba(0,0,0,.78) 72%),
            linear-gradient(180deg, rgba(0,0,0,.56), rgba(0,0,0,.80));
    }

    .login-center{
        padding:34px 15px;
    }

    .login-panel{
        padding:27px 21px 23px;
        border-radius:19px;
    }

    .login-brand-mark{
        width:45px;
        height:45px;
        margin-bottom:16px;
        border-radius:12px;
        font-size:22px;
    }

    .login-eyebrow{font-size:8px}

    .login-panel h1{font-size:39px}

    .login-description{
        margin-top:14px;
        font-size:12px;
        line-height:1.7;
    }

    .login-google,
    .login-back-button{
        min-height:48px;
    }
}