/* ==========================================================================
   Partner login. Loaded after freelancer-register.css, which gives it the same page:
   brand column on the left (headline, features, reviews, the person with the laptop) and
   a card on the right. This file only styles what is inside the login card.
   Phone and tablet: plain pixels. From 1100px: multiples of --u (see freelancer-register.css),
   so the card scales with the window like the sign-up page does.
   ========================================================================== */

.hp-lcard { max-width: 560px; margin-inline: auto; padding: 26px 18px 22px; }
.hp-lcard .hp-h2 { margin-top: 0; }
.fl-hp-body .hp-lcard .hp-h2-sub { margin-top: 6px; font-size: 14.5px; }

.hp-flash { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.hp-flash .fl-i { flex: none; margin-top: 1px; }
.hp-flash--success { background: #e8f8ef; color: #166534; }
.hp-flash--error { background: #fff1f3; color: #be123c; }
.hp-flash--info { background: #eef3ff; color: #1d4ed8; }

.hp-lform { display: grid; gap: 18px; margin-top: 24px; }
.hp-lcard .hp-field { height: 52px; border-radius: 10px; }
.hp-lcard .hp-field input { padding-left: 46px; font-size: 16px; }
.hp-lcard .hp-field > .fl-i { left: 15px; }
.hp-field--eye input { padding-right: 52px; }
.hp-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: #4a4f70; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.hp-eye:hover { background: #f3f1fd; color: var(--hp-purple); }
.hp-eye:focus-visible { outline: 2px solid #b9abff; outline-offset: 1px; }
.hp-eye [hidden] { display: none; }
.hp-lcard .hp-err { margin-top: 1px; }

.hp-lrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hp-remember { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; color: var(--hp-ink-2); }
.hp-remember input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.hp-check {
    flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #c9cde0; border-radius: 6px; background: #fff; color: #fff;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hp-check .fl-i { transform: scale(0); transition: transform .2s var(--hp-ease); }
.hp-remember input:checked + .hp-check { background: var(--hp-purple); border-color: var(--hp-purple); }
.hp-remember input:checked + .hp-check .fl-i { transform: scale(1); }
.hp-remember input:focus-visible + .hp-check { box-shadow: 0 0 0 3px rgba(79, 31, 230, .25); }
.fl-hp-body a.hp-forgot { font-size: 14.5px; font-weight: 600; color: var(--hp-purple); text-decoration: underline; text-underline-offset: 3px; }
.fl-hp-body a.hp-forgot:hover { color: var(--hp-purple-d); }
.fl-hp-body a.hp-forgot:focus-visible { outline: 2px solid #b9abff; outline-offset: 3px; border-radius: 4px; }

.hp-lsubmit { width: 100%; height: 54px; border-radius: 10px; font-size: 17px; margin-top: 2px; }
.hp-lsubmit.is-loading { opacity: .8; pointer-events: none; }

.hp-new { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; padding: 18px; border: 1px solid #e8e5f8; border-radius: 12px; background: #f3f1fd; }
.hp-new strong { display: block; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--hp-purple); }
.fl-hp-body .hp-new p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--hp-muted); }
.fl-hp-body .hp-new-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid #b7a9f5; border-radius: 9px;
    background: #fff; color: var(--hp-purple); font: 600 15px/1 var(--fl-font); text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fl-hp-body .hp-new-btn:hover { background: var(--hp-purple); border-color: var(--hp-purple); color: #fff; text-decoration: none; }
.hp-new-btn .fl-i { transition: transform .25s var(--hp-ease); }
.hp-new-btn:hover .fl-i { transform: translateX(3px); }
.fl-hp-body .hp-new-btn:focus-visible { outline: 2px solid #b9abff; outline-offset: 2px; }


@media (min-width: 640px) {
    .hp-lcard { padding: 36px 40px 28px; }
    .hp-new { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
}

@media (min-width: 1100px) {
    .hp-right { align-items: center; }
    .hp-card.hp-lcard { max-width: none; margin-inline: 0; padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(24 * var(--u)); border-radius: calc(16 * var(--u)); }
    .hp-lcard .hp-h2 { font-size: max(22px, calc(34 * var(--u))); line-height: 1.15; }
    .fl-hp-body .hp-lcard .hp-h2-sub { margin-top: calc(8 * var(--u)); font-size: max(11.5px, calc(15.5 * var(--u))); }
    .hp-flash { margin-top: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u)); font-size: max(11px, calc(13.5 * var(--u))); }

    .hp-lform { gap: calc(20 * var(--u)); margin-top: calc(30 * var(--u)); }
    .hp-lcard .hp-group { gap: calc(8 * var(--u)); }
    .hp-lcard .hp-lbl { font-size: max(11.5px, calc(14.5 * var(--u))); }
    .hp-lcard .hp-field { height: calc(54 * var(--u)); min-height: calc(54 * var(--u)); border-radius: calc(10 * var(--u)); }
    .hp-lcard .hp-field > .fl-i { left: calc(16 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
    .hp-lcard .hp-field input { padding: 0 calc(12 * var(--u)) 0 calc(50 * var(--u)); font-size: max(11.5px, calc(15.5 * var(--u))); border-radius: calc(10 * var(--u)); }
    .hp-lcard .hp-field--eye input { padding-right: calc(56 * var(--u)); }
    .hp-eye { right: calc(8 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(8 * var(--u)); }
    .hp-eye .fl-i { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
    .hp-lcard .hp-err { font-size: max(10.5px, calc(12.5 * var(--u))); }

    .hp-remember { gap: calc(10 * var(--u)); font-size: max(11.5px, calc(15 * var(--u))); }
    .hp-remember input, .hp-check { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
    .hp-check { border-radius: calc(6 * var(--u)); }
    .hp-check .fl-i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
    .fl-hp-body a.hp-forgot { font-size: max(11.5px, calc(15 * var(--u))); }

    .hp-lsubmit { height: calc(54 * var(--u)); border-radius: calc(10 * var(--u)); font-size: max(13px, calc(17.5 * var(--u))); margin-top: calc(2 * var(--u)); }
    .hp-lsubmit svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

    .hp-new { margin-top: calc(28 * var(--u)); padding: calc(20 * var(--u)) calc(20 * var(--u)); border-radius: calc(12 * var(--u)); gap: calc(18 * var(--u)); }
    .hp-new strong { font-size: max(12px, calc(16.5 * var(--u))); }
    .fl-hp-body .hp-new p { margin-top: calc(5 * var(--u)); font-size: max(10.5px, calc(14.2 * var(--u))); }
    .fl-hp-body .hp-new-btn { height: calc(46 * var(--u)); padding: 0 calc(22 * var(--u)); border-radius: calc(9 * var(--u)); gap: calc(8 * var(--u)); font-size: max(11.5px, calc(15.5 * var(--u))); }
    .hp-new-btn .fl-i { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
}

@media (max-width: 639px) {
    .hp-lcard { padding: 22px 16px 20px; }
    .hp-lform { margin-top: 20px; }
    .hp-lsubmit { height: 52px; border-radius: 12px; }
    .hp-new .hp-new-btn { width: 100%; }
}

/* The note beside her is longer than the sign-up page's, so it is a little smaller to stay clear of her hair. */
@media (min-width: 1280px) {
    .hp-login-body .hp-note { font-size: max(14px, calc(20 * var(--u))); left: 42%; top: 30%; }
}
/* Forgot / reset password: icon badge, a note, the "link sent" state */
.hp-lbadge { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 14px; background: #ece8ff; color: var(--hp-purple); }
.hp-lbadge.is-ok { background: #dcf7e8; color: #16a34a; }
.hp-lcard .hp-hint { font-size: 12.5px; line-height: 1.4; color: var(--hp-muted); }
.fl-hp-body .hp-hint-box { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: #f3f1fd; font-size: 13.5px; line-height: 1.5; color: #51577a; }
.hp-hint-box .fl-i { flex: none; margin-top: 2px; color: var(--hp-purple); }
.fl-hp-body a.hp-lgo { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 22px; color: #fff; text-decoration: none; }
.fl-hp-body a.hp-lgo:hover { color: #fff; text-decoration: none; }
.fl-hp-body .hp-again { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--hp-muted); }
.fl-hp-body .hp-again a { font-weight: 600; color: var(--hp-purple); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1100px) {
    .hp-lbadge { width: calc(56 * var(--u)); height: calc(56 * var(--u)); margin-bottom: calc(16 * var(--u)); border-radius: calc(14 * var(--u)); }
    .hp-lbadge .fl-i { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
    .hp-lcard .hp-hint { font-size: max(10.5px, calc(12.5 * var(--u))); }
    .fl-hp-body .hp-hint-box { margin-top: calc(18 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u)); font-size: max(10.5px, calc(13.5 * var(--u))); }
    .fl-hp-body a.hp-lgo { margin-top: calc(22 * var(--u)); }
    .fl-hp-body .hp-again { margin-top: calc(14 * var(--u)); font-size: max(10.5px, calc(14 * var(--u))); }
}
/* Account locked (suspended / deactivated): the reason, the request and its state */
.hp-lbadge.is-warn { background: #fff1dc; color: #c2710c; }
.fl-hp-body .hp-reason { margin-top: 18px; padding: 12px 14px; border-left: 3px solid #f2b36b; border-radius: 0 10px 10px 0; background: #fff8ee; }
.hp-reason-l { display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: #a35a08; }
.fl-hp-body .hp-reason p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--hp-ink-2); overflow-wrap: anywhere; }
.hp-panel { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; }
.hp-panel.is-wait { background: #eef3ff; border: 1px solid #dbe5ff; }
.hp-panel.is-bad { background: #fff1f3; border: 1px solid #fbd0d9; }
.hp-panel-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; }
.hp-panel.is-wait .hp-panel-ic { color: #2563eb; }
.hp-panel.is-bad .hp-panel-ic { color: var(--hp-red); }
.hp-panel strong { display: block; font-size: 15.5px; line-height: 22px; font-weight: 700; color: var(--hp-ink); }
.fl-hp-body .hp-panel p { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: #51577a; overflow-wrap: anywhere; }
.fl-hp-body .hp-panel blockquote { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.5; color: var(--hp-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.hp-ta { position: relative; border: 1px solid var(--hp-line); border-radius: 10px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.hp-ta:hover { border-color: var(--hp-line-h); }
.hp-ta:focus-within { border-color: var(--hp-purple); box-shadow: 0 0 0 3px rgba(79, 31, 230, .10), 0 4px 14px rgba(79, 31, 230, .08); }
.hp-ta.is-invalid { border-color: #f1a3b4; }
.hp-ta textarea { display: block; width: 100%; min-height: 132px; padding: 14px 16px 30px; border: 0; outline: 0; resize: vertical; border-radius: 10px; background: transparent; font: 500 16px/1.5 var(--fl-font); color: var(--hp-ink); }
.hp-ta textarea::placeholder { color: #9ca1b8; opacity: 1; }
.hp-ta-count { position: absolute; right: 14px; bottom: 8px; font-size: 12px; color: #8d92ab; pointer-events: none; }
.hp-lock-foot { margin-top: 22px; }
.hp-lock-foot a { color: var(--hp-purple); font-weight: 600; }
@media (min-width: 1100px) {
    .fl-hp-body .hp-reason { margin-top: calc(16 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0; }
    .hp-reason-l { font-size: max(10px, calc(12 * var(--u))); }
    .fl-hp-body .hp-reason p { font-size: max(11px, calc(14.5 * var(--u))); }
    .hp-panel { gap: calc(14 * var(--u)); margin-top: calc(16 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); }
    .hp-panel-ic { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(10 * var(--u)); }
    .hp-panel strong { font-size: max(11.5px, calc(15.5 * var(--u))); line-height: 1.35; }
    .fl-hp-body .hp-panel p { font-size: max(10.5px, calc(14 * var(--u))); }
    .fl-hp-body .hp-panel blockquote { margin-top: calc(10 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); font-size: max(10.5px, calc(14 * var(--u))); }
    .hp-ta { border-radius: calc(10 * var(--u)); }
    .hp-ta textarea { min-height: calc(120 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(28 * var(--u)); font-size: max(11.5px, calc(15 * var(--u))); border-radius: calc(10 * var(--u)); }
    .hp-ta-count { right: calc(14 * var(--u)); bottom: calc(7 * var(--u)); font-size: max(10px, calc(12 * var(--u))); }
    .hp-lock-foot { margin-top: calc(20 * var(--u)); }
}