/* Logged-out pages: login, signup, password reset, terms, account blocked (and the customer pay page) */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1f2937;
    background: #f3f4f6;
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
}
form, .card {
    background: #fff;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .06);
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
}

/* The MowBill logo at the top of each card (not on a company's customer pay page) */
form::before, .card::before, .doc::before {
    content: "";
    display: block;
    height: 30px;
    margin-bottom: 1.5rem;
    background: url("/assets/img/logo-dark.png") no-repeat left center / contain;
}
body.no-brand form::before, body.no-brand .card::before { content: none; }

h1 { margin: 0 0 1rem; font-size: 1.4rem; }
label { display: block; margin-bottom: 1rem; font-size: .9rem; font-weight: 600; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    display: block;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    margin-top: .35rem;
    padding: .55rem .7rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font: inherit;
    font-size: 16px; /* no zoom on phones */
    font-weight: 400;
}
input:focus { outline: 2px solid #2a6636; outline-offset: -1px; border-color: #2a6636; }
button {
    width: 100%;
    min-height: 46px;
    padding: .65rem;
    border: 0;
    border-radius: 8px;
    background: #1f4d29;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
button:hover { background: #183a1f; }
button:disabled { opacity: .7; cursor: default; }
a { color: #2a6636; }

.links { margin: 1rem 0 0; text-align: center; font-size: .9rem; }

.message, .error {
    padding: .6rem .75rem;
    border-radius: 6px;
    font-size: .9rem;
    margin: 0 0 1rem;
}
.message { background: #f0fdf4; color: #166534; }
.error   { background: #fef2f2; color: #b91c1c; }

/* Signup */
form.wide, .card.wide { max-width: 420px; }
.hint { font-size: .85rem; color: #6b7280; margin: 0 0 1rem; }
label .hint { display: block; margin: .25rem 0 0; font-weight: 400; }
.row { display: flex; gap: .75rem; }
.row label { flex: 1; min-width: 0; }
label.check { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; font-weight: 400; }
label.check input { width: auto; margin: .15rem 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Terms and Privacy pages */
.doc { max-width: 720px; margin: 2rem auto; padding: 2rem; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); line-height: 1.55; }
.doc h1 { font-size: 1.6rem; }
.doc h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.doc .note { background: #fffbeb; color: #92400e; padding: .6rem .75rem; border-radius: 6px; font-size: .9rem; }
body.doc-page { display: block; padding: 0 1rem; }
a.button { display: block; min-height: 46px; box-sizing: border-box; padding: .7rem; font-weight: 600; text-align: center; background: #1f4d29; color: #fff; border-radius: 8px; text-decoration: none; }
a.button:hover { background: #183a1f; }

/* Customer pay page */
.pay-balance { font-size: 1.05rem; margin: 0 0 1rem; }

/* Touch screens: text boxes at 16px or more, or iPhone zooms in when one is tapped (and stays zoomed).
   !important because many forms set smaller sizes for desktop. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea { font-size: 16px !important; }
}