/* ==========================================================================
   Printigly — Auth pages (sign in / register / lost + reset password)
   Loaded on is_account_page() when the user is logged out, and on wp-login.php.
   Scoped entirely under .pg-auth so it cannot leak into the logged-in
   My Account dashboard, which has its own my-account.css.
   Added 2026-07-28.
   ========================================================================== */

.pg-auth {
    --pg-line: #E4E7EC;
    --pg-line-2: #F0F2F5;
    --pg-ink: #1a1a2e;
    --pg-ink-2: #535B69;
    --pg-ink-3: #858D9B;
    --pg-brand: var(--printigly-primary, #FF6B35);
    --pg-tint: #FFF3EE;

    display: flex;
    justify-content: center;
    padding: 48px 20px 72px;
}

.pg-auth-card {
    width: 100%;
    max-width: 420px;
}

/* ---- header ---- */
.pg-auth-head {
    text-align: center;
    margin-bottom: 26px;
}

.pg-auth-title {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--pg-ink);
    margin: 0 0 7px;
    line-height: 1.2;
}

.pg-auth-sub {
    font-size: 14.5px;
    color: var(--pg-ink-2);
    margin: 0;
    line-height: 1.55;
}

/* ---- form ---- */
.pg-auth-form {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 14px;
    padding: 24px 22px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    /* my-account.css floats the submit button; without this the form collapses
       to zero height around it and the button hangs past the card edge. */
    overflow: hidden;
}

.pg-auth-form::after {
    content: "";
    display: table;
    clear: both;
}

.pg-field {
    margin-bottom: 15px;
}

.pg-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--pg-ink-2);
    margin-bottom: 5px;
}

/* Beat WooCommerce's own .input-text rules without !important wars:
   two classes = specificity 0,2,0, which clears .woocommerce-Input. */
.pg-auth .pg-input,
.pg-auth input.pg-input {
    width: 100%;
    padding: 12px 13px;
    font-size: 15px;
    font-family: inherit;
    color: var(--pg-ink);
    background: #fff;
    border: 1.5px solid var(--pg-line);
    border-radius: 9px;
    line-height: 1.4;
    margin: 0;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.pg-auth .pg-input:focus {
    outline: none;
    border-color: var(--pg-brand);
    box-shadow: 0 0 0 3px var(--pg-tint);
}

.pg-auth .pg-input::placeholder {
    color: var(--pg-ink-3);
}

/* password reveal.
   WooCommerce injects its own .show-password-input eye icon into password
   fields. We ship our own accessible "Show" button, so hide theirs — two
   toggles on one field is a bug, not a feature. */
.pg-auth .show-password-input,
.pg-auth .woocommerce-password-strength,
.pg-auth .woocommerce-password-hint {
    display: none !important;
}

.pg-input-wrap {
    position: relative;
}

.pg-input-wrap .pg-input {
    padding-right: 62px;
}

.pg-reveal {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--pg-ink-3);
    cursor: pointer;
    border-radius: 6px;
}

.pg-reveal:hover {
    color: var(--pg-brand);
}

.pg-reveal:focus-visible {
    outline: 2px solid var(--pg-brand);
    outline-offset: 1px;
}

/* ---- remember + forgot row ---- */
.pg-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 18px;
    flex-wrap: wrap;
}

.pg-auth .pg-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--pg-ink-2);
    cursor: pointer;
    margin: 0;
}

.pg-auth .pg-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--pg-brand);
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

.pg-auth-link {
    font-size: 13.5px;
    color: var(--pg-brand);
    text-decoration: none;
    font-weight: 600;
}

.pg-auth-link:hover {
    text-decoration: underline;
}

/* ---- buttons ----
   my-account.css already targets `.woocommerce-form-login button[type="submit"]`
   (specificity 0,2,1) with a 50px pill radius. A plain `.pg-auth .pg-btn` is
   0,2,0 and loses. Matching with class+class+attribute gets us to 0,3,1 so we
   win on specificity rather than !important, which a later sheet could not undo. */
.pg-auth .pg-auth-form button.pg-btn,
.pg-auth .pg-auth-card button.pg-btn,
.pg-auth .pg-auth-card a.pg-btn,
.pg-auth .pg-btn {
    display: block;
    width: 100%;
    padding: 13px 16px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: var(--pg-brand);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 1.3;
    transition: filter .15s;
    /* my-account.css sets width:100% + 14px padding with no box-sizing, so the
       button rendered wider than its card. Border-box keeps padding inside. */
    box-sizing: border-box;
    margin: 6px 0 0;
}

.pg-auth .pg-auth-form button.pg-btn:hover,
.pg-auth .pg-auth-card button.pg-btn:hover,
.pg-auth .pg-auth-card a.pg-btn:hover,
.pg-auth .pg-btn:hover {
    filter: brightness(.94);
    color: #fff;
    background: var(--pg-brand);
}

.pg-auth .pg-btn:focus-visible {
    outline: 2px solid var(--pg-ink);
    outline-offset: 2px;
}

.pg-auth .pg-auth-card button.pg-btn--ghost,
.pg-auth .pg-btn--ghost {
    background: #fff;
    color: var(--pg-ink);
    border: 1.5px solid var(--pg-line);
}

.pg-auth .pg-auth-card button.pg-btn--ghost:hover,
.pg-auth .pg-btn--ghost:hover {
    border-color: var(--pg-brand);
    color: var(--pg-brand);
    background: #fff;
    filter: none;
}

/* ---- register divider + panel ---- */
.pg-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: var(--pg-ink-3);
    font-size: 12.5px;
}

.pg-auth-divider::before,
.pg-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--pg-line);
}

.pg-register {
    margin-top: 14px;
}

.pg-register[hidden] {
    display: none;
}

.pg-auth-note {
    font-size: 13px;
    color: var(--pg-ink-2);
    background: var(--pg-line-2);
    padding: 10px 12px;
    border-radius: 8px;
    margin: 0 0 15px;
    line-height: 1.5;
}

.pg-auth-back {
    text-align: center;
    margin: 16px 0 0;
}

.pg-field-msg {
    display: block;
    font-size: 12.5px;
    margin-top: 5px;
    min-height: 16px;
}

.pg-field-msg.is-ok { color: #16A34A; }
.pg-field-msg.is-err { color: #E94536; }

/* ---- trust strip ---- */
.pg-auth-trust {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 12.5px;
    color: var(--pg-ink-3);
}

.pg-auth-trust li::before {
    content: "✓";
    color: #16A34A;
    font-weight: 700;
    margin-right: 5px;
}

/* ---- WooCommerce notices inside the auth card ---- */
.pg-auth .woocommerce-error,
.pg-auth .woocommerce-message,
.pg-auth .woocommerce-info {
    border-radius: 10px;
    font-size: 13.5px;
    margin-bottom: 16px;
    padding-left: 16px;
}

/* Neutralise the default two-column login layout if any plugin re-adds it */
.pg-auth .col2-set,
.pg-auth .u-columns {
    display: block;
    width: auto;
}

@media (max-width: 480px) {
    .pg-auth { padding: 28px 14px 48px; }
    .pg-auth-form { padding: 20px 16px; }
    .pg-auth-title { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-auth * { transition: none !important; }
}