/*
 * Pixron sign-in / sign-up / password pages (layouts/auth.tpl). Same language as the site:
 * pill buttons (#fbb040, hover ink), hairline inputs with an amber focus ring, Phosphor icons,
 * "back to site" link and a quiet legal footer on the form side.
 */
body.px-auth { --pxa-ink: #0b1220; --pxa-muted: #667085; --pxa-line: #d0d5dd; --pxa-amber: #fbb040; font-family: "Farro", system-ui, sans-serif; }
body.px-auth a { text-decoration: none; }

/* Stage (photo side) */
body.px-auth .auth-stage-scrim { background: linear-gradient(180deg, rgba(11, 18, 32, .78) 0%, rgba(11, 18, 32, .35) 35%, rgba(11, 18, 32, .65) 65%, rgba(11, 18, 32, .96) 100%) !important; }
body.px-auth .auth-stage-title { font-weight: 700 !important; letter-spacing: -.015em !important; }
body.px-auth .px-auth-points-ico { color: #fbbf24 !important; background: rgba(251, 176, 64, .12) !important; border: 1px solid rgba(251, 176, 64, .3) !important; border-radius: 10px !important; }
body.px-auth .auth-stage-foot a { color: #fbbf24 !important; }

/* Form side */
body.px-auth .auth-form { background: #fff; }
body.px-auth .px-auth-back { position: static; align-self: flex-start; margin-bottom: 8px; align-items: center;  /* in flow: long forms (register) start right below it */ gap: 8px; color: var(--pxa-muted); font-size: 14px; font-weight: 600; transition: color .2s; }
.px-auth-back svg { transition: transform .25s; }
body.px-auth .px-auth-back:hover { color: var(--pxa-ink); }
.px-auth-back:hover svg { transform: translateX(-3px); }
body.px-auth .auth-title { font-weight: 700 !important; letter-spacing: -.015em !important; color: var(--pxa-ink); }
body.px-auth .auth-sub { color: var(--pxa-muted); }
body.px-auth .form-label { color: #344054; font-weight: 600; font-size: 14px; }
body.px-auth .form-control, body.px-auth .form-select {
  min-height: 48px; border-radius: 10px; border: 1px solid var(--pxa-line); color: var(--pxa-ink); font-size: 15px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: border-color .2s, box-shadow .2s;
}
body.px-auth .form-control:focus, body.px-auth .form-select:focus { border-color: var(--pxa-amber); box-shadow: 0 0 0 4px rgba(251, 176, 64, .22); }
body.px-auth .form-check-input:checked { background-color: var(--pxa-ink); border-color: var(--pxa-ink); }
body.px-auth .form-check-input:focus { box-shadow: 0 0 0 4px rgba(251, 176, 64, .22); border-color: var(--pxa-amber); }

/* Buttons: pixron.com pill */
body.px-auth .btn { border-radius: 999px !important; font-weight: 600; transition: background-color .25s, border-color .25s, color .25s, transform .45s cubic-bezier(.16, 1, .3, 1); }
body.px-auth .btn-primary { min-height: 50px; background: var(--pxa-amber) !important; border: 1px solid var(--pxa-amber) !important; color: #111 !important; box-shadow: none !important; font-size: 16px; }
body.px-auth .btn-primary:hover { background: #111 !important; border-color: #111 !important; color: #fff !important; transform: translate3d(0, -2px, 0); }
body.px-auth .btn-primary:active { transform: none; }
body.px-auth .btn-soft, body.px-auth .btn-outline-secondary, body.px-auth [data-social-providers] .btn {
  background: #fff !important; border: 1px solid var(--pxa-line) !important; color: var(--pxa-ink) !important;
}
body.px-auth .btn-soft:hover, body.px-auth .btn-outline-secondary:hover, body.px-auth [data-social-providers] .btn:hover { border-color: #111 !important; }
body.px-auth .btn:focus-visible { outline: 2px solid var(--pxa-amber); outline-offset: 3px; box-shadow: none; }
body.px-auth .link-primary, body.px-auth .auth-form a:not(.btn):not(.px-auth-back):not(.site-brand) { color: #b54708; font-weight: 600; }
body.px-auth .auth-form a:not(.btn):not(.px-auth-back):not(.site-brand):hover { color: #93370d; }

/* Register steps follow the amber/ink pair */
body.px-auth .reg-step:focus-within .reg-step-num { background: var(--pxa-amber) !important; border-color: var(--pxa-amber) !important; color: #111 !important; }
body.px-auth .reg-step.is-done .reg-step-num { background: #ecfdf3 !important; border-color: #abefc6 !important; color: #067647 !important; }

/* Legal footer */
.px-auth-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 32px; padding-top: 18px; border-top: 1px solid #eef0f3; color: var(--pxa-muted); font-size: 13px; }
.px-auth-foot a { color: #475467 !important; font-weight: 600; }
.px-auth-foot a:hover { color: var(--pxa-ink) !important; }
.px-auth-help a { color: var(--pxa-ink) !important; }
.px-auth-legal { display: flex; gap: 16px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { body.px-auth .btn, .px-auth-back svg { transition: none; } }

/* Joined controls keep one outline: the pill shape belongs to the group, not to every button in it
   (btn-group segmented toggles, input-group buttons). Without this each button became its own pill. */
body.px-auth .btn-group > .btn, body.px-auth .btn-group-vertical > .btn, body.px-auth .input-group > .btn,
body.px-auth .input-group > .form-control, body.px-auth .input-group > .form-select, body.px-auth .input-group > .input-group-text { border-radius: 0 !important; }
body.px-auth .btn-group > .btn:first-child, body.px-auth .btn-group > .btn-check:first-child + .btn,
body.px-auth .input-group > :first-child { border-start-start-radius: 999px !important; border-end-start-radius: 999px !important; }
body.px-auth .btn-group > .btn:last-child, body.px-auth .input-group > :last-child:not(.dropdown-menu):not(.invalid-feedback):not(.valid-feedback) { border-start-end-radius: 999px !important; border-end-end-radius: 999px !important; }
body.px-auth .input-group > .form-control:first-child, body.px-auth .input-group > .form-select:first-child { padding-inline-start: 18px; }
body.px-auth .btn-group > .btn + .btn, body.px-auth .btn-group > .btn-check + .btn { margin-inline-start: -1px; }
/* Checked toggle buttons (btn-check) must read as selected even with our white secondary buttons */
body.px-auth .btn-check:checked + .btn, body.px-auth .btn-check:active + .btn, body.px-auth .btn.active:not(.nav-link) {
  background: #111 !important; border-color: #111 !important; color: #fff !important;
}
body.px-auth .btn-check:focus-visible + .btn { outline: 2px solid #fbb040; outline-offset: 2px; }

/* iOS Safari zooms the page when a focused field is under 16px — keep text fields at 16px on iOS only */
@supports (-webkit-touch-callout: none) {
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  body select, body textarea { font-size: max(16px, 1em) !important; }
}