/* The login page as the order flow's Create account step (shared/js/order-signup.js). Shared by every brand's
   login page; colours are each page's own tokens (--card, --border, --muted, --text, --primary). */

/* Before the script runs (it removes the class): no flash of the Log In card for an order visitor. */
.order-signup-pending #login-card { display: none !important; }
.order-signup-pending #start-card.d-none { display: block !important; }

/* GoDaddy's Create account, measured off Florin's screenshots (2026-11-09): a 40 px bold heading, a light grey
   agreement box (8 px corners, 24 px padding, 17 px text), 17 px "Already ...? Sign in", then two identical outline
   choices 64 px tall, 1 px grey border, 8 px corners, a centred 24 px icon and an 18 px medium label, 16 px apart.
   Manrope (self-hosted) stands in for GoDaddy's licensed face; colours stay each page's own (currentColor). */
@font-face{font-family:"Manrope";src:url("/shared/fonts/Manrope-latin.woff2?v=c6b4d22877") format("woff2");font-display:swap;font-weight:400 800;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url("/shared/fonts/Manrope-latin-ext.woff2?v=ab77fa3f7e") format("woff2");font-display:swap;font-weight:400 800;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
#start-card, #start-card *, .signup-head, .signup-head * { font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

:is(#start-card, #register-card) .signup-title { margin: 8px 0 24px; font-size: clamp(30px, 8.5vw, 40px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: inherit; }
.signup-title:focus { outline: none; }
#start-card .signup-note { margin: 0 0 24px; padding: 24px; border-radius: 8px; background: color-mix(in srgb, currentColor 7%, transparent);
    font-size: 17px; font-weight: 400; line-height: 1.6; color: inherit; }
.signup-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#start-card .signup-have { margin: 0 0 24px; font-size: 17px; line-height: 1.5; color: inherit; }
.signup-have button, .signup-back { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: inherit;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.signup-have button { margin-left: 4px; }
#register-card .signup-back { display: inline-block; margin: -16px 0 24px; font-size: 17px; }
.signup-choices { display: grid; gap: 16px; }
.signup-choice { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 64px; margin: 0; padding: 0 16px;
    border: 1px solid color-mix(in srgb, currentColor 55%, transparent); border-radius: 8px; background: transparent; box-sizing: border-box;
    font-size: 18px; font-weight: 500; line-height: 1; letter-spacing: 0; color: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.signup-choice:hover { background: color-mix(in srgb, currentColor 6%, transparent); border-color: currentColor; }
.signup-choice:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.signup-choice svg { flex: none; width: 24px; height: 24px; }
.signup-face { display: inline-flex; align-items: center; gap: 12px; pointer-events: none; }

/* Continue with Google. Our face, with Google's REAL button laid over it invisibly, which takes the click.
   Why not our own button calling Google: the sign-in API (ServCast rest/login.py /auth/login, /api/register) accepts
   only GSI's id_token credential for Google, and an OAuth token client cannot produce one -- so the credential still has
   to come from GSI's own button, and that button is an iframe nobody can restyle. Laid over ours at 1% opacity and
   stretched to the same box (order-signup.js fits it), every click and Enter lands on Google's button, keyboard focus
   goes into its iframe (:focus-within draws our ring) and a screen reader meets one control, Google's, whose name is
   "Continue with Google"; our face is aria-hidden. */
.signup-google { cursor: pointer; }
.signup-google:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
.signup-gsi { position: absolute; inset: 0; overflow: hidden; opacity: .01; border-radius: 8px; }
.signup-gsi > div { transform-origin: 0 0; }

/* Step 2: the Sign up card without its Log In / Sign Up switch, and one password field. */
.order-signup #register-card.order-signup-email .auth-switch,
.order-signup #register-card.order-signup-email .field:has(#reg-confirm-password) { display: none !important; }
.order-signup #register-card.order-signup-email .field-row--pw { grid-template-columns: 1fr !important; }
.order-signup #register-card.order-signup-email .pw-match-info { display: none !important; }
/* Step 2 is the email path: Google has its own choice on step 1, so its button and its consent line go here. */
.order-signup #register-card.order-signup-email .auth-alt-google,
.order-signup #register-card.order-signup-email .actions + .legal { display: none !important; }

/* ===== 2026-11-09 (Florin: "redesign this step ... so that everything matches", "we're going for the godaddy look"):
   one GoDaddy-plain skin for the whole order sign-in path -- the choices, the email step, Sign in and the verification
   screens. A solid card (no glass, so the captcha's own white no longer sits on blue), labels INSIDE the box at its top
   left (no notch in the border), 64 px fields with a 1 px grey border and 8 px corners, a solid ink 64 px primary button
   ("Create account", "Continue"), Manrope throughout. Light and dark. */
html.order-signup { --os-surface: #ffffff; --os-ink: #111111; --os-muted: #595959; --os-line: #8a8a8a; --os-soft: #f3f5f7; --os-focus: #111111; }
@media (prefers-color-scheme: dark) { html.order-signup:not([data-theme="light"]) { --os-surface: #16181e; --os-ink: #f2f3f5; --os-muted: #a7acb6; --os-line: #6b7180; --os-soft: #20242d; --os-focus: #f2f3f5; } }
html.order-signup[data-theme="dark"] { --os-surface: #16181e; --os-ink: #f2f3f5; --os-muted: #a7acb6; --os-line: #6b7180; --os-soft: #20242d; --os-focus: #f2f3f5; }

.order-signup :is(#start-card, #register-card, #login-card) {
    background: var(--os-surface) !important; color: var(--os-ink) !important; border: 0 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 16px 48px rgba(0, 0, 0, .22) !important;
    max-width: 480px !important; padding: 32px !important; }
.order-signup :is(#start-card, #register-card, #login-card),
.order-signup :is(#start-card, #register-card, #login-card) * { font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.order-signup :is(#register-card, #login-card) .signup-title,
.order-signup :is(#register-card, #login-card) .auth-seg.is-active { color: var(--os-ink) !important; text-shadow: none !important; }
.order-signup #start-card .signup-note { background: var(--os-soft) !important; color: var(--os-ink); }
.order-signup .signup-choice { border-color: var(--os-line) !important; color: var(--os-ink) !important; }
.order-signup .signup-choice:hover { border-color: var(--os-ink) !important; background: var(--os-soft) !important; }

/* Fields: the name inside the box, at its top left. */
.order-signup :is(#register-card, #login-card) .field { margin-top: 16px !important; }
.order-signup :is(#register-card, #login-card) .field-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px !important; margin-top: 16px !important; }
.order-signup :is(#register-card, #login-card) .field-row .field { margin-top: 0 !important; }
.order-signup :is(#register-card, #login-card) fieldset.input {
    position: relative !important; display: block !important; min-height: 64px; margin: 0 !important; padding: 30px 16px 8px !important;
    border: 1px solid var(--os-line) !important; border-radius: 8px !important; background: var(--os-surface) !important; box-shadow: none !important; }
.order-signup :is(#register-card, #login-card) fieldset.input:focus-within { border-color: var(--os-focus) !important; box-shadow: inset 0 0 0 1px var(--os-focus) !important; }
.order-signup :is(#register-card, #login-card) fieldset.input legend {
    float: none !important; position: absolute !important; top: 9px; left: 16px; width: auto !important; margin: 0 !important; padding: 0 !important;
    font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.2 !important;
    color: var(--os-muted) !important; text-shadow: none !important; background: none !important; }
.order-signup :is(#register-card, #login-card) fieldset.input legend label { font: inherit !important; color: inherit !important; }
.order-signup :is(#register-card, #login-card) fieldset.input legend label::after { content: " *"; color: #c8102e; }
.order-signup :is(#register-card, #login-card) .control { gap: 12px !important; }
.order-signup :is(#register-card, #login-card) .control > svg { display: none !important; }
.order-signup :is(#register-card, #login-card) fieldset.input input {
    height: 26px !important; padding: 0 !important; font-size: 17px !important; font-weight: 400 !important; color: var(--os-ink) !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; }
.order-signup :is(#register-card, #login-card) fieldset.input input::placeholder { color: transparent !important; }
.order-signup :is(#register-card, #login-card) .toggle {
    margin-top: -20px; padding: 0 !important; font-size: 16px !important; font-weight: 400 !important; color: var(--os-muted) !important;
    text-decoration: underline; text-underline-offset: 3px; background: none !important; }

/* The password checklist, quiet and under the field. */
.order-signup #register-card .pw-strength { margin-top: 12px !important; }
.order-signup #register-card .pw-bar-track { height: 4px !important; background: var(--os-soft) !important; }
.order-signup #register-card .pw-rules { gap: 4px 16px !important; font-size: 14px !important; color: var(--os-muted) !important; }

/* The captcha with no box of its own: it sits on the same surface as everything else. */
.order-signup #register-card .gate { margin-top: 24px !important; padding: 0 !important; border: 0 !important; background: none !important; }
.order-signup #register-card .gate-title { display: none !important; }

/* The privacy line. (The Terms box is terms.js's, in a shadow root; order-signup.js gives it the "signup" skin.) */
.order-signup #register-card .legal { font-size: 15px !important; color: var(--os-muted) !important; }
.order-signup #register-card .legal a { color: var(--os-ink) !important; }

/* The primary button: solid ink, 64 px, 8 px corners, 18 px semibold, like GoDaddy's "Create account". */
.order-signup :is(#register-card, #login-card) .app-btn.primary {
    width: 100% !important; min-height: 64px !important; margin-top: 24px; border: 0 !important; border-radius: 8px !important;
    background: var(--os-ink) !important; background-image: none !important; color: var(--os-surface) !important;
    box-shadow: none !important; text-shadow: none !important; text-transform: none !important;
    font-size: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; filter: none !important; transform: none !important; }
.order-signup :is(#register-card, #login-card) .app-btn.primary:hover:not(:disabled) { opacity: .88; }
.order-signup :is(#register-card, #login-card) .app-btn.primary:disabled { opacity: .35 !important; cursor: default; }
.order-signup :is(#register-card, #login-card) .app-btn.primary .textContent { color: inherit !important; }

/* The verification screens (shared/js/signup-verify.js) in the same skin. */
.order-signup .sv-backdrop { font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; }
.order-signup .sv-backdrop * { font-family: inherit; }
.order-signup .sv-card { --sv-bg: var(--os-surface); --sv-fg: var(--os-ink); --sv-muted: var(--os-muted); --sv-line: var(--os-line);
    --sv-field: var(--os-surface); --sv-accent: var(--os-ink); --sv-accent-fg: var(--os-surface);
    max-width: 480px !important; padding: 32px !important; border-radius: 12px !important; font-size: 17px; }
.order-signup .sv-card h2 { margin: 0 0 16px !important; font-size: clamp(28px, 7vw, 36px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.02em; }
.order-signup .sv-card p { font-size: 17px; line-height: 1.6; color: var(--os-ink) !important; }
.order-signup .sv-card label { font-size: 15px !important; font-weight: 500 !important; }
.order-signup .sv-card input:not(.sv-box) { height: 64px !important; padding: 0 16px !important; border-radius: 8px !important; font-size: 17px !important; }
.order-signup .sv-primary { height: 64px !important; border-radius: 8px !important; font-size: 18px !important; font-weight: 600 !important; margin-top: 24px !important; }

@media (max-width: 480px) {
    .order-signup :is(#start-card, #register-card, #login-card), .order-signup .sv-card { padding: 24px 20px !important; }
    .order-signup :is(#register-card, #login-card) .field-row { grid-template-columns: 1fr; }
}

/* The verification screens read as the next step, not a pop-up over the form (Florin, 2026-11-09: "everything in the
   create account step needs to flow well"): a full page in the card's own surface, the card at the top, no shadow. */
.order-signup .sv-backdrop { align-items: flex-start !important; padding: 64px 16px 32px !important; overflow: auto; background: var(--os-surface) !important; }
.order-signup .sv-card { box-shadow: none !important; }
.order-signup .sv-close { font-size: 28px !important; color: var(--os-muted) !important; }
@media (max-width: 480px) { .order-signup .sv-backdrop { padding: 24px 0 !important; } }

/* 2026-11-09 (Florin: "blend it in a bit better with the background without compromising the sharpness"): the card is
   90% surface over a strong blur, so the page's colour shows through softly while every line of text still sits on a
   near-solid ground; a hairline edge and a wider, lighter shadow instead of the hard drop. The fields, the captcha and the
   buttons keep their solid surface. */
.order-signup :is(#start-card, #register-card, #login-card) {
    background: color-mix(in srgb, var(--os-surface) 90%, transparent) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important; backdrop-filter: blur(24px) saturate(140%) !important;
    border: 1px solid color-mix(in srgb, var(--os-surface) 60%, transparent) !important;
    box-shadow: 0 24px 64px -16px rgba(10, 20, 40, .28), 0 2px 6px rgba(10, 20, 40, .06) !important; }
.order-signup .sv-backdrop { background: color-mix(in srgb, var(--os-surface) 94%, transparent) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }

/* Phones (Florin, 2026-11-09, iPhone): the login page's card no longer starts 30% down the screen under the picture. It
   sits centred when it fits, and starts near the top when it is taller than the screen ("safe" keeps its top in view).
   Every login page loads this file, so the plain Log In card moves too. */
@media (max-width: 600px) {
    body main.wrap { align-content: safe center !important; padding-top: 16px !important; padding-bottom: 24px !important; min-height: 100svh; }
}