/* Auth pages keep navigation in document flow so it cannot cover form controls. */
body:is([data-page="login"], [data-page="register"]) .bottom-nav {
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 20px auto 0;
}
body:is([data-page="login"], [data-page="register"]) :is(.app-shell, #app.app) {
    padding-bottom: 0;
}

/* Scoped to the contact area; all colours follow the active site theme. */
.auth-contact {
    --contact-accent: var(--green, var(--accent-strong, var(--accent, currentColor)));
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 22px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--line, var(--border, #ddd));
    border-radius: var(--radius, 12px);
    background: var(--sage, var(--soft, transparent));
    text-align: left;
}
.auth-contact .auth-contact__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 8px 2px;
    color: var(--contact-accent);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.6;
}
.auth-contact__link + .auth-contact__link { border-top: 1px solid var(--line, var(--border, #ddd)); }
.auth-contact .auth-contact__icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; }
.auth-contact__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.auth-contact .auth-contact__vip {
    box-sizing: border-box;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 2px 7px;
    border: 1px solid var(--contact-accent);
    border-radius: var(--radius, 12px);
    color: var(--contact-accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.auth-contact--default3 .auth-contact__vip { border-radius: 7px; }
.auth-contact--default6 .auth-contact__vip { border-radius: 4px; }
.auth-contact--default7 .auth-contact__vip { border-radius: 2px; font-family: var(--serif); }
.auth-contact--default9 .auth-contact__vip { border-radius: 0; }
.auth-contact__label { color: var(--ink, var(--text, inherit)); }
.auth-contact__address { overflow-wrap: anywhere; min-width: 0; }
.auth-contact .auth-contact__link:hover .auth-contact__address { text-decoration: underline; text-underline-offset: 3px; }
.auth-contact .auth-contact__link:focus-visible { outline: 2px solid var(--contact-accent); outline-offset: 3px; border-radius: 3px; }
.auth-contact--default2 { --contact-accent: var(--accent-bright, var(--accent)); background: var(--surface, transparent); border-radius: 10px; }
.auth-contact--default3 { border-radius: 14px; }
.auth-contact--default6 { border-radius: 6px; }
.auth-contact--default7 { border-radius: 3px; }
.auth-contact--default7 .auth-contact__label { font-family: var(--serif); }
.auth-contact--default9 { border-radius: 0; }
@media (max-width: 360px) {
    .auth-contact { padding: 8px 10px; }
    .auth-contact__copy { flex-direction: column; align-items: flex-start; }
}