/* ============================================================
   login.css
   Scoped to login pages via .LoginPage. Loaded from the page,
   not from _Layout.
   ============================================================ */

/* The art hangs off .InnerContent, not .LoginPage: the wrapper only
   grows as tall as the form, so anchoring to it left the flowers
   floating mid-page. .InnerContent runs all the way to the footer. */
/* .BodyContent is a plain block, so .InnerContent only ever grew as
   tall as the form and stopped well short of the footer. Making the
   wrapper a flex column and letting .InnerContent take the leftover
   space is what actually pushes its bottom edge down to the footer. */
.BodyContent:has(.LoginPage) {
    display: flex;
    flex-direction: column;
}

.InnerContent:has(.LoginPage) {
    position: relative;
    overflow: hidden;
    flex: 1 0 auto;
}

.LoginPage {
    position: relative;
    z-index: 1;
    min-height: 60vh;
}

/* .CenteredVertically is display:flex with the default row direction.
   Admin Login has the heading and the panel as two direct children,
   so they were landing side by side. Therapist Login only looked
   right because everything there sits inside one wrapper div. */
.LoginPage.CenteredVertically {
    flex-direction: column;
    justify-content: center;
}

/* The frame art lives in style.css now, hung off <body> so it also
   spans the footer. It used to be duplicated here. */

/* ---------- title above the panel ---------- */
@font-face {
    font-family: 'Keskiyon Lumisade';
    src: url('../fonts/KeskiyonLumisade.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.LoginPage .login-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto 26px;
    max-width: 560px;
}

.LoginPage .login-head h1 {
    font-family: 'Keskiyon Lumisade', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    font-weight: 400 !important;
    font-size: clamp(2.2rem, 5.2vw, 3.6rem) !important;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: center !important;
    margin: 0 0 14px !important;
    color: #17161A !important;
}

.LoginPage .login-head h1 .word-b {
    color: var(--justicePurple);
}

/* ---------- the form panel ---------- */
.LoginPage .Panel,
.LoginPage .LoginPanel {
    border-radius: 0 !important;
}

/* A sheet of paper laid on the page: the same warm tone, lifted by a
   soft shadow and a hairline edge rather than a drawn border. */
.LoginPage .LoginPanel:not(.instructions-panel) {
    background: rgb(247 236 225) !important;
    border: 1px solid rgba(56, 37, 87, .12) !important;
    box-shadow:
        0 1px 2px rgba(56, 37, 87, .08),
        0 12px 28px rgba(56, 37, 87, .14) !important;
    padding: clamp(20px, 2.1vw, 31px) clamp(28px, 3vw, 44px) !important;
}

.LoginPage .LoginPanel .form-control {
    border-radius: 0;
    border: 1px solid rgba(56, 37, 87, .22);
    background: rgba(255, 252, 248, .92);
    padding: 13px 15px;
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}

.LoginPage .LoginPanel .form-control:focus {
    border-color: var(--justicePurple);
    box-shadow: 0 0 0 3px rgba(56, 37, 87, .14);
    outline: none;
}

.LoginPage .LoginPanel .button {
    border-radius: 0;
    width: 100%;
    padding: 15px 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.LoginPage .instructions {
    font-size: 13.5px;
    color: var(--justicePurple) !important;
}

.LoginPage a.instructions:hover {
    color: var(--justiceOrange) !important;
}

.LoginPage .login-sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(23, 22, 26, .72);
}

/* ---------- instructions panel on torn paper ---------- */
.LoginPage .instructions-panel {
    position: relative;
    background-image: url('../images/General/RippedPaper2.png') !important;
    background-size: 100% 100% !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* headroom so the torn edge doesn't cut into the heading */
    padding: clamp(72px, 9vw, 120px) clamp(22px, 2.4vw, 34px) clamp(56px, 6vw, 88px) !important;
    /* follows the torn alpha, so the shadow traces the rip */
    filter: drop-shadow(0 5px 16px rgba(0,0,0,.28));
}

/* The beige tint has to be MASKED to the paper's shape. A plain
   gradient layer paints the element's full rectangle, which is what
   was filling the transparent notches with a visible box. The mask
   clips the tint to exactly the same alpha as the PNG. */
.LoginPage .instructions-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(247 236 225);
    -webkit-mask-image: url('../images/General/RippedPaper2.png');
    mask-image: url('../images/General/RippedPaper2.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
    pointer-events: none;
    z-index: 0;
}

.LoginPage .instructions-panel > * {
    position: relative;
    z-index: 1;
}

/* ---------- instructions content ---------- */
.LoginPage .instr-heading {
    font-family: 'Keskiyon Lumisade', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: center !important;
    color: var(--justicePurple) !important;
    margin: 0 0 var(--space-lg) !important;
}

/* numbered: the order is the actual requirement — no profile, no
   listing; no listing, no search results */
.LoginPage .instr-steps {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    counter-reset: instr;
    display: grid;
    gap: 14px;
}

.LoginPage .instr-steps li {
    counter-increment: instr;
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: var(--space-sm);
    align-items: start;
    font-size: 14.5px;
    line-height: 1.6;
    color: #17161A;
}

.LoginPage .instr-steps li::before {
    content: counter(instr);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--justicePurple);
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.LoginPage .instr-pricing {
    padding-top: 20px;
    border-top: 1px solid rgba(56, 37, 87, .22);
}

.LoginPage .instr-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--justicePurple);
    margin-bottom: 10px;
}

.LoginPage .price-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(56, 37, 87, .22);
    font-size: 14.5px;
    color: #17161A;
}

.LoginPage .price-line:last-child {
    border-bottom: 0;
}

.LoginPage .price-line .amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--justicePurple);
    white-space: nowrap;
}

.LoginPage .price-line.is-free .amount {
    color: var(--justiceOrange);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
}

/* keep the form above the art */
.LoginPage .Panel,
.LoginPage .LoginPanel {
    position: relative;
    z-index: 1;
}



/* ------------------------------------------------------------
   The panels still inherited the old glass treatment from .Panel in
   style.css — a live blur(5px) behind them. The UI is paper now, so
   nothing should be diffusing the page underneath.
   ------------------------------------------------------------ */
.LoginPage .Panel,
.LoginPage .LoginPanel,
.LoginPage .instructions-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ------------------------------------------------------------
   On a phone the last price line — the BIPOC one — ended up sitting
   on the sheet's torn bottom edge. The extra 20px lifts it clear.
   ------------------------------------------------------------ */
@media (max-width: 860px) {
    .LoginPage .instructions-panel {
        padding-bottom: 76px !important;
    }
}


/* ------------------------------------------------------------
   The .instructions class on the panel centres everything inside it,
   which left the numbered steps centred against their own number
   badges. Scoped to this page so the therapist login panel keeps the
   centring it already had.
   ------------------------------------------------------------ */
.ReferralSignupPage .instr-steps,
.ReferralSignupPage .instr-steps li {
    text-align: left;
}