/* Contraste case CGU / checkboxes formulaires Join — Mboko */
:root {
  --mboko-cgu-ink: #1c1917;
  --mboko-cgu-clay: #9a3412;
  --mboko-cgu-forest: #14532d;
  --mboko-cgu-line: rgba(28, 25, 23, 0.55);
  --mboko-cgu-bg: #fffdf8;
}

/* Case native (si jcf désactivé / ignore) */
form[name="joinForm"] input[type="checkbox"][name="termOfUse"],
form[name="JoinForm"] input[type="checkbox"][name="termOfUse"],
#joinForm input[type="checkbox"][name="termOfUse"],
.ow_table_1 input[type="checkbox"][name="termOfUse"],
.owm_content input[type="checkbox"][name="termOfUse"] {
  -webkit-appearance: checkbox !important;
  appearance: auto !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem;
  min-height: 1.25rem;
  margin: 0 0.45rem 0 0 !important;
  vertical-align: middle;
  accent-color: var(--mboko-cgu-clay);
  border: 2px solid var(--mboko-cgu-line) !important;
  background-color: var(--mboko-cgu-bg) !important;
  opacity: 1 !important;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}

form[name="joinForm"] input[type="checkbox"][name="termOfUse"]:checked,
#joinForm input[type="checkbox"][name="termOfUse"]:checked,
.owm_content input[type="checkbox"][name="termOfUse"]:checked {
  accent-color: var(--mboko-cgu-clay);
  background-color: var(--mboko-cgu-clay) !important;
  border-color: var(--mboko-cgu-clay) !important;
}

form[name="joinForm"] input[type="checkbox"][name="termOfUse"]:focus-visible,
#joinForm input[type="checkbox"][name="termOfUse"]:focus-visible,
.owm_content input[type="checkbox"][name="termOfUse"]:focus-visible {
  outline: 3px solid var(--mboko-cgu-forest);
  outline-offset: 2px;
}

/* Remplacement jcf du thème */
form[name="joinForm"] .jcf-checkbox,
#joinForm .jcf-checkbox,
.ow_table_1 .jcf-checkbox,
.owm_content .jcf-checkbox,
.ow_sign_in_wrap .jcf-checkbox {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border: 2px solid var(--mboko-cgu-line) !important;
  border-radius: 3px !important;
  background: var(--mboko-cgu-bg) !important;
  box-shadow: inset 0 0 0 1px rgba(28, 25, 23, 0.08);
  opacity: 1 !important;
  vertical-align: middle;
}

form[name="joinForm"] .jcf-checkbox.jcf-checked,
#joinForm .jcf-checkbox.jcf-checked,
.ow_table_1 .jcf-checkbox.jcf-checked,
.owm_content .jcf-checkbox.jcf-checked {
  background-color: var(--mboko-cgu-clay) !important;
  border-color: var(--mboko-cgu-clay) !important;
}

form[name="joinForm"] .jcf-checkbox.jcf-checked span,
#joinForm .jcf-checkbox.jcf-checked span,
.ow_table_1 .jcf-checkbox.jcf-checked span,
.owm_content .jcf-checkbox.jcf-checked span {
  background-color: transparent !important;
  /* coche claire sur fond clay */
  box-shadow: inset 0 0 0 2px #fff;
  width: 0.45rem !important;
  height: 0.75rem !important;
  top: 0.05rem !important;
  left: 0.32rem !important;
  margin: 0 !important;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  background-image: none !important;
  display: block !important;
}

form[name="joinForm"] .jcf-checkbox.jcf-focus,
#joinForm .jcf-checkbox.jcf-focus,
.ow_table_1 .jcf-checkbox.jcf-focus,
.owm_content .jcf-checkbox.jcf-focus {
  outline: 3px solid var(--mboko-cgu-forest);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  form[name="joinForm"] input[type="checkbox"][name="termOfUse"],
  #joinForm input[type="checkbox"][name="termOfUse"],
  .owm_content input[type="checkbox"][name="termOfUse"],
  form[name="joinForm"] .jcf-checkbox,
  #joinForm .jcf-checkbox,
  .owm_content .jcf-checkbox {
    width: 1.4rem !important;
    height: 1.4rem !important;
    min-width: 1.4rem;
    min-height: 1.4rem;
  }
}