/* ── BRD Gradient Tokens ─────────────────────────────── */
:root {
    --brd-gradient: linear-gradient(
        97deg,
        #00C1CB  0%,
        #33338E  25%,
        #E61385  65%,
        #E82D2E  100%
    );
    --brd-gradient-2: linear-gradient(
        86deg,
        #00A5DB  -11%,
        #33338E  52%,
        #E61385  101%
    );
}

/* ── Containers & Sections ───────────────────────────── */
.elementor-element.brd-gradient-bg:not(.elementor-widget-button) {
    background-image: var(--brd-gradient) !important;
    background-color: transparent !important;
}
.elementor-element.brd-gradient-bg:not(.elementor-widget-button) > .e-con-inner {
    background: transparent !important;
}

.elementor-element.brd-gradient-2-bg:not(.elementor-widget-button) {
    background-image: var(--brd-gradient-2) !important;
    background-color: transparent !important;
}
.elementor-element.brd-gradient-2-bg:not(.elementor-widget-button) > .e-con-inner {
    background: transparent !important;
}

/* ── Buttons ─────────────────────────────────────────── */
.elementor-widget-button.brd-gradient-bg,
.elementor-widget-button.brd-gradient-2-bg {
    background: transparent !important;
}
.elementor-widget-button.brd-gradient-bg .elementor-button {
    background-image: linear-gradient(
        97deg,
        #00C1CB -59.97%,
        #33338E  -1.27%,
        #E61385  51.24%,
        #E82D2E  94.49%,
        #33338E  140%,
        #00C1CB  180%
    ) !important;
    background-size: 200% 100% !important;
    background-position: left center !important;
    background-color: transparent !important;
    border-color: transparent !important;
    transition: background-position 0.5s ease !important;
}
.elementor-widget-button.brd-gradient-bg .elementor-button:hover {
    background-position: right center !important;
}
.elementor-widget-button.brd-gradient-2-bg .elementor-button {
    background-image: linear-gradient(
        86deg,
        #00A5DB  0%,
        #33338E  40%,
        #E61385  75%,
        #E82D2E  100%,
        #33338E  140%,
        #00A5DB  180%
    ) !important;
    background-size: 200% 100% !important;
    background-position: left center !important;
    background-color: transparent !important;
    border-color: transparent !important;
    transition: background-position 0.5s ease !important;
}
.elementor-widget-button.brd-gradient-2-bg .elementor-button:hover {
    background-position: right center !important;
}

/* ── Text ────────────────────────────────────────────── */
.elementor-element.brd-gradient-text .elementor-heading-title,
.elementor-element.brd-gradient-text .elementor-widget-container p,
.elementor-element.brd-gradient-text .elementor-widget-container h1,
.elementor-element.brd-gradient-text .elementor-widget-container h2,
.elementor-element.brd-gradient-text .elementor-widget-container h3,
.elementor-element.brd-gradient-text .elementor-widget-container h4,
.elementor-element.brd-gradient-text .elementor-widget-container h5,
.elementor-element.brd-gradient-text .elementor-widget-container h6,
.elementor-element.brd-gradient-text .elementor-button-text {
    background:              var(--brd-gradient);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    display:                 inline-block;
}
.elementor-element.brd-gradient-2-text .elementor-heading-title,
.elementor-element.brd-gradient-2-text .elementor-widget-container p,
.elementor-element.brd-gradient-2-text .elementor-widget-container h1,
.elementor-element.brd-gradient-2-text .elementor-widget-container h2,
.elementor-element.brd-gradient-2-text .elementor-widget-container h3,
.elementor-element.brd-gradient-2-text .elementor-widget-container h4,
.elementor-element.brd-gradient-2-text .elementor-widget-container h5,
.elementor-element.brd-gradient-2-text .elementor-widget-container h6,
.elementor-element.brd-gradient-2-text .elementor-button-text {
    background:              var(--brd-gradient-2);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    display:                 inline-block;
}

/* ── Border ──────────────────────────────────────────── */
.elementor-element.brd-gradient-border,
.elementor-element.brd-gradient-2-border {
    --border-width: 2px;
    position: relative !important;
}
.elementor-element.brd-gradient-border::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    padding:       var(--border-width);
    background:    var(--brd-gradient);
    -webkit-mask:  linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask:          linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite:         exclude;
    pointer-events: none;
    z-index: 1;
}
.elementor-element.brd-gradient-2-border::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    padding:       var(--border-width);
    background:    var(--brd-gradient-2);
    -webkit-mask:  linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask:          linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite:         exclude;
    pointer-events: none;
    z-index: 1;
}
/* ── Inline span gradient text ───────────────────────── */
.elementor-heading-title span.brd-gradient-text,
.elementor-widget-container p span.brd-gradient-text {
    background:              var(--brd-gradient);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    display:                 inline;
}

.elementor-heading-title span.brd-gradient-2-text,
.elementor-widget-container p span.brd-gradient-2-text {
    background:              var(--brd-gradient-2);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    display:                 inline;
}