/**
 * Mercado Mayor — category picker on the registration forms
 * ---------------------------------------------------------------------------
 * Styles the field printed by inc/registration-categories.php. Loaded on the
 * account and vendor-onboarding pages.
 *
 * The options are checkboxes presented as toggle chips rather than a multi-line
 * <select>: a shopper can see every option at a glance and pick several without
 * learning that ctrl-click exists. The native checkbox stays in the DOM and does
 * the work — it is visually hidden, not replaced — so keyboard focus, the tab
 * order and screen-reader semantics are the browser's, not ours.
 *
 * The chip selectors are qualified as `.mm-regcat-field__options label.mm-regcat-chip`
 * rather than the bare class. The chip IS a <label>, and my-account.css styles
 * `.woocommerce-form-register label { display: block }` at (0,1,1) — a single
 * class loses that on specificity no matter which stylesheet loads last, and the
 * chips stacked full-width instead of flowing inline.
 *
 * Account pages are excluded from the global form styling in
 * b2b-marketplace.css §5/§6 by a `body:not(.woocommerce-account)` guard, so
 * everything this field needs is declared here.
 */

.mm-regcat-field{
  margin: 0 0 18px;
}

/* `hidden` is set by js/mm-regcat.js on the block that does not match the
   selected role. Declared because the theme sets `display` on generic
   containers, which would otherwise beat the attribute's UA rule. */
.mm-regcat-field[hidden]{
  display: none !important;
}

.mm-regcat-field__set{
  margin: 0;
  padding: 0;
  border: 0;
}

.mm-regcat-field__label{
  display: block;
  float: none;
  width: auto;
  margin: 0 0 3px;
  padding: 0;
  font-family: var(--mm-font-ui, inherit);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mm-ink, #1E1E1E);
}

.mm-regcat-field__label .required{
  color: var(--mm-accent, #D23D2D);
  border: 0;
  text-decoration: none;
}

.mm-regcat-field__hint{
  margin: 0 0 9px !important;
  font-family: var(--mm-font-ui, inherit);
  font-size: .75rem !important;
  line-height: 1.45 !important;
  color: var(--mm-ink-subtle, #8A8A8A) !important;
}

.mm-regcat-field__options{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* -- The chip ------------------------------------------------------------ */
.mm-regcat-field__options label.mm-regcat-chip{
  position: relative;
  display: inline-flex;
  align-items: center;
  /* `width` is declared, not left to inherit: style.css carries
     `.woocommerce label { width: 100% }`, which made every chip fill its row and
     stack one per line. max-width keeps a long category name from pushing the
     row wider than the form. */
  width: auto;
  max-width: 100%;
  margin: 0 !important;
  padding: 7px 14px;
  font-family: var(--mm-font-ui, inherit);
  font-size: .8125rem;
  font-weight: 500 !important;
  line-height: 1.3;
  color: var(--mm-ink-muted, #5A5A5A) !important;
  background: var(--mm-surface, #fff);
  border: 1px solid var(--mm-border-strong, #D4D3CF);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.mm-regcat-field__options label.mm-regcat-chip:hover{
  border-color: var(--mm-accent, #D23D2D);
  color: var(--mm-accent, #D23D2D) !important;
}

/* Visually hidden, still focusable and still the thing that holds state —
   `display: none` would drop it from the tab order and from the form. */
.mm-regcat-chip input[type="checkbox"]{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Focus lands on the hidden input, so the ring is drawn on its label. */
.mm-regcat-field__options label.mm-regcat-chip:has(input:focus-visible){
  outline: 2px solid var(--mm-accent, #D23D2D);
  outline-offset: 2px;
}

.mm-regcat-field__options label.mm-regcat-chip:has(input:checked){
  color: var(--mm-ink, #1E1E1E) !important;
  background: var(--mm-accent-pastel, #EFA79F);
  border-color: var(--mm-accent-pastel, #EFA79F);
}

/* A tick appears on the selected chips, so the state does not rest on colour
   alone — it stays legible to anyone who cannot separate the two fills. */
.mm-regcat-chip__label::before{
  content: '';
  display: inline-block;
  width: 0;
  height: 6px;
  margin-right: 0;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: width .18s ease, margin .18s ease, transform .18s ease;
  vertical-align: 1px;
}

.mm-regcat-chip:has(input:checked) .mm-regcat-chip__label::before{
  width: 9px;
  margin-right: 8px;
  transform: rotate(-45deg) scale(1);
}

/* Fallback for engines without :has() — colour still communicates the state,
   and the tick simply never animates in. */
@supports not selector(:has(*)){
  .mm-regcat-chip input[type="checkbox"]{
    position: static;
    width: auto;
    height: auto;
    margin-right: 7px;
    opacity: 1;
    pointer-events: auto;
  }
  .mm-regcat-chip__label::before{
    display: none;
  }
}

@media (max-width: 599px){
  .mm-regcat-field__options{
    gap: 6px;
  }
  /* Same qualified selector as the base rule, or the padding would lose to it. */
  .mm-regcat-field__options label.mm-regcat-chip{
    padding: 6px 12px;
  }
}