/*
 * ACCT-FIELDS-001 (owner 2026-10-15: "check the account pages' fields too"): the account forms (sign in, create
 * account, forgot / reset password, account information, address) in the checkout's field style (CHK-MSG-001):
 * 48 px fields, 1.5 px border, rounded; labels 14 px semi-bold; messages 6 px under the field, 13.5 px / 1.35, errors
 * semi-bold red and the field red; ink checkboxes; the main button the orange pill. Linked with body.ipx-acct by the
 * customer_account_* / customer_address_form layouts of Ipatio_UiUxFix; tokens (--ipx-*) from chrome.css.
 */
body.ipx-acct{--ipxa-ctl:20px}
body.ipx-acct .field > .label,body.ipx-acct fieldset.street > .label,body.ipx-acct .fieldset > .field > .label{display:block;margin:0 0 6px!important;padding:0!important;font:600 14px/1.3 var(--ipx-font)!important;color:var(--ipx-ink)!important;text-align:left!important;float:none!important;width:auto!important}
body.ipx-acct .field input.input-text,body.ipx-acct .field input[type=text],body.ipx-acct .field input[type=email],body.ipx-acct .field input[type=password],body.ipx-acct .field input[type=tel],body.ipx-acct .field select,body.ipx-acct .field textarea{height:48px!important;min-height:48px!important;padding:0 14px!important;box-sizing:border-box!important;border:1.5px solid var(--ipx-line-2)!important;border-radius:var(--ipx-r-sm)!important;background-color:#fff!important;font:500 16px/1.3 var(--ipx-font)!important;color:var(--ipx-ink)!important;box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
body.ipx-acct .field select{padding-right:40px!important}
body.ipx-acct .field textarea{height:auto!important;padding:12px 14px!important;min-height:84px!important}
body.ipx-acct .field :is(input.input-text,input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea):hover{border-color:var(--ipx-grey-2)!important}
body.ipx-acct .field :is(input.input-text,input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea):focus{outline:0!important;border-color:var(--ipx-ink)!important;box-shadow:0 0 0 3px var(--ipx-orange-ring)!important}
body.ipx-acct .field :is(input,select,textarea).mage-error,body.ipx-acct .field._error :is(input,select,textarea){border-color:var(--ipx-red,#c62828)!important}
body.ipx-acct .field :is(input,select,textarea).mage-error:focus{box-shadow:0 0 0 3px rgba(198,40,40,.18)!important}
body.ipx-acct .field div.mage-error,body.ipx-acct .field .field-error,body.ipx-acct div.mage-error[generated]{margin:6px 0 0!important;padding:0!important;font:600 13.5px/1.35 var(--ipx-font)!important;color:var(--ipx-red,#c62828)!important}
body.ipx-acct .field .note,body.ipx-acct .field .ipxa-hint{margin:6px 0 0!important;font:500 13.5px/1.35 var(--ipx-font)!important;color:var(--ipx-grey)!important}
body.ipx-acct .field{margin:0 0 18px!important}
body.ipx-acct .field.ipxa-one{display:none!important}
body.ipx-acct .fieldset > .legend{margin:0 0 14px!important;padding:0!important;border:0!important;font:700 20px/1.3 var(--ipx-font-bold)!important;color:var(--ipx-ink)!important}
/* the date picker's button sits inside the taller field */
body.ipx-acct .field.date .control,body.ipx-acct .field.dob .control{position:relative}
body.ipx-acct .field .ui-datepicker-trigger{position:absolute!important;right:6px!important;top:4px!important;width:40px!important;height:40px!important;margin:0!important}
/* checkboxes like checkout's */
body.ipx-acct .field.choice input[type=checkbox],body.ipx-acct input[type=checkbox].checkbox{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important}
body.ipx-acct .field.choice input[type=checkbox] + label{position:relative!important;display:inline-block!important;min-height:var(--ipxa-ctl);padding:1px 0 0 calc(var(--ipxa-ctl) + 12px)!important;font:500 14.5px/1.4 var(--ipx-font)!important;color:var(--ipx-ink)!important;cursor:pointer}
body.ipx-acct .field.choice input[type=checkbox] + label::before{content:""!important;position:absolute!important;left:0!important;top:50%!important;width:var(--ipxa-ctl)!important;height:var(--ipxa-ctl)!important;margin:calc(var(--ipxa-ctl) / -2) 0 0!important;box-sizing:border-box!important;border:1.5px solid var(--ipx-grey-2)!important;border-radius:6px!important;background:#fff!important;transform:none!important;transition:border-color .15s,background-color .15s,box-shadow .15s}
body.ipx-acct .field.choice input[type=checkbox] + label::after{content:none!important}
body.ipx-acct .field.choice input[type=checkbox]:checked + label::before{background:var(--ipx-ink)!important;border-color:var(--ipx-ink)!important}
body.ipx-acct .field.choice input[type=checkbox]:checked + label::after{content:""!important;position:absolute!important;left:7px!important;top:50%!important;width:6px!important;height:11px!important;margin:-7px 0 0!important;border:solid #fff!important;border-width:0 2.2px 2.2px 0!important;background:none!important;transform:rotate(45deg)!important;box-sizing:border-box!important}
body.ipx-acct .field.choice input[type=checkbox]:focus-visible + label::before{box-shadow:0 0 0 3px var(--ipx-orange-ring)!important}
body.ipx-acct .field.choice input[type=checkbox] + label:hover::before{border-color:var(--ipx-ink)!important}
/* password strength: a quiet hint under the field */
body.ipx-acct #password-strength-meter-container{margin:6px 0 0!important}
body.ipx-acct #password-strength-meter{display:inline-block!important;margin:0!important;padding:3px 10px!important;border:0!important;border-radius:var(--ipx-r-pill)!important;background:var(--ipx-stone)!important;font:500 13px/1.35 var(--ipx-font)!important;color:var(--ipx-ink-2,#4a4948)!important;letter-spacing:0!important}
body.ipx-acct #password-strength-meter::before{display:none!important}
body.ipx-acct #password-strength-meter-container.password-weak #password-strength-meter{background:#fdecea!important;color:#a02b20!important}
body.ipx-acct #password-strength-meter-container.password-medium #password-strength-meter{background:#fff3da!important;color:#7a4b00!important}
body.ipx-acct :is(#password-strength-meter-container.password-strong,#password-strength-meter-container.password-very-strong) #password-strength-meter{background:#edf5e1!important;color:var(--ipx-green-deep)!important}
/* buttons: the main action as the orange pill, secondary links in the link colour */
body.ipx-acct .actions-toolbar{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:8px 0 0!important;padding:0!important}
body.ipx-acct .actions-toolbar::before,body.ipx-acct .actions-toolbar::after{display:none!important}
body.ipx-acct .actions-toolbar > .primary,body.ipx-acct .actions-toolbar > .secondary{float:none!important;margin:0!important;width:auto!important;text-align:left!important}
body.ipx-acct .actions-toolbar .action.primary,body.ipx-acct button.action.primary{min-height:48px!important;padding:0 28px!important;border:0!important;border-radius:var(--ipx-r-pill)!important;background:var(--ipx-orange)!important;color:var(--ipx-ink)!important;font:700 16px/1 var(--ipx-font-bold)!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important;cursor:pointer}
body.ipx-acct .actions-toolbar .action.primary:hover,body.ipx-acct button.action.primary:hover{background:var(--ipx-orange-hover)!important}
body.ipx-acct .actions-toolbar .action.primary:focus-visible,body.ipx-acct button.action.primary:focus-visible{outline:2px solid var(--ipx-ink)!important;outline-offset:3px}
body.ipx-acct .actions-toolbar .action.remind,body.ipx-acct .actions-toolbar .action.back,body.ipx-acct .actions-toolbar a.action:not(.primary){display:inline-block;padding:7px 0!important;margin:0!important;border:0!important;background:none!important;font:600 14.5px/1.3 var(--ipx-font)!important;color:var(--ipx-link)!important;text-decoration:underline;text-underline-offset:3px;text-transform:none!important}
body.ipx-acct .fieldset > .field.required > .label::after,body.ipx-acct .fieldset > .fields > .field.required > .label::after,body.ipx-acct .field._required > .label::after{color:var(--ipx-red,#c62828)!important;margin-left:3px!important}
body.ipx-acct .fieldset::after{font:500 13px/1.35 var(--ipx-font)!important;color:var(--ipx-grey)!important}
/* a password field's error comes before the strength hint (6 px under the field, the hint 4 px under the error) */
body.ipx-acct .field.password .control{display:flex!important;flex-direction:column}
body.ipx-acct .field.password .control > input{order:1}
body.ipx-acct .field.password .control > div.mage-error{order:2}
body.ipx-acct .field.password .control > #password-strength-meter-container{order:3}
body.ipx-acct .field.password .control > div.mage-error:not([style*="none"]) ~ #password-strength-meter-container{margin-top:4px!important}