:root {
    --bs-primary: #6200ff;
    --bs-primary-dark: #1d192b;
    --bs-primary-extra-dark: #110c21;
    --bs-secondary: #03dac6;
    --bs-third: #ff0266;
    --bs-extra-dark: #111111;
    --bs-gradient-position: 90deg;
    --bs-gradient-primary: linear-gradient(var(--bs-gradient-position), var(--bs-primary) 0%, var(--bs-third) 100%);
    --btn-gradient: linear-gradient(var(--bs-gradient-position), var(--bs-primary) 0%, var(--bs-third) 100%);
    --bs-gradient-mix-colors: radial-gradient(circle at -10% -20%, var(--bs-third) 0%, transparent 30%),
        radial-gradient(circle at 10% 20%, var(--bs-secondary) 0%, transparent 30%), 
        radial-gradient(circle at 0% 80%, var(--bs-primary) 0%, transparent 70%), 
        radial-gradient(circle at 110% -20%, var(--bs-primary) 0%, transparent 30%), 
        radial-gradient(circle at 90% -20%, var(--bs-primary-dark) 0%, transparent 40%), 
        radial-gradient(circle at 120% 90%, var(--bs-third) 0%, transparent 50%),
        radial-gradient(circle at 70% 98%, var(--bs-primary) 0%, transparent 60%),
        var(--bs-primary-dark);
    
    /* ANIMATINONS SCROLL */
    --transform-on-scroll-hero: -200;
    --scroll-bottom: 100;
}

/* TEXTS */
.text-primary { color: var(--bs-primary) !important; }
.text-primary-light { color: var(--bs-primary-light) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-secondary-light { color: var(--bs-secondary-light) !important; }
.text-third { color: var(--bs-third) !important; }
.text-extra-dark { color: var(--bs-extra-dark) !important; }
.text-balance { text-wrap: balance; }
a { color: var(--bs-secondary); }
.text-outline-primary {
    -webkit-text-stroke: 2px var(--bs-primary);
    color: transparent;
}
.text-outline-secondary {
    -webkit-text-stroke: 2px var(--bs-secondary);
    color: transparent;
}
.text-outline-third {
    -webkit-text-stroke: 2px var(--bs-third);
    color: transparent;
}

/* BACKGROUNDS */
.bg-primary {
    background-color: var(--bs-primary) !important;
    color: white;
}
.bg-primary-dark {
    background-color: var(--bs-primary-dark) !important;
    color: white;
}
.bg-primary-extra-dark {
    background-color: var(--bs-primary-extra-dark) !important;
    color: white;
}
.bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: white;
}
.bg-third {
    background-color: var(--bs-third) !important;
    color: white;
}
.bg-extra-dark {
    background-color: var(--bs-extra-dark) !important;
    color: white;
}
.bg-gradient-primary {
    background: var(--bs-gradient-primary) !important;
    color: white;
}
.bg-gradient-primary.gradient-top-down {
    --bs-gradient-position: 180deg;
}
.bg-mix-colors {
    background: var(--bs-gradient-mix-colors) !important;
}

/* BORDERS */
.border-primary { border-color: var(--bs-primary) !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }
.border-third { border-color: var(--bs-third) !important; }

/* BUTTONS */
.btn.btn-primary {
    border: none;
    border-bottom: 1px solid white;
    background: transparent;
    color: white;
    position: relative;
    overflow: hidden;
    z-index: 1;
    &::after {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(150% + 2px);
        height: calc(100% + 2px);
        background: var(--btn-gradient);
        z-index: -1;
        transition: transform 0.7s ease;
        transform: translateX(0);
        transform-origin: left;
    }
    &:hover::after {
        transform: translateX(-25%);
    }
    svg, img {
        filter: invert(1);
    }
}
.btn.btn-dark {
    background: var(--bs-primary-dark);
    border: none;
    color: white;
}
.btn.btn-outline-primary {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    &:hover {
        background: var(--bs-primary);
        color: white;
    }
}
.btn.btn-outline-secondary {
    border-color: var(--bs-secondary);
    color: var(--bs-secondary);
    &:hover {
        background: var(--bs-secondary);
        color: white;
    }
}
.btn.btn-outline-third {
    border-color: var(--bs-third);
    color: var(--bs-third);
    &:hover {
        background: var(--bs-third);
        color: white;
    }
}

/* HEADER */
.header .custom-logo-link {
    width: 270px;
}
.search-box .awesomplete .form-control {
    background: transparent;
    border-top-left-radius: 10rem;
    border-bottom-left-radius: 10rem;
    &::placeholder {
        color: white;
    }
    &:focus::placeholder {
        color: #b8b8b8;
    }
}
.search-box .btn {
    background: white;
    border-top-right-radius: 10rem;
    border-bottom-right-radius: 10rem;
    svg {
        filter: invert(0);
    }
    &::after {
        display: none;
    }
}
.mobile-menu__header {
    background-image: unset;
    background-color: var(--bs-dark);
}
.mobile-menu,
.mobile-menu__content .sub-menu {
    background-color: var(--bs-primary-dark);
}
.mobile-menu__footer__actions .btn-link {
    color: white !important;
}
.mobile-menu__content .sub-menu__header__follow {
    color: var(--bs-secondary);
}

@media (width < 1460px) {
    .header .custom-logo-link {
        width: 230px;
    }
}
@media (width < 992px) {
    .header .custom-logo-link {
        width: 200px;
    }
}
@media (width < 390px) {
    .header .custom-logo-link {
        width: 130px;
    }
}

/* FOOTER */
.site-footer {
    background-color: var(--bs-primary-extra-dark);
}
.footer__links-container > div[class^="col"] > div:first-child,
.footer__contact > div:first-child {
    color: var(--bs-third);
}
@media (width >= 1200px) {
    .footer__links-container {
        flex-wrap: nowrap;
    }
}

/* CART */
.mini-cart {
    background-color: var(--bs-primary-dark);
}
.cart-item-thumbnail {
    background-color: white;
    overflow: hidden;
    border-radius: .4rem;
}

/* OTHER PAGES */
body {
    background-color: var(--bs-primary-dark);
    color: white;
}
.card-coin,
.bg-light,
.widget-filter .accordeon-item-heading,
.widget-filter-list-item,
.my-account {
    color: var(--bs-dark);
}
.content .article.more-less::after {
    background-image: linear-gradient(180deg, transparent, var(--bs-primary-dark));
}
.content .more-less-end .btn {
    border-color: white !important;
    color: white !important;
    margin-bottom: 3rem;

    &:hover {
        background-color: var(--bs-primary-extra-dark);
    }
}
*:has( .bg-light) .content .more-less-end .btn {
    background-color: var(--bs-primary);
}
h1.text-dark,
.h1.text-dark {
    color: var(--bs-third) !important;
}
.login-footer {
    margin-bottom: 3rem;

    .btn.btn-primary {
        background-color: var(--bs-primary);
    }
}