.glow-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    width: fit-content;
}

.glow-button-wrapper a {
    text-decoration: none;
    /* Ensure link underline doesn't show */
}

/* Layer Dimensions - keeping flexible but with defaults */
.layer-white,
.layer-border,
.layer-darkBorderBg,
.layer-glow {
    max-height: 70px;
    /* Adjust to button height */
    max-width: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    z-index: 0;
    border-radius: 12px;
    filter: blur(3px);
    inset: 0;
}

/* Valid clickable area */
.button-content {
    background-color: #010201;
    /* Dark bg */
    border: none;
    min-width: 280px;
    /* Increased width for better visibility */
    height: 56px;
    border-radius: 10px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    /* Above the glow layers */
    transition: all 0.3s ease;
}

/* ---- Animation Layers ---- */

.layer-white {
    max-height: 63px;
    filter: blur(2px);
    z-index: 1;
    /* Just below content */
}

/* White Layer Gradient (Top Highlight) */
.layer-white::before {
    content: "";
    z-index: -2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(83deg);
    position: absolute;
    width: 600px;
    height: 600px;
    background-repeat: no-repeat;
    background-position: 0 0;
    filter: brightness(1.4);
    background-image: conic-gradient(rgba(0, 0, 0, 0) 0%,
            #a099d8,
            rgba(0, 0, 0, 0) 8%,
            rgba(0, 0, 0, 0) 50%,
            #dfa2da,
            rgba(0, 0, 0, 0) 58%);
    transition: all 2s;
}

.layer-border {
    max-height: 59px;
    filter: blur(0.5px);
    z-index: 0;
}

/* Border Gradient (Main Color Ring) */
.layer-border::before {
    content: "";
    z-index: -2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(70deg);
    position: absolute;
    width: 600px;
    height: 600px;
    filter: brightness(1.3);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(#1c191c,
            #402fb5 5%,
            #1c191c 14%,
            #1c191c 50%,
            #cf30aa 60%,
            #1c191c 64%);
    transition: all 2s;
}

.layer-darkBorderBg {
    max-height: 65px;
    z-index: -1;
}

/* Dark Ring */
.layer-darkBorderBg::before {
    content: "";
    z-index: -2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(82deg);
    position: absolute;
    width: 600px;
    height: 600px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(rgba(0, 0, 0, 0),
            #18116a,
            rgba(0, 0, 0, 0) 10%,
            rgba(0, 0, 0, 0) 50%,
            #6e1b60,
            rgba(0, 0, 0, 0) 60%);
    transition: all 2s;
}

.layer-glow {
    overflow: hidden;
    filter: blur(30px);
    opacity: 0.4;
    max-height: 130px;
    width: 120%;
    /* Extend wider for glow */
    z-index: -2;
}

/* Outer Glow */
.layer-glow:before {
    content: "";
    z-index: -2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(60deg);
    position: absolute;
    width: 999px;
    height: 999px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(#000,
            #402fb5 5%,
            #000 38%,
            #000 50%,
            #cf30aa 60%,
            #000 87%);
    transition: all 2s;
}

/* Hover Effects (Rotations) */
.glow-button-wrapper:hover .layer-darkBorderBg::before {
    transform: translate(-50%, -50%) rotate(262deg);
}

.glow-button-wrapper:hover .layer-glow::before {
    transform: translate(-50%, -50%) rotate(240deg);
}

.glow-button-wrapper:hover .layer-white::before {
    transform: translate(-50%, -50%) rotate(263deg);
}

.glow-button-wrapper:hover .layer-border::before {
    transform: translate(-50%, -50%) rotate(250deg);
}

/* Active/Focus Effects */
.glow-button-wrapper:active .layer-darkBorderBg::before {
    transform: translate(-50%, -50%) rotate(442deg);
    transition: all 0.5s;
}

.glow-button-wrapper:active .layer-glow::before {
    transform: translate(-50%, -50%) rotate(420deg);
    transition: all 0.5s;
}

.glow-button-wrapper:active .layer-white::before {
    transform: translate(-50%, -50%) rotate(443deg);
    transition: all 0.5s;
}

.glow-button-wrapper:active .layer-border::before {
    transform: translate(-50%, -50%) rotate(430deg);
    transition: all 0.5s;
}

/* Pink Mask (Flash) - Optional to keep */
.pink-mask {
    pointer-events: none;
    width: 30px;
    height: 20px;
    position: absolute;
    background: #cf30aa;
    top: 10px;
    left: 15px;
    filter: blur(20px);
    opacity: 0.8;
    transition: all 2s;
    z-index: 5;
}

.glow-button-wrapper:hover .pink-mask {
    opacity: 0;
}

/* ---- Light Mode Overrides ---- */
/* Remove black "dirty" shadows and use clean purple/white glows */

/* 1. Button Content: Keep dark for contrast or switch to white? 
   User asked for "visible", keeping it dark on white is high visibility. 
   But let's make the background compatible with the glow. */

[data-theme="light"] .button-content {
    background-color: #ffffff;
    /* Switch to white button */
    color: #1c191c;
    /* Dark text */
    border: 1px solid rgba(123, 63, 242, 0.2);
    /* Subtle border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* 2. Outer Glow - Remove black, use transparent purple */
[data-theme="light"] .layer-glow:before {
    background-image: conic-gradient(transparent,
            #402fb5 5%,
            transparent 38%,
            transparent 50%,
            #cf30aa 60%,
            transparent 87%);
    opacity: 0.6;
}

/* 3. Border Gradient - Remove black base */
[data-theme="light"] .layer-border::before {
    background-image: conic-gradient(transparent,
            #402fb5 5%,
            transparent 14%,
            transparent 50%,
            #cf30aa 60%,
            transparent 64%);
}

/* 4. Dark Ring - Adjust for light mode (make it a light ring) */
[data-theme="light"] .layer-darkBorderBg::before {
    background-image: conic-gradient(transparent,
            #6B21A8,
            transparent 10%,
            transparent 50%,
            #9333EA,
            transparent 60%);
}

/* 5. Pink flash visibility */
/* ---- Fixed Style Variants (Override Theme) ---- */

/* STYLE WHITE (Always White Content, Transparent Glow) */
/* Force White Body */
.glow-button-wrapper.style-white .button-content {
    background-color: #ffffff;
    color: #1c191c;
    border: 1px solid rgba(123, 63, 242, 0.2);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

/* Force Transparent/Clean Glows for White Button */
.glow-button-wrapper.style-white .layer-glow:before {
    background-image: conic-gradient(transparent,
            #402fb5 5%,
            transparent 38%,
            transparent 50%,
            #cf30aa 60%,
            transparent 87%);
    opacity: 0.6;
}

.glow-button-wrapper.style-white .layer-border::before {
    background-image: conic-gradient(transparent,
            #402fb5 5%,
            transparent 14%,
            transparent 50%,
            #cf30aa 60%,
            transparent 64%);
}

.glow-button-wrapper.style-white .layer-darkBorderBg::before {
    background-image: conic-gradient(transparent,
            #6B21A8,
            transparent 10%,
            transparent 50%,
            #9333EA,
            transparent 60%);
}

.glow-button-wrapper.style-white .pink-mask {
    background: #FF00FF;
    opacity: 0.4;
    filter: blur(25px);
}


/* STYLE BLACK (Always Black Content, Neon Glow) */
/* Force Black Body */
.glow-button-wrapper.style-black .button-content {
    background-color: #010201;
    color: white;
    border: none;
    box-shadow: none;
}

/* Use the original robust gradients for Black Button (best contrast on dark mode) */
/* We can leave the default CSS to handle the gradients, effectively resetting any Light Mode overrides if present.
   However, if we are in Light Mode, the [data-theme="light"] block above might interfere.
   So we must explicitely set them back to the "Dark/Neon" versions for .style-black even in Light Mode. */

.glow-button-wrapper.style-black .layer-glow:before {
    background-image: conic-gradient(#000,
            #402fb5 5%,
            #000 38%,
            #000 50%,
            #cf30aa 60%,
            #000 87%) !important;
    opacity: 0.4;
}

.glow-button-wrapper.style-black .layer-border::before {
    background-image: conic-gradient(#1c191c,
            #402fb5 5%,
            #1c191c 14%,
            #1c191c 50%,
            #cf30aa 60%,
            #1c191c 64%) !important;
}

.glow-button-wrapper.style-black .layer-darkBorderBg::before {
    background-image: conic-gradient(rgba(0, 0, 0, 0),
            #18116a,
            rgba(0, 0, 0, 0) 10%,
            rgba(0, 0, 0, 0) 50%,
            #6e1b60,
            rgba(0, 0, 0, 0) 60%) !important;
}

.glow-button-wrapper.style-black .pink-mask {
    background: #cf30aa;
    opacity: 0.8;
    filter: blur(20px);
}