/**
 * Button Element Styles
 * 
 * WICHTIG: Nutzt globale CSS-Variablen (--mm-*)
 * 
 * @package Belle_Maison
 * @subpackage VC_Elements
 */

/* ==========================================================================
   Button Base Styles
   ========================================================================== */

.belle-maison-button-wrapper {
    display: inline-block;
    position: relative;
}

.belle-maison-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--mm-spacing-sm) var(--mm-spacing-lg); /* 12px 24px */
    background: rgba(var(--mm-color-gray-lighter), 0.5); /* 50% transparent */
    color: rgba(var(--mm-color-gray), 1);
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: visible;
}

.belle-maison-button__text {
    position: relative;
    z-index: 2;
}

/* SVG Border Container (Rough.js) */
.belle-maison-button__border-svg {
    position: absolute;
    top: -5px; /* Extra space for rough lines */
    left: -5px;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

/* ==========================================================================
   Button Sizes
   ========================================================================== */

/* Small */
.belle-maison-button--small {
    padding: var(--mm-spacing-xs) var(--mm-spacing-md); /* 8px 16px */
    font-size: var(--mm-font-size-sm); /* 14px */
}

/* Medium (default) */
.belle-maison-button--medium {
    padding: var(--mm-spacing-sm) var(--mm-spacing-lg); /* 12px 24px */
    font-size: var(--mm-font-size-base); /* 16px */
}

/* Large */
.belle-maison-button--large {
    padding: var(--mm-spacing-md) var(--mm-spacing-xl); /* 16px 32px */
    font-size: var(--mm-font-size-md); /* 18px */
}

/* ==========================================================================
   Button Variants
   ========================================================================== */

/* Full Width */
.belle-maison-button--full-width {
    width: 100%;
    display: flex;
}

/* ==========================================================================
   Hover State
   ========================================================================== */

.belle-maison-button:hover {
    background: rgba(var(--mm-color-gray-light), 1) !important; /* Full opacity on hover */
    color: rgba(var(--mm-color-white), 1) !important; /* White text on hover */
}

.belle-maison-button:focus-visible {
    outline: 2px solid rgba(var(--mm-color-primary), 1);
    outline-offset: 4px;
}

.belle-maison-button:active {
    transform: translateY(0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Mobile (<= 570px) */
@media (max-width: 570px) {
    .belle-maison-button {
        font-size: var(--mm-font-size-sm); /* 14px */
        padding: var(--mm-spacing-xs) var(--mm-spacing-md);
    }
    
    .belle-maison-button--large {
        font-size: var(--mm-font-size-base); /* 16px */
        padding: var(--mm-spacing-sm) var(--mm-spacing-lg);
    }
}