/* Toggle — checkbox-style row + button-вариант (thanks-btn). */

.setting-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-smooth), background var(--t-smooth), box-shadow var(--t-smooth);
}

button.setting-toggle.thanks-btn {
  font: inherit; color: var(--text);
  width: 100%; text-align: left;
}

/* Заблокированный по PRO. */
body:not(.pro) .setting-toggle.requires-pro,
body:not(.pro) .public-toggle.requires-pro {
  opacity: 0.45;
  pointer-events: none;
  filter: saturate(0.5);
}

/* Disabled-состояние (например, во время загрузки оффлайн-пака). */
.setting-toggle.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.setting-toggle .setting-checkbox { position: absolute; opacity: 0; pointer-events: none; }

.setting-toggle.on {
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.20), rgba(192,138,0,0.10));
  border-color: rgba(var(--gold-rgb), 0.50);
}
.setting-toggle .public-switch { flex: 0 0 auto; }
.setting-toggle.on .public-switch {
  background: var(--grad-gold-solid);
}
.setting-toggle.on .public-switch .public-thumb {
  transform: translateX(20px);
}

/* Иконка-блок «PRO» — золотая, надпись PRO мелко по центру. */
.pro-tag-icon {
  background: var(--grad-gold-solid) !important;
  border: none !important;
  color: #0a0d14;
  font-weight: 700; font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase;
}

/* === Public-toggle: используется в SharePanel === */
.public-icon-block {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.public-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  text-align: left;
  line-height: 1.3;
}
/* Глобальное .muted.small имеет margin-bottom 12px — внутри toggle мешает. */
.public-text .muted.small { margin: 0; }
.public-text b { font-size: 14px; font-weight: 600; }
.public-switch {
  flex: 0 0 auto;
  position: relative;
  width: 50px; height: 30px;
  background: var(--surface-hover);
  border: 1px solid transparent;
  border-radius: 100px;
  transition: background 0.2s;
}
.public-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px;
  background: #ecf0fa;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
.public-toggle input:checked ~ .public-switch {
  background: var(--grad-gold-solid);
}
.public-toggle input:checked ~ .public-switch .public-thumb {
  transform: translateX(20px);
}