/**
 * Pretpot Simple Gradient Text Widget Styles
 * 
 * @package Pretpot_Elementor_Kit
 * @since 2.7.5
 */

.pretpot-gradient-text-wrapper {
    display: block;
    width: 100%;
}

.pretpot-gradient-text {
    display: inline-block;
    margin: 0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: transparent;
    
    /* CSS Variables with fallbacks */
    --color-1: #667eea;
    --color-2: #764ba2;
    --color-3: #f093fb;
    --color-4: #f5576c;
    --color-1-stop: 0%;
    --color-2-stop: 50%;
    --color-3-stop: 75%;
    --color-4-stop: 100%;
    --gradient-angle: 90deg;
}

/* 2 Colors Gradient */
.pretpot-gradient-text.gradient-type-linear.color-count-2 {
    background-image: linear-gradient(
        var(--gradient-angle),
        var(--color-1) var(--color-1-stop),
        var(--color-2) var(--color-2-stop)
    );
}

.pretpot-gradient-text.gradient-type-radial.color-count-2 {
    background-image: radial-gradient(
        circle at center,
        var(--color-1) var(--color-1-stop),
        var(--color-2) var(--color-2-stop)
    );
}

/* 3 Colors Gradient */
.pretpot-gradient-text.gradient-type-linear.color-count-3 {
    background-image: linear-gradient(
        var(--gradient-angle),
        var(--color-1) var(--color-1-stop),
        var(--color-2) var(--color-2-stop),
        var(--color-3) var(--color-3-stop)
    );
}

.pretpot-gradient-text.gradient-type-radial.color-count-3 {
    background-image: radial-gradient(
        circle at center,
        var(--color-1) var(--color-1-stop),
        var(--color-2) var(--color-2-stop),
        var(--color-3) var(--color-3-stop)
    );
}

/* 4 Colors Gradient */
.pretpot-gradient-text.gradient-type-linear.color-count-4 {
    background-image: linear-gradient(
        var(--gradient-angle),
        var(--color-1) var(--color-1-stop),
        var(--color-2) var(--color-2-stop),
        var(--color-3) var(--color-3-stop),
        var(--color-4) var(--color-4-stop)
    );
}

.pretpot-gradient-text.gradient-type-radial.color-count-4 {
    background-image: radial-gradient(
        circle at center,
        var(--color-1) var(--color-1-stop),
        var(--color-2) var(--color-2-stop),
        var(--color-3) var(--color-3-stop),
        var(--color-4) var(--color-4-stop)
    );
}

/* Ensure proper rendering in all browsers */
@supports not (-webkit-background-clip: text) {
    .pretpot-gradient-text {
        background-clip: text;
    }
}

/* Fix for Firefox and other browsers */
@-moz-document url-prefix() {
    .pretpot-gradient-text {
        background-clip: text;
    }
}