/* ===========================================================================
   Account — sign in and register (desktop)

   Shared sheet for the two account entry points, because they are the same
   page twice with different fields: a heading, a form column, one tinted
   panel holding the alternative action and the trust mark. Login and Register
   each load this file; neither loads the other's neighbours.

   What this replaced on the sign-in page: a Fomantic `ui divided grid` with
   three columns - the form in one sixth-wide column, "new customer" in
   another, and a third holding the "Protected by" heading above a 260x135
   browser mock. Nothing on it used the design tokens, so it read as a
   different site from the PDP and the category pages: gray `block-header`
   bars, pale-yellow labels on purple legacy buttons, and a `Forgot password?`
   link absolutely positioned against the bottom of the form box (it
   overlapped the field errors). The register page had the same bones.

   What is here is two columns on the page's own white ground: the form on the
   left, one tinted panel on the right. No outer card - a white card on white
   would need a heavier shadow than this theme uses anywhere - and no Fomantic
   form classes, because `.ui.form .field > label` is coloured by styles.css
   and these are not Fomantic forms any more.

   Everything resolves against tokens.css. Class names are page-agnostic
   (`.vp-auth*`), so a rule added for one page applies to the other unless it
   names a page-only piece (the remember/forgot row, the "or" divider, the
   guest-checkout topic).
   =========================================================================== */

/* Fills the page container rather than capping the page. The container is the
   same box the header and the category grid use: 1200px from 1280 viewport,
   1440px from 1680 (styles.css). The old 1040px cap inset the content 80-200px
   from those edges, so these pages read as a narrow column beside a full-width
   header. The readable measure is enforced on the form column below instead. */
.vp-auth {
    margin: var(--vp-sp-5) auto var(--vp-sp-8);
    padding: 0;
    color: var(--vp-ink);
    /* None of this sets font-family, on purpose. The localized sheets
       (localized/cn.css, ja.css, ru.css, ...) set the page font on
       `html, body, .ui` with !important, and this block sits inside
       `.ui.container`; restating the Latin stack here would override the CJK
       font for the whole page. */
}

/* ---- head ---------------------------------------------------------------- */

.vp-auth-head {
    margin: 0 0 var(--vp-sp-6);
}

.vp-auth-title {
    margin: 0;
    color: var(--vp-ink);
    font-size: var(--vp-fs-3xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* ---- the two columns ----------------------------------------------------- */

.vp-auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: var(--vp-sp-8);
    /* The two columns are top-aligned rather than equal-height: the panel's content is
       shorter than the form in the normal flow and longer in the guest flow, and forcing
       one height makes the shorter one hollow. */
    align-items: start;
}

/* The readable measure lives on the FORM, not on the page. At the 1440px container
   the 1.08fr column is 735px and the inputs would follow it; 620px is the contact
   page's form width, so the two long forms on the site agree. The slack stays inside
   the form's track, which puts it between the form and the panel rather than at the
   right edge of the page. */
.vp-auth-grid > section {
    max-width: 620px;
}

.vp-auth-heading {
    margin: 0 0 var(--vp-sp-5);
    color: var(--vp-ink);
    font-size: var(--vp-fs-xl);
    font-weight: 600;
    line-height: 1.3;
}

/* ---- form ---------------------------------------------------------------- */

.vp-field {
    margin: 0 0 var(--vp-sp-4);
}

/* Two fields on one line, used by Register for first/last name and for the
   password pair. `column-gap` only: each `.vp-field` already carries its own
   bottom margin, and adding a row gap would double the stack spacing. */
.vp-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--vp-sp-4);
}

/* `.vp-field > label` rather than a class: this MVC build's `LabelFor` has only the
   `(expression)` and `(expression, labelText)` overloads - no htmlAttributes - so a
   class cannot be passed to it. `LabelFor` still supplies the `for`/id pair and the
   display name from `[NopResourceDisplayName]`, which is the part worth keeping.
   `:not(.vp-check)` is load-bearing: the newsletter checkbox on Register is a
   `<label>` too, and it is a direct child of its `.vp-field`; without this it would
   lose `display: inline-flex` to the block rule below and pick up the label margin. */
.vp-field > label:not(.vp-check) {
    display: block;
    margin: 0 0 6px;
    color: var(--vp-ink-2);
    font-size: var(--vp-fs-sm);
    font-weight: 600;
}

/* 48px is the control height the PDP's option rows use; a 14px Fomantic input is too
   short to be the one field a returning shopper fills on a phone-sized laptop window.
   `--vp-border-control` rather than `--vp-line`: on a white ground the border is the
   only thing that says "field", so it has to clear 3:1 (tokens.css). */
.vp-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--vp-border-control);
    border-radius: var(--vp-r-md);
    background: var(--vp-surface);
    color: var(--vp-ink);
    font-family: inherit;
    font-size: var(--vp-fs-md);
    line-height: 1.2;
    transition: border-color 0.12s, box-shadow 0.12s;
    -webkit-appearance: none;
}

.vp-input::placeholder {
    color: var(--vp-ink-4);
}

.vp-input:hover {
    border-color: var(--vp-ink-3);
}

/* `:focus` and not `:focus-visible`: a text field is focused by clicking it, and the
   platform's default outline is suppressed by the theme's global `:focus` rule.
   The ring is 3px at 16% of the brand purple and the border goes solid, so the state
   is carried by two things, not by colour alone. */
.vp-input:focus {
    outline: none;
    border-color: var(--vp-primary);
    box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.16);
}

/* The captcha is generated markup: an <img> and a text input with MVC ids. It only
   appears where the store enables it, so the spacing is all this needs. */
.vp-field-captcha img {
    display: block;
    margin: 0 0 8px;
}

/* ---- remember me / forgot password --------------------------------------- */

/* One row, both halves where they belong. The old layout absolutely positioned the
   forgot link at the bottom of the form, which put it under the field errors and made
   its hit area overlap them. */
.vp-auth-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vp-sp-4);
    margin: var(--vp-sp-2) 0 var(--vp-sp-5);
}

.vp-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--vp-ink-2);
    font-size: var(--vp-fs-sm);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

/* The native box at its native size, tinted with accent-color. A drawn replacement
   would need its own keyboard and high-contrast handling; the browser already has it. */
.vp-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--vp-primary);
    cursor: pointer;
}

.vp-auth-forgot {
    flex: none;
    color: var(--vp-primary);
    font-size: var(--vp-fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.vp-auth-forgot:hover {
    color: var(--vp-primary-hover);
    text-decoration: underline;
}

/* ---- buttons ------------------------------------------------------------- */

.vp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 var(--vp-sp-5);
    border: 1px solid transparent;
    border-radius: var(--vp-r-md);
    font-family: inherit;
    font-size: var(--vp-fs-md);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

/* The one primary action on the page, in the same gradient the buy bar uses. */
.vp-btn-primary {
    width: 100%;
    height: 50px;
    border: 0;
    background-color: var(--vp-primary);
    background-image: var(--vp-primary-gradient);
    color: #fff;
    letter-spacing: 0.01em;
}

.vp-btn-primary:hover {
    background-image: none;
    background-color: var(--vp-primary-hover);
    color: #fff;
}

.vp-btn-primary:active {
    background-image: none;
    background-color: var(--vp-primary-active);
    color: #fff;
}

/* Register / guest actions are peers of "Log in" only in importance, not in weight:
   the form keeps the gradient and these stay a bordered white pill. A second gradient
   button on the same screen splits the primary signal, which is the mistake the old
   page made with two full-width legacy buttons.

   The border is --vp-ink-3, not --vp-border-control: these buttons sit on the tinted
   panel, and #96909f against #f4effc measures 2.74:1, under the 3:1 that WCAG 1.4.11
   asks of a control's only visible boundary. --vp-ink-3 clears 4.7:1 there. */
.vp-btn-outline {
    width: 100%;
    background: var(--vp-surface);
    border-color: var(--vp-ink-3);
    color: var(--vp-ink);
}

.vp-btn-outline:hover {
    border-color: var(--vp-primary);
    color: var(--vp-primary);
}

/* Keyboard focus only, unlike the inputs: these are reached with Tab, and a ring on
   every mouse click would be noise. An outline rather than the inputs' soft ring:
   at 2px of solid --vp-primary it clears the 3:1 change WCAG 2.4.11 asks for, while
   a 28%-alpha shadow does not. */
.vp-btn:focus-visible {
    outline: 2px solid var(--vp-primary);
    outline-offset: 2px;
}

.vp-auth-submit {
    margin-top: var(--vp-sp-2);
}

/* ---- external authentication -------------------------------------------- */

/* `ExternalMethods` renders nothing at all when no provider is enabled. The wrapper
   carries no spacing of its own and the divider carries the gap, so an empty wrapper
   costs nothing - `:empty` would not fire, because Razor leaves a newline inside it. */
.vp-auth-external {
    margin: 0;
}

.vp-auth .ui.horizontal.divider {
    margin: var(--vp-sp-5) 0;
    color: var(--vp-ink-3);
    font-size: var(--vp-fs-sm);
    font-weight: 500;
}

.vp-auth .social-login-buttons {
    max-width: none;
    margin-top: 0;
}

.vp-auth .social-login-btn {
    min-height: 46px;
    border-radius: var(--vp-r-md);
    font-size: var(--vp-fs-md);
}

/* ---- the tinted panel ---------------------------------------------------- */

.vp-auth-aside {
    display: flex;
    flex-direction: column;
    padding: var(--vp-sp-6);
    border: 1px solid var(--vp-primary-tint-2);
    border-radius: var(--vp-r-lg);
    background: var(--vp-primary-tint);
}

.vp-auth-lead {
    margin: 0 0 var(--vp-sp-5);
    color: var(--vp-ink-2);
    font-size: var(--vp-fs-md);
    line-height: 1.65;
}

/* The guest-checkout topic is admin HTML (`TopicBlock`), so only the elements that
   actually appear there are given a shape. No width or font reset: the panel's own
   type is inherited. */
.vp-auth-topic {
    margin: 0 0 var(--vp-sp-5);
    color: var(--vp-ink-2);
    font-size: var(--vp-fs-md);
    line-height: 1.65;
}

.vp-auth-topic p,
.vp-auth-topic ul,
.vp-auth-topic ol {
    margin: 0 0 var(--vp-sp-3);
}

.vp-auth-topic ul {
    padding-left: 18px;
    list-style: disc;
}

.vp-auth-topic a {
    color: var(--vp-primary);
    text-decoration: underline;
}

.vp-auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--vp-sp-2);
}

/* A hairline separates the trust line from the action above it, so the mark reads as a
   footer of the panel rather than as a third button-sized item in the stack. */
.vp-auth-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: var(--vp-sp-5);
    padding-top: var(--vp-sp-4);
    border-top: 1px solid rgba(103, 58, 183, 0.18);
    color: var(--vp-ink-3);
    font-size: var(--vp-fs-xs);
    font-weight: 600;
}

.vp-auth-lock {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--vp-primary);
}

/* The https.png browser mock is kept — it is the "secured by https" statement the
   page already made — but at 64px it is a badge in the trust line rather than a
   260x135 illustration that out-weighed its own heading. */
.vp-auth-trust img {
    width: 64px;
    height: auto;
    opacity: 0.9;
}

/* ---- errors -------------------------------------------------------------- */

/* styles.css paints `.validation-summary-errors` and `.field-validation-error` as the
   same padded pink box, and a single field error got the full 1em 1.5em box. Scoped
   here: one banner for the summary, one quiet line under the field for the rest.
   `.vp-auth-error` is the register page's own banner: Register collects every
   ModelState error into one list and prints it itself, because nopCommerce's view
   already hid the MVC summary and showed a joined message instead. */
.vp-auth .validation-summary-errors,
.vp-auth .vp-auth-error {
    margin: 0 0 var(--vp-sp-5);
    padding: var(--vp-sp-3) var(--vp-sp-4);
    border-left: 3px solid var(--vp-sale);
    border-radius: var(--vp-r-sm);
    background: #fdecec;
    box-shadow: none;
    color: #8c1d18;
    font-size: var(--vp-fs-sm);
    line-height: 1.5;
}

.vp-auth .validation-summary-errors ul,
.vp-auth .vp-auth-error ul {
    margin: 6px 0 0;
    padding-left: 18px;
    list-style: disc;
}

.vp-auth .validation-summary-errors li,
.vp-auth .vp-auth-error li {
    margin: 2px 0;
}

.vp-auth .field-validation-error {
    display: block;
    margin: 6px 0 0;
    padding: 0;
    min-height: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--vp-sale);
    font-size: var(--vp-fs-xs);
    line-height: 1.4;
}

/* ---- the external-auth association notice -------------------------------- */

.vp-auth .external-auth-association {
    margin: 0 0 var(--vp-sp-5);
    padding: var(--vp-sp-3) var(--vp-sp-4);
    border: 1px solid var(--vp-line);
    border-radius: var(--vp-r-sm);
    background: var(--vp-surface-2);
    color: var(--vp-ink-2);
    font-size: var(--vp-fs-sm);
    line-height: 1.5;
}

.vp-auth .external-auth-association .identifier {
    color: var(--vp-ink);
    font-weight: 600;
}

/* ---- responsive ---------------------------------------------------------- */

/* The desktop theme is also served to tablets (the mobile theme is chosen from the
   user agent). 991px is Fomantic's own container breakpoint, and it is the right line
   here for a reason worth writing down: between 768 and 991 the `ui.container` is
   723px wide whatever the viewport, so two columns would be 345px and 282px - the
   panel's copy would run to ten lines beside a form with no room for its error text.
   Above that the container is 933px, where the pair measures 452/385 and is fine. */
@media (max-width: 991px) {
    .vp-auth-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vp-sp-6);
    }

    .vp-auth-aside {
        order: 2;
    }

    /* Stacked, the form would otherwise run the whole container: a 48px-tall
       field a metre wide is hard to scan and unpleasant to type into. 560px is
       narrower than the 620px the two-column form gets on a desktop, because
       here there is no panel beside it to justify the extra width. */
    .vp-auth-grid > section,
    .vp-auth-aside {
        max-width: 560px;
    }
}

@media (max-width: 600px) {
    .vp-auth {
        margin-top: var(--vp-sp-4);
    }

    .vp-auth-title {
        font-size: var(--vp-fs-2xl);
    }

    .vp-auth-aside {
        padding: var(--vp-sp-5);
    }

    /* The meta row is the one thing that cannot hold two items at 320px with a
       checkbox label and a link on the same line. */
    .vp-auth-meta {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    /* First/last name and the password pair go one per line on a phone. */
    .vp-field-row {
        grid-template-columns: minmax(0, 1fr);
    }
}