﻿:root {
    --font-inter-tight: "Manrope";
    --color-primary-600: #FF0066;
    --color-white: #F7F7F7;
    /*--color-text-primary:*/
    --color-ns-blue: #0000FF;
    --color-ns-blue-dark: #111827;
    --color-ns-blue-light: #5C64FF;
    --color-ns-secondary: #D5D5D5;
    --drop-shadow-2xl: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/*Buton Primary*/
.btn-primary {
    border-color: transparent;
    background-color: var(--color-primary-600);
    color: var(--color-white);
    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, #1018280d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

    .btn-primary:where(.dark, .dark *) {
        border-color: transparent;
    }

    .btn-primary:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
    }

.btn-primary-v2 {
    background-color: var(--color-primary-600);
    color: var(--color-white);
}

    .btn-primary-v2 .btn-v2-icon {
        fill: var(--color-white);
    }

.group-hover\/btn-v2\:\!btn-primary-v2:is(:where(.group\/btn-v2):hover *) {
    background-color: var(--color-primary-600) !important;
    color: var(--color-white) !important;
}

    .group-hover\/btn-v2\:\!btn-primary-v2:is(:where(.group\/btn-v2):hover *) .btn-v2-icon {
        fill: var(--color-white) !important;
    }

.group-hover\/btn-v2\:btn-primary-v2:is(:where(.group\/btn-v2):hover *) {
    background-color: var(--color-primary-600);
    color: var(--color-white);
}

    .group-hover\/btn-v2\:btn-primary-v2:is(:where(.group\/btn-v2):hover *) .btn-v2-icon {
        fill: var(--color-white);
    }

.hover\:\!btn-primary:hover {
    border-color: transparent;
    background-color: var(--color-primary-600) !important;
    color: var(--color-white) !important;
    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, #1018280d) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}

    .hover\:\!btn-primary:hover:where(.dark, .dark *) {
        border-color: transparent;
    }

    .hover\:\!btn-primary:hover:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E") !important;
    }

.hover\:btn-primary:hover {
    border-color: transparent;
    background-color: var(--color-primary-600);
    color: var(--color-white);
    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, #1018280d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

    .hover\:btn-primary:hover:where(.dark, .dark *) {
        border-color: transparent;
    }

    .hover\:btn-primary:hover:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
    }

.dark\:btn-primary:where(.dark, .dark *) {
    border-color: transparent;
    background-color: var(--color-primary-600);
    color: var(--color-white);
    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, #1018280d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

    .dark\:btn-primary:where(.dark, .dark *):where(.dark, .dark *) {
        border-color: transparent;
    }

    .dark\:btn-primary:where(.dark, .dark *):before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
    }


@media (hover: hover) {
    .dark\:hover\:btn-primary:where(.dark, .dark *):hover {
        border-color: transparent;
        background-color: var(--color-primary-600);
        color: var(--color-white);
        --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, #1018280d);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

        .dark\:hover\:btn-primary:where(.dark, .dark *):hover:where(.dark, .dark *) {
            border-color: transparent;
        }

        .dark\:hover\:btn-primary:where(.dark, .dark *):hover:before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
        }
}

/*Buton Outline*/
.btn-primary-outline {
    border-color: var(--color-primary-600);
    color: var(--color-primary-600);
    background-color: transparent;
}

    .btn-primary-outline:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23FF0066' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
    }

    .btn-primary-outline:where(.dark, .dark *) {
        border-color: var(--color-white);
        color: var(--color-white);
    }

        .btn-primary-outline:where(.dark, .dark *):hover:before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
        }
/*Badges*/
.badge-white {
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-white);
    border-color: var(--color-ns-secondary);
    color: #1a1a1c99;
}

@supports (color: color-mix(in lab, red, red)) {
    .badge-white {
        color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
    }
}

.badge-white:where(.dark, .dark *) {
    border-color: transparent;
    background-color: #fcfcfc1a;
}

@supports (color: color-mix(in lab, red, red)) {
    .badge-white:where(.dark, .dark *) {
        background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
    }
}

.badge-white:where(.dark, .dark *) {
    color: #fcfcfc99;
}

@supports (color: color-mix(in lab, red, red)) {
    .badge-white:where(.dark, .dark *) {
        color: color-mix(in oklab, var(--color-accent) 60%, transparent);
    }
}

/*New Badges*/
.badge-dark-blue {
    background-color: var(--color-background-4);
    color: var(--color-ns-blue);
    border-radius: 10px;
}

    .badge-dark-blue:where(.dark, .dark *) {
        background-color: var(--color-ns-blue-dark);
        color: var(--color-ns-blue-light);
        border-radius: 10px;
    }

.badge-dark-blue-dark {
    background-color: var(--color-ns-blue-dark);
    color: var(--color-ns-blue-light);
    border-radius: 10px;
}

[data-mobile-active="true"].border-stroke-primary-600 {
    border-color: var(--color-primary-600);
}

.bd-primary-600 {
    background-color: var(--color-primary-600);
}

.text-color-secondary {
    color: var(--color-ns-secondary);
}
