/* Checkout of a cloud plan: address of the app (partials/checkout_address.php) */
.ca .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ca-host { display: flex; align-items: stretch; max-width: 100%; }
.ca-host .input { flex: 1 1 140px; min-width: 0; border-radius: 0; }
.ca-host .input:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ca-fix {
    display: flex; align-items: center; padding: 0 12px; background: var(--bg-2); border: 1px solid var(--line-2);
    font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
}
.ca-host .ca-fix:first-child { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ca-host .ca-fix:last-child { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ca-msg { font-size: 13px; margin-top: 6px; min-height: 18px; color: var(--muted); }
.ca-msg.ok { color: var(--brand); }
.ca-msg.bad { color: var(--danger); }
.ca-modes { border: 0; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.ca-mode {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
    cursor: pointer; font-weight: 500;
}
.ca-mode:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.ca-mode input { margin-top: 3px; accent-color: var(--brand); width: 17px; height: 17px; flex: none; }
.ca-mode span { display: grid; gap: 2px; min-width: 0; }
.ca-mode small { color: var(--muted); font-weight: 400; font-size: 13px; }
.ca-domain { margin-top: 14px; }
.ca-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ca-row .input { flex: 1 1 220px; min-width: 0; }
.ca-note { font-size: 13px; margin: 6px 0 0; }
@media (max-width: 480px) {
    .ca-host { flex-wrap: wrap; }
    .ca-host .input, .ca-host .input:first-child { flex-basis: 100%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
    .ca-host .ca-fix:last-child { flex-basis: 100%; border-left: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 8px 12px; }
    .ca-row .btn { width: 100%; }
}