:root {
  /* ===== Primary Brand Colors ===== */
  --color-primary: #6c3baa; /* Main purple */
  --color-primary-light: #8870df; /* Lighter purple for hovers */
  --color-primary-dark: #5a2f8f; /* Darker purple for active states */
  --color-primary-rgb: 108, 59, 170;

  /* ===== Secondary/Accent Colors ===== */
  --color-secondary: #79aa3b;
  --color-secondary-light: #98c23e;
  --color-secondary-dark: #658a2f;
  --color-secondary-rgb: 121, 170, 59;

  /* ===== Semantic Colors ===== */
  --color-success: #26b050;
  --color-success-rgb: 38, 176, 80;

  --color-danger: #ec3456;
  --color-danger-rgb: 236, 52, 86;

  --color-warning: #e19d57;
  --color-warning-rgb: 225, 157, 87;

  --color-info: #0071c1;
  --color-info-rgb: 0, 113, 193;

  /* ===== Neutral/UI Colors ===== */
  --color-text-primary: #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-text-tertiary: #9ca3af;

  --color-bg-page: #f4f4fd;
  --color-bg-card: #ffffff;
  --color-bg-surface: #ececec;
  --color-bg-elevated: #ffffff;

  --color-border: rgba(0, 0, 0, var(--opacity-subtle));
  --color-border-strong: rgba(0, 0, 0, var(--opacity-light));

  /* ===== Opacity Scale ===== */
  --opacity-light: 0.15;
  --opacity-subtle: 0.08;
  --opacity-medium: 0.25;
  --opacity-strong: 0.4;
  --opacity-heavy: 0.6;

  /* ===== Gradients ===== */
  --gradient-primary: linear-gradient(
    135deg,
    rgba(var(--color-primary-rgb), 0.11) 0%,
    rgba(var(--color-primary-rgb), 0.075) 45%,
    rgba(var(--color-primary-rgb), 0.123) 100%
  );

  --gradient-primary-solid: linear-gradient(
    315deg,
    var(--color-primary) 0%,
    #d5d1f6 100%
  );

  --gradient-primary-hover: linear-gradient(
    135deg,
    var(--color-primary-light) 0%,
    var(--color-primary) 100%
  );

  --gradient-fusion: linear-gradient(
    135deg,
    rgba(var(--color-primary-rgb), 0.18) 0%,
    rgba(var(--color-primary-rgb), 0.1) 55%,
    rgba(var(--color-secondary-rgb), 0.12) 100%
  );

  --gradient-button: linear-gradient(
    0deg,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-primary) 80%, white 20%)
  );

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 5px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 5px 8px rgba(0, 0, 0, 0.3);

  /* hover items */
  --list-item-hover: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --list-item-selected: color-mix(
    in srgb,
    var(--color-primary) 14%,
    transparent
  );
}

.validation-message {
  color: red;
}

.setup-page {
  border-width: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-anchor {
  color: #007bff;
  cursor: pointer;
}

.purple-btn {
  background-color: #231e5a;
  color: white;
  border-radius: 50px;
  padding: 12px 18px;
}

.purple-accept-btn {
  background-color: #231e5a;
  color: white;
  border-radius: 50px;
  padding: 12px 100px;
}

.purple-accept-btn:hover {
  background: #efeef9;
  color: #231e5a;
  border: solid;
  border-color: #231e5a;
}

.green-accept-btn {
  background-color: #3a8c41;
  color: white;
  border-radius: 50px;
  padding: 12px 100px;
}

.green-accept-btn:hover {
  background-color: white;
  color: #3a8c41;
  border-radius: 50px;
  padding: 12px 100px;
  border-color: #3a8c41;
}

.green-btn {
  background-color: #a6cb57;
  color: white;
  border-radius: 50px;
  padding: 12px 18px;
}

.btn-green {
  margin-bottom: 1rem !important;
  width: 100% !important;
  cursor: pointer;
  background: #a6cb57;
  border: 1px solid #5c7f12;
  color: #fff;
  border-radius: 50px;
  text-transform: uppercase !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  -webkit-appearance: button;
  appearance: button;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  box-sizing: border-box;
  font-weight: 400;
}

.btn-green:hover {
  background: #5c7f12;
  color: #a6cb57;
}

.btn-green.btn-small {
  width: 30% !important;
}

.btn-purple {
  margin-bottom: 1rem !important;
  width: 100% !important;
  cursor: pointer;
  background: #231e5a;
  border: 1px solid #2d2582;
  color: #fff;
  border-radius: 50px;
  text-transform: uppercase !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  -webkit-appearance: button;
  appearance: button;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  box-sizing: border-box;
}

.btn-purple:hover {
  background: #2d2582;
  color: #fff;
}
.btn-purple.btn-small {
  width: 30% !important;
}

.btn-grey {
  margin-bottom: 1rem !important;
  width: 100% !important;
  cursor: pointer;
  background: #dadada;
  border: 1px solid #dadada;
  color: #6c757d;
  border-radius: 50px;
  text-transform: uppercase !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  -webkit-appearance: button;
  appearance: button;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  box-sizing: border-box;
}

.btn-grey:hover {
  background: #efeef9;
  color: #6c757d;
}

.btn-grey.btn-small {
  width: 30% !important;
}

.btn-red {
  margin-bottom: 1rem !important;
  width: 100% !important;
  cursor: pointer;
  background: #ab0000;
  border: 1px solid #e43e3e;
  color: #fff;
  border-radius: 50px;
  text-transform: uppercase !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  -webkit-appearance: button;
  appearance: button;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  box-sizing: border-box;
}

.btn-red:hover {
  background: #e43e3e;
  color: #fff;
}

.btn-red.btn-small {
  width: 30% !important;
}

.help-contact-form-button {
  justify-content: center !important;
  text-align: center !important;
}

.float-center {
  justify-content: center !important;
  text-align: center !important;
}

.rb-sms .e-radio-wrapper {
  display: flex;
}

.rb-sms input {
  margin-top: 5px;
  margin-right: 10px;
}

.explicit-notice {
  position: absolute !important;
  top: 0 !important;
  left: 42px !important;
  line-height: 10px !important;
  margin-left: 220px;
  padding-left: 20px;
  padding-top: 25px;
  color: #fff;
}

.magenta-nav {
  background: #f30252 !important;
  background-color: #f30252 !important;
}

.explicit-notice b {
  color: #fff;
}
.btn-yellow {
  margin-bottom: 1rem !important;
  width: 100% !important;
  cursor: pointer;
  background: #fbbb00;
  border: 1px solid #f1b60b;
  color: #fff;
  border-radius: 50px;
  text-transform: uppercase !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  appearance: button;
  -webkit-appearance: button;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  box-sizing: border-box;
}

.btn-yellow:hover {
  background: #f1b60b;
  color: #fff;
}