/* Elementor Responsive Full Width: Frontend Only */
/* Full Width Button: one class, responsive for all breakpoints */
.elementor-button-full-width,
.elementor-button-wrapper .elementor-button-full-width,
.elementor-widget-advanced-button .elementor-button-full-width {
    width: 100%;
    display: block;
    text-align: center;
    box-sizing: border-box;
    justify-content: center;
}
/* Advanced Button Widget: Sizes */
.elementor-button.xs {
    font-size: 12px;
    padding: 6px 12px;
    width: 100%;
    display: flex;
    justify-content: center;
.elementor-button.md {
    font-size: 16px;
    padding: 10px 20px;
}
.elementor-button.lg {
    font-size: 18px;
    padding: 12px 24px;
}
.elementor-button.xl {
    font-size: 20px;
    padding: 14px 28px;
}

/* Full Width Button */


/* Robust full width for button and wrapper */
.elementor-button-full-width,
.elementor-button-wrapper .elementor-button-full-width,
.elementor-widget-advanced-button .elementor-button-full-width {
    width: 100%;
    display: block;
    text-align: center;
    box-sizing: border-box;
    justify-content: center;
}
.elementor-button-wrapper {
    width: 100%;
    display: block;
}

/* Responsive Full Width (if needed) */

@media (max-width: 1024px) {
    .elementor-button-full-width-tablet {
        width: 100%;
        display: block;
        text-align: center;
        box-sizing: border-box;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .elementor-button-full-width-mobile {
        width: 100%;
        display: block;
        text-align: center;
        box-sizing: border-box;
        justify-content: center;
    }
}


/* Alignment Classes */
/* Alignment for block layout */
.elementor-align-left .elementor-button-wrapper {
    text-align: left;
}
.elementor-align-center .elementor-button-wrapper {
    text-align: center;
}
.elementor-align-right .elementor-button-wrapper {
    text-align: right;
}
.elementor-align-justify .elementor-button-wrapper {
    text-align: justify;
}

/* Alignment for flex layout (full width) */
.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;
}

/* Advanced Button enhanced styles using design tokens (variables).
   These rules are intentionally minimal and fallback-friendly to avoid breaking existing sites.
*/

.elementor-button.primary {
    background: var(--advbtn-primary, #0d6efd);
    color: var(--advbtn-text, #fff);
    border-radius: var(--advbtn-radius, 6px);
    padding: var(--advbtn-padding-y, .6rem) var(--advbtn-padding-x, 1.2rem);
    border: 1px solid transparent;
}

.elementor-button.secondary {
    background: var(--advbtn-secondary, transparent);
    color: var(--advbtn-primary, #0d6efd);
    border-radius: var(--advbtn-radius, 6px);
    padding: var(--advbtn-padding-y, .6rem) var(--advbtn-padding-x, 1.2rem);
    border: 1px solid var(--advbtn-primary, #0d6efd);
}

/* simple hover state using tokens */
.elementor-button.primary:hover { opacity: .93; transform: translateY(-1px); transition: transform .15s ease, opacity .15s ease; }
.elementor-button.secondary:hover { opacity: .9; transform: translateY(-1px); transition: transform .15s ease, opacity .15s ease; }

/* sizes (non-invasive) */
.elementor-button.sm { font-size: .85rem; padding: .4rem .8rem; }
.elementor-button.md { font-size: 1rem; padding: .6rem 1.2rem; }
.elementor-button.lg { font-size: 1.15rem; padding: .85rem 1.5rem; }


/* === Advanced Button compatibility & responsive helpers ===
   Add this to adv-button.css (or merge into your main stylesheet)
*/

/* Full-width responsive class that Elementor will add to the widget wrapper
   e.g. elementor-advanced-button--full-width-yes */
[class*="elementor-advanced-button--full-width-yes"] .elementor-button,
.elementor-widget-advanced-button .elementor-button--full,
.elementor-widget-advanced-button .elementor-button--full-width,
.elementor-button-wrapper.elementor-button-wrapper--full .elementor-button {
    display: block;
    width: 100%;
    justify-content: center; /* for inline-flex cases */
    text-align: center;
}

/* Alignment helpers — Elementors' prefix_class 'elementor-align-' adds classes on the widget
   so the wrapper should react to those alignment classes */
.elementor-align-left   .elementor-button-wrapper { justify-content: flex-start;  }
.elementor-align-center .elementor-button-wrapper { justify-content: center;      }
.elementor-align-right  .elementor-button-wrapper { justify-content: flex-end;    }
.elementor-align-justify .elementor-button-wrapper { justify-content: space-between; }

/* Size classname compatibility: support both ".sm" and ".sm" variants */
.elementor-button.sm, .elementor-button.sm  { /* existing rules should already cover padding/font */ }
.elementor-button.md, .elementor-button.md  { }
.elementor-button.lg, .elementor-button.lg  { }

/* Prevent text-wrapping issues when button is full width */
.elementor-widget-advanced-button .elementor-button .elementor-button-text {
    display: inline-block;
    white-space: nowrap;
}

/* Optional: ensure the wrapper doesn't collapse when button is full width */
.elementor-button-wrapper.elementor-button-wrapper--full {
    width: 100%;
}