/**
 * Creative Button Block Styles
 */

.creative-button-wrapper {
    display: block;
    width: 100%;
    margin-top: var(--mobile-margin-top, 0);
    margin-bottom: var(--mobile-margin-bottom, 0);
}

.creative-button-wrapper--left {
    text-align: left;
}

.creative-button-wrapper--center {
    text-align: center;
}

.creative-button-wrapper--right {
    text-align: right;
}

.creative-button-link {
    text-decoration: none;
    display: inline-block;
}

.creative-button {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.creative-button:focus {
    outline: none;
}

.creative-button span {
    position: relative;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* Desktop styles */
@media only screen and (min-width: 992px) {
    .creative-button {
        font-size: var(--font-size, 16px);
    }
    
    .creative-button-wrapper {
        margin-top: var(--margin-top, 0);
        margin-bottom: var(--margin-bottom, 0);
    }
}

/* Editor preview styles */
.creative-button--preview {
    pointer-events: none;
}

.creative-button--preview:hover {
    transform: none;
}

/* Accessibility */
.creative-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .creative-button,
    .creative-button span
    .creative-button__arrow {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .creative-button {
        border: 2px solid currentColor;
    }
}

/* Display Options - Hide on Mobile */
.creative-button--hide-mobile {
    display: none !important;
}

/* Display Options - Show on Desktop (992px+) */
@media only screen and (min-width: 992px) {
    .creative-button--hide-mobile {
        display: block !important;
    }
    
    .creative-button--hide-desktop {
        display: none !important;
    }
}