/* Alignment for flex layout (full width or default) */
.elementor-align-left .elementor-button-wrapper[style*="display:flex"] {
    justify-content: flex-start !important;
    text-align: unset !important;
}
.elementor-align-center .elementor-button-wrapper[style*="display:flex"] {
    justify-content: center !important;
    text-align: unset !important;
}
.elementor-align-right .elementor-button-wrapper[style*="display:flex"] {
    justify-content: flex-end !important;
    text-align: unset !important;
}
.elementor-align-justify .elementor-button-wrapper[style*="display:flex"] {
    justify-content: space-between !important;
    text-align: unset !important;
}
/* ========================================================================== 
   BUTTON CONTAINER
   ========================================================================== */

.elementor-button-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* default; overridden by alignment control */
    align-items: center;
    position: relative; /* required for badge absolute positioning */
    box-sizing: border-box;
}

/* ========================================================================== 
   BUTTON NORMAL
   ========================================================================== */

.elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    /* fallback default padding (original) but allow override via variable */
    padding: var(--btn-padding, 0 15px);
    margin: 0;
    text-align: center;
    /* fallback default radius (original) but allow override via variable */
    border-radius: var(--btn-radius, 0px);
    transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s linear, color .18s linear, box-shadow .18s linear;
    text-decoration: none;
    /* allow variables to control color/background but fall back to original 'inherit' behavior */
    color: var(--btn-color, inherit);
    background-color: var(--btn-bg, inherit);
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
}

/* Style presets (kept your defaults for backward compatibility, but prefer vars) */
.elementor-button.primary { 
    /* if variables are present they win; otherwise these explicit defaults apply */
    --btn-bg: var(--btn-bg, #007bff);
    --btn-color: var(--btn-color, #fff);
    /* Keep direct fallback for themes or front-end CSS that look for explicit classes */
    background-color: var(--btn-bg, #007bff); 
    color: var(--btn-color, #fff);
}
.elementor-button.secondary { 
    --btn-bg: var(--btn-bg, #6c757d);
    --btn-color: var(--btn-color, #fff);
    background-color: var(--btn-bg, #6c757d); 
    color: var(--btn-color, #fff);
}
.elementor-button.tertiary { 
    --btn-bg: var(--btn-bg, #28a745);
    --btn-color: var(--btn-color, #fff);
    background-color: var(--btn-bg, #28a745); 
    color: var(--btn-color, #fff);
}

/* Size classes (kept your naming and fallbacks) */
.elementor-button.xs { padding: var(--btn-padding-xs, 5px 10px); font-size: 0.8rem; }
.elementor-button.sm { padding: var(--btn-padding-sm, 8px 16px); font-size: 0.9rem; }
.elementor-button.md { padding: var(--btn-padding-md, 10px 20px); font-size: 1rem; }
.elementor-button.lg { padding: var(--btn-padding-lg, 12px 24px); font-size: 1.1rem; }
.elementor-button.xl { padding: var(--btn-padding-xl, 15px 30px); font-size: 1.2rem; }

/* Full width */
.elementor-button--full { width: 100%; display: inline-flex; justify-content: center; }

/* Full width for switcher */
.elementor-button-full-width {
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------------- */

/* Badge */
.elementor-button-badge { position: absolute; display: inline-block; font-size: 11px; padding: 2px 6px; border-radius: 999px; background: #ff3b30; color: #fff; pointer-events: none; transform: translate(0,0); white-space: nowrap; }
.elementor-button-badge.badge-top-right { top: -6px; right: -6px; }
.elementor-button-badge.badge-top-left { top: -6px; left: -6px; }
.elementor-button-badge.badge-bottom-right { bottom: -6px; right: -6px; }
.elementor-button-badge.badge-bottom-left { bottom: -6px; left: -6px; }

/* ------------------------------------------------------------------------- */

/* Disabled */
.elementor-button--disabled { opacity: 0.45; pointer-events: none; cursor: default; }

/* Hover
   - prefer explicit hover variables set by per-style controls, otherwise fall back to base values
   - keep original 'inherit' safe-fallback by using var(...) which ultimately falls back to base or inherited value
*/
.elementor-button:hover {
    background-color: var(--btn-bg-hover, var(--btn-bg, inherit));
    color: var(--btn-color-hover, var(--btn-color, inherit));
}

/* Keep old hover class-specific rules as no-op fallback (preserves previous logic) */
.elementor-button.primary:hover { background-color: var(--btn-bg-hover, var(--btn-bg, inherit)); color: var(--btn-color-hover, var(--btn-color, inherit)); }
.elementor-button.secondary:hover { background-color: var(--btn-bg-hover, var(--btn-bg, inherit)); color: var(--btn-color-hover, var(--btn-color, inherit)); }
.elementor-button.tertiary:hover { background-color: var(--btn-bg-hover, var(--btn-bg, inherit)); color: var(--btn-color-hover, var(--btn-color, inherit)); }

/* Focus ring fallback */
.elementor-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,95,204,0.18); }

/* Spinner (if you implement one) */
.elementor-button .elementor-button-spinner { display: inline-block; width: 1em; height: 1em; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); border-top-color: rgba(255,255,255,0.9); animation: spin 1s linear infinite; margin-left: 8px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 600px) {
    .elementor-button { white-space: nowrap; }
    .elementor-button.xl { font-size: 1.05rem; padding: 12px 22px; }
}
/* ========================================================================== 
   END OF FILE
   ========================================================================== */