:root {
  --loopr-demo-primary: #007c82;
  --loopr-demo-primary-rgb: 0, 124, 130;
  --loopr-demo-on-primary: #ffffff;
  --loopr-demo-accent: #bfeaf0;
  --loopr-demo-accent-rgb: 191, 234, 240;
  --loopr-demo-on-accent: #0b1228;
  --loopr-demo-accent-soft: #bfeaf0;
  --loopr-demo-bg: #eef8f8;
  --loopr-demo-on-bg: #0b1228;
  --loopr-demo-muted-on-bg: #4a5a6a;
  --loopr-demo-card-bg: #ffffff;
  --loopr-demo-text: #0b1228;
  --loopr-demo-muted: #667085;
  --loopr-demo-button-bg: #0b1228;
  --loopr-demo-button-text: #ffffff;
  --loopr-demo-pill-bg: #e4f7f5;
  --loopr-demo-pill-text: #007c82;
  --loopr-demo-reward-bg: #f1e8ff;
  --loopr-demo-reward-text: #5b2775;
  --loopr-demo-progress: #007c82;
  --loopr-demo-partner: #007c82;
}

.loopr-demo-customizer {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  color: #0b1228;
  font-family: inherit;
}

.loopr-demo-customizer__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #0b1228;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 20px 50px rgba(16, 24, 40, .18);
  cursor: pointer;
}

.loopr-demo-customizer__panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: min(390px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 112px));
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(10, 31, 68, .08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(16, 24, 40, .2);
}

.loopr-demo-customizer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.loopr-demo-customizer__eyebrow {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e4f7f5;
  color: #007c82;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.loopr-demo-customizer__header h2 {
  margin: 0;
  color: #0b1228;
  font-size: 22px;
  line-height: 1.18;
}

.loopr-demo-customizer__header p {
  margin: 10px 0 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.loopr-demo-customizer__close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(10, 31, 68, .08);
  border-radius: 50%;
  background: #fff;
  color: #0b1228;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.loopr-demo-customizer__fields {
  display: grid;
  gap: 16px;
}

.loopr-demo-customizer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.loopr-demo-customizer__field {
  display: grid;
  gap: 8px;
  color: #0b1228;
  font-size: 13px;
  font-weight: 800;
}

.loopr-demo-customizer__field input,
.loopr-demo-customizer__field select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(10, 31, 68, .12);
  border-radius: 14px;
  background: #fff;
  color: #0b1228;
  font: inherit;
}

.loopr-demo-customizer__field select {
  padding: 0 12px;
}

.loopr-demo-customizer__field input[type="color"] {
  padding: 5px;
  cursor: pointer;
}

.loopr-demo-customizer__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(10, 31, 68, .08);
  border-radius: 18px;
  background: #f8fbfb;
  cursor: pointer;
}

.loopr-demo-customizer__toggle--compact {
  min-height: 64px;
}

.loopr-demo-customizer__toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.loopr-demo-customizer__switch {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d7dee8;
  transition: background .2s ease;
}

.loopr-demo-customizer__switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .18);
  transition: transform .2s ease;
}

.loopr-demo-customizer__toggle input:checked + .loopr-demo-customizer__switch {
  background: #007c82;
}

.loopr-demo-customizer__toggle input:checked + .loopr-demo-customizer__switch::after {
  transform: translateX(18px);
}

.loopr-demo-customizer__toggle strong,
.loopr-demo-customizer__toggle span:last-child {
  color: #0b1228;
  font-size: 13px;
  font-weight: 800;
}

.loopr-demo-customizer__toggle small {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.loopr-demo-customizer__reset {
  min-height: 44px;
  border: 1px solid rgba(10, 31, 68, .12);
  border-radius: 999px;
  background: #fff;
  color: #0b1228;
  font-weight: 800;
  cursor: pointer;
}

.loopr-demo-customizer button:focus-visible,
.loopr-demo-customizer input:focus-visible,
.loopr-demo-customizer select:focus-visible {
  outline: 3px solid rgba(0, 124, 130, .22);
  outline-offset: 3px;
}

body.loopr-demo-customized .loopr-hero-section {
  background:
    radial-gradient(circle at 84% 12%, rgba(var(--loopr-demo-primary-rgb), .11), transparent 28%),
    var(--loopr-demo-bg);
}

body.loopr-demo-customized .loopr-public-main .btn.btn-black,
body.loopr-demo-customized .loopr-public-main .btn.btn-black.shape-square {
  background: var(--loopr-demo-button-bg);
  border-color: var(--loopr-demo-button-bg);
  color: var(--loopr-demo-button-text);
}

body.loopr-demo-customized .loopr-public-main .btn.btn-black-border,
body.loopr-demo-customized[data-loopr-demo-button="outline"] .loopr-public-main .btn.btn-black {
  background: #fff;
  border-color: rgba(var(--loopr-demo-primary-rgb), .42);
  color: var(--loopr-demo-text);
}

body.loopr-demo-customized .loopr-public-main .tag-1.bg-6,
body.loopr-demo-customized .loopr-public-main .demo-pill,
body.loopr-demo-customized .loopr-public-main .loopr-stop-role-pill,
body.loopr-demo-customized .loopr-public-main .demo-hero-sponsor-card__label {
  background: var(--loopr-demo-pill-bg) !important;
  color: var(--loopr-demo-pill-text) !important;
}

body.loopr-demo-customized .loopr-public-main .demo-reward-pill {
  background: var(--loopr-demo-reward-bg) !important;
  color: var(--loopr-demo-reward-text) !important;
}

body.loopr-demo-customized .loopr-public-main .color-green-900,
body.loopr-demo-customized .loopr-public-main .loopr-hero-progress-stat strong {
  color: var(--loopr-demo-primary) !important;
}

body.loopr-demo-customized .loopr-hero-progress-card__bar span,
body.loopr-demo-customized .loopr-progress-bar span {
  background: linear-gradient(90deg, var(--loopr-demo-progress), var(--loopr-demo-accent));
}

body.loopr-demo-customized .loopr-partner-strip__inner {
  background:
    radial-gradient(circle at 92% 12%, rgba(var(--loopr-demo-primary-rgb), .12), transparent 24%),
    var(--loopr-demo-bg);
}

body.loopr-demo-customized .loopr-partner-logo-card__role,
body.loopr-demo-customized .loopr-partner-logo-item--main .loopr-partner-logo-card__role {
  background: var(--loopr-demo-partner) !important;
  color: #fff !important;
}

body.loopr-demo-customized .loopr-partner-logo-item--main .loopr-partner-logo-card {
  border-color: rgba(var(--loopr-demo-primary-rgb), .38);
  box-shadow: 0 24px 60px rgba(var(--loopr-demo-primary-rgb), .18);
}

body.loopr-live-preview .loopr-demo-only-control,
body.loopr-hide-demo-controls .loopr-demo-only-control,
body.loopr-hide-rewards [data-demo-reward],
body.loopr-hide-rewards .demo-reward-pill,
body.loopr-hide-sponsors .demo-hero-sponsor-card,
body.loopr-hide-sponsors .loopr-card-sponsor-mini,
body.loopr-hide-sponsors .loopr-partner-strip {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .loopr-demo-customizer__switch,
  .loopr-demo-customizer__switch::after {
    transition: none;
  }
}

@media (max-width: 575px) {
  .loopr-demo-customizer {
    right: 16px;
    bottom: 16px;
    left: 16px;
  }

  .loopr-demo-customizer__trigger {
    width: 100%;
  }

  .loopr-demo-customizer__panel {
    right: 0;
    bottom: 62px;
    width: 100%;
    max-height: calc(100vh - 96px);
    padding: 20px;
    border-radius: 22px;
  }

  .loopr-demo-customizer__grid {
    grid-template-columns: 1fr;
  }
}