:root {
    --color-white: #ffffff;
    --color-bg: #f8fafc;
    --color-grey: #1b1b1b20;
    --color-liteGrey: #f8f8f8;
    --color-darkGrey: #f2f2f2;
    --color-black: #1b1b1b;
    --color-blackd: #000000;
    --color-purple: #7f00ff;
    --color-green: #16db65;
    --color-red: #E63946;
    --color-yellow: #FBE134;
    --font-primary: "Aspekta", sans-serif;
    --font-secondary: "Roboto", sans-serif;
    --font-tertiary: "Poppins", sans-serif;
    --font-other: "Work Sans", sans-serif;
    --shadow-shad: 0 0 20px #00000010;
    --shadow-hovershad: 0 0 50px #16db6550;
    --border-lit: 1px solid #00000020;
    --header-height: 80px;
}

* {
    box-sizing: border-box;
}

img {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-drag: none;
}

#bg-img-container {
    --s: 137px;
    /* control the size*/
    --c1: #4d0099;
    --c2: #8000ff;
    --c3: #6600cc;

    --_g: var(--c3) 0 120deg, #0000 0;
    background:
        conic-gradient(from -60deg at 50% calc(100%/3), var(--_g)),
        conic-gradient(from 120deg at 50% calc(200%/3), var(--_g)),
        conic-gradient(from 60deg at calc(200%/3), var(--c3) 60deg, var(--c2) 0 120deg, #0000 0),
        conic-gradient(from 180deg at calc(100%/3), var(--c1) 60deg, var(--_g)),
        linear-gradient(90deg, var(--c1) calc(100%/6), var(--c2) 0 50%,
            var(--c1) 0 calc(500%/6), var(--c2) 0);
    background-size: calc(1.732*var(--s)) var(--s);
}

#user-profile-form label:has(input[type="radio"]:checked) {
    background: var(--color-white) !important;
    border: 1px solid var(--color-grey);
}

#settings-container label .check {
    background: var(--color-white);
    width: 44px;
    height: 24px;
    border-radius: 100px;
    background: var(--color-black);
    position: relative;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

#settings-container label .check::after {
    content: '';
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-white);
    transition: all 0.2s ease-in-out;
}

#settings-container label:has(input[type="checkbox"]:checked) .check {
    background: var(--color-green);
}

#settings-container label:has(input[type="checkbox"]:checked) .check::after {
    left: 22px;
}

#address-form label input[type="radio"]:checked+span {
    background: var(--color-purple);
    color: white;
}

#address-form label input[type="radio"]:checked+span svg {
    fill: white;
}

label:has(+ input.req)::after,
label:has(+ select.req)::after {
    content: " *";
    color: var(--color-red);
    font-family: var(--font-tertiary);
    font-weight: 600;
    font-size: 18px;
}

label {
    transition: all 0.2s ease-in-out
}

.label-active {
    transform: translateY(0);
    top: -12px;
    left: 0;
    font-size: 16px;
    color: #1b1b1b80;
}