/* =====================================================================
   The insurer picker in the quote engine: one line of insurer marks.

   The row used to be a joined ribbon of names, which squeezed seven names into
   narrow cells and cut them off. It is now the same strip on a desk as on a
   phone: seven detached tiles, each showing the insurer's own mark - greyed
   while the insurer is not being quoted, in full colour once it is, with a
   tick in the corner. The checkbox stays the real control (it keeps its name
   for screen readers and for the quoting logic) and the name span stays in the
   markup, just not on screen, because every mark carries its insurer's name.

   On a desk the tile also wears the insurer's colour - its pale tint behind
   the mark, its ink along the top edge and in the tick - which is what the
   ribbon showed before.
   ===================================================================== */

body #quote-form #insurerCheckboxes.insurer-checkboxes {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* A chip is only a chip when it carries a mark; anything else in this row
   (an "All" style option) is not part of the strip. */
body #quote-form #insurerCheckboxes .insurer-checkbox-option:not(:has(.insurer-chip-logo)) {
  display: none !important;
}

body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(.insurer-chip-logo) {
  position: relative !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 5px 8px !important;
  /* One hairline, in the insurer's own colour. */
  border: 1px solid var(--insurer-ink, #017a78) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #526158 !important;
  cursor: pointer;
}

/* The mark is the label; the name stays for screen readers. */
body #quote-form #insurerCheckboxes .insurer-checkbox-option>span {
  display: none !important;
}

/* With a mouse, the name comes up over the tile it belongs to - the trading
   name the chip is labelled with. Phones never hover, so they are left alone. */
@media (hover: hover) and (min-width: 1025px) {
  body #quote-form #insurerCheckboxes .insurer-checkbox-option:hover>span,
  body #quote-form #insurerCheckboxes .insurer-checkbox-option:focus-within>span {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 8px) !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: #013947 !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 16px rgb(6, 25, 26, 0.28) !important;
    pointer-events: none !important;
  }

  /* A small tail so the pill reads as attached to its tile. */
  body #quote-form #insurerCheckboxes .insurer-checkbox-option:hover::before,
  body #quote-form #insurerCheckboxes .insurer-checkbox-option:focus-within::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 3px) !important;
    transform: translateX(-50%) rotate(45deg) !important;
    width: 8px !important;
    height: 8px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: #013947 !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }
}

body #quote-form #insurerCheckboxes .insurer-checkbox-option input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
}

/* The joined-ribbon tick circle belongs to the old layout; the strip marks a
   chosen insurer with its own corner tick below. */
body #quote-form #insurerCheckboxes .insurer-checkbox-option::before,
body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(.insurer-chip-logo)::after {
  content: none !important;
}

body #quote-form #insurerCheckboxes .insurer-chip-logo {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 22px !important;
  object-fit: contain !important;
  filter: grayscale(1) opacity(0.5);
  transition: filter 0.16s ease;
}

/* Chosen: the mark comes back to full colour. */
body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(input:checked) .insurer-chip-logo {
  filter: none;
}

/* A tick on every insurer being quoted, on top of the colour change. It is
   just the mark - no disc behind it - so nothing competes with the logo. */
body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(.insurer-chip-logo):has(input:checked)::after {
  content: "✓" !important;
  position: absolute !important;
  top: 1px !important;
  right: 4px !important;
  z-index: 2 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #017a78 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* ---------- the row before a member is chosen ----------
   The selectors are gated until a principal (or a child, or a group family) is
   added, and while they are gated nothing has really been chosen yet. So the
   marks show in full colour - the whole panel of insurers on offer - with no
   ticks at all. The ticks arrive with the enabled row, and an insurer that is
   then unticked drops to grey. */
body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(input:disabled) {
  opacity: 1 !important;
  filter: none !important;
}

body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(input:disabled) .insurer-chip-logo {
  filter: none !important;
}

body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(.insurer-chip-logo):has(input:disabled)::after {
  content: none !important;
}

/* An insurer the chosen cover type is not published for stays blacked out even
   while the row is gated. */
body #quote-form #insurerCheckboxes .insurer-checkbox-option.insurer-not-offered:has(input:disabled) .insurer-chip-logo {
  filter: grayscale(1) opacity(0.28) !important;
}

/* ---------- a desk ---------- */
@media (min-width: 1025px) {
  body #quote-form #insurerCheckboxes.insurer-checkboxes {
    gap: 6px !important;
  }

  body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(.insurer-chip-logo) {
    /* 6px of padding either side of the 30px mark below, plus the hairline,
       lands the tile on 44px - the same slight step up the marks take. */
    min-height: 44px !important;
    padding: 6px 7px !important;
    border-radius: 11px !important;
  }

  /* Six of the seven marks are square-ish and are drawn to this height, so
     26px -> 30px is a real 4px on the marks themselves, not just the tile. The
     one wide mark (Britam) is bound by the tile's width and is unchanged. */
  body #quote-form #insurerCheckboxes .insurer-chip-logo {
    height: 30px !important;
  }

  /* The insurer's own colour also fills the tile once it is ticked, and inks
     the tick itself. */
  body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(.insurer-chip-logo):has(input:checked) {
    background: var(--insurer-tint, #eaf6f5) !important;
  }

  body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(.insurer-chip-logo):has(input:checked)::after {
    color: var(--insurer-ink, #017a78) !important;
  }

  /* An insurer the chosen cover type is not published for stays blacked out,
     and never reads as selected. */
  body #quote-form #insurerCheckboxes .insurer-checkbox-option.insurer-not-offered {
    background: #f4f6f5 !important;
    border-color: #e2e7e4 !important;
    box-shadow: none !important;
  }

  body #quote-form #insurerCheckboxes .insurer-checkbox-option.insurer-not-offered .insurer-chip-logo {
    filter: grayscale(1) opacity(0.28);
  }
}

/* ---------- a phone ---------- */
@media (max-width: 1024px) {
  body #quote-form #insurerCheckboxes.insurer-checkboxes {
    gap: 5px !important;
  }

  body #quote-form #insurerCheckboxes .insurer-chip-logo {
    height: 19px !important;
  }

  body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(.insurer-chip-logo) {
    padding: 5px 4px !important;
  }

  /* Chosen: the mark comes back to full colour on a light-green tile. */
  body #quote-form #insurerCheckboxes .insurer-checkbox-option:has(input:checked) {
    background: #eaf6f5 !important;
  }

  body #quote-form #insurerCheckboxes .insurer-checkbox-option.insurer-not-offered {
    background: #f4f6f5 !important;
    border-color: #e2e7e4 !important;
    box-shadow: none !important;
  }

  body #quote-form #insurerCheckboxes .insurer-checkbox-option.insurer-not-offered .insurer-chip-logo {
    filter: grayscale(1) opacity(0.28);
  }
}

/* ===== an insurer that does not sell the chosen cover =====
   The engine marks those selectors hidden (they are unchecked and disabled
   too), so the row drops them and the remaining tiles spread out across the
   width. The tile's own display:flex has to be outranked for that to show, and
   the attribute selector is repeated through :has() to do it. */
body #quote-form #insurerCheckboxes .insurer-checkbox-option[hidden]:has(.insurer-chip-logo) {
  display: none !important;
}