body {
  font-family: 'Open Sans', sans-serif;
}

/* Shrinks the rem base to 15px at md+ so v3's rem-based spacing tracks v2's
   rhythm. */
@media (min-width: 768px) {
  html,
  body {
    font-size: 15px;
    line-height: 28px;
  }
}

.btn {
  display: block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  background-image: none;
  border-radius: 4px;
  user-select: none;
  border-width: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.btn.btn-sm {
  width: 100%;
  border-radius: 80px;
  height: 42px;
  line-height: 42px;
  font-size: 15px;
  max-width: 470px;
  font-weight: 600;
}

.btn.btn-lg {
  width: 100%;
  border-radius: 80px;
  height: 56px;
  line-height: 52px;
  font-size: 18px;
  max-width: 470px;
  font-weight: 600;
}

.btn.disabled,
.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

#cd-signup-widget {
  --cd-label-color: #4a4a4a;
}

/* Host owns the step heading; hide the widget's own legend. */
#cd-signup-widget .cd-form__legend {
  display: none !important;
}

.signup-step-container .step-heading small {
  display: block;
  font-weight: 400;
  font-size: 1rem;
  margin: 1rem 0 0;
}

/* Lock widget input sizing to v2's px values (rem-based shrinks 6.67% at 15px base). */
@media (min-width: 768px) {
  #cd-signup-widget input:not([type='checkbox']):not([type='radio']),
  #cd-signup-widget select {
    height: 48px !important;
    line-height: 48px !important;
    padding: 10px 10px 0 !important;
    font-size: 16px !important;
  }
}

/* Lock primary button to v2's px values; sc-theme uses rem which shrinks at 15px base. */
#cd-signup-widget .cd-form .cd-form__buttons-row button {
  height: 56px !important;
  font-size: 18px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-weight: 700 !important;
}

#cd-signup-widget .cd-widget__container .cd-memberplan-comparison {
  align-items: center;
}

/* In-table plan-select buttons -- pill chrome to match v2. data-testid is used
   because the name attribute is per-plan-type. */
#cd-signup-widget button[data-testid='plan-select'] {
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 1rem !important;
  border-radius: 80px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  max-width: 10rem;
  width: 100%;
}

/* "Most Popular" badge. Widget tags BASIC plans with .cd-order-last, so we
   target the inverse. :has() guard skips single-plan campaigns. */
#cd-signup-widget .cd-memberplan-comparison-table__container:has(.cd-order-last) .cd-memberplan-comparison-table:not(.cd-order-last) {
  position: relative;
}
#cd-signup-widget .cd-memberplan-comparison-table__container:has(.cd-order-last) .cd-memberplan-comparison-table:not(.cd-order-last)::before {
  content: 'Most Popular';
  position: absolute;
  top: -2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  background: #ffb352;
  color: #fff;
  font-weight: 700;
  padding: 4px 1rem;
}
@media (min-width: 768px) {
  #cd-signup-widget .cd-memberplan-comparison-table__container:has(.cd-order-last) .cd-memberplan-comparison-table:not(.cd-order-last)::before {
    top: -3.25rem;
  }
}


/* Hide the widget's terms checkbox + submit button; the host sidebar owns
   the user-visible copy. signup_v3.js bridges them to the widget's submit. */
#cd-signup-widget [data-step='BillingStep'] [data-for='terms'],
#cd-signup-widget [data-step='BillingStep'] .cd-form__buttons-row {
  display: none !important;
}

#cd-signup-widget  .cd-widget__container .cd-form .cd-form__input-container {
  margin-bottom: 0.95rem;
}

#cd-signup-widget .cd-widget__container .cd-form .cd-form__input-container .cd-form__label-container label {
  top: 12px;
  left: 12px;
}

#cd-signup-widget [data-step='IdentityStep'] .cd-form .cd-radio > label {
  font-size: 1rem;
  font-weight: 800;
}

#cd-signup-widget [data-step='IdentityStep'] .cd-form .cd-radio .cd-radio__input {
  margin-left: 10px;
}

#cd-signup-widget [data-step='IdentityStep'] .cd-form .cd-radio .cd-radio__input label {
  font-size: 15px;
}

#plan-select-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

#plan-select-modal .member-plan {
  border-radius: 4px;
  position: relative;
}

#plan-select-modal .member-plan.selected {
  box-shadow: 0 0 0px 8px rgba(40,99,198,.3);
  border-radius: 2px;
}

#plan-select-modal .member-plan.selected::after {
  content: "Selected";
  color: #fff;
  background: var(--cd-color-1);
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 0 40px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

#cd-signup-widget [data-step='PersonalStep'] #ssnPartial:focus {
  margin-bottom: 24px;
}

#cd-signup-widget [data-step='PersonalStep'] #ssnPartial + .cd-field-helper {
  white-space: nowrap;
  margin-bottom: 0;
  position:fixed;
  transform: translateY(-24px);
  transition: none;
}

[data-sidebar-step='BillingStep'] .checkbox label,
.cd-form__checkbox-container label {
  display: flex;
  gap: 15px;
  align-items: start;
  line-height: 1.6;
}

[data-sidebar-step='BillingStep'] .checkbox input[type="checkbox"],
.cd-form__checkbox-container input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  background: none;
  border: none;
  overflow: visible;
  margin-right: 0 !important;
}

[data-sidebar-step='BillingStep'] .checkbox input[type="checkbox"]::after,
.cd-form__checkbox-container input[type="checkbox"]::after {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  border: 2px solid var(--cd-color-1);
  border-radius: 4px;
  top: 2px;
  position: relative;
}

[data-sidebar-step='BillingStep'] .checkbox input[type="checkbox"]:checked::after,
.cd-form__checkbox-container input[type="checkbox"]:checked::after {
  background: 50% 50% url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214.944%22%20height%3D%229.978%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M.172%204.916a.627.627%200%200%201%20.064-.92.654.654%200%200%201%20.92.095l3.681%204.284L13.849.157a.663.663%200%200%201%20.889.984l-9.52%208.663a.625.625%200%200%201-.92-.064Z%22%20data-name%3D%22Path%20103898%22%2F%3E%3C%2Fsvg%3E") no-repeat,var(--cd-color-1);
}

#cd-signup-widget .cd-accordion {
  border-color: var(--cd-color-1);
  border-radius: .25rem;
  border-top-width: 6px;
  margin-bottom: 15px;
}

#cd-signup-widget .cd-accordion .cd-accordion__header {
	cursor: pointer;
	padding: 10px;
	background: #f3f3f3;
	border-radius: 0 0 4px 4px;
	display: flex;
	align-items: center;
  color: var(--cd-color-1);
  font-size: 0.9rem;
}

#cd-signup-widget .cd-accordion.cd-accordion--expanded .cd-accordion__header {
	border-radius: 0;
}


#cd-signup-widget .cd-accordion .cd-accordion__content {
	max-height: 0;
	height: 100%;
	overflow: hidden;
	transition: all 0.2s ease;
	border: 1px solid #f3f3f3;
	border-radius: 0 0 4px 4px;
  padding: 10px;
}
#cd-signup-widget .cd-accordion.cd-accordion--expanded .cd-accordion__content {
	max-height: 100px;
}

#cd-signup-widget .cd-accordion.cd-accordion--expanded .cd-accordion__content .cd-form__input-container {
	margin: 10px 0 10px 10px;
}

#cd-signup-widget .cd-accordion.cd-accordion--expanded .cd-accordion__content .cd-form__input-container .cd-form__label-container {
  display: none;
}

#cd-signup-widget .cd-accordion.cd-accordion--expanded .cd-accordion__content .cd-form__input-container input.sponsorCodeString {
	height: 32px;
	line-height: 32px;
	border: 1px solid #bfbfbf;
	border-radius: 4px;
	padding-top: 0px !important;
}