/* =======================
   COMMON BASE (both colors)
   ======================= */

/* Base layer: rounded, layering for gloss + dust */
.button-main,
.button-main_icon{
  position: relative;
  overflow: hidden;
  border-radius: 5.625rem;
  isolation: isolate;
  transition: box-shadow .25s ease, transform .15s ease, background .25s ease;
  border: none; /* orange has no visible stroke; purple adds its own */
}

/* Top gloss highlight common for both (subtle) */
.button-main::before,
.button-main_icon::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  mix-blend-mode:screen; opacity:.6;
  background:
    radial-gradient(160% 220% at 50% -60%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 100%);
  z-index:0;
}

/* Dust / star speckles */
.button-main::after,
.button-main_icon::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  mix-blend-mode:screen;
  background-image: var(--btn-noise-url);
  background-repeat: repeat;
  background-size: var(--noise-size, 380px) var(--noise-size, 380px);
  opacity:1;
  z-index:1;
}

/* Ensure button content stays above overlays */
.button-main > *, .button-main_icon > *{
  position:relative; z-index:2;
}

/* Disabled helpers (works with multiple notations) */
.button-main:disabled,
.button-main_icon:disabled,
.button-main[aria-disabled="true"],
.button-main_icon[aria-disabled="true"],
.button-main.is-disabled,
.button-main_icon.is-disabled{
  pointer-events:none; cursor:default; opacity:.4;
}

/* =======================
   ORANGE BUTTONS
   ======================= */

/* Orange base (no border; gradient fill + dust + glow) */
.button-main,
.button-main_icon{
  background: var(--gradient-primary-button-fill,
    linear-gradient(274deg,#FFBF00 2.37%,#FF850B 57.12%,#FFBF00 105.93%)
  ) padding-box;

  /* pleasant depth */
  box-shadow:
    0 16px 30px 4px rgba(255,191,0,.20),
    0 0 30px 2px rgba(245,143,0,.20),
    0 0 30px 2px rgba(255,178,84,.50),
    0 0 30px 5px rgba(255,255,255,.50) inset;
}

/* Orange :hover — reduce spread/blur by ~50% */
.button-main:hover,
.button-main_icon:hover{
  box-shadow:
    0 22px 22px 0 rgba(255,191,0,.30),
    0 0 0 4px rgba(245,143,0,.20),
    0 0 0 1px rgba(255,178,84,.64),
    0 0 13px 6px rgba(255,255,255,.64) inset;
}

/* Orange :active — keep click feedback */
.button-main:active,
.button-main_icon:active{
  box-shadow:
    0 16px 30px 4px rgba(255,191,0,.30),
    0 0 0 2px rgba(255,178,84,.64);
  transform: translateY(1px);
}

/* Orange :disabled */
.button-main:disabled,
.button-main_icon:disabled,
.button-main[aria-disabled="true"],
.button-main_icon[aria-disabled="true"],
.button-main.is-disabled,
.button-main_icon.is-disabled{
  box-shadow:
    0 16px 30px 4px rgba(255,191,0,.20),
    0 0 0 2px rgba(245,143,0,.20),
    0 0 0 2px rgba(255,178,84,.64),
    0 0 10px 5px rgba(255,255,255,.64) inset;
}

/* =======================
   PURPLE VARIANTS
   ======================= */

.button-main.w-variant-6d27d3e8-e42b-7dd3-3c1b-cf572786e3c3,
.button-main.w-variant-adaa93cf-2e08-f772-ed00-77164bdef290,
.button-main.w-variant-a82004ba-62eb-d2d7-a192-1394a805133f,
.button-main_icon.w-variant-8bf7ad4e-8f54-f079-36d6-6f8603182287{
  border: 1px solid transparent;
  background:
    linear-gradient(0deg, #D0B4FF 0%, rgba(167,123,242,0) 100%) border-box,
    linear-gradient(90deg, rgba(255,255,255,.0) 0%,
                           rgba(255,255,255,.0) 50%,
                           rgba(255,255,255,.0) 100%) border-box,
    var(--test_test_fill_p,
      linear-gradient(274deg,#A57BF1 2.37%,#8553E4 57.12%,#A57BF1 105.93%)
    ) padding-box;

  box-shadow:
    0 16px 30px 4px rgba(152, 107, 236, 0.30),
    0 0 0 2px rgba(255, 255, 255, 0.20),
    0 0 0 2px rgba(202, 171, 255, 0.64),
    0 0 10px 5px rgba(255, 255, 255, 0.64) inset;
}

/* Purple :hover */
.button-main.w-variant-6d27d3e8-e42b-7dd3-3c1b-cf572786e3c3:hover,
.button-main.w-variant-adaa93cf-2e08-f772-ed00-77164bdef290:hover,
.button-main.w-variant-a82004ba-62eb-d2d7-a192-1394a805133f:hover,
.button-main_icon.w-variant-8bf7ad4e-8f54-f079-36d6-6f8603182287:hover{
  box-shadow:
    0 16px 30px 4px rgba(152, 107, 236, 0.30),
    0 0 0 6px rgba(255, 255, 255, 0.20),
    0 0 0 2px rgba(202, 171, 255, 0.64),
    0 0 20px 8px rgba(255, 255, 255, 0.64) inset;
}

/* Purple :active */
.button-main.w-variant-6d27d3e8-e42b-7dd3-3c1b-cf572786e3c3:active,
.button-main.w-variant-adaa93cf-2e08-f772-ed00-77164bdef290:active,
.button-main.w-variant-a82004ba-62eb-d2d7-a192-1394a805133f:active,
.button-main_icon.w-variant-8bf7ad4e-8f54-f079-36d6-6f8603182287:active{
  box-shadow:
    0 16px 22px 0 rgba(152,107,236,.26),
    0 0 0 2px rgba(202,171,255,.64);
  transform: translateY(1px);
}

/* Purple :disabled */
.button-main.w-variant-6d27d3e8-e42b-7dd3-3c1b-cf572786e3c3:disabled,
.button-main.w-variant-adaa93cf-2e08-f772-ed00-77164bdef290:disabled,
.button-main.w-variant-a82004ba-62eb-d2d7-a192-1394a805133f:disabled,
.button-main_icon.w-variant-8bf7ad4e-8f54-f079-36d6-6f8603182287:disabled,
.button-main.w-variant-6d27d3e8-e42b-7dd3-3c1b-cf572786e3c3[aria-disabled="true"],
.button-main.w-variant-adaa93cf-2e08-f772-ed00-77164bdef290[aria-disabled="true"],
.button-main.w-variant-a82004ba-62eb-d2d7-a192-1394a805133f[aria-disabled="true"],
.button-main_icon.w-variant-8bf7ad4e-8f54-f079-36d6-6f8603182287[aria-disabled="true"]{
  opacity:.4;
  box-shadow:
    0 16px 24px 0 rgba(152,107,236,.20),
    0 0 0 2px rgba(255,255,255,.16),
    0 0 0 2px rgba(202,171,255,.50);
}
</style>