new-toggles-cmplz-7.php

<?php

 defined( 'ABSPATH' ) or die( "you do not have access to this page!" );

/**
 * Add custom css to banner css file
 * @return void
 */

 function add_my_custom_banner_css() {
	?>
/* hide the switch in Always active categories */
.cmplz-cookiebanner .cmplz-category .cmplz-always-active .cmplz-banner-checkbox {
  display: none !important;
}

/* strong reset of the native switch */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label {
  all: unset !important;                    /* reset all inherited Complianz CSS */
  display: inline-block !important;
  position: relative !important;
  vertical-align: middle !important;
  width: 34px !important;
  height: 18px !important;
  background: #2c3e50 !important;           /* color of track when OFF */
  border-radius: 18px !important;
  cursor: pointer !important;
  transition: background .25s ease !important;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before,
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after {
  content: none !important;                 /* disable old pseudo-elements */
}

/* make the input truly invisible */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox {
  position: absolute !important;
  opacity: 0 !important;
  z-index: -1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* recreate the knob with X/✓ perfectly centered */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox label.cmplz-label::after {
  content: "✕" !important;                 /* OFF state */
  text-indent: 3.15px !important;          /* shift right */
  position: absolute !important;
  inset-block-start: 50% !important;       /* top: 50% (writing-mode safe) */
  inset-inline-start: 2px !important;      /* left: 2px */
  transform: translateY(-50%) !important;  /* vertically centered */
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;            /* color of the knob */
  color: #2c3e50 !important;               /* color of the X */
  font: 700 10px/14px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  text-align: center !important;
  box-shadow: 0 0 3px rgba(0,0,0,.25) !important;
  display: block !important;
  transition: inset-inline-start .25s ease, background .25s ease, color .25s ease !important;
}

/* ON state: green track and ✓ centered inside the knob */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + label.cmplz-label {
  background: #16a085 !important;          /* track color when ON */
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + label.cmplz-label::after {
  content: "✓" !important;
  inset-inline-start: calc(100% - 16px) !important;  /* 14px knob + 2px right margin */
  text-indent: 2.5px !important;           /* shift right */
  background: #ffffff !important;            /* knob color */
  color: #16a085 !important;               /* ✓ color */
}

/* accessible focus */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox label.cmplz-label:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(22,160,133,.35) !important;
}

/* disabled state (defensive, for cases not always-active) */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:disabled + label.cmplz-label {
  opacity: .6 !important;
  cursor: not-allowed !important;
}

	<?php
}
add_action( 'cmplz_banner_css', 'add_my_custom_banner_css' );