body.optimize-mode * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.optimize-mode .backdrop-blur-sm,
body.optimize-mode .backdrop-blur-md {
    background-color: #14151a !important;
}
[x-cloak] {
    display: none !important;
}

:root,
.theme-default {
    --color-primary: #ffd875;
}

.theme-water {
    --color-primary: #00b4d8;
}

.theme-purple {
    --color-primary: #b57edc;
}

.theme-pink {
    --color-primary: #ff4d6d;
}

.theme-emerald {
    --color-primary: #2dd4bf;
}

.theme-blue {
    --color-primary: #3b82f6;
}

.text-primary {
    color: var(--color-primary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.ring-primary {
    --tw-ring-color: var(--color-primary) !important;
}

.shadow-primary {
    --tw-shadow-color: var(--color-primary) !important;
}

.hover\:text-primary:hover {
    color: var(--color-primary) !important;
}

.text-gradient-primary {
    background: linear-gradient(
        to right,
        var(--color-primary),
        #fff
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.bg-primary.linear-gradient {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        color-mix(in srgb, var(--color-primary) 65%, white) 50%,
        color-mix(in srgb, var(--color-primary) 35%, white) 100%
    ) !important;
}

.bg-primary.linear-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.2) 40%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0.2) 60%,
        transparent 100%
    );

    transform: skewX(-20deg);
    pointer-events: none;
}


.bg-primary.linear-gradient:hover::before {
    animation: shineMove 1.2s ease forwards;
}

@keyframes shineMove {
    0% {
        left: -120%;
    }
    100% {
        left: 120%;
    }
}