/* ------------------------------------------------------------------
   CompressCheckbox — Jomlist listing form
   Copy: "Compress photos for faster upload" + state-aware helper line.
   Drop-in: import the component, import this CSS (or port the tokens).
   ------------------------------------------------------------------ */

.jl-check {
  --jl-ink: #1c1c1c;
  --jl-muted: #5f5f5f;
  --jl-blue: #0979f5;
  --jl-blue-ink: #0a63c9;
  --jl-box: #b9b9b9;

  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 44px;            /* comfortable tap target on mobile */
  padding-block: 6px;
  max-width: 420px;            /* keeps the label at one line + helper */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.jl-check__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.jl-check__box {
  flex: none;
  width: 15px; height: 15px;
  margin-top: 3px;
  border-radius: 3.5px;
  background: var(--jl-blue);
  border: 1.5px solid var(--jl-blue);
  display: grid;
  place-items: center;
  transition: background .12s ease, border-color .12s ease;
}

.jl-check__box svg {
  width: 10px; height: 10px;
  stroke: #fff; stroke-width: 3.4;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 1;
  transition: opacity .1s ease;
}

/* unticked */
.jl-check__input:not(:checked) + .jl-check__box {
  background: #fff;
  border-color: var(--jl-box);
}
.jl-check__input:not(:checked) + .jl-check__box svg { opacity: 0; }

/* hover / focus */
.jl-check:hover .jl-check__box { border-color: var(--jl-blue-ink); }
.jl-check__input:focus-visible + .jl-check__box {
  outline: 3px solid rgba(9, 121, 245, .35);
  outline-offset: 2px;
}

.jl-check__text {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: var(--jl-ink);
}

.jl-check__label {
  font-weight: 600;
  display: block;
}

.jl-check__hint {
  display: block;
  color: var(--jl-muted);
  font-weight: 400;
}

/* high-contrast / reduced motion courtesy */
@media (prefers-reduced-motion: reduce) {
  .jl-check__box, .jl-check__box svg { transition: none; }
}