/* Styles for the "Get the Plans" button - Dark Green Default, Glow on Hover */
.plans-button {
    position: relative; /* Needed for absolute positioning of pseudo-elements */
    display: inline-flex; align-items: center; justify-content: center;
    /* Adjusted padding for consistency */
    padding-top: 0.75rem; /* py-3 equivalent */
    padding-bottom: 0.75rem; /* py-3 equivalent */
    padding-right: 1.5rem; /* px-6 equivalent for right side */
    padding-left: 3.5rem; /* Keep extra left padding for cogs */
    font-weight: bold; color: #FFFFFF; /* White text */
    border-radius: 0.5rem; background-color: #008F1D; /* Use the requested green for default background */
    border: 1px solid #007a18; /* Slightly darker green border */
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden; /* Hide overflowing parts of cogs and sparkle */
    text-decoration: none; /* Ensure no underline */
    -webkit-user-select: none; /* Prevent text selection */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Ensure consistent height by default line-height */
    line-height: 1.5; /* Tailwind's default leading-normal */
}
.plans-button:hover {
    transform: scale(1.05);
    /* Glowing green shadow */
    box-shadow: 0 10px 15px -3px rgba(0, 143, 29, 0.4), 0 4px 6px -2px rgba(0, 143, 29, 0.2);
    background-color: #00a823; /* Slightly brighter green on hover */
    border-color: #008F1D;
    color: #FFFFFF;
}

/* Sparkle effect on hover for Plans button */
.plans-button::before { /* Re-purposed ::before for sparkle */
     content: ''; position: absolute; top: 0; left: -100%; width: 30px; height: 100%;
     background: rgba(255, 255, 255, 0.3); /* Slightly less intense shine */
     transform: skewX(-20deg);
     /* Apply animation only on hover */
     transition: left 0s ease; /* Prevent transition when not hovering */
     z-index: 1; /* Make sure sparkle is above cogs if needed */
}
 .plans-button:hover::before {
     animation: sparkle 1.5s infinite linear; /* Faster sparkle */
     transition: none; /* Disable transition during animation */
 }

/* Cog Styles - Using spans, Offset Positioning */
.plans-button .cog-1,
.plans-button .cog-2 {
    position: absolute;
    /* Use content property to display the cog character */
    /* content: "\2699"; */ /* Unicode for Gear symbol ⚙ - REMOVED */
    font-size: 1.4rem; /* Slightly bulkier */
    line-height: 1;
    color: #FFFFFF; /* White cogs */
    opacity: 0.7; /* Slightly less opaque */
    transition: transform 0.3s ease; /* Smooth transition for non-hover state */
    top: 50%;
    /* Ensure the span itself doesn't block clicks */
    pointer-events: none;
}
/* Position Cog 1 */
.plans-button .cog-1 {
    left: 0.5rem;
    transform: translateY(-60%); /* Offset slightly up */
}
/* Position Cog 2 */
.plans-button .cog-2 {
    left: 1.1rem; /* Offset slightly right */
    transform: translateY(-40%); /* Offset slightly down */
    font-size: 1.1rem; /* Make second cog slightly smaller */
    opacity: 0.6;
}

/* Cog Rotation Animation on Hover */
@keyframes rotate-cog-1 {
    from { transform: translateY(-60%) rotate(0deg); }
    to { transform: translateY(-60%) rotate(360deg); }
}
@keyframes rotate-cog-2 {
     from { transform: translateY(-40%) rotate(0deg); }
     to { transform: translateY(-40%) rotate(-360deg); } /* Reverse direction */
}

.plans-button:hover .cog-1 {
    animation: rotate-cog-1 1.8s linear infinite; /* Slightly different speeds */
}
.plans-button:hover .cog-2 {
    animation: rotate-cog-2 1.8s linear infinite ; /* Reverse handled in keyframe */
}

/* Sparkle animation keyframes (shared with sparkle-button and plans-button) */
@keyframes sparkle {
    0% { left: -100%; }
    50% { left: 120%; } /* Ensure it goes fully across */
    100% { left: 120%; }
}

/* Original Sparkle button styles */
.sparkle-button {
    /* Adjusted padding for consistency */
    display: inline-block;
    padding-top: 0.75rem; /* py-3 equivalent */
    padding-bottom: 0.75rem; /* py-3 equivalent */
    padding-left: 2rem; /* px-8 equivalent */
    padding-right: 2rem; /* px-8 equivalent */
    font-weight: bold; color: white;
    border-radius: 0.5rem; background: linear-gradient(45deg, #fbbd23, #f59e0b, #d97706);
    position: relative; overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 15px rgba(251, 189, 35, 0.4); text-decoration: none;
     /* Ensure consistent height */
    line-height: 1.5;
}
.sparkle-button:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(251, 189, 35, 0.6); }
.sparkle-button::before { /* Sparkle for the orange button */
    content: ''; position: absolute; top: 0; left: -100%; width: 30px; height: 100%;
    background: rgba(255, 255, 255, 0.4); transform: skewX(-20deg);
     /* Apply animation only on hover */
     transition: left 0s ease; /* Prevent transition when not hovering */
}
 .sparkle-button:hover::before {
     animation: sparkle 1.5s infinite linear; /* Faster sparkle */
     transition: none; /* Disable transition during animation */
 }