/* Sellerts — global custom checkbox & switch styles */

:root {
  --cb-primary: var(--panel-primary, var(--st-primary, #3478f6));
  --cb-primary-hover: var(--panel-primary-hover, var(--st-primary-dark, #2868e5));
  --cb-primary-soft: var(--panel-primary-soft, var(--st-primary-soft, rgba(52, 120, 246, 0.15)));
  --cb-border: var(--panel-border, var(--st-border, #e4e9f0));
  --cb-border-strong: #cbd5e1;
  --cb-surface: #ffffff;
  --cb-muted: var(--panel-text-muted, var(--st-text-muted, #64748b));
  --cb-size: 1.125rem;
  --cb-radius: 6px;
  --cb-switch-w: 2.5rem;
  --cb-switch-h: 1.25rem;
  --cb-ease: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  --cb-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cb-switch-thumb: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,0.98)'/%3e%3c/svg%3e");
}

/* ── Square checkboxes (all pages) ── */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--cb-size);
  height: var(--cb-size);
  min-width: var(--cb-size);
  min-height: var(--cb-size);
  margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--cb-border-strong);
  border-radius: var(--cb-radius);
  background-color: var(--cb-surface);
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.7rem;
  cursor: pointer;
  vertical-align: middle;
  transition: var(--cb-ease);
}

/* Override full-width inputs in auth fields */
.st-field input[type="checkbox"],
.st-auth input[type="checkbox"] {
  width: var(--cb-size);
  min-width: var(--cb-size);
  padding: 0;
}

input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--cb-primary);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 3px var(--cb-primary-soft);
}

input[type="checkbox"]:checked {
  background-color: var(--cb-primary);
  border-color: var(--cb-primary);
  background-image: var(--cb-checkmark);
}

input[type="checkbox"]:indeterminate {
  background-color: var(--cb-primary);
  border-color: var(--cb-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8h8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

input[type="checkbox"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: #f1f5f9;
}

/* ── Bootstrap form-check layout polish ── */
.form-check:not(.form-switch) {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 0;
  min-height: var(--cb-size);
}

.form-check:not(.form-switch) .form-check-input {
  float: none;
  margin-left: 0;
  margin-top: 0.125rem;
}

.form-check:not(.form-switch) .form-check-label {
  padding-left: 0;
  cursor: pointer;
  user-select: none;
  line-height: 1.45;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ── Toggle switches (override square checkbox styles) ── */
.form-check.form-switch {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-left: 0;
  min-height: var(--cb-switch-h);
}

.form-check.form-switch .form-check-input {
  float: none;
  margin-left: 0;
  margin-top: 0;
  width: var(--cb-switch-w);
  height: var(--cb-switch-h);
  min-width: var(--cb-switch-w);
  min-height: var(--cb-switch-h);
  border-radius: var(--cb-switch-h);
  border: 1px solid var(--cb-border-strong);
  background-color: #e2e8f0;
  background-image: var(--cb-switch-thumb);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  transition: background-position 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-check.form-switch .form-check-input:checked {
  background-color: var(--cb-primary);
  border-color: var(--cb-primary);
  background-image: var(--cb-switch-thumb);
  background-position: right center;
}

.form-check.form-switch .form-check-input:indeterminate {
  background-image: var(--cb-switch-thumb);
  background-position: center center;
}

.form-check.form-switch .form-check-label {
  padding-left: 0;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}

/* ── Auth page checkbox labels ── */
.st-auth label:has(> input[type="checkbox"]),
.st-auth label:has(input[type="checkbox"]:first-child),
.st-auth form label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  line-height: 1.45;
  margin: 1rem 0;
  font-size: 0.875rem;
}

.st-auth label input[type="checkbox"] {
  margin-top: 0.15rem;
}

.st-auth__remember {
  align-items: center;
}

.st-auth__remember input[type="checkbox"] {
  margin-top: 0;
}

/* ── Dark theme (panel) ── */
[data-theme="dark"] input[type="checkbox"]:not(:checked):not(:indeterminate) {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] input[type="checkbox"]:disabled {
  background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .form-check.form-switch .form-check-input:not(:checked) {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .form-check.form-switch .form-check-input:checked,
[data-theme="dark"] input[type="checkbox"]:checked,
[data-theme="dark"] input[type="checkbox"]:indeterminate {
  background-color: var(--cb-primary);
  border-color: var(--cb-primary);
}