/*
 * The widget's default look.
 *
 * **Every rule is scoped under `assuraf-quote-form`.** The widget renders into the light
 * DOM rather than a shadow root, which is a deliberate trade: a broker can restyle it to
 * match their own site — which they will want to, since it sits in the middle of their
 * page — and in exchange this file must never touch anything outside the element. A bare
 * `input { … }` here would restyle the host's newsletter box.
 *
 * It inherits `font` and `color` from the page rather than setting them, so the form
 * looks like it belongs to whoever embedded it instead of announcing a vendor. Sizes are
 * relative for the same reason.
 *
 * This stylesheet is optional. The widget works without it — the markup is a form, a
 * label and an input — and a broker who wants none of this can simply not load it.
 */

assuraf-quote-form {
  display: block;
  /* A form the visitor cannot read on a phone is a form nobody completes. */
  font: inherit;
  color: inherit;
}

assuraf-quote-form .assuraf-form {
  display: grid;
  gap: 1.25rem;
}

assuraf-quote-form .assuraf-group {
  display: grid;
  gap: 1rem;
  border: 0;
  padding: 0;
  margin: 0;
}

assuraf-quote-form .assuraf-group-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  opacity: .8;
}

assuraf-quote-form .assuraf-field {
  display: grid;
  gap: .35rem;
}

/*
 * A checkbox reads as a statement you agree with, not as a question with an answer
 * below it. Laid out inline with its label so the two are one thing — a lone box under
 * a heading, stretched across the field's width, looks like a control that lost its
 * label.
 */
assuraf-quote-form .assuraf-field--boolean {
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .6rem;
}

assuraf-quote-form .assuraf-field--boolean .assuraf-label {
  order: 2;
}

assuraf-quote-form .assuraf-field--boolean input {
  order: 1;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
}

assuraf-quote-form .assuraf-field--boolean .assuraf-help,
assuraf-quote-form .assuraf-field--boolean .assuraf-problem {
  order: 3;
  grid-column: 1 / -1;
}

/*
 * A hidden field is hidden by the `hidden` attribute the widget sets, not by a class.
 * Restated here because a page's own reset commonly sets `display: block` on everything
 * and quietly defeats `[hidden]` — which would put a question on screen that the server
 * is about to throw away.
 */
assuraf-quote-form [hidden] {
  display: none !important;
}

assuraf-quote-form .assuraf-label {
  font-weight: 600;
  font-size: .95rem;
}

assuraf-quote-form .assuraf-required {
  color: #b23b2e;
}

assuraf-quote-form .assuraf-help {
  margin: 0;
  font-size: .85rem;
  opacity: .7;
}

assuraf-quote-form input[type='text'],
assuraf-quote-form input[type='email'],
assuraf-quote-form input[type='tel'],
assuraf-quote-form input[type='url'],
assuraf-quote-form input[type='date'],
assuraf-quote-form input[type='datetime-local'],
assuraf-quote-form select {
  /* 16px is the threshold below which iOS Safari zooms the page on focus, which throws
     a visitor out of the form they were filling in. */
  font: inherit;
  font-size: max(1rem, 16px);
  padding: .55rem .7rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

assuraf-quote-form .assuraf-money {
  display: flex;
  align-items: center;
  gap: .5rem;
}

assuraf-quote-form .assuraf-currency {
  font-size: .9rem;
  opacity: .7;
  white-space: nowrap;
}

assuraf-quote-form .assuraf-choices {
  display: grid;
  gap: .4rem;
}

assuraf-quote-form .assuraf-choice {
  display: flex;
  align-items: center;
  gap: .5rem;
}

assuraf-quote-form .assuraf-choice label {
  font-weight: 400;
}

assuraf-quote-form [aria-invalid='true'] {
  border-color: #b23b2e;
}

assuraf-quote-form .assuraf-problem {
  margin: 0;
  font-size: .85rem;
  color: #b23b2e;
}

assuraf-quote-form .assuraf-unavailable {
  margin: 0;
  font-size: .85rem;
  opacity: .7;
  font-style: italic;
}

assuraf-quote-form .assuraf-submit,
assuraf-quote-form .assuraf-again {
  font: inherit;
  font-size: max(1rem, 16px);
  padding: .7rem 1.2rem;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  justify-self: start;
}

/*
 * **`CanvasText` on `Canvas`, not `currentColor`.**
 *
 * The first version of this rule was `background: currentColor; color: Canvas`, which is
 * circular: `currentColor` resolves against the element's *own* `color`, which the next
 * line had just set to the page's background — so the button painted itself the same
 * colour as the page and became an invisible rectangle. It was still clickable, which is
 * the worst version of that bug.
 *
 * The two system colours follow the page's light or dark scheme and are guaranteed to
 * contrast with each other, so this works on a broker's site whichever way round their
 * palette is — which is the reason for not hard-coding white-on-navy in the first place.
 */
assuraf-quote-form .assuraf-submit {
  background: CanvasText;
  color: Canvas;
}

assuraf-quote-form .assuraf-submit[disabled] {
  opacity: .6;
  cursor: progress;
}

assuraf-quote-form .assuraf-again {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  padding: .5rem 1rem;
  margin-top: 1rem;
}

assuraf-quote-form .assuraf-result {
  display: grid;
  gap: .5rem;
}

assuraf-quote-form .assuraf-amount {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
}

assuraf-quote-form .assuraf-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .3rem;
}

assuraf-quote-form .assuraf-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .95rem;
  padding-block: .2rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

assuraf-quote-form .assuraf-reference {
  margin: 0;
  font-size: .8rem;
  opacity: .6;
  /* The reference is what somebody reads out on the phone to support, so it has to be
     selectable and legible one character at a time. */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: all;
}

assuraf-quote-form .assuraf-refusal {
  margin: 0;
  font-size: 1.05rem;
}

assuraf-quote-form .assuraf-broken {
  padding: 1rem;
  border: 1px solid #b23b2e;
  border-radius: 3px;
}

assuraf-quote-form .assuraf-broken p {
  margin: 0;
}

assuraf-quote-form .assuraf-loading {
  margin: 0;
  opacity: .7;
}

/*
 * Nothing animates for a visitor who asked for less motion. The only movement here is
 * the dimming of a button, and honouring the preference costs one rule.
 */
@media (prefers-reduced-motion: reduce) {
  assuraf-quote-form * {
    transition: none !important;
    animation: none !important;
  }
}