/* Quiz plugin — 2026 rebrand (dark buttons, outline back, themed datepicker). */
.crx-hero__cta #cpq-open-modal,
.crx-hero__cta button.cpq-btn,
button#cpq-open-modal.cpq-btn {
  background: var(--crx-dark) !important;
  color: var(--crx-white) !important;
}

.cpq-container .cpq-btn,
button.cpq-btn {
  background: var(--crx-dark) !important;
  color: var(--crx-white) !important;
  border: 0 !important;
  border-radius: var(--crx-radius-btn) !important;
  font-family: var(--crx-font) !important;
  font-weight: 500 !important;
}

.cpq-container .cpq-btn:hover,
button.cpq-btn:hover {
  background: var(--crx-dark) !important;
  color: var(--crx-white) !important;
  opacity: 0.88 !important;
  transform: none !important;
}

.cpq-container .cpq-btn-flat,
button.cpq-btn-flat {
  background: transparent !important;
  color: var(--crx-dark) !important;
  border: 1px solid var(--crx-dark) !important;
  border-radius: var(--crx-radius-btn) !important;
  font-family: var(--crx-font) !important;
  font-weight: 500 !important;
}

.cpq-container .cpq-btn-flat:hover,
button.cpq-btn-flat:hover {
  background: transparent !important;
  color: var(--crx-dark) !important;
  opacity: 0.88 !important;
  transform: none !important;
}

#ui-datepicker-div,
#ui-datepicker-div.ui-datepicker,
#ui-datepicker-div.cpq-datepicker {
  font-family: var(--crx-font) !important;
  background: linear-gradient(180deg, var(--crx-sky-10) 0%, var(--crx-yellow-10) 100%), var(--crx-white) !important;
  border: 0.5px solid var(--crx-divider) !important;
  border-radius: var(--crx-radius-hero) !important;
  color: var(--crx-ink);
}

#ui-datepicker-div .ui-datepicker-header,
#ui-datepicker-div .ui-widget-header {
  background: transparent !important;
  border: 0 !important;
  color: var(--crx-dark);
}

#ui-datepicker-div .ui-datepicker-title select {
  border: 0.5px solid var(--crx-divider) !important;
  border-radius: var(--crx-radius-pill) !important;
  background-color: var(--crx-white) !important;
  color: var(--crx-dark) !important;
}

#ui-datepicker-div .ui-datepicker-calendar a.ui-state-default:hover {
  background: var(--crx-sky-30) !important;
  color: var(--crx-dark) !important;
}

#ui-datepicker-div .ui-datepicker-today a.ui-state-default:not(.ui-state-active) {
  background: var(--crx-sky-30) !important;
  color: var(--crx-dark) !important;
}

#ui-datepicker-div .ui-datepicker-calendar .ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar a.ui-state-active {
  background: var(--crx-dark) !important;
  color: var(--crx-white) !important;
}