@import url("auth_tokens.css");

/* Keep the approved soft-relief login while aligning its type and contrast. */
body.getwinco-auth-page {
    --auth-page: #f2f5f8;
    --auth-ink: var(--gw-auth-color-text);
    --auth-muted: #51647b;
    --auth-cobalt: var(--gw-auth-color-action-primary);
    --auth-cobalt-deep: var(--gw-auth-color-action-primary-hover);
    font-family: "Segoe UI", Arial, sans-serif;
}
.getwinco-auth-page .gw-auth-copy h1 {
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: clamp(25px, 2.4vw, 32px);
    line-height: 1.2;
    letter-spacing: -.035em;
}
.getwinco-auth-page .gw-auth-submit { background: var(--auth-cobalt); color: #fff; }
.getwinco-auth-page .gw-auth-submit:hover { background: var(--auth-cobalt-deep); }
.getwinco-auth-page.gw-auth-status { display: grid; place-items: center; padding: 24px 16px; }
.gw-auth-status .gw-auth-shell { display: block; width: min(100%, 500px); min-height: 0; margin: 0; border-radius: 18px; }
.gw-auth-status .gw-auth-access { min-height: 0; padding: 32px; border: 0; }
.gw-auth-status .gw-auth-form-wrap { padding: 28px 0 0; max-width: none; }
.gw-auth-status .gw-auth-copy > :first-child { margin-top: 0; }
.gw-auth-status p { color: var(--auth-muted); }
.gw-auth-status form { display: grid; gap: 14px; margin-top: 20px; }
.gw-auth-status label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.gw-auth-status input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #a4b4c6; border-radius: 6px; background: #fff; color: #142638; }
.gw-auth-status :is(button, .btn) { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 16px; color: #fff; background: #2459a8; border: 1px solid #2459a8; border-radius: 6px; font-weight: 600; cursor: pointer; }
.gw-auth-status .ghost { background: #fff; color: #2459a8; border-color: #a4b4c6; }
.gw-auth-status .message { padding: 12px; margin-top: 14px; border: 1px solid #a6d1c3; background: #e8f3ee; color: #165b45; border-radius: 6px; }
.gw-auth-status .error { border-color: #deb7bf; background: #fff1f3; color: #922b40; }
.gw-auth-status .footer { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.gw-auth-status .footer a { color: #2459a8; text-decoration: underline; text-underline-offset: 3px; }
.gw-auth-status :focus-visible { outline: 3px solid #2459a8; outline-offset: 3px; }
@media (max-width: 600px) {
    .gw-auth-status .gw-auth-access { padding: 24px 20px; }
}