:root {
  /* Font Families */
  --font-family-dm: "DM Sans", "Lato", sans-serif;
  --font-family-fb: "FORZA-Book", "DM Sans", "Lato-B", sans-serif;
  --font-family-fm: "FORZA-M", "DM Sans", "Lato-M", sans-serif;
  --font-family-lato: "Lato", sans-serif;

  /* Font Weights */
  --fw-r: 400; /* Regular */
  --fw-m: 500; /* Medium */
  --fw-sb: 600; /* SemiBold */
  --fw-b: 700; /* Bold */
  --fw-eb: 900; /* ExtraBold */

  /* Font Sizes */
  --fs-b-xxs: 0.625rem; /* 10px */
  --fs-b-xs: 0.75rem;
  --fs-b-s: 0.875rem;
  --fs-b-m: 1rem;
  --fs-b-l: 1.125rem;
  --fs-h1: 1.875rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.25rem;
  --fs-h4: 1.125rem;

  /* Line Heights */
  --lh-b-xxs: 0.75rem;
  --lh-b-xs: 0.875rem;
  --lh-b-s: 1.0625rem;
  --lh-b-m: 1.5rem;
  --lh-b-l: 1.5rem;
  --lh-b-l-m: 1.375rem;
  --lh-h1: 2.5rem;
  --lh-h2: 1.8125rem;
  --lh-h3: 1.25rem;
  --lh-h4: 1.25rem;

  /* Color Palette */
  --primary-grey: #fbfbfb;
  --grey: #b3b3b9;
  --dark-grey: #7b7b89;
  --secondary-grey: #35353a;
  --light-grey: #7b7b7d;

  --neutral-0: #ffffff;
  --neutral-100: #f0eaed;
  --neutral-200: #efefef;
  --neutral-300: #e3e3e3;
  --neutral-400: #cacaca;
  --neutral-500: rgb(26 30 42 / 35%);
  --neutral-600: #565656;
  --neutral-700: #797979;
  --neutral-800: #2b2b2b;
  --neutral-900: #1d1d1d;
  --neutral-1000: #000000;
  --background: #FF5018;


  /* Accent Colors */
  --primary-yellow: #fcb414;
  --primary-orange: #ef8c30;
  --primary-purple: #491f49;
  --dark-orange: #d27b29;
  --primary-orange: #FF5018;
  --alert-red: #e82d13;
  --primary-green: #309e6a;
  --green: #00958f;
  --dark-green: #0c590b;
  --primary-blue: #4458ff;
  --primary-light-black: #2b2b2b;

  /* Status Colors */
  --primary-fill-color: #f0f1ff;
  --primary-text-color: #381D2A;

  --red-fill-color: #fce4e4;
  --red-text-color: #ed3f3d;

  --grey-fill-color: #efefef;
  --grey-text-color: #565656;

  /* ... (continue with all other color variables) ... */

  /* Border Radius */
  --b-radius-4: 4px;
  --b-radius-8: 8px;
  --b-radius-12: 12px;
  --b-radius-16: 16px;
  --b-radius-20: 20px;

  /* Sizing */
  --height-48: 48px;
  --height-60: 60px;
  --width-48: 48px;
  --width-60: 60px;


}

.d-flex{
  display: flex !important;
}

.items-center{
  align-items: center !important;
}

.justify-center{
  justify-content: center !important;
}

.btn-primary{
  background: var(--background);
  border-radius: 6px;
  color: var(--primary-text-color);
  border: none;
  padding: 10px;
  font-weight: 500;
}

#nayapay-btn{
  display: inline-flex;        /* shrink to content */
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: auto;                 /* important */
  margin: 15px auto;
  font-family: var(--font-family-dm);
  font-weight: bold;
  font-size: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  padding-right: 25px;
}
#nayapay-plugin{
  font-family: var(--font-family-dm);
}

/* hidden text initially */
#nayapay-btn .button-text {
  opacity: 1;
  transform: translateX(20px);
  word-spacing: 1px;
  font-weight: 600;
  margin-right: 5px;
  /* transition: opacity 0.6s ease, transform 0.6s ease; */
}

/* svg centered initially */
#nayapay-btn .button-logo {
  transform: translateX(0);
  /* transition: transform 0.6s ease; */
}

/* activate animation */
#nayapay-btn.active .button-text {
  opacity: 1;
  transform: translateX(0);
}

#nayapay-btn.active .button-logo {
  transform: translateX(-10px);
}

/* responsive adjustments */
@media (max-width: 768px) {
  #nayapay-btn {
    width: 80%;
    font-size: medium;
    padding: 8px;
  }
  #nayapay-btn .button-logo {
    width: 90px;
    height: 30px;
  }
}