/**
 * Copyright © Monogo. All rights reserved.
 * See COPYING.txt for license details.
 *
 * Company registration form on top of the native auth styles (Monogo_UnilayerLoginStyles login.css and its
 * brand variants). Only what the native register form does not have: the title inside the form, visible
 * section headings and a select.
 */

/* The welcome page has the width and placement of the registration form. */
body.unilayer-company-register .unilayer-company-register-welcome {
    max-width: 600px;
    margin: 48px auto 72px;
}

/* The page title sits at the top of the form (and of the welcome box), so it lines up with the content. */
body.unilayer-company-register :is(.unilayer-company-register-form, .unilayer-company-register-welcome) > .page-title-wrapper {
    margin: 0 0 32px;
}

body.unilayer-company-register :is(.unilayer-company-register-form, .unilayer-company-register-welcome) > .page-title-wrapper .page-title {
    margin: 0;
    font-family: var(--muc-font-family);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--muc-color-text);
}

/* Section headings (Company / Company Address / Your Account): the native auth legend style. The native
   register form hides its legends; this form keeps them because it has three distinct sections. */
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .unilayer-company-register-form .fieldset > .legend {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    font-family: var(--muc-font-family);
    font-size: var(--muc-font-size-lg);
    font-weight: 700;
    color: var(--muc-color-text);
}

body.monogo-auth-page:not(.page-monogo-customerauth-embed) .unilayer-company-register-form .fieldset > .legend > span {
    font-size: inherit;
}

/* A select always shows a value: keep its floating label in the floated state, like a filled input. */
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .unilayer-company-register-form .fieldset > .field:not(.choice):has(.control select) > .label:not(.mage-error) {
    transform: translateY(-16px) scale(0.75);
    color: var(--muc-color-text-secondary);
    background: var(--muc-color-bg);
}

/* The welcome actions are links styled as buttons: centre their label like the native submit buttons. */
body.monogo-auth-page.unilayer-company-register .unilayer-company-register-welcome .actions-toolbar a.action.primary {
    line-height: 44px;
}

/* Stepper "1 NIP verification — 2 Account creation" at the top of both steps (current step highlighted). */
body.unilayer-company-register .unilayer-company-register-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    font-family: var(--muc-font-family);
    font-size: var(--muc-font-size-sm, 14px);
    color: var(--muc-color-text-secondary);
}

body.unilayer-company-register .unilayer-company-register-stepper__step {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

body.unilayer-company-register .unilayer-company-register-stepper__step + .unilayer-company-register-stepper__step::before {
    content: "";
    width: 32px;
    height: 1px;
    margin-right: 4px;
    background: currentColor;
    opacity: 0.4;
}

body.unilayer-company-register .unilayer-company-register-stepper__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-weight: 700;
}

body.unilayer-company-register .unilayer-company-register-stepper__step.is-current {
    color: var(--muc-color-text);
    font-weight: 700;
}

body.unilayer-company-register .unilayer-company-register-stepper__step.is-current .unilayer-company-register-stepper__number {
    border-color: var(--muc-color-text);
    background: var(--muc-color-text);
    color: var(--muc-color-bg);
}

body.unilayer-company-register .unilayer-company-register-form__intro {
    margin: -16px 0 24px;
    color: var(--muc-color-text-secondary);
}

/* Field notes (login hint, NIP format, "Change" link under the read-only NIP). */
body.unilayer-company-register .unilayer-company-register-form .field > .note {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muc-color-text-secondary);
}

body.unilayer-company-register .unilayer-company-register-form__nip input[readonly] {
    background: var(--muc-color-bg-muted, #f5f5f5);
    cursor: default;
}

/* The sign-in link inside the "NIP already exists" error. */
body.unilayer-company-register .unilayer-company-register-form .unilayer-company-register-field-error a {
    margin-left: 4px;
    text-decoration: underline;
}

/* Server-side field errors. Not "mage-error": Magento's validation widget empties and hides every div.mage-error of
   the form when it initialises, so a server error with that class would vanish on page load. Same look as the
   native client-side error message (Monogo_UnilayerLoginStyles login.css, div.mage-error). */
body.unilayer-company-register .unilayer-company-register-form .unilayer-company-register-field-error {
    display: block;
    margin: 6px 0 0;
    padding: 0;
    color: var(--muc-color-error, #e02b27);
    font-family: var(--muc-font-family, inherit);
    font-size: var(--muc-font-size-sm, 12px);
    line-height: 1.4;
}