#sparkle-app .btn{height: 44px; width: 100%; border-radius: 50px; font-size: 14px; font-weight: var(--font-bold); font-family: "Poppins", sans-serif; display: flex;  align-items: center;  justify-content: center;}
#sparkle-app .btn:active, #sparkle-app .btn:focus,#sparkle-app .btn:focus-visible, #sparkle-app button:active{border: solid 1px #fff;  outline: none;  box-shadow: none;}



/* Component btns */

#sparkle-app .btn.spk-menu-btn {background-color: transparent; border: none; padding: 0;}
#sparkle-app .btn.spk-menu-btn.spk-menu-close-btn {font-size: 35px;
  font-weight: 200;
  color: #fff;}
#sparkle-app .btn.spk-btn-dark {background-color: var(--spk-black); border: solid 1px var(--spk-black); color: var(--spk-white);}
#sparkle-app .btn.spk-btn-gray {background-color: var(--spk-gray);  border: solid 1px var(--spk-gray); color: var(--spk-black);}
#sparkle-app .btn.spk-btn-strock {background-color: var(--spk-white);  border: solid 1px var(--spk-black); color: var(--spk-black); font-weight: var(--font-normal);}
#sparkle-app .btn.spk-btn-red {background-color: var(--spk-red);  border: solid 1px var(--spk-red); color: var(--spk-white); font-weight: var(--font-bold);}
#sparkle-app .btn.spk-btn-yellow {background-color: var(--spk-yellow);  border: solid 1px var(--spk-yellow); color: var(--spk-white); font-weight: var(--font-bold);}
#sparkle-app .btn.spk-btn-transp {padding-left: 0;
  padding-right: 0; background-color: var(--spk-white); height: 20px; border: none; color: var(--spk-black); font-weight: var(--font-normal);}
#sparkle-app .btn.spark-left-align {justify-content: flex-start;}

#sparkle-app .btn.spark-view-hide {font-size: 12px; line-height: 18px; color: var(--spk-txt-gray); padding:0; 
    margin-bottom: 24px;}


#sparkle-app .spark-btn-group {display: flex; flex-direction: column; gap: 18px; }
/* Melissa 2026-09-16: more space between Sign In and Forgot password on the email sign-in page. */
#sparkle-app.sparkle-login .spark-form .spark-btn-group {gap: 32px;}

#sparkle-app .spark-btn-add, #sparkle-app .spark-btn-edit  {background-color: transparent; padding: 0; width: unset; height: unset; font-size: 12px; font-weight: var(--font-normal); color: var(--spk-txt-gray);}


/* non btn */


#sparkle-app .spark-acont{background-color: transparent; font-size: 14px; line-height: 21px; text-decoration: unset;}
#sparkle-app .spark-land-bottom{display: flex; flex-direction: column; align-items: center; margin-top: 24px; gap: 18px;}
#sparkle-app .spark-acont.spark-btn-dont-acont{font-weight: var(--font-normal); text-decoration: unset;}
#sparkle-app .spark-acont.spark-btn-creat-acont{font-weight: var(--font-bold); text-decoration: underline;}


/* Back, the same on every page (Figma, Paul 2026-09-25): an 18px row, then 24px to the heading.
   The heading's hero brings 20px (.spark-hero-top-pad-20, all widths); the 4px here makes up the 24. */
#sparkle-app .spark-back-btn-wrap {display: flex;  justify-content: space-between; align-items: center; min-height: 18px; margin-top: 10px; margin-bottom: 4px;}

#sparkle-app .spark-with-icon-btn {position: relative;}
#sparkle-app .spark-with-icon-btn  svg{position: absolute;  left: 20px;  top: 50%;  transform: translateY(-50%);}
#sparkle-app .spark-back-btn-wrap  .btn.spark-btn-back{width: 65px; height: 18px;  padding: 0; border: 0;  text-align: left; font-size: 12px; font-weight: var(--font-medium); line-height: 18px; color: var(--spk-txt-gray);  justify-content: flex-start;}
#sparkle-app .spark-back-btn-wrap  .btn.spark-btn-back svg{height: 12px;  width: 12px; margin-right: 15px;}


/* Line */

#sparkle-app .spark-divid-btn {height: 21px; margin-top: 24px; margin-bottom: 24px; display: flex;  justify-content: center; position: relative;}
#sparkle-app .spark-divid-btn::before {position: absolute; content: ""; background-color: var(--spk-bdr-gray); height: 1px; width: 100%; top: 50%;  transform: translateY(-50%);}
#sparkle-app .spark-divid-btn span{font-size: 14px; font-weight: var(--font-normal); line-height: 21px; color: var(--spk-bdr-gray); background-color: var(--spk-white);  z-index: 2;  width: 60px;  text-align: center;}


#sparkle-app .spark-divid-line{background-color: var(--spk-bdr-gray); height: 1px; width: 100%; margin-top: 24px; margin-bottom: 18px;}

#sparkle-app .spark-btn-edit-icon{width: auto;   padding-right: 0;   padding-top: 0;   display: flex;   align-items: flex-start;   padding-left: 5px;}
#sparkle-app .spark-update-extra-btns{border: none; height: 24px; border-radius: 4px; font-size: 10px; font-weight: var(--font-semibold); line-height: 15px; padding: 0 15px; display: flex; align-items: center; justify-content: center;}
#sparkle-app .spark-update-extra-btns.spark-red{background-color: var(--spk-red); color: var(--spk-white);}
/* Figma "Tag" (Paul 2026-09-26): 24px, 4/10 padding, Poppins 600 12/18 white on #F97066, radius 4. Used for the
   pet badges ("Add Records", "Onboarding Incomplete") on the dashboard pet list and the pet's Vaccine Records row. */
#sparkle-app .spark-tag{display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 24px; padding: 4px 10px;
  border: 0; border-radius: 4px; background: #F97066; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: 12px; line-height: 18px; white-space: nowrap; text-decoration: none; cursor: pointer;}
#sparkle-app .spark-callout-wrap-pet-profile ul li a .spark-tag{margin-left: auto; margin-right: 12px;}
#sparkle-app .spark-update-extra-btns.spark-green{background-color: var(--spk-green); color: var(--spk-white);}