/* Base container */
.fly-buttons-container { 
    display: flex; 
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Base button style */
.fly-buttons-container .fly-button, 
.button-preview-item { 
    display: flex; /* Use flexbox for alignment */
    align-items: center;
    text-decoration: none; 
    font-weight: 600;
    cursor: pointer; 
    transition: all 0.2s ease-in-out; 
    box-sizing: border-box;
    line-height: 1.5;
    margin-left: auto;
    margin-right: auto;
    position: relative; /* Needed for absolute positioning of icon */
    padding-left: 5px; /* Base padding */
    padding-right: 5px; /* Base padding */
}

/* Spacing between buttons */
.fly-buttons-container .fly-button:not(:last-child),
.button-preview-item:not(:last-child) {
    margin-bottom: 15px;
}

/* Icon Styles */
.fly-button-icon {
    height: 1.2em; /* Relative to the font size */
    width: 1.2em;  /* Relative to the font size */
    object-fit: contain;
    flex-shrink: 0; /* Prevents the icon from shrinking */
    position: absolute; /* Position relative to the button */
    left: 15px; /* Distance from the left edge */
    top: 50%;
    transform: translateY(-50%);
}

.fly-button-text {
    flex-grow: 1;
    text-align: center;
}

/* --- Hover Effects --- */
.fly-button.hover-effect-scale:hover, 
.button-preview-item.hover-effect-scale:hover {
    transform: scale(1.05);
}

.fly-button.hover-effect-pop:hover, 
.button-preview-item.hover-effect-pop:hover {
    animation: fly-pop 0.3s ease-out;
}

.fly-button.hover-effect-jump:hover, 
.button-preview-item.hover-effect-jump:hover {
    animation: fly-jump 0.4s ease-out;
}

.fly-button.hover-effect-flip:hover, 
.button-preview-item.hover-effect-flip:hover {
    transform: perspective(1000px) rotateX(360deg);
}


/* Keyframes for animations */
@keyframes fly-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1.02); }
}

@keyframes fly-jump {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}