/* virtsync store — standalone-form chrome.
 * Loaded (via base.html's {% block head %}) only by the pages that render a
 * full form outside a pricing tier: professional.html and admin.html.
 *
 * The input and button primitives themselves live in base.css; this file adds
 * only what those pages need on top: the bordered card, field labels, and the
 * radio control. (The home page's tier form deliberately has no chrome.)
 */

form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  margin: 1.2rem 0;
}

form label {
  display: block;
  color: var(--muted);
  font-size: 1.3rem;
  margin: .55rem 0;
}

/* Radios and checkboxes must not take the generic `input { width: 100% }`: a
 * full-width checkbox renders as a centred box with its sentence pushed beneath. */
input[type=radio], input[type=checkbox] {
  width: auto;
  margin: 0 .4rem 0 0;
}
/* A checkbox label is a sentence the box leads. Flex keeps a wrapped second line
 * aligned with the text rather than tucked under the box. */
form label:has(> input[type=checkbox]) {
  display: flex;
  align-items: start;
  gap: .45rem;
}