/* ==========================================================================
   MOULDSHOP FACETS — sidebar filter group headings and option controls.
   Operator, 2026-09-23, with a crop of ours and one of the reference:
     "filter name bolder and a bit bigger, same relation of size as on image"
     "selection fields bigger and rounded as on image - also instead of check
      icon - filled circle inside circle with small space between"

   CSS ONLY, ON VENDOR MARKUP. The groups and options are rendered by vendor
   `ProductListFacets/FormFields.cshtml`, which is not shadowed and not edited:
     group heading   h2.opacity-85.m-0.flex-fill.h6.my-2  (h6 = 1rem)
     option          label.form-check > input.form-check-input[type=checkbox]
   Scoped to the two facet forms (desktop sidebar, mobile modal), so no other
   checkbox on the site changes. The Colors render type is a different control
   (`.colorbox`, no `.form-check-input`) and is not touched.

   NO COLOUR IS SET (DEC-0063). The ring and the dot are `currentColor`, taken
   from the option's own text colour, which comes from the row.
   ========================================================================== */

/* --- the group heading ----------------------------------------------------
   The reference heading reads about 1.25x its option text and bold. Ours was
   the same size as the options (h6 = 1rem, options inherit 1rem) at the vendor
   weight. */
:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) [data-bs-toggle="collapse"] > h2 {
  font-size: 1.25rem;
  font-weight: 600; /* was 700: "Filter names too thick" (operator, 2026-09-23) */
}

/* --- the option control: a ring, and a dot when chosen --------------------
   ~18.7px ring (first cut 22px, then 15% smaller), 1.5px stroke, fully round.
   Checked draws a small filled dot centred in the ring (half the first cut's
   dot, ~4.6px clear gap), and no tick. Vendor's checked state sets a dark
   fill and a tick SVG through `--bs-form-check-bg-image`; both are replaced,
   not layered.

   `color: inherit` first, because an <input> does not inherit text colour by
   default, and every stroke and fill below is `currentColor`. */
:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check {
  /* 15% smaller than the first cut's 1.375rem (22px): ~18.7px. */
  --ms-facet-box: calc(1.375rem * 0.85);
  --ms-facet-gap: 0.75rem;
  display: flex;
  align-items: center;
  gap: var(--ms-facet-gap);
  padding-left: 0;
}

:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check .form-check-input[type="checkbox"] {
  color: inherit;
  float: none;
  flex: 0 0 auto;
  width: var(--ms-facet-box);
  height: var(--ms-facet-box);
  margin: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background-color: transparent;
  background-image: none;
}

:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check .form-check-input[type="checkbox"]:checked {
  background-color: transparent;
  border-color: currentColor;
  /* The dot is HALF the first cut's. First cut: ring interior radius 9.5px,
     dot radius 6.5px (13px across). Now: 3.25px radius (6.5px across) inside
     an interior radius of ~7.85px, which is 41% of it. Expressed as a share
     of the interior so it scales with --ms-facet-box. */
  background-image: radial-gradient(
    circle closest-side,
    currentColor 41%,
    transparent calc(41% + 0.5px)
  );
  background-size: 100% 100%;
}

:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check .form-check-input[type="checkbox"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  box-shadow: none;
}

/* The label was laid out for a float; with the control in a flex row it only
   needs to fill the rest. */
:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check .form-check-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- room for the ring and its focus outline --------------------------------
   Operator: "you forgot about left padding to avoid errors". Vendor gives each
   option list `max-height: 15rem; overflow-y: auto`, and a scroll box clips on
   BOTH axes. The controls sat flush against its left and top edges, so the
   ring's stroke and the 2px + 2px focus outline were cut off. The list gets
   4px (outline + offset) of padding on those sides and gives it back as a
   negative margin, so the controls stay aligned with the heading. */
:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) [data-swift-facet-container] {
  padding: 4px 0 4px 4px;
  margin: -4px 0 -4px -4px;
}

/* --- the divider between filter groups -----------------------------------
   Operator: "dividers between filters - add top and bottom padding to it -
   top: 12px, bottom: 24". The divider is vendor's `border-bottom` on each group
   wrapper. 12px above it is the group's own bottom padding, half a gutter. 24px
   below it is a full gutter, made up of the margin under the group plus the
   next heading's vendor `my-2` (0.5rem, an `!important` utility, left alone). */
:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) div:has(> [data-bs-toggle="collapse"] > h2) {
  padding-bottom: calc(var(--ms-card-gutter) / 2);
  margin-bottom: calc(var(--ms-card-gutter) - 0.5rem);
}

/* --- rest, hover and chosen: colour and weight ----------------------------
   Operator, 2026-09-23: "outer circle a bit lighter - same the text next to it,
   full navy on hover and active - also active and hover inner circle light
   blue - and text also blue - and bolder".

   ALL SCHEME TOKENS, NO LITERALS (DEC-0063, mouldshop-colorscheme.css):
     rest          ring + text  --ms-navy-80    the row's ink at 80%
     hover/chosen  ring         --ms-ink        the row's ink, full
                   dot + text   --ms-accent-ink light blue on default rows,
                                                the row's ink on a coloured one
                   text weight  600
   "A bit lighter" is taken as the 80% step, not 60%. At 60% the label text
   would fall under 4.5:1 on white. 80% stays well above it.

   Hover shows the light-blue dot on an unchosen option too, as a preview of the
   choice ("active and hover inner circle light blue"). Options with a zero
   count carry `disabled` on the label from vendor and get no hover. */
:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check {
  color: var(--ms-navy-80);
}

:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check:not([disabled]):hover,
:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check:has(> .form-check-input:checked) {
  color: var(--ms-accent-ink);
}

:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check:not([disabled]):hover .form-check-label,
:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check:has(> .form-check-input:checked) .form-check-label {
  font-weight: 600;
}

:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check:not([disabled]):hover > .form-check-input[type="checkbox"],
:is(form[id^="FacetsForm_Desktop_"], #FacetsModal) .form-check > .form-check-input[type="checkbox"]:checked {
  border-color: var(--ms-ink);
  background-image: radial-gradient(
    circle closest-side,
    var(--ms-accent-ink) 41%,
    transparent calc(41% + 0.5px)
  );
}