/* =========================================
   PRIMARY BUTTON Dark
   ========================================= */
.dp-btn-normal,
.dp-btn-primary,
.btn-primary-md,
.dp-blue-orange-btn,
.dp-blue-white-btn,
.dp-orange-white-btn,
.dp-orange-blue-btn,
.btn-navy,
.btn-orange {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none !important;
  padding: 8px 16px;
  box-sizing: border-box;
  border: 2px solid transparent;
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  text-decoration: none;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  background-color: var(--btn-color-bg-primary);
  color: var(--white-color);
  position: relative;
}

.dp-btn-normal i,
.dp-btn-primary i,
.btn-primary-md i,
.dp-blue-orange-btn i,
.dp-blue-white-btn i,
.dp-orange-white-btn i,
.dp-orange-blue-btn i,
.btn-navy i,
.btn-orange i {
  font-size: 14px;
}

/* Primary States */
.dp-btn-normal:hover,
.dp-btn-primary:hover,
.dp-blue-orange-btn:hover,
.dp-blue-white-btn:hover,
.dp-orange-white-btn:hover,
.dp-orange-blue-btn:hover,
.btn-navy:hover,
.btn-orange:hover {
  background-color: var(--btn-color-bg-primary-hover);
  color: var(--white-color);
}

.dp-btn-normal:hover i,
.dp-btn-primary:hover i,
.dp-blue-orange-btn:hover i,
.dp-blue-white-btn:hover i,
.dp-orange-white-btn:hover i,
.dp-orange-blue-btn:hover i,
.btn-navy:hover i,
.btn-orange:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-btn-normal:active,
.dp-btn-primary:active,
.dp-blue-orange-btn:active,
.dp-blue-white-btn:active,
.dp-orange-white-btn:active,
.dp-orange-blue-btn:active,
.btn-navy:active,
.btn-orange:active {
  background-color: var(--btn-color-bg-primary-pressed);
  color: var(--white-color);
}

.dp-btn-normal:disabled,
.dp-btn-normal.disabled,
.dp-btn-primary:disabled,
.dp-btn-primary.disabled,
.dp-blue-orange-btn:disabled,
.dp-blue-orange-btn.disabled,
.dp-blue-white-btn:disabled,
.dp-blue-white-btn.disabled,
.dp-orange-white-btn:disabled,
.dp-orange-white-btn.disabled,
.dp-orange-blue-btn:disabled,
.dp-orange-blue-btn.disabled,
.btn-navy:disabled,
.btn-navy.disabled,
.btn-orange:disabled,
.btn-orange.disabled {
  background-color: var(--btn-color-bg-primary-disabled);
  color: var(--btn-color-content-primary-disabled);
  cursor: not-allowed;
}

.dp-btn-normal:focus-visible,
.dp-btn-primary:focus-visible,
.dp-blue-orange-btn:focus-visible,
.dp-blue-white-btn:focus-visible,
.dp-orange-white-btn:focus-visible,
.dp-orange-blue-btn:focus-visible,
.btn-navy:focus-visible,
.btn-orange:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  color: var(--white-color);
}

/* =========================================
   SECONDARY BUTTON
   ========================================= */
.dp-btn-secondary,
.dp-white-orange-btn,
.dp-white-blue-btn,
.btn-white-orange,
.btn-white-blue {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none !important;
  padding: 8px 20px;
  box-sizing: border-box;
  border: 2px solid transparent;
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  text-decoration: none;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  background-color: var(--btn-color-bg-secondary);
  color: var(--btn-color-content-secondary);
}
.dp-btn-secondary i,
.dp-white-orange-btn i,
.dp-white-blue-btn i,
.btn-white-orange i,
.btn-white-blue i {
  font-size: 14px;
}

.dp-btn-secondary:hover,
.dp-white-orange-btn:hover,
.dp-white-blue-btn:hover,
.btn-white-orange:hover,
.btn-white-blue:hover {
  background-color: var(--btn-color-bg-secondary-hover);
  color: var(--btn-color-content-secondary-hover);
}
.dp-btn-secondary:hover i,
.dp-white-orange-btn:hover i,
.dp-white-blue-btn:hover i,
.btn-white-orange:hover i,
.btn-white-blue:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}
.dp-btn-secondary:active,
.dp-white-orange-btn:active,
.dp-white-blue-btn:active,
.btn-white-orange:active,
.btn-white-blue:active {
  background-color: var(--btn-color-bg-secondary-pressed);
  color: var(--btn-color-content-secondary-pressed);
}

.dp-btn-secondary:disabled,
.dp-btn-secondary.disabled,
.dp-white-orange-btn:disabled,
.dp-white-orange-btn.disabled,
.dp-white-blue-btn:disabled,
.dp-white-blue-btn.disabled,
.btn-white-orange:disabled,
.btn-white-orange.disabled,
.btn-white-blue:disabled,
.btn-white-blue.disabled {
  background-color: var(--btn-color-bg-secondary-disabled);
  color: var(--btn-color-content-secondary-disabled);
  border-color: transparent;
}

.dp-btn-secondary:focus-visible,
.dp-white-orange-btn:focus-visible,
.dp-white-blue-btn:focus-visible,
.btn-white-orange:focus-visible,
.btn-white-blue:focus-visible {
  outline: none;
  border-color: var(--btn-color-bg-secondary-focused);
  color: var(--btn-color-content-secondary);
}

/* =========================================
   OUTLINE BUTTON
   ========================================= */
.dp-btn-outline,
.dp-blue-no-bg-btn,
.dp-white-no-bg-btn {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 20px;
  box-sizing: border-box;
  border: 2px solid var(--btn-color-border-outline);
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  text-decoration: none !important;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  background-color: var(--btn-color-bg-outline);
  color: var(--secondary-color);
}

.dp-btn-outline i,
.dp-blue-no-bg-btn i,
.dp-white-no-bg-btn i {
  font-size: 14px;
}

.dp-btn-outline:hover,
.dp-blue-no-bg-btn:hover,
.dp-white-no-bg-btn:hover {
  background-color: var(--btn-color-bg-outline-hover);
  color: var(--btn-color-content-outline-hover);
  border-color: var(--btn-color-border-outline);
}

.dp-btn-outline:hover i,
.dp-blue-no-bg-btn:hover i,
.dp-white-no-bg-btn:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-btn-outline:active,
.dp-blue-no-bg-btn:active,
.dp-white-no-bg-btn:active {
  background-color: var(--btn-color-bg-outline-pressed);
  color: var(--btn-color-content-outline-pressed);
  border-color: var(--btn-color-content-outline-pressed);
}

.dp-btn-outline:disabled,
.dp-btn-outline.disabled,
.dp-blue-no-bg-btn:disabled,
.dp-blue-no-bg-btn.disabled,
.dp-white-no-bg-btn:disabled,
.dp-white-no-bg-btn.disabled {
  background-color: var(--btn-color-bg-outline-disabled);
  color: var(--btn-color-content-outline-disabled);
  border-color: var(--btn-color-content-outline-pressed);
}

.dp-btn-outline:focus-visible,
.dp-blue-no-bg-btn:focus-visible,
.dp-white-no-bg-btn:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  color: var(--secondary-color);
}

/* =========================================
   PRIMARY BUTTON Brand
   ========================================= */
.dp-btn-brand-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none !important;
  padding: 8px 20px;
  box-sizing: border-box;
  border: 2px solid transparent;
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  text-decoration: none;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  background-color: var(--btn-brand-color-bg-primary);
  color: var(--btn-brand-color-content-primary);
}

.dp-btn-brand-primary i {
  font-size: 14px;
}

/* Primary States */
.dp-btn-brand-primary:hover {
  background-color: var(--btn-brand-color-bg-primary-hover);
  color: var(--btn-brand-color-content-primary-hover);
}

.dp-btn-brand-primary:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-btn-brand-primary:active {
  background-color: var(--btn-brand-color-bg-primary-pressed);
  color: var(--btn-brand-color-content-primary-pressed);
}

.dp-btn-brand-primary:disabled,
.dp-btn-brand-primary.disabled {
  background-color: var(--btn-brand-color-bg-primary-disabled);
  color: var(--btn-brand-color-content-primary-disabled);
  cursor: not-allowed;
}

.dp-btn-brand-primary:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  color: var(--btn-brand-color-content-primary);
}

/* =========================================
   SECONDARY BUTTON Brand
   ========================================= */
.dp-btn-brand-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none !important;
  padding: 8px 20px;
  box-sizing: border-box;
  border: 2px solid transparent;
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  text-decoration: none;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  background-color: var(--btn-brand-color-bg-secondary);
  color: var(--btn-brand-color-content-secondary);
}

.dp-btn-brand-secondary i {
  font-size: 14px;
}

/* Primary States */
.dp-btn-brand-secondary:hover {
  background-color: var(--btn-brand-color-bg-secondary-hover);
  color: var(--btn-brand-color-content-secondary-hover);
}
.dp-btn-brand-secondary:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}
.dp-btn-brand-secondary:active {
  background-color: var(--btn-brand-color-bg-secondary-pressed);
  color: var(--btn-brand-color-content-secondary-pressed);
}

.dp-btn-brand-secondary:disabled,
.dp-btn-brand-secondary.disabled {
  background-color: var(--btn-brand-color-bg-secondary-disabled);
  color: var(--btn-brand-color-content-secondary-disabled);
  cursor: not-allowed;
}

.dp-btn-brand-secondary:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  color: var(--btn-brand-color-content-secondary);
}

/* =========================================
   SECONDARY BRAND OUTLINE BUTTON
   ========================================= */
.dp-btn-brand-outline {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 20px;
  box-sizing: border-box;
  border: 2px solid var(--btn-brand-color-border-outline);
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  text-decoration: none !important;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  background-color: var(--btn-brand-color-bg-outline);
  color: var(--btn-brand-color-content-outline);
}

.dp-btn-brand-outline i {
  font-size: 14px;
}

.dp-btn-brand-outline:hover {
  background-color: var(--btn-brand-color-bg-outline-hover);
  color: var(--btn-brand-color-content-outline-hover);
  border-color: var(--btn-brand-color-border-outline);
}

.dp-btn-brand-outline:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-btn-brand-outline:active {
  background-color: var(--btn-brand-color-bg-outline-pressed);
  color: var(--btn-brand-color-content-outline-pressed);
  border-color: var(--btn-brand-color-content-outline-pressed);
}

.dp-btn-brand-outline:disabled,
.dp-btn-brand-outline.disabled {
  background-color: var(--btn-brand-color-bg-outline-disabled);
  color: var(--btn-brand-color-content-outline-disabled);
  border-color: var(--btn-brand-color-content-outline-pressed);
}

.dp-btn-brand-outline:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  color: var(--btn-brand-color-content-outline);
}

/* =========================================
   BRAND PRIMARY BUTTON DARK
   ========================================= */
.dp-btn-brand-primary-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none !important;
  padding: 8px 20px;
  box-sizing: border-box;
  border: 2px solid transparent;
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  text-decoration: none;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  background-color: var(--btn-brand-color-bg-primary);
  color: var(--btn-brand-color-content-primary);
}

.dp-btn-brand-primary-dark i {
  font-size: 14px;
}

/* Primary States */
.dp-btn-brand-primary-dark:hover {
  background-color: var(--btn-brand-dark-color-bg-hover);
  color: var(--btn-brand-color-content-primary);
}

.dp-btn-brand-primary-dark:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-btn-brand-primary-dark:active {
  background-color: var(--btn-brand-dark-color-bg-active);
  color: var(--btn-brand-color-content-primary);
}

.dp-btn-brand-primary-dark:disabled,
.dp-btn-brand-primary-dark.disabled {
  background-color: var(--text-link-primary-disabled);
  color: var(--text-tertiary-color);
  cursor: not-allowed;
}

.dp-btn-brand-primary-dark:focus-visible {
  outline: none;
  border-color: var(--border-extra-subtle);
  color: var(--btn-brand-color-content-primary);
}

/* =========================================
   BRAND SECONDARY BUTTON DARK
   ========================================= */
.dp-btn-brand-secondary-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none !important;
  padding: 8px 20px;
  box-sizing: border-box;
  border: 2px solid transparent;
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  text-decoration: none;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  background-color: var(--btn-brand-dark-color-bg-active);
  color: var(--btn-brand-color-content-primary);
}

.dp-btn-brand-secondary-dark i {
  font-size: 14px;
}

/* Primary States */
.dp-btn-brand-secondary-dark:hover {
  background-color: var(--btn-brand-dark-color-bg-hover);
  color: var(--btn-brand-color-content-primary);
}

.dp-btn-brand-secondary-dark:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-btn-brand-secondary-dark:active {
  background-color: var(--btn-brand-color-bg-secondary-pressed);
  color: var(--btn-brand-color-content-primary);
}

.dp-btn-brand-secondary-dark:disabled,
.dp-btn-brand-secondary-dark.disabled {
  background-color: var(--text-link-primary-disabled);
  color: var(--text-tertiary-color);
  cursor: not-allowed;
}

.dp-btn-brand-secondary-dark:focus-visible {
  outline: none;
  border-color: var(--border-extra-subtle);
  color: var(--btn-brand-color-content-primary);
}

/* =========================================
   COMPLIANT PRIMARY BUTTON
   ========================================= */
.dp-btn-compliant-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none !important;
  padding: 8px 20px;
  box-sizing: border-box;
  border: 2px solid transparent;
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  text-decoration: none;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  background-color: var(--white-color);
  color: var(--text-primary-default);
}

.dp-btn-compliant-primary i {
  font-size: 14px;
}

/* Primary States */
.dp-btn-compliant-primary:hover {
  background-color: var(--btn-brand-color-bg-secondary-disabled);
  color: var(--text-primary-default);
}

.dp-btn-compliant-primary:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-btn-compliant-primary:active {
  background-color: var(--border-default);
  color: var(--text-primary-default);
}

.dp-btn-compliant-primary:disabled,
.dp-btn-compliant-primary.disabled {
  background-color: var(--text-link-primary-disabled);
  color: var(--text-tertiary-color);
  cursor: not-allowed;
}

.dp-btn-compliant-primary:focus-visible {
  outline: none;
  border-color: var(--border-extra-subtle);
  color: var(--text-secondary-color);
}

/* =========================================
   SECONDARY BRAND DARK OUTLINE BUTTON
   ========================================= */
.dp-btn-brand-outline-dark {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 20px;
  box-sizing: border-box;
  border: 2px solid var(--white-color);
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  text-decoration: none !important;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  background-color: transparent;
  color: var(--btn-brand-color-bg-secondary-disabled);
}

.dp-btn-brand-outline-dark i {
  font-size: 14px;
}

.dp-btn-brand-outline-dark:hover {
  background-color: var(--white-color);
  color: var(--btn-brand-color-content-primary);
  border-color: var(--white-color);
}

.dp-btn-brand-outline-dark:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-btn-brand-outline-dark:active {
  background-color: var(--btn-color-bg-primary-disabled);
  color: var(--btn-brand-color-content-primary);
  border-color: var(--btn-color-bg-primary-disabled);
}

.dp-btn-brand-outline-dark:disabled,
.dp-btn-brand-outline-dark.disabled {
  background-color: var(--btn-brand-color-content-outline-disabled);
  color: var(--btn-brand-color-content-primary);
  border-color: var(--btn-color-content-outline-disabled);
}

.dp-btn-brand-outline-dark:focus-visible {
  outline: none;
  border-color: var(--btn-brand-color-bg-secondary-disabled);
  color: var(--white-color);
}

/* =========================================
   COMPLAINT OUTLINE BUTTON
   ========================================= */
.dp-btn-compliant-outline {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 20px;
  box-sizing: border-box;
  border: 2px solid var(--white-color);
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  text-decoration: none !important;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  background-color: transparent;
  color: var(--btn-brand-color-bg-secondary-disabled);
}

.dp-btn-compliant-outline i {
  font-size: 14px;
}

.dp-btn-compliant-outline:hover {
  background-color: var(--white-color);
  color: var(--btn-brand-color-content-primary);
  border-color: var(--white-color);
}

.dp-btn-compliant-outline:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-btn-compliant-outline:active {
  background-color: var(--btn-color-bg-primary-disabled);
  color: var(--btn-brand-color-content-primary);
  border-color: var(--btn-color-bg-primary-disabled);
}

.dp-btn-compliant-outline:disabled,
.dp-btn-compliant-outline.disabled {
  background-color: var(--btn-brand-color-content-outline-disabled);
  color: var(--btn-brand-color-content-primary);
  border-color: var(--btn-color-content-outline-disabled);
}

.dp-btn-compliant-outline:focus-visible {
  outline: none;
  border-color: var(--btn-brand-color-bg-secondary-disabled);
  color: var(--white-color);
}

/* =========================================
   CTA Small size
   ========================================= */

.dp-btn-normal-small {
  height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 22px;
  min-width: 80px;
}

.dp-btn-normal-small i {
  font-size: 12px;
}

/* =========================================
   PRIMARY LINK
   ========================================= */

a,
.dp-primary-link,
.dp-blue-no-style-btn,
.dp-orange-link,
.dp-dark-orange-link,
.dp-blue-orange-link,
.inline-text-links,
.inline-text-white-links,
.carrot-text-links,
a.blue-text-no-hover,
a.blue-color-underline {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text-link-primary);
  letter-spacing: -0.28px;
  transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
}

.dp-primary-link i,
.dp-blue-no-style-btn i,
.dp-orange-link i,
.dp-dark-orange-link i,
.dp-blue-orange-link i,
.inline-text-links i,
.inline-text-white-links i,
.carrot-text-links i,
a.blue-text-no-hover,
a.blue-color-underline i {
  font-size: 14px;
}

.dp-primary-link:hover i,
.dp-blue-no-style-btn:hover i,
.dp-orange-link:hover i,
.dp-dark-orange-link:hover i,
.dp-blue-orange-link:hover i,
.inline-text-links:hover i,
.inline-text-white-links:hover i,
.carrot-text-links:hover i,
a.blue-text-no-hover:hover i,
a.blue-color-underline:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

a:hover,
.dp-primary-link:hover,
.dp-blue-no-style-btn:hover,
.dp-orange-link:hover,
.dp-dark-orange-link:hover,
.dp-blue-orange-link:hover,
.inline-text-links:hover,
.inline-text-white-links:hover,
.carrot-text-links:hover,
.a.blue-text-no-hover:hover,
.a.blue-color-underline:hover {
  color: var(--text-link-primary-hover);
}

a:active,
.dp-primary-link:active,
.dp-blue-no-style-btn:active,
.dp-orange-link:active,
.dp-dark-orange-link:active,
.dp-blue-orange-link:active,
.inline-text-links:active,
.inline-text-white-links:active,
.carrot-text-links:active,
.a.blue-text-no-hover:active,
.a.blue-color-underline:active {
  color: var(--btn-color-content-outline-pressed);
}

a:disabled,
.dp-primary-link:disabled,
.dp-primary-link.disabled,
.dp-blue-no-style-btn:disabled,
.dp-blue-no-style-btn.disabled,
.dp-orange-link:disabled,
.dp-dark-orange-link:disabled,
.dp-blue-orange-link:disabled,
.inline-text-links:disabled,
.inline-text-white-links:disabled,
.carrot-text-links:disabled,
.a.blue-text-no-hover:disabled,
.a.blue-color-underline:disabled {
  color: var(--btn-color-content-outline-disabled);
}

a:focus-visible,
.dp-primary-link:focus-visible,
.dp-blue-no-style-btn:focus-visible,
.dp-orange-link:focus-visible,
.dp-dark-orange-link:focus-visible,
.dp-blue-orange-link:focus-visible,
.inline-text-links:focus-visible,
.inline-text-white-links:focus-visible,
.carrot-text-links:focus-visible,
.a.blue-text-no-hover:focus-visible,
.a.blue-color-underline:focus-visible {
  border-color: var(--border-focus);
}

/* =========================================
   SECONDARY LINK
   ========================================= */

.dp-secondary-link,
.dp-white-blue-link,
.dp-white-orange-link,
a.white-text-no-hover,
a.white-text-hover-blue,
a.white-text-hover-orange {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text-primary-dark);
  letter-spacing: -0.28px;
  text-decoration-line: underline;
  transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
}

.dp-secondary-link i,
.dp-white-blue-link i,
.dp-white-orange-link i,
a.white-text-no-hover i,
a.white-text-hover-blue i,
a.white-text-hover-orange i {
  font-size: 14px;
}

.dp-secondary-link:hover i,
.dp-white-blue-link:hover i,
.dp-white-orange-link:hover i,
a.white-text-no-hover:hover i,
a.white-text-hover-blue:hover i,
a.white-text-hover-orange:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-secondary-link:hover,
.dp-white-blue-link:hover,
.dp-white-orange-link:hover,
a.white-text-no-hover:hover,
a.white-text-hover-blue:hover,
a.white-text-hover-orange:hover {
  color: var(--text-link-primary-hover);
}

.dp-secondary-link:active,
.dp-white-blue-link:active,
.dp-white-orange-link:active,
a.white-text-no-hover:active,
a.white-text-hover-blue:active,
a.white-text-hover-orange:active {
  color: var(--btn-color-content-outline-pressed);
}

.dp-secondary-link:disabled,
.dp-secondary-link.disabled,
.dp-white-blue-link:disabled,
.dp-white-blue-link.disabled,
.dp-white-orange-link:disabled,
.dp-white-orange-link.disabled,
a.white-text-no-hover:disabled,
a.white-text-hover-blue:disabled,
a.white-text-hover-orange:disabled {
  color: var(--btn-color-content-outline-disabled);
}

.dp-secondary-link:focus-visible,
.dp-white-blue-link:focus-visible,
.dp-white-orange-link:focus-visible,
a.white-text-no-hover:focus-visible,
a.white-text-hover-blue:focus-visible,
a.white-text-hover-orange:focus-visible {
  color: var(--btn-color-content-outline);
}

/* =========================================
   PRIMARY Inline LINK
   ========================================= */

a.dp-underline,
.inline-text-links,
.inline-text-white-links,
.carrot-text-links {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: underline !important;
  color: var(--text-link-primary);
  letter-spacing: -0.28px;
  transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
}

a.dp-underline i,
.inline-text-links i,
.inline-text-white-links i,
.carrot-text-links i {
  font-size: 14px;
}

a.dp-underline:hover i,
.inline-text-links:hover i,
.inline-text-white-links:hover i,
.carrot-text-links:hover i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

a.dp-underline:hover,
.inline-text-links:hover,
.inline-text-white-links:hover,
.carrot-text-links:hover {
  color: var(--text-link-primary-hover);
}

a.dp-underline:disabled,
.inline-text-links:disabled,
.inline-text-white-links:disabled,
.carrot-text-links:disabled {
  color: var(--border-strong);
}

a.dp-underline:focus-visible,
.inline-text-links:focus-visible,
.inline-text-white-links:focus-visible,
.carrot-text-links:focus-visible {
  color: var(--text-link-primary-hover);
}
/* old cta styles */

.navy-text,
.orange-text {
  color: var(--text-primary-default);
}

.white-text {
  color: var(--white-color);
}

.darkorange-text {
  color: var(--text-hover-default);
}

.dp-btn-wrap {
  display: flex;
  gap: 16px;
}

.dp-btn-wrap a:last-child {
  margin: 0px;
}

@media (max-width: 600px) {
  .dp-btn-wrap {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}

/* =========================================
   ICON BUTTONS
   ========================================= */

/* ===========PRIMARY ICON BUTTONS========================================= */
.dp-icon-btn-primary {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background: var(--btn-color-bg-primary);
  color: var(--btn-color-content-primary);
  border: 2px solid transparent;
}

.dp-icon-btn-primary i {
  font-size: 16px;
}

.dp-icon-btn-primary:hover {
  background: var(--btn-color-bg-primary-hover);
  color: var(--btn-color-content-primary-hover);
  transform: rotate(90deg);
}

.dp-icon-btn-primary:hover.dp-icon-btn-bounce {
  transform: none;
}

.dp-icon-btn-primary:hover.dp-icon-btn-bounce i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-icon-btn-primary:active {
  background: var(--btn-color-bg-primary-pressed);
  color: var(--btn-color-content-primary-pressed);
}

.dp-icon-btn-primary:disabled,
.dp-icon-btn-primary.disabled {
  background: var(--btn-color-bg-primary-disabled);
  color: var(--btn-color-content-primary-disabled);
}

.dp-icon-btn-primary:focus-visible {
  background: var(--btn-color-bg-primary);
  color: var(--btn-color-content-primary-hover);
  border-color: var(--btn-color-bg-primary-focused);
  outline: none;
}

/* ===========OUTLINE ICON BUTTONS========================================= */
.dp-icon-btn-outline {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background: var(--btn-color-bg-outline);
  color: var(--btn-icon-content-color-outline);
  border: 2px solid var(--btn-color-border-outline);
}

.dp-icon-btn-outline i {
  font-size: 16px;
}

.dp-icon-btn-outline:hover {
  background: transparent;
  color: var(--btn-icon-content-color-outline);
  transform: rotate(90deg);
}

.dp-icon-btn-outline:hover.dp-icon-btn-bounce {
  transform: none;
}

.dp-icon-btn-outline:hover.dp-icon-btn-bounce i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-icon-btn-outline:active {
  background: transparent;
  color: var(--btn-icon-content-color-outline);
}

.dp-icon-btn-outline:disabled,
.dp-icon-btn-outline.disabled {
  background: var(--btn-color-bg-primary-disabled);
  color: var(--btn-color-content-primary-disabled);
}

.dp-icon-btn-outline:focus-visible {
  background: transparent;
  color: var(--btn-icon-content-color-outline);
  border-color: var(--btn-color-bg-primary-focused);
  outline: none;
}

/* ===========BRAND ICON BUTTONS========================================= */
.dp-icon-btn-brand {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background: var(--btn-brand-color-bg-primary);
  color: var(--white-color);
  border: 2px solid transparent;
}

.dp-icon-btn-brand i {
  font-size: 16px;
}

.dp-icon-btn-brand:hover {
  background: var(--btn-brand-color-bg-primary-hover);
  color: var(--btn-brand-color-content-primary-hover);
  transform: rotate(90deg);
}

.dp-icon-btn-brand:hover.dp-icon-btn-bounce {
  transform: none;
}

.dp-icon-btn-brand:hover.dp-icon-btn-bounce i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-icon-btn-brand:active {
  background: var(--btn-brand-color-bg-primary-pressed);
  color: var(--btn-brand-color-content-primary-pressed);
}

.dp-icon-btn-brand:disabled,
.dp-icon-btn-brand.disabled {
  background: var(--btn-color-bg-primary-disabled);
  color: var(--btn-color-content-primary-disabled);
}

.dp-icon-btn-brand:focus-visible {
  background: var(--btn-brand-color-bg-primary);
  color: var(--white-color);
  border-color: var(--btn-color-bg-primary-focused);
  outline: none;
}

/* ===========BRAND OUTLINE ICON BUTTONS========================================= */
.dp-icon-btn-brand-outline {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.dp-icon-btn-brand-outline i {
  font-size: 16px;
}

.dp-icon-btn-brand-outline:hover {
  background: transparent;
  color: var(--btn-brand-color-bg-primary-hover);
  border-color: var(--btn-brand-color-bg-primary-hover);
  transform: rotate(90deg);
}

.dp-icon-btn-brand-outline:hover.dp-icon-btn-bounce {
  transform: none;
}

.dp-icon-btn-brand-outline:hover.dp-icon-btn-bounce i {
  animation: bounce-right 0.8s 1 ease-in-out;
  -webkit-animation: bounce-right 0.8s 1 ease-in-out;
}

.dp-icon-btn-brand-outline:active {
  background: transparent;
  color: var(--btn-brand-color-bg-primary-pressed);
  border-color: var(--btn-brand-color-bg-primary-pressed);
}

.dp-icon-btn-brand-outline:disabled,
.dp-icon-btn-brand-outline.disabled {
  background: transparent;
  color: var(--btn-icon-color-disabled);
  border-color: var(--btn-icon-color-disabled);
}

.dp-icon-btn-brand-outline:focus-visible {
  background: transparent;
  color: var(--primary-color);
  border-color: var(--btn-color-bg-primary-focused);
  outline: none;
}

/* =========================================
   BUTTON ANIMATIONS
   ========================================= */

/* Bounce Animation */
@keyframes bounce-right {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(
      6px
    ); /* Adjust this value to change the bounce distance */
  }
}