/* Button Utilities - @property for smooth gradient transitions */
@property --btn-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #005DE8;
}

@property --btn-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #2A8BFF;
}

a.btn-gradient-blue,
.btn-gradient-blue {
    --btn-from: #005DE8;
    --btn-to: #2A8BFF;
    background: linear-gradient(90deg, var(--btn-from), var(--btn-to));
    color: white;
    transition: --btn-from 0.2s ease, --btn-to 0.2s ease, color 0.2s ease;
}

.btn-gradient-blue:hover {
    --btn-from: #E4E6FE;
    --btn-to: #D5C3FD;
    color: #080d15;
}

.btn-gradient-blue .arrow-new,
.btn-gradient-purple-rev .arrow-new {
    transition: border-color 0.2s ease;
}

.btn-outline-white {
    background: transparent;
    border: 2px solid white;
    color: white;
    transition: background 0.3s ease, color 0.3s ease;
}

.btn-outline-white:hover {
    background: white;
    color: #005de8;
}

@property --btn-pr-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #E4E6FE;
}

@property --btn-pr-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #D5C3FD;
}

a.btn-gradient-purple-rev,
.btn-gradient-purple-rev {
    --btn-pr-from: #E4E6FE;
    --btn-pr-to: #D5C3FD;
    background: linear-gradient(90deg, var(--btn-pr-from), var(--btn-pr-to));
    color: #080d15;
    transition: --btn-pr-from 0.2s ease, --btn-pr-to 0.2s ease, color 0.2s ease;
}

.btn-gradient-purple-rev:hover {
    --btn-pr-from: #005DE8;
        --btn-pr-to: #2A8BFF;
        color: white;
}