/* Secret Pleasurez: tick boxes you can see on the black background (2026-11-07).
 *
 * The theme's checkboxes were 16px with a #393339 border on #0B0B0D, so the
 * checkout's consent and terms boxes all but disappeared. Every checkbox now
 * gets a bigger box with a cyan outline and glow; the ones that must be ticked
 * to continue (required, plus the payment step's terms) glow pink until
 * ticked. Ticked boxes fill pink with a dark tick (never white on pink).
 * Radio buttons (delivery and payment choices, title) get the cyan outline
 * too, without the glow. Toggle switches (.form-switch) are left as they are.
 *
 * Loaded from templates/_partials/head.tpl with a ?v= version, outside the
 * CCC bundle, so a change shows without clearing caches.
 */

.form-check:not(.form-switch) .form-check-input[type="checkbox"],
.form-check:not(.form-switch) .form-check-input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  background-color: var(--spz-surface-2, #1D1D23);
  border: 2px solid var(--spz-cyan, #70DCE4);
  cursor: pointer;
  flex-shrink: 0;
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"] {
  border-radius: 0.3rem;
  box-shadow: 0 0 0 3px rgba(112, 220, 228, 0.16), 0 0 10px rgba(112, 220, 228, 0.45);
}

/* Must be ticked to continue: pink glow until ticked. */
.form-check:not(.form-switch) .form-check-input[type="checkbox"][required]:not(:checked),
#conditions-to-approve .form-check-input[type="checkbox"]:not(:checked) {
  border-color: var(--spz-pink, #DE4BC0);
  box-shadow: 0 0 0 3px rgba(222, 75, 192, 0.2), 0 0 12px rgba(222, 75, 192, 0.65);
  animation: spz-tick-glow 2.4s ease-in-out infinite;
}

@keyframes spz-tick-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(222, 75, 192, 0.2), 0 0 10px rgba(222, 75, 192, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(222, 75, 192, 0.32), 0 0 18px rgba(222, 75, 192, 0.85); }
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
  background-color: var(--spz-pink, #DE4BC0);
  border-color: var(--spz-pink, #DE4BC0);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B0B0D' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5 10.5 3.2 3.2L15 7'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 3px rgba(222, 75, 192, 0.18), 0 0 10px rgba(222, 75, 192, 0.45);
  animation: none;
}

.form-check:not(.form-switch) .form-check-input[type="radio"]:checked {
  background-color: var(--spz-pink, #DE4BC0);
  border-color: var(--spz-pink, #DE4BC0);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.8' fill='%230B0B0D'/%3e%3c/svg%3e");
  background-size: 100% 100%;
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"]:focus-visible,
.form-check:not(.form-switch) .form-check-input[type="radio"]:focus-visible {
  outline: 2px solid var(--spz-champagne, #E4BCAC);
  outline-offset: 3px;
}

/* A required box left empty after pressing Continue: red, steady. */
.was-validated .form-check:not(.form-switch) .form-check-input[type="checkbox"]:invalid,
.form-check:not(.form-switch) .form-check-input[type="checkbox"].is-invalid {
  border-color: #FF5A5F;
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.25), 0 0 12px rgba(255, 90, 95, 0.7);
  animation: none;
}

.form-check-label {
  cursor: pointer;
}

.form-check:not(.form-switch) {
  padding-left: 2rem;
}

.form-check:not(.form-switch) .form-check-input {
  margin-left: -2rem;
}

@media (prefers-reduced-motion: reduce) {
  .form-check:not(.form-switch) .form-check-input[type="checkbox"] {
    animation: none !important;
  }
}