/* =====================================================================
   auth-pages.css  —  /login and /register
   ---------------------------------------------------------------------
   Loaded by templates/page-login.php and templates/page-register.php,
   always AFTER homepage.css, which is where the :root design tokens
   (--blue-darkest, --blue-primary, --font-sans, the market palette) live.

   LAYOUT
   A single centred card. An earlier revision ran a dark brand panel down
   the left half; it was removed because that panel sat directly beneath
   the site header and used the SAME --blue-darkest background, so header
   and panel merged into one large blue mass with no edge between them.
   Nothing replaces it — a centred card needs no marketing pane, and the
   logo it carried is already in the header bar a few pixels above.

   SITE CHROME
   These pages render templates/parts/header.php and parts/footer.php
   UNMODIFIED. This file adds no header of its own and no extra nav
   buttons. The only thing it does about the header is offset the layout
   by its height, because #bq-main-header is position:fixed;height:54px
   (homepage.css:101) and would otherwise cover the top of the card. Same
   offset .bq-legal-page uses in content-pages.css.

   BOX-SIZING
   These templates are headless: they never call wp_head(), so no theme
   reset loads and the browser default of content-box applies. Every
   full-width control here also carries padding, so without the reset
   below inputs and buttons render wider than the card holding them.
   ===================================================================== */

/* =====================================================================
   SELF-HOSTED LATO
   Removes a render-blocking round trip to fonts.googleapis.com plus a
   second hop to fonts.gstatic.com. These files already shipped inside
   this plugin (assets/fonts) and were unused. Lato has no true 600, so
   font-weight:600 resolves to 700 — same as the Google-hosted version.
   ===================================================================== */

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Black.woff') format('woff');
    font-weight: 900; font-style: normal; font-display: swap;
}

.bq-auth, .bq-auth *, .bq-auth *::before, .bq-auth *::after { box-sizing: border-box; }

/* The templates toggle views, messages, hints and the strength meter with
   the plain `hidden` attribute. `hidden` is only a UA rule of display:none,
   so any display declaration on the same element beats it. */
.bq-auth [hidden] { display: none !important; }

body.bq-auth-page { margin: 0; background: var(--gray-100); }

.bq-auth {
    /* COMPACT BY DESIGN. Fields were 46px, then 42px, and were still too
       tall — an auth form is a utility, and every extra pixel per field is
       multiplied by six on the register form.
       NOTE: this value is NOT raised again at any breakpoint. A previous
       revision bumped it to 46px under 480px, which made the fields taller
       on the phone than on the desktop — the opposite of the intent. */
    --bq-auth-field-h: 38px;
    --bq-auth-card-w: 424px;

    /* Accent blue for the primary action. --blue-primary (#00529b) is the
       same family as the header, so the submit button read as furniture.
       This is lifted enough in tone to register as the one thing to click
       while staying unmistakably in the same palette. */
    --bq-auth-accent: #1a7fe0;
    --bq-auth-accent-hover: #1568bd;

    display: flex;
    align-items: center;
    justify-content: center;
    /* 54px clears the fixed header; the rest is breathing room. Without the
       offset the card's first heading sits underneath the menu bar. */
    padding: 86px 22px 56px;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-sans);
    color: var(--gray-700);
    /* A very soft cool wash behind the card, warmest just under the header,
       so the white card reads as lifted off the page rather than floating
       on an identical white field. Two stops, no texture — at this size
       anything busier competes with the form. */
    background:
        radial-gradient(1100px 520px at 50% -8%, rgba(26,127,224,.09), rgba(26,127,224,0) 70%),
        var(--gray-100);
}

/* =====================================================================
   THE CARD
   ===================================================================== */

.bq-auth__card {
    position: relative;
    width: 100%;
    max-width: var(--bq-auth-card-w);
    padding: 30px 32px 26px;
    background: var(--white);
    border: 1px solid var(--bq-line);
    border-radius: 3px;
    /* Two shadows: a tight one that reads as a real edge, and a wide soft
       one that lifts the card off the wash. */
    box-shadow: 0 1px 2px rgba(0,20,40,.04), 0 14px 40px rgba(0,20,40,.08);
    animation: bqAuthRise .45s cubic-bezier(.22,.61,.36,1) both;
    transition: height .28s cubic-bezier(.22,.61,.36,1);
}

/* Accent hairline across the top edge. The one piece of ornament on the
   page, and it doubles as the only thing tying the card to the brand now
   that the panel is gone. Offset by -1px so it covers the border corners. */
.bq-auth__card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--bq-auth-accent) 0%, #4aa3df 45%, rgba(74,163,223,0) 100%);
    border-radius: 3px 3px 0 0;
}

/* Swappable panel inside the card (sign in / reset / register). No styling
   of its own — visibility is the `hidden` attribute. It exists so
   auth-pages.js can find the active view without knowing the page. */
.bq-auth__view { display: block; }

/* Centred heading over left-aligned fields: the heading centres with the
   card, the labels stay left where they are actually read. */
.bq-auth__title {
    margin: 0 0 5px;
    text-align: center;
    font-size: 22px; line-height: 1.25;
    font-weight: 700; letter-spacing: -.015em;
    color: var(--bq-ink);
}
.bq-auth__subtitle {
    margin: 0 0 22px;
    text-align: center;
    font-size: 13.5px; line-height: 1.5;
    color: var(--gray-500);
}

/* --- Fields --- */
.bq-auth__field { margin-bottom: 10px; }

.bq-auth__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bq-auth__pair .bq-auth__field { margin-bottom: 10px; }

.bq-auth__field > label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px; font-weight: 700;
    color: #33475b;
}
.bq-auth__optional { font-weight: 400; font-size: 11.5px; color: var(--gray-500); margin-left: 3px; }

.bq-auth__input-wrap { position: relative; }

.bq-auth input[type="text"],
.bq-auth input[type="email"],
.bq-auth input[type="password"] {
    width: 100%;
    height: var(--bq-auth-field-h);
    padding: 0 12px;
    font-family: var(--font-sans);
    font-size: 14.5px;
    color: var(--bq-ink);
    background: #fbfcfd;
    border: 1px solid var(--bq-line-strong);
    border-radius: 2px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
    -webkit-appearance: none; appearance: none;
}
.bq-auth .bq-auth__input-wrap input { padding-right: 40px; }
.bq-auth input::placeholder { color: #a9b4c0; }

.bq-auth input[type="text"]:hover,
.bq-auth input[type="email"]:hover,
.bq-auth input[type="password"]:hover { border-color: #a9bccd; }

.bq-auth input[type="text"]:focus,
.bq-auth input[type="email"]:focus,
.bq-auth input[type="password"]:focus {
    background: var(--white);
    border-color: var(--bq-auth-accent);
    box-shadow: 0 0 0 3px rgba(26,127,224,.15);
}

.bq-auth input.is-invalid,
.bq-auth input.is-invalid:hover { border-color: var(--accent-red); }
.bq-auth input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(211,47,47,.13); }

.bq-auth input:-webkit-autofill,
.bq-auth input:-webkit-autofill:hover,
.bq-auth input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--bq-ink);
    -webkit-box-shadow: 0 0 0 40px #fbfcfd inset;
    caret-color: var(--bq-ink);
}

/* --- Show / hide password --- */
.bq-auth__reveal {
    position: absolute;
    top: 0; right: 0;
    width: 38px; height: var(--bq-auth-field-h);
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0;
    color: #93a1b0; cursor: pointer;
    transition: color .16s ease;
}
.bq-auth__reveal:hover { color: var(--bq-auth-accent); }
.bq-auth__reveal svg { width: 17px; height: 17px; }
.bq-auth__reveal .bq-auth__eye-off { display: none; }
.bq-auth__reveal[aria-pressed="true"] .bq-auth__eye { display: none; }
.bq-auth__reveal[aria-pressed="true"] .bq-auth__eye-off { display: block; }

/* --- Password strength meter --- */
.bq-auth__meter { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.bq-auth__meter-track { flex: 1 1 auto; height: 3px; background: var(--gray-300); border-radius: 2px; overflow: hidden; }
.bq-auth__meter-fill {
    display: block; height: 100%; width: 0;
    background: var(--accent-red);
    transition: width .3s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}
.bq-auth__meter-label {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--gray-500);
    min-width: 48px; text-align: right;
}
.bq-auth__meter[data-score="1"] .bq-auth__meter-fill { width: 25%;  background: var(--accent-red); }
.bq-auth__meter[data-score="2"] .bq-auth__meter-fill { width: 50%;  background: #e8a33d; }
.bq-auth__meter[data-score="3"] .bq-auth__meter-fill { width: 78%;  background: #3d8fc4; }
.bq-auth__meter[data-score="4"] .bq-auth__meter-fill { width: 100%; background: var(--bq-green); }

.bq-auth__hint { margin: 6px 0 0; font-size: 12px; line-height: 1.4; }
.bq-auth__hint--error { color: var(--accent-red); }
.bq-auth__hint--ok    { color: var(--bq-green); }

/* --- Checkboxes --- */
.bq-auth__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    margin: 2px 0 14px;
}

.bq-auth__check {
    position: relative;   /* the visually-hidden input below is absolute */
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    font-size: 13px; line-height: 1.45;
    color: var(--gray-700);
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
}
.bq-auth__check--consent { margin: 0 0 12px; }

/* The real input stays in the layout (not display:none) so it remains
   focusable and reachable by assistive tech. */
.bq-auth__check input[type="checkbox"] {
    position: absolute;
    width: 17px; height: 17px;
    margin: 0; opacity: 0; cursor: pointer;
}
.bq-auth__check-box {
    width: 17px; height: 17px;
    margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bq-line-strong);
    border-radius: 2px;
    background: var(--white);
    color: transparent;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.bq-auth__check-box svg { width: 11px; height: 11px; }
.bq-auth__check input:checked ~ .bq-auth__check-box {
    background: var(--bq-auth-accent);
    border-color: var(--bq-auth-accent);
    color: var(--white);
}
.bq-auth__check input:focus-visible ~ .bq-auth__check-box {
    box-shadow: 0 0 0 3px rgba(26,127,224,.22);
    border-color: var(--bq-auth-accent);
}
.bq-auth__check--consent a { color: var(--bq-auth-accent); text-decoration: underline; text-underline-offset: 2px; }

/* --- Inline text-button (Forgot password, Back to sign in) --- */
.bq-auth__link {
    background: none; border: 0; padding: 0;
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 600;
    color: var(--bq-auth-accent);
    cursor: pointer; white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: border-color .18s ease;
}
.bq-auth__link:hover { border-bottom-color: currentColor; }

/* --- reCAPTCHA --- */
.bq-auth__captcha { margin: 0 0 12px; min-height: 78px; }
/* The widget is a fixed 304px iframe; below this the card's inner width
   drops under it, so it is scaled from its own top-left rather than
   allowed to overflow. */
@media (max-width: 400px) {
    .bq-auth__captcha { transform: scale(.86); transform-origin: 0 0; height: 68px; min-height: 0; }
}

/* --- Submit --- */
.bq-auth__submit {
    position: relative;
    width: 100%;
    height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-sans);
    font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
    color: var(--white);
    background: var(--bq-auth-accent);
    border: 1px solid var(--bq-auth-accent);
    border-radius: 2px;
    cursor: pointer; overflow: hidden;
    box-shadow: 0 1px 2px rgba(26,127,224,.24);
    transition: background-color .18s ease, border-color .18s ease, transform .12s ease, opacity .18s ease, box-shadow .18s ease;
}
.bq-auth__submit:hover:not(:disabled) {
    background: var(--bq-auth-accent-hover);
    border-color: var(--bq-auth-accent-hover);
    box-shadow: 0 2px 8px rgba(26,127,224,.3);
}
.bq-auth__submit:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.bq-auth__submit:focus-visible { outline: 2px solid var(--blue-darkest); outline-offset: 2px; }
.bq-auth__submit:disabled { cursor: not-allowed; opacity: .68; box-shadow: none; }

/* Sheen that crosses the button once on hover — the only thing on the page
   that moves in response to the pointer. */
.bq-auth__submit::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-18deg);
    transition: left .55s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
}
.bq-auth__submit:hover:not(:disabled)::after { left: 125%; }

.bq-auth__submit-label { transition: opacity .18s ease, transform .18s ease; }

.bq-auth__spinner {
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.32);
    border-top-color: var(--white);
    border-radius: 50%;
    opacity: 0;
    animation: bqAuthSpin .62s linear infinite;
    transition: opacity .18s ease;
}
.bq-auth__submit.is-busy .bq-auth__submit-label { opacity: 0; transform: translateY(-4px); }
.bq-auth__submit.is-busy .bq-auth__spinner { opacity: 1; }

/* Sits below the card's own padding, on a hairline, so the switch reads as
   a footer to the card rather than another form control. */
.bq-auth__alt {
    margin: 18px -32px -26px;
    padding: 13px 32px;
    text-align: center;
    font-size: 13px;
    color: var(--gray-500);
    background: #fafbfc;
    border-top: 1px solid var(--bq-line);
    border-radius: 0 0 3px 3px;
}
.bq-auth__alt a, .bq-auth__alt button {
    background: none; border: 0; padding: 0;
    font-family: var(--font-sans); font-size: 13px; font-weight: 700;
    color: var(--bq-auth-accent);
    text-decoration: none; cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color .18s ease;
}
.bq-auth__alt a:hover, .bq-auth__alt button:hover { border-bottom-color: currentColor; }

/* --- Message block --- */
.bq-auth__messages {
    margin-bottom: 12px;
    padding: 9px 12px;
    font-size: 13px; line-height: 1.5;
    border-radius: 2px;
    border-left: 3px solid var(--accent-red);
    background: rgba(211,47,47,.06);
    color: #9c2020;
    text-align: left;
    animation: bqAuthShake .4s cubic-bezier(.36,.07,.19,.97);
}
.bq-auth__messages.is-success {
    border-left-color: var(--bq-green);
    background: var(--bq-green-soft);
    color: #14612f;
    animation: bqAuthRise .35s ease both;
}
.bq-auth__messages ul { margin: 0; padding-left: 17px; }
.bq-auth__messages li + li { margin-top: 4px; }
.bq-auth__messages p { margin: 0; }
.bq-auth__messages a { color: inherit; font-weight: 700; text-decoration: underline; }

/* =====================================================================
   AJAX FORM SWAP
   Switching between sign-in and sign-up replaces the card contents in
   place. The card is measured and height-locked by auth-pages.js during
   the swap so the page does not jolt when the taller register form
   arrives; these two rules are the crossfade.
   ===================================================================== */
.bq-auth__card .bq-auth__view { opacity: 1; transition: opacity .2s ease; }
.bq-auth__card.is-swapping .bq-auth__view { opacity: 0; transition: opacity .13s ease; }

/* =====================================================================
   SUCCESS OVERLAY
   Covers the viewport below the fixed header. Fixed rather than absolute
   so it stays put on a page that scrolls to reach the footer.
   ===================================================================== */

.bq-auth__success {
    position: fixed;
    inset: 54px 0 0 0;
    display: flex; align-items: center; justify-content: center;
    padding: 32px;
    background: rgba(247,250,252,.95);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    z-index: 900;   /* under #bq-main-header (1000), over everything else */
    opacity: 0;
    animation: bqAuthFadeIn .28s ease forwards;
}
.bq-auth__success[hidden] { display: none; }

.bq-auth__success-inner { width: 100%; max-width: 330px; text-align: center; }

.bq-auth__success-mark { color: var(--bq-green); margin-bottom: 20px; }
.bq-auth__success-mark svg { width: 70px; height: 70px; display: block; margin: 0 auto; }

/* r=40 => circumference 2*pi*40 = 251.33 */
.bq-auth__ring {
    stroke-dasharray: 252; stroke-dashoffset: 252;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    animation: bqAuthDrawRing .62s cubic-bezier(.32,.26,.24,1) forwards;
}
.bq-auth__tick {
    stroke-dasharray: 56; stroke-dashoffset: 56;
    animation: bqAuthDrawTick .34s cubic-bezier(.65,0,.45,1) .44s forwards;
}

.bq-auth__success-title {
    margin: 0 0 8px;
    font-size: 22px; font-weight: 700; letter-spacing: -.015em;
    color: var(--bq-ink);
    opacity: 0;
    animation: bqAuthRise .5s cubic-bezier(.22,.61,.36,1) .5s forwards;
}
.bq-auth__success-sub {
    margin: 0;
    font-size: 14px; line-height: 1.5;
    color: var(--gray-500);
    opacity: 0;
    animation: bqAuthRise .5s cubic-bezier(.22,.61,.36,1) .6s forwards;
}

.bq-auth__success-steps {
    list-style: none;
    margin: 20px 0 0; padding: 0;
    display: grid; gap: 9px;
    text-align: left;
}
.bq-auth__success-steps li {
    display: grid; grid-template-columns: 16px minmax(0, 1fr);
    align-items: center; gap: 10px;
    font-size: 13px; color: var(--gray-500);
    opacity: 0; transform: translateY(6px);
    transition: opacity .38s ease, transform .38s ease, color .38s ease;
}
.bq-auth__success-steps li svg { width: 16px; height: 16px; color: var(--bq-green); }
.bq-auth__success-steps li.is-done { opacity: 1; transform: none; color: #33475b; }

.bq-auth__success-bar {
    margin-top: 24px; height: 2px;
    background: var(--gray-300); border-radius: 2px; overflow: hidden;
}
.bq-auth__success-bar span {
    display: block; height: 100%; width: 100%;
    background: var(--bq-auth-accent);
    transform: scaleX(0); transform-origin: 0 50%;
    /* Duration set inline by auth-pages.js so the bar finishes exactly when
       the redirect fires — a progress bar that lies is worse than none. */
    animation: bqAuthProgress var(--bq-auth-progress, 1.8s) linear forwards;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 480px) {
    .bq-auth { padding: 76px 16px 44px; }
    .bq-auth__card { padding: 26px 22px 22px; }
    .bq-auth__alt  { margin: 16px -22px -22px; padding: 12px 22px; }
    .bq-auth__title { font-size: 21px; }
    .bq-auth__pair { grid-template-columns: 1fr; gap: 0; }
    .bq-auth__row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Short viewports — a laptop at 1366x768 with browser chrome, or a phone in
   landscape. Centring stops making sense before the card stops fitting. */
@media (max-height: 820px) {
    .bq-auth { align-items: flex-start; }
}

/* =====================================================================
   KEYFRAMES
   ===================================================================== */

@keyframes bqAuthRise    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bqAuthFadeIn  { to { opacity: 1; } }
@keyframes bqAuthDrawRing{ to { stroke-dashoffset: 0; } }
@keyframes bqAuthDrawTick{ to { stroke-dashoffset: 0; } }
@keyframes bqAuthSpin    { to { transform: rotate(360deg); } }
@keyframes bqAuthProgress{ to { transform: scaleX(1); } }
@keyframes bqAuthShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

/* =====================================================================
   REDUCED MOTION
   Every animation here is decorative, so all are switched off rather than
   shortened. The SVG draw-ons need their end state restored explicitly or
   the ring and tick would never paint at all. auth-pages.js reads the same
   query and cuts its redirect delays, so a visitor who asked for less
   motion gets a shorter wait, not the same pause with nothing in it.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .bq-auth *, .bq-auth *::before, .bq-auth *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .bq-auth__ring, .bq-auth__tick { stroke-dashoffset: 0; }
    .bq-auth__card, .bq-auth__success-title, .bq-auth__success-sub { opacity: 1; }
    .bq-auth__success-bar span { transform: scaleX(1); }
}