/*!
 * Copyright © Monogo. All rights reserved.
 * Monogo_UnilayerLoginStyles — Salon Professional theme.
 *
 * Top-level login / register / forgot-password pages share the
 * checkout's `--muc-*` token contract (see base login.css). Overriding
 * those tokens here is safe-scoped: this stylesheet is loaded ONLY on
 * the auth-flow pages (`customer_account_login`,
 * `customer_account_create`, `customer_account_forgotpassword`), so a
 * `--muc-color-primary` redefinition will not leak to checkout pages
 * that also use the same tokens.
 */

@import url("./login.css");

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');

/* Token contract — selector MUST match the base login.css token
   block at §134 (`body.monogo-auth-page:not(.page-monogo-customerauth-embed)`,
   specificity 0,2,1). A plain `:root` (0,0,1) or even
   `body.monogo-auth-page` (0,1,1) loses the cascade tie-break and
   gets overridden by the base, which paints the buttons in the
   Converse `#000` primary instead of the Salon burgundy.

   The full selector list (`:root, html, body, body.monogo-auth-page:not(...)`)
   gives us four redundant cascade origins so the var() lookup from a
   deeply nested input always hits a populated token regardless of
   which element the browser walks first. */
:root,
html,
body,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) {
    /* `--muc-color-primary` paints the SUBMIT button background on the
       login / register / forgot pages (base login.css §742-770). Salon
       Professional fills its primary CTAs solid burgundy (#AF0236,
       sampled from a.action.primary on salonprofessional.pl) — the
       body copy stays on the neutral charcoal-gray via `--muc-color-text`. */
    --muc-color-primary:        #AF0236;
    --muc-color-primary-hover:  #CB5A7C;
    --muc-color-bg:             #ffffff;
    --muc-color-surface:        #F4F4F4;
    --muc-color-border:         #E8E8E8;
    --muc-color-border-input:   #323845;
    --muc-color-text:           #464646;
    --muc-color-text-secondary: #737070;
    --muc-color-text-muted:     #9B9B9B;
    --muc-color-success:        #17AC97;
    --muc-color-error:          #CB5A7C;
    --muc-color-link:           #AF0236;

    --muc-font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* All form controls + buttons get a 2 px corner radius — Salon
       Professional's near-square vocabulary (sampled from
       a.action.primary border-radius on the live site). Inputs and
       checkboxes get overridden below because the base hardcodes
       `border-radius: 0` for them (Converse "flat" look). */
    --muc-border-radius: 2px;

    /* Native Salon Professional form controls: 44px inputs and buttons
       (Orbico/shared `_forms.less` / `_buttons.less`). */
    --muc-input-height: 44px;
    --muc-button-height: 44px;

    /* Theme-local token: checkbox corner radius. Matches the button's
       flat 2 px so every control in the form reads as one vocabulary. */
    --muc-checkbox-radius: 2px;
}

/* ==========================================================================
   Boxed inputs (4-side border — Salon Professional brand parity)
   ==========================================================================

   Overrides the base "bottom-border only" treatment (login.css §506).
   Mirror selector list verbatim so we beat the base on cascade order
   (themed file is imported AFTER base via `@import url("./login.css")`).
   Focus state compensates for the 2 px focus border with -1 px horizontal
   padding so typed text does not jump when the input gains focus.
   ========================================================================== */

body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input.input-text,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="text"],
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="email"],
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="tel"],
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="number"],
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="password"],
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > select,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > textarea {
    border: 1px solid var(--muc-color-border-input);
    border-radius: var(--muc-border-radius);
    padding: 0 16px;
    background: var(--muc-color-bg);
}

body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > textarea {
    padding: 8px 16px;
}

body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input.input-text:focus,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input.input-text:focus-visible,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="text"]:focus,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="email"]:focus,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="tel"]:focus,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="number"]:focus,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="password"]:focus,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > select:focus,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > textarea:focus {
    border-color: var(--muc-color-primary);
    border-width: 2px;
    border-bottom-width: 2px;
    padding: 0 15px;
}

body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > textarea:focus {
    padding: 7px 15px;
}

body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input.input-text.mage-error,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input.input-text[aria-invalid="true"],
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="email"].mage-error,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="password"].mage-error,
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .control > input[type="text"].mage-error {
    border-color: var(--muc-color-error);
    border-bottom-color: var(--muc-color-error);
}

/* Floating label — shift right by horizontal padding so it clears the
   new boxed border. Floated state paints a bg-colour cut-through so
   the label cuts cleanly through the top border (Material Outlined).

   `z-index: 3` keeps the label above the input on password fields.
   Luma turns `.field.password .control` into a flex column and gives
   its `.input-text` `z-index: 2` (a flex item, so it stacks without
   `position`). The base label sits at `z-index: 1`, so the opaque
   boxed input painted over it: an empty password showed no label at
   all, and a filled or autofilled one lost the lower half of the
   floated caption under the input's top border. */
body.monogo-auth-page:not(.page-monogo-customerauth-embed) :is(.fieldset, .monogo-name-row) > .field:not(.choice) > .label:not(.mage-error),
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .form-create-account > .field.field-dob > .label:not(.mage-error) {
    left: 16px;
    padding: 0 4px;
    z-index: 3;
}

/* Browser autofill can fill an input before `:placeholder-shown`
   reflects the value (Chrome fills on page load and only exposes the
   value after the first interaction). Float the label for an
   autofilled input as well, so it never overlaps the filled value.
   Kept in its own rule: a browser that does not know the
   pseudo-class drops only this rule, not the base floated state. */
body.monogo-auth-page:not(.page-monogo-customerauth-embed) :is(.fieldset, .monogo-name-row) > .field:not(.choice):has(.control input:-webkit-autofill) > .label:not(.mage-error) {
    transform: translateY(-16px) scale(0.75);
    color: var(--muc-color-text-secondary);
    background: var(--muc-color-bg);
}

body.monogo-auth-page:not(.page-monogo-customerauth-embed) :is(.fieldset, .monogo-name-row) > .field:not(.choice):has(.control input:focus) > .label:not(.mage-error),
body.monogo-auth-page:not(.page-monogo-customerauth-embed) :is(.fieldset, .monogo-name-row) > .field:not(.choice):has(.control input:not(:placeholder-shown)) > .label:not(.mage-error),
body.monogo-auth-page:not(.page-monogo-customerauth-embed) :is(.fieldset, .monogo-name-row) > .field:not(.choice):has(.control select:focus) > .label:not(.mage-error),
body.monogo-auth-page:not(.page-monogo-customerauth-embed) :is(.fieldset, .monogo-name-row) > .field:not(.choice):has(.control textarea:focus) > .label:not(.mage-error),
body.monogo-auth-page:not(.page-monogo-customerauth-embed) :is(.fieldset, .monogo-name-row) > .field:not(.choice):has(.control textarea:not(:placeholder-shown)) > .label:not(.mage-error),
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .form-create-account > .field.field-dob:has(.control input:focus) > .label:not(.mage-error),
body.monogo-auth-page:not(.page-monogo-customerauth-embed) .form-create-account > .field.field-dob:has(.control input:not(:placeholder-shown)) > .label:not(.mage-error) {
    background: var(--muc-color-bg);
}

/* ==========================================================================
   Custom checkbox (flat 2 px — Salon Professional)
   ==========================================================================

   Base ships native checkbox styled via `accent-color` (login.css §596),
   which gives the right colour but no control over the corner radius.
   We opt into `appearance: none` here so the box can match the rest of
   the form's flat vocabulary. Checkmark is a CSS-only rotated
   `::after` border — zero new assets, works offline.
   ========================================================================== */

body.monogo-auth-page:not(.page-monogo-customerauth-embed) .field.choice > input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--muc-color-border-input);
    border-radius: var(--muc-checkbox-radius);
    background: var(--muc-color-bg);
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 200ms ease, border-color 200ms ease;
}

body.monogo-auth-page:not(.page-monogo-customerauth-embed) .field.choice > input[type="checkbox"]:hover {
    border-color: var(--muc-color-primary);
}

body.monogo-auth-page:not(.page-monogo-customerauth-embed) .field.choice > input[type="checkbox"]:checked {
    background: var(--muc-color-primary);
    border-color: var(--muc-color-primary);
}

body.monogo-auth-page:not(.page-monogo-customerauth-embed) .field.choice > input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid var(--muc-color-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

body.monogo-auth-page:not(.page-monogo-customerauth-embed) .field.choice > input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--muc-color-primary);
    outline-offset: 2px;
}