.yay-ads-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yay-ads-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.yay-ads-toggle-title {
  font-size: 14px;
  font-weight: 700;
  color: #1d2327;
  line-height: 1.4;
}

.yay-ads-toggle-description {
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  line-height: 1.4;
}

.yay-ads-toggle-switch {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* `input:disabled` in WP admin core (forms.css) is MORE specific than a single class selector
 * (type selector + pseudo-class beats one class) and sets its own opacity/width/height/
 * border/background — so while this checkbox is briefly `disabled` (during the AJAX call),
 * WP core's disabled style wins the cascade and the "hidden" checkbox flashes into view as a
 * small bordered box. Every hiding property below is repeated for :disabled/:focus/:checked
 * with !important so no state can un-hide it. */
.yay-ads-toggle-input,
.yay-ads-toggle-input:disabled,
.yay-ads-toggle-input:focus,
.yay-ads-toggle-input:checked {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* WP admin core (forms.css) paints a dashicon checkmark on checked checkboxes via a
 * non-absolutely-positioned ::before (offset by negative margin), so it isn't clipped by this
 * input's 0×0 box and floats visibly next to our custom slider. Suppress it explicitly. */
.yay-ads-toggle-input::before,
.yay-ads-toggle-input:checked::before {
  content: none !important;
}

.yay-ads-toggle-slider {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background-color: #ccc;
  border-radius: 20px;
  transition: background-color 0.2s ease-in-out;
  flex-shrink: 0;
}

.yay-ads-toggle-slider::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
}

/* WordPress 7.0 brand blue accent (replaces the classic #2271b1 admin blue). */
.yay-ads-toggle-input:checked + .yay-ads-toggle-slider {
  background-color: #3858e9;
}

.yay-ads-toggle-input:checked + .yay-ads-toggle-slider::before {
  transform: translateX(16px);
}

.yay-ads-toggle-input:disabled + .yay-ads-toggle-slider {
  opacity: 0.6;
}

.yay-ads-toggle-switch.is-loading {
  cursor: default;
}

.yay-ads-toggle-switch.is-loading .yay-ads-toggle-slider::before {
  /* Hide the sliding dot while loading — the spinner below takes its place. */
  opacity: 0;
}

.yay-ads-toggle-switch.is-loading .yay-ads-toggle-slider::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  /* Without this, the 2px border is added ON TOP of the declared 16x16 size (content-box is
   * the default), rendering an actual 20x20 box that overflows past the 20px-tall slider —
   * looks "too big" and breaks the pill silhouette. border-box keeps the border inside 16x16,
   * matching the dot it replaces. */
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: yay-ads-toggle-spin 0.6s linear infinite;
}

@keyframes yay-ads-toggle-spin {
  to {
    transform: rotate(360deg);
  }
}

/* style: "checkbox" modifier — a square checkbox, then description below, instead of the
 * default left/right pill-switch layout. Same markup as the default row, just reflowed and
 * the pill swapped for a checkbox via CSS. The caller (Settings.php) leaves options.title
 * blank here — the row's own label lives outside this widget as a real
 * .njt-duplicate-base-control-label (see html-settings.php) — so .yay-ads-toggle-title is
 * hidden rather than ordered in, to avoid rendering a redundant empty element. */
.yay-ads-toggle-row--checkbox {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.yay-ads-toggle-row--checkbox .yay-ads-toggle-title {
  display: none;
}

.yay-ads-toggle-row--checkbox .yay-ads-toggle-switch {
  width: 18px;
  height: 18px;
}

.yay-ads-toggle-row--checkbox .yay-ads-toggle-slider {
  display: none;
}

.yay-ads-toggle-row--checkbox .yay-ads-toggle-input {
  -webkit-appearance: none;
  appearance: none;
  position: relative !important;
  opacity: 1 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  /* The base .yay-ads-toggle-input rule above hides the raw input for the default switch style
   * with border/background !important (it also matches :checked). Must out-!important it here,
   * not just out-specificity it, or border/background silently never apply. */
  border: 1px solid #7e8993 !important;
  border-radius: 2px;
  background: #fff !important;
  outline: none;
  box-shadow: none;
  cursor: pointer;
}

.yay-ads-toggle-row--checkbox .yay-ads-toggle-input:checked {
  background: #007cba !important;
  border-color: #007cba !important;
}

/* Same checkmark path as the consumer plugin's own svg.njt-duplicate-checkbox-control-checked
 * icon, as a background-image instead of a CSS-drawn border corner — matches its checkbox tick
 * shape exactly instead of a similar-but-different one. */
.yay-ads-toggle-row--checkbox .yay-ads-toggle-input:checked::after {
  content: "";
  position: absolute;
  /* ::after positions relative to the input's PADDING box, which starts 1px in from its own
   * 1px border — offset back out by that border width so the icon fills the same 18x18
   * footprint as the box's outer (border) edge, instead of landing 1px down-right of center. */
  left: -1px;
  top: -1px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.yay-ads-toggle-row--checkbox .yay-ads-toggle-input:disabled {
  opacity: 0.6 !important;
}

.yay-ads-toggle-row--checkbox .yay-ads-toggle-description {
  font-style: italic;
}