a.button.button--primary,
a.button.button--tertiary {
  color: var(--color-black);
  text-decoration: none !important;
}
a.button.button--secondary {
  color: #006B67;
  text-decoration: none !important;
}
a.button.button--primary:hover {
  color: var(--button-primary-fg-hover);
}
a.button.button--secondary:hover {
  color: #002922;
}
a.button.button--tertiary:hover {
  color: var(--button-tertiary-fg-hover);
}

.detail-buttons,
.detail-buttons__h2,
.content-new-design {
  a.button.button--primary,
  a.button.button--tertiary {
    color: var(--color-black) !important;
  }
  a.button.button--secondary {
    color: #006B67 !important;
  }
  a.button.button--primary:hover {
    color: var(--button-primary-fg-hover) !important;
  }
  a.button.button--secondary:hover {
    color: #002922 !important;
  }
  a.button.button--tertiary:hover {
    color: var(--button-tertiary-fg-hover) !important;
  }
}
.detail-buttons,
.detail-buttons__h2,
.content-new-design {
  a.button.button--secondary {
    .dark & {
      /*background: #161B26;*/
      color: #CECFD2 !important;
    }
  }
}
.button--primary.button--with-icon-before[data-icon-type="arrow-up-right"]::before,
.button--primary.button--with-icon-after[data-icon-type="arrow-up-right"]::after,
.button--primary.button--with-icon[data-icon-type="arrow-up-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-up-right'%3E%3Cpath id='Icon' d='M7 17L17 7M17 7H7M17 7V17' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

.button--primary.button--with-icon-before[data-icon-type="arrow-up-right"]:hover::before,
.button--primary.button--with-icon-after[data-icon-type="arrow-up-right"]:hover::after,
.button--primary.button--with-icon[data-icon-type="arrow-up-right"]:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-up-right'%3E%3Cpath id='Icon' d='M7 17L17 7M17 7H7M17 7V17' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

.button--primary.button--with-icon-before[data-icon-type="arrow-right"]::before,
.button--primary.button--with-icon-after[data-icon-type="arrow-right"]::after,
.button--primary.button--with-icon[data-icon-type="arrow-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.button--primary.button--with-icon-before[data-icon-type="arrow-right"]:hover::before,
.button--primary.button--with-icon-after[data-icon-type="arrow-right"]:hover::after,
.button--primary.button--with-icon[data-icon-type="arrow-right"]:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.button--primary.button--with-icon-before[data-icon-type="placeholder"]::before,
.button--primary.button--with-icon-after[data-icon-type="placeholder"]::after,
.button--primary.button--with-icon[data-icon-type="placeholder"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='placeholder'%3E%3Cpath id='Icon' d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

.button--primary.button--with-icon-before[data-icon-type="placeholder"]:hover::before,
.button--primary.button--with-icon-after[data-icon-type="placeholder"]:hover::after,
.button--primary.button--with-icon[data-icon-type="placeholder"]:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='placeholder'%3E%3Cpath id='Icon' d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

/* Secondary button hover styles for icons */
.button--secondary.button--with-icon-before[data-icon-type="arrow-up-right"]::before,
.button--secondary.button--with-icon-after[data-icon-type="arrow-up-right"]::after,
.button--secondary.button--with-icon[data-icon-type="arrow-up-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-up-right'%3E%3Cpath id='Icon' d='M7 17L17 7M17 7H7M17 7V17' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

.dark .button--secondary.button--with-icon-before[data-icon-type="arrow-up-right"]::before,
.dark .button--secondary.button--with-icon-after[data-icon-type="arrow-up-right"]::after,
.dark .button--secondary.button--with-icon[data-icon-type="arrow-up-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-up-right'%3E%3Cpath id='Icon' d='M7 17L17 7M17 7H7M17 7V17' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

.button--secondary.button--with-icon-before[data-icon-type="arrow-right"]::before,
.button--secondary.button--with-icon-after[data-icon-type="arrow-right"]::after,
.button--secondary.button--with-icon[data-icon-type="arrow-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dark .button--secondary.button--with-icon-before[data-icon-type="arrow-right"]::before,
.dark .button--secondary.button--with-icon-after[data-icon-type="arrow-right"]::after,
.dark .button--secondary.button--with-icon[data-icon-type="arrow-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.button--secondary.button--with-icon-before[data-icon-type="placeholder"]::before,
.button--secondary.button--with-icon-after[data-icon-type="placeholder"]::after,
.button--secondary.button--with-icon[data-icon-type="placeholder"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='placeholder'%3E%3Cpath id='Icon' d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

.dark .button--secondary.button--with-icon-before[data-icon-type="placeholder"]::before,
.dark .button--secondary.button--with-icon-after[data-icon-type="placeholder"]::after,
.dark .button--secondary.button--with-icon[data-icon-type="placeholder"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='placeholder'%3E%3Cpath id='Icon' d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

/* Tertiary (Link CTA) button styles for icons */
.button--tertiary.button--with-icon-before[data-icon-type="arrow-up-right"]::before,
.button--tertiary.button--with-icon-after[data-icon-type="arrow-up-right"]::after,
.button--tertiary.button--with-icon[data-icon-type="arrow-up-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-up-right'%3E%3Cpath id='Icon' d='M7 17L17 7M17 7H7M17 7V17' stroke='%23008D89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

.dark .button--tertiary.button--with-icon-before[data-icon-type="arrow-up-right"]::before,
.dark .button--tertiary.button--with-icon-after[data-icon-type="arrow-up-right"]::after,
.dark .button--tertiary.button--with-icon[data-icon-type="arrow-up-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-up-right'%3E%3Cpath id='Icon' d='M7 17L17 7M17 7H7M17 7V17' stroke='%23008D89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

.button--tertiary.button--with-icon-before[data-icon-type="arrow-right"]::before,
.button--tertiary.button--with-icon-after[data-icon-type="arrow-right"]::after,
.button--tertiary.button--with-icon[data-icon-type="arrow-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='%23008D89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dark .button--tertiary.button--with-icon-before[data-icon-type="arrow-right"]::before,
.dark .button--tertiary.button--with-icon-after[data-icon-type="arrow-right"]::after,
.dark .button--tertiary.button--with-icon[data-icon-type="arrow-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='%23008D89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.button--tertiary.button--with-icon-before[data-icon-type="placeholder"]::before,
.button--tertiary.button--with-icon-after[data-icon-type="placeholder"]::after,
.button--tertiary.button--with-icon[data-icon-type="placeholder"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='placeholder'%3E%3Cpath id='Icon' d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

.dark .button--tertiary.button--with-icon-before[data-icon-type="placeholder"]::before,
.dark .button--tertiary.button--with-icon-after[data-icon-type="placeholder"]::after,
.dark .button--tertiary.button--with-icon[data-icon-type="placeholder"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='placeholder'%3E%3Cpath id='Icon' d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%2394969C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}

/* Base Button Styles */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  border-radius: var(--radius-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: fit-content;
  /*[lang="ar"] & {flex-direction: row-reverse;}*/
}
/* Size Variants */
.button--2xl {
  height: var(--button-2xl);
  padding: var(--spacing-xl) var(--spacing-xl);
  font-size: 18px;
}
.button--xl {
  height: var(--button-xl);
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: 16px;
}
.button--lg {
  height: var(--button-lgxl);
  padding: 10px var(--spacing-xl);
  gap: var(--spacing-sm);
  font-size: 16px;
  .button-text {
    font-size: 16px;
    line-height: 24px;
  }
}
.button--md {
  height: 40px;
  padding: var(--spacing-md) var(--spacing-lg);
  gap: var(--spacing-xs);
  font-size: 14px;
  .button-text {
    font-size: 14px;
    line-height: 20px;
  }
}
.button--sm {
  height: var(--button-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 14px;
}
.button--xs {
  height: var(--button-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 12px;
}
/* Style Variants */
/* Primary */
.button--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  border: 1px solid var(--button-primary-border);
}
.button--primary:hover {
  background: var(--button-primary-bg-hover);
  color: var(--button-primary-fg-hover);
  border-color: var(--button-primary-border-hover);
}
/* Secondary */
.button--secondary {
  background: var(--button-secondary-bg);
  color: #006B67;
  border: 1px solid #66D3CF;
  .dark & {
    background: #161B26;
    color: #006B67 !important;
  }
}
.button--secondary:hover {
  background: var(--button-secondary-bg-hover);
  color: #002922;
  border-color: #66D3CF;
  .dark & {
    background: var(--button-secondary-fg-hover);
    color: #002922 !important;
    border-color: #66D3CF !important;
  }
}
/* Secondary Color */
.button--secondary-color {
  background: var(--button-secondary-color-bg);
  color: var(--button-secondary-color-fg);
  border: 1px solid var(--button-secondary-color-border);
}
.button--secondary-color:hover {
  background: var(--button-secondary-color-bg-hover);
  color: var(--button-secondary-color-fg-hover);
  border-color: var(--button-secondary-color-border-hover);
}
/* Tertiary */
.button--tertiary {
  background: transparent;
  color: #008D89;
  border: none;
  padding-left: 0;
  padding-right: 0;
  .button-text {
      color: #008D89;
      .dark & {color: #008D89;}
  }
}
.button--tertiary:hover {
    color: #006B67;
}
.button--tertiary:hover .button-text {
    color: #006B67;
}
.button--tertiary:hover.button--with-icon-before[data-icon-type="arrow-up-right"]::before,
.button--tertiary:hover.button--with-icon-after[data-icon-type="arrow-up-right"]::after,
.button--tertiary:hover.button--with-icon[data-icon-type="arrow-up-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-up-right'%3E%3Cpath id='Icon' d='M7 17L17 7M17 7H7M17 7V17' stroke='%23006B67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}
.button--tertiary:hover.button--with-icon-before[data-icon-type="arrow-right"]::before,
.button--tertiary:hover.button--with-icon-after[data-icon-type="arrow-right"]::after,
.button--tertiary:hover.button--with-icon[data-icon-type="arrow-right"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='%23006B67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dark .button--tertiary.button--with-icon::after {
    filter: invert(83%) sepia(5%) saturate(118%) hue-rotate(190deg) brightness(93%) contrast(86%);
}
/* Tertiary Color */
.button--tertiary-color {
  background: transparent;
  color: var(--button-tertiary-color-fg);
  border: none;
}
.button--tertiary-color:hover {
  background: var(--button-tertiary-color-bg-hover);
  color: var(--button-tertiary-color-fg-hover);
}
/* Error Primary */
.button--error-primary {
  background: var(--button-error-primary-bg);
  color: var(--button-error-primary-fg);
  border: 1px solid var(--button-error-primary-border);
}
.button--error-primary:hover {
  background: var(--button-error-primary-bg-hover);
  color: var(--button-error-primary-fg-hover);
  border-color: var(--button-error-primary-border-hover);
}
/* Error Secondary */
.button--error-secondary {
  background: var(--button-error-secondary-bg);
  color: var(--button-error-secondary-fg);
  border: 1px solid var(--button-error-secondary-border);
}
.button--error-secondary:hover {
  background: var(--button-error-secondary-bg-hover);
  color: var(--button-error-secondary-fg-hover);
  border-color: var(--button-error-secondary-border-hover);
}
/* Error Tertiary */
.button--error-tertiary {
  background: transparent;
  color: var(--button-error-tertiary-fg);
  border: none;
}
.button--error-tertiary:hover {
  background: var(--button-error-tertiary-bg-hover);
  color: var(--button-error-tertiary-fg-hover);
}
.button--with-icon::after {
  content: '';
  width: 20px;
  height: 20px;
  display: inline-block;
  color: var(--button-primary-fg);
  transition: all 0.2s ease;
}
[lang="ar"] .button--with-icon::after {
  transform: scaleX(-1);
}
/* Disabled State */
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.button-icon img {
  width: 20px;
  height: 20px;
  display: block;
}
.button-text {
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0 var(--spacing-xxs);
}
.button--with-icon-before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}
.button--with-icon-before::before {
  content: '';
  width: 20px;
  height: 20px;
  display: inline-block;
  color: var(--button-primary-fg);
  transition: all 0.2s ease;
}
.button--with-icon-after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}
.button--with-icon-after::after {
  content: '';
  width: 20px;
  height: 20px;
  display: inline-block;
  color: var(--button-primary-fg);
  transition: all 0.2s ease;
}
[lang="ar"] .button--with-icon-before::before,
[lang="ar"] .button--with-icon-after::after {
  transform: scaleX(-1);
}