/* The delivery address form, shown on the account tab and inside the cart. Every colour
   a partner theme token, like the other app screens. */

.addr {
    display: flex;
    flex-direction: column;
    font-family: var(--wx-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
    color: var(--wx-ink, #fff);
}

.addr-shown {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.addr-lines {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--wx-muted, #cfcfcf);
}


/* Who it goes to, above where - the name on the profile. */
.addr-name { color: var(--wx-ink, #fff); font-weight: 600; }

.addr-unverified {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--wx-warn, #e5a13a);
}

/* ---------- the form ---------- */

.addr-form {
    display: flex;
    flex-direction: column;
    gap: 14px; /* the same as the profile's .acct-form, so every form on Profile reads alike */
}

.addr-row {
    display: grid;
    /* State is short and the ZIP is shorter; side by side they read as one line of an
       address rather than two questions. */
    /* minmax(0, ...) because a plain 1fr won't go below an input's built-in width -
       two of those side by side were wider than a phone, and focusing the ZIP slid the
       whole page left to show it. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.addr-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}