/* Two-step options request form.
 *
 * One markup block, two placements: the assessment page renders it as a light
 * card, the end-of-life guides drop the same block inside the navy exposure
 * card and add .options-form--dark. Everything colour-related goes through the
 * --of-* tokens below so the dark variant is a token swap, not a second sheet.
 *
 * Load this after styles.css and eol-pricing.css. Several rules here match the
 * specificity of .article rules in those sheets and rely on source order.
 */
.options-form {
  --of-label: var(--navy);
  --of-ink: var(--ink);
  --of-soft: var(--ink-soft);
  --of-line: var(--line);
  --of-track: rgba(0,59,92,.16);
  --of-accent: var(--green);
  --of-link: var(--navy);
  --of-pick: var(--navy);
}
.options-form--dark {
  --of-label: #fff;
  --of-ink: #fff;
  --of-soft: rgba(255,255,255,.76);
  --of-line: rgba(255,255,255,.18);
  --of-track: rgba(255,255,255,.22);
  --of-accent: #7CE0A0;
  --of-link: #9BD7F0;
  --of-pick: #7CE0A0;
}
.options-form [hidden] { display: none !important; }

/* Step chrome */
.options-form .form-steps { margin-bottom: 22px; }
.options-form--dark .form-steps { margin-top: 26px; }
.options-form--dark .form-steps__bar { background: var(--of-track); }
.options-form--dark .form-steps__meta b { color: #fff; }
.options-form--dark .form-steps__meta span { color: var(--of-soft); }
.options-form .form-fieldset { margin-bottom: 22px; }
.options-form--dark .form-fieldset legend { color: #fff; }
.options-form--dark .form-fieldset legend::before { background: var(--of-accent); }
/* With the script running, the step counter already names the step, so the
   fieldset heading stays for screen readers only. */
.options-form--stepped .form-fieldset legend {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Back is a quiet link at the far end of the step counter, out of the way of
   the button that matters. */
.options-form .of-back {
  margin-left: auto; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--of-soft); text-decoration: underline; text-underline-offset: 3px;
}
.options-form .of-back:hover { color: var(--of-label); }
.options-form .of-back:focus-visible { outline: 2px solid var(--of-accent); outline-offset: 3px; border-radius: 2px; }

/* Range buttons. Step one uses them for VM count and storage, step two for
   what the visitor wants next. Chip styles come from styles.css. */
.options-form .field label { color: var(--of-label); }
.options-form .field label .req { color: var(--of-accent); }
.options-form--dark .chip-group label { background: rgba(255,255,255,.08); border-color: var(--of-line); color: #fff; }
.options-form--dark .chip-group input:checked + label { background: var(--of-accent); border-color: var(--of-accent); color: #04263B; }
.options-form--dark .chip-group input:focus-visible + label { box-shadow: 0 0 0 3px rgba(124,224,160,.4); }

.of-choice { margin-bottom: 20px; }
.of-choice > span { display: block; font-weight: 700; font-size: .96rem; color: var(--of-label); margin-bottom: 8px; }
.of-choice .req { color: var(--of-accent); }
.options-form .of-help { margin: 8px 0 0; font-size: .82rem; line-height: 1.5; color: var(--of-soft); }

/* Step two's choices are cards with a line on what each one gets you. Side by
   side when there is room, stacked when there is not. */
.of-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.of-options input { position: absolute; opacity: 0; pointer-events: none; }
.of-options label {
  position: relative; display: grid; gap: 3px; align-content: start;
  padding: 12px 14px 12px 40px; border: 1.5px solid var(--of-line); border-radius: 12px;
  background: var(--white); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.of-options label::before {
  content: ""; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px;
  box-sizing: border-box; border-radius: 50%; border: 2px solid var(--of-line);
}
.of-options label b { font-size: .98rem; line-height: 1.3; color: var(--of-label); }
.of-options label span { font-size: .85rem; line-height: 1.4; color: var(--of-soft); }
.of-options input:checked + label { border-color: var(--of-pick); box-shadow: inset 0 0 0 1px var(--of-pick); }
.of-options input:checked + label::before { border-color: var(--of-pick); background: radial-gradient(circle, var(--of-pick) 0 3.5px, transparent 4.5px); }
.of-options input:focus-visible + label { outline: 3px solid rgba(0,59,92,.25); outline-offset: 2px; }
.options-form--dark .of-options label { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); }
.options-form--dark .of-options label::before { border-color: rgba(255,255,255,.55); }
.options-form--dark .of-options input:checked + label { background: rgba(124,224,160,.10); }
.options-form--dark .of-options input:focus-visible + label { outline-color: rgba(124,224,160,.5); }

/* styles.css pins the Continue button right by id; these forms use data
   attributes, so the same rule is restated here against the attribute. */
.options-form .form-nav [data-of-next] { margin-left: auto; }
.options-form .form-actions .btn { white-space: normal; text-align: center; max-width: 100%; }
.options-form--dark .form-nav,
.options-form--dark .form-actions { border-top-color: var(--of-line); }
/* On the last step the send button follows the fields directly, full width,
   with no divider above it. */
.options-form--last .form-actions { border-top: 0; padding-top: 4px; }
.options-form .form-actions [data-of-submit] { width: 100%; }
/* The shared markup carries .btn--ghost, which is navy on navy inside the
   end-of-life card. Repaint it there rather than forking the markup. */
.options-form--dark .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.5); }
.options-form--dark .btn--ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.options-form .legal, .options-form .of-note { font-size: .86rem; line-height: 1.55; color: var(--of-soft); margin: 0; }
.options-form a:not(.btn) { color: var(--of-link); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .options-form .form-nav [data-of-next] { margin-left: 0; }
}
/* Step two on the end-of-life guides: one line repeating the sizes they
   picked, above the email box. */
.options-form .of-ready { margin: 0 0 14px; font-weight: 700; font-size: 1rem; line-height: 1.45; color: var(--of-label); }