:root {
    --ui-color--white: 246 245 241;
    --ui-color--black: 35 33 34;
    --ui-color--transparent: transparent;
    --ui-color--background: 17 24 44;
    --ui-color--transparent-block: #1421463d;
    --ui-color--green: 43 179 140;
    --ui-color--green-dark: 26 73 75;
    --ui-color--cyan: 147 201 217;
    --ui-color--yellow: 242 145 0;
    --ui-color--red: 255 88 99;
    --ui-color--blue: 44 96 255;
    --ui-color--blue-light: 92 132 252;
    --ui-color--blue-dark: 24 41 94;
    --ui-color--blue-100: 36 76 198;
    --ui-color--blue-200: 189 203 244;
    --ui-color--blue-300: 16 29 68;
    --ui-color--gradient: radial-gradient(109.63% 170.57% at 50% -10.47%,#192c65 44.93%,#1d3376 60.81%,#3258cb 100%);
    --ui-color--gray: 53 72 91;
    --ui-color-yellow: 255 255 0;
    --ui-filter--white: brightness(0) saturate(100%) invert(100%) sepia(13%) saturate(7489%) hue-rotate(291deg) brightness(120%) contrast(111%);
    --ui-filter--blue: brightness(0) saturate(100%) invert(32%) sepia(64%) saturate(1597%) hue-rotate(183deg) brightness(101%) contrast(86%);
    --ui-filter--green: brightness(0) saturate(100%) invert(60%) sepia(69%) saturate(427%) hue-rotate(112deg) brightness(85%) contrast(88%);
    --ui-filter--blueLight: brightness(0) saturate(100%) invert(47%) sepia(71%) saturate(440%) hue-rotate(189deg) brightness(104%) contrast(96%);
    --ui-filter--cyan: brightness(0) saturate(100%) invert(98%) sepia(87%) saturate(6597%) hue-rotate(167deg) brightness(90%) contrast(87%);
    --ui-gradient-block: linear-gradient(167deg,rgba(50, 71, 135, 1) 0%, rgba(53, 73, 135, 1) 53%, rgba(112, 92, 33, 1) 100%);
}

/* PAGE STYLES */

* {
    border: none;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    padding: 0;
    transition-duration: .2s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    max-width: 100vw;
}

*::-webkit-scrollbar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 0;
    width: 0;
}

*::-webkit-scrollbar-button {
    display: block;
}

*::-webkit-scrollbar-thumb {
    border-radius: .375rem;
    background-color: rgb(var(--ui-color--blue-dark));
}

*::-webkit-scrollbar-track {
    background-color: rgb(var(--ui-color--blue-dark) / .35);
    border-radius: .375rem;
}

@font-face {
    font-family: Onest;
    src: url('./Onest-normal-300-cyrillic.DXI_y_WF.woff2');
}

body {
    overflow: auto;
    font-family: Onest, sans-serif;
    scrollbar-gutter: stable;
    text-rendering: optimizeSpeed;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100svh;
    width: 100%;
    background-color: rgb(var(--ui-color--background));
    color: rgb(var(--ui-color--white));
    line-height: 1.5;
    font-feature-settings: normal;
    font-variation-settings: normal;
    tab-size: 4;
    font-weight: 300
}

ol, ul {
    list-style: none;
}

a {
    cursor: pointer;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

input, textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button, .btn {
    background-color: rgb(var(--ui-color--blue));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    font-size: 16px;
    gap: .5rem;
    justify-content: center;
    padding: 1rem 2rem;
    color: rgb(var(--ui-color--white));
    cursor: pointer;

    &:hover {
        background-color: rgb(var(--ui-color--blue)/0.7);
    }
}

.text-bluelight {
    color: rgb(var(--ui-color--blue-light));
}

.text-blue200 {
    color: rgb(var(--ui-color--blue-200));
}

img {
    height: auto;
    max-width: 100%;
}

.tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;

    li {
        border-radius: 9999px;
        padding: .375rem 2rem;

        &:nth-child(3n+1) {
            background-color: rgb(var(--ui-color--blue-dark));
            color: rgb(var(--ui-color--blue-light));
        }

        &:nth-child(3n+2) {
            background-color: rgb(var(--ui-color--gray));
            color: rgb(var(--ui-color--cyan));
        }

        &:nth-child(3n+3) {
            background-color: rgb(var(--ui-color--green-dark));
            color: rgb(var(--ui-color--green));
        }
    }
}

.message {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    >div {
        border-radius: .75rem;
        border-bottom-left-radius: 0;
        font-size: .875rem;
        gap: .5rem;
        line-height: 1.25rem;
        max-width: 28rem;
        padding: .75rem 1rem;
        position: relative;
        z-index: 20;
        color: rgb(var(--ui-color--white));
        
        &::before {
            content: '';
            border-bottom-color: rgb(var(--ui-color--green-dark));
            position: absolute;
            bottom: 0;
            left: -.75rem;
            border-left: 12px solid var(--ui-color--transparent);
            border-right: 12px solid var(--ui-color--transparent);
            border-bottom: 12px solid rgb(var(--ui-color--green-dark));
        }

        .text {
            font-weight: 300;
        }

        .footer {
            display: flex;
            align-items: center;
            gap: .25rem;
            justify-content: flex-end;
            font-size: .75rem;
            line-height: 1rem;
            margin-top: .5rem;
            span {
                margin-top: .25rem;
            }

            .green {
                filter: var(--ui-filter--green);
                color: rgb(var(--ui-color--green));
            }

            .blueLight {
                filter: var(--ui-filter--blue-light);
                color: rgb(var(--ui-color--blue-light));
            }

            .cyan {
                filter: var(--ui-filter--cyan);
                color: rgb(var(--ui-color--cyan));
            }
        }
    }
}

.bg-greenDark {
    background-color: rgb(var(--ui-color--green-dark));

    &::before {
        border-bottom-color: rgb(var(--ui-color--green-dark));
        border-bottom: 12px solid rgb(var(--ui-color--green-dark));
    }

}

.bg-blueDark {
    background-color: rgb(var(--ui-color--blue-dark));

    &::before {
        border-bottom-color: rgb(var(--ui-color--blue-dark)) !important;
        border-bottom: 12px solid rgb(var(--ui-color--blue-dark)) !important;
    }
}

.bg-gray {
    background-color: rgb(var(--ui-color--gray));

    &::before {
        border-bottom-color: rgb(var(--ui-color--gray)) !important;
        border-bottom: 12px solid rgb(var(--ui-color--gray)) !important;
    }
}

/* PAGE */
#main {
    height: 100%;
    width: 100%;
    max-width: 1016px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 787px) and (max-width: 1280px) {
    #main {
        margin-left: 0;
        margin-right: 0;
        width: auto;
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
@media (max-width: 786px) {
    #main {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.logo {
    display: flex;
    flex-direction: row;
    font-family: "Advent Pro", sans-serif;
    font-weight: 900;
    
    .logo-1 {
        color: rgb(var(--ui-color-yellow));
    }
}

.input {
    position: relative;
    
    > label {
        position: relative;
        cursor: pointer;
        text-decoration: none;

        input {
            border-radius: .5rem;
            width: 100%;
            background-color: rgb(36 76 198); /* Fallback */
            background-color: rgb(var(--ui-color--blue-100));
            font-size: .875rem;
            font-weight: 300;
            line-height: 1.25rem;
            padding: .75rem 2.75rem;
            color: rgb(246 245 241) !important; /* Fallback */
            color: rgb(var(--ui-color--white)) !important;
            opacity: 1;
            outline: 2px solid transparent;
            outline-offset: 2px;
            border: 1px solid transparent; /* Добавить для четкости в Safari */
            
            /* Placeholder styles */
            &::placeholder {
                color: rgb(246 245 241) !important;
                color: rgb(var(--ui-color--white)) !important;
                opacity: 0.8;
            }
            
            &::-webkit-input-placeholder {
                color: rgb(246 245 241) !important;
                color: rgb(var(--ui-color--white)) !important;
                opacity: 0.8;
            }
        }
        
        /* Состояние фокуса для Safari */
        input:focus {
            border-color: rgb(var(--ui-color--blue-light));
            box-shadow: 0 0 0 2px rgb(var(--ui-color--blue-light) / 0.2);
        }
    }
    
    > img {
        width: 24px;
        height: 24px;
        position: absolute;
        left: .75rem;
        top: .625rem;
        z-index: 2; /* Убедиться, что иконка поверх input */
        pointer-events: none; /* Чтобы клики проходили через иконку к input */
    }
}



/* NAVIGATION */
header {
    align-items: center;
    background: var(--ui-color--transparent-block);
    border-radius: 1rem;
    display: flex;
    gap: 5rem;
    justify-content: space-between;
    margin-bottom: 4rem;
    margin-top: 2rem;
    padding: .75rem 1.5rem;
}

.logoblock {
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 1.25rem;
    gap: .75rem;
    line-height: 1.75rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.logoblock.big {
    font-size: 3rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    nav {
        display: none;
    }
}

nav ul {
    align-items: center;
    display: flex;
    font-size: .875rem;
    gap: 2.5rem;
    line-height: 1.25rem;

    li a {
        font-weight: 300;
        color: rgb(var(--ui-color--white))
    }
}

.menublock {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: flex-end;

    .menu {
        align-items: center;
        background: rgb(var(--ui-color--blue-dark));
        border-radius: 1rem;
        display: flex;
        gap: 1.5rem;
        transform: scale(1.5);
        margin-bottom: 1rem;
        margin-top: 1rem;
        padding: .75rem .75rem;

        .menuLink {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: .5rem .75rem;
            gap: .25rem;
            border-radius: 1rem;
            

            p, img {
                opacity: 80%;
                color: rgb(var(--ui-color--white));
                font-size: .75rem;
            }
        }

        .menuLink.active {
            background-color: rgb(var(--ui-color--blue-100));
        }
    }
}

@media (max-width: 768px) {
    .menublock {
        .menu {
            width: 100%;
            transform: none;
            gap: .5rem;
        }
    }
}

/* CONTENT */
#content {
    display: flex;
    flex-direction: column;
    gap: 10rem;
}

/* DESCRIPTION BLOCK */
#description {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;

    .title>h1 {
        font-size: 112px;
        font-weight: 600;
        line-height: 88px;
        margin-bottom: 2rem;
    }

    .title>.text-bluelight {
        width: 33.333333%;
    }

    @media (max-width: 768px) {
        .title>h1 {
            font-size: 3rem;
            line-height: 1;
        }

        .title>.text-bluelight {
        width: 100%;
    }
    }
}
@media (max-width: 768px) {
    #description {
        padding-left: 0;
        padding-right: 0;
    }
}

.title {
    display: flex;
    align-items: center;
    flex-direction: column;

    h1 {
        font-size: 3rem;
        line-height: 1;
        margin-bottom: 2rem;
        text-align: center;
    }

    p {
        text-align: center;
    }
}

/* STAR BLOCK */
#star {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    position: relative;
}

@media (max-width: 768px) {
    #star {
        gap: 2.5rem;
        margin-bottom: 8rem;
    }
}

#starblock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    height: 587px;
    width: 100%;
    background-color: rgb(var(--ui-color--blue-dark));
    background-size: cover;
    padding: 2rem;
    text-align: center;
    border-radius: 1.5rem;
    background-image: url('star_bg.webp');

    .title {
        gap: .75rem;
        opacity: 95%;

        @media (max-width: 768px) {
            p {
                font-size: .875rem;
                line-height: 1.25rem;
            }
        }
    }

    h2 {
        font-size: 3.75rem;
        line-height: 1;
        font-weight: 300;
    }

    @media (max-width: 768px) {
        h2 {
            font-size: 1.875rem;
            line-height: 2.25rem;
        }
    }

    .star {
        width: 176px;
        height: 176px;
        position: relative;
    
        img {
            width: 400px;
            height: 400px;
            aspect-ratio: 1 / 1;
            position: absolute;
            max-width: 400px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        @media (max-width: 768px) {
            img {
                max-width: 320px;
            }
        }
    }

    .tags {
        width: 66.666667%;
        li {
            background-color: rgb(var(--ui-color--blue-100));
            color: rgb(var(--ui-color--white))
        }
    }

    @media (max-width: 768px) {
        .tags {
            width: 100%;
        }
    }
}
@media (max-width: 768px) {
    #starblock {
        padding-top: 0;
    }
}

#starfooter {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.telescope {
    width: 350px;
    height: 112px;
    position: relative;
    
    img {
        position: absolute;
        bottom: -6rem;
        left: -5rem;
    }
}
@media (max-width: 768px) {
    .telescope {
        width: 200px;
        height: 112px;
        bottom: -225px;
        left: 50%;
        z-index: 30;
        transform: translate(-50%, -50%);
        position: absolute;
        img {
            left: 0;
        }
    }
}

/* MISSION BLOCK */
#mission {
    margin-top: 6rem;
    display: flex;
    gap: 3.5rem;
    align-items: flex-start;
    justify-content: space-between;
}

.messages {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    .message {
        &:nth-child(3n+1) {
            transform: translateY(-.75rem) rotate(2deg);
        }
        &:nth-child(3n+2) {
            transform: rotate(-2deg);
        }
        &:nth-child(3n+3) {
            transform: rotate(0deg);
        }
    }

}

.missions-text {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: 50%;

    >div {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;

        h3 {
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 300;
        }
    }
}
@media (max-width: 768px) {
    #mission {
        flex-direction: column;
    }

    .messages {
        width: 100%;

    }
    .missions-text {
        width: 100%;
    }
}

/* ABOUT BLOCK */
#about > ul {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    li {
        border-style: solid;
        border-width: 0 0 1px;
        display: flex;
        flex-direction: column;
        gap: .75rem;
        border-color: rgb(var(--ui-color--blue-dark));
        padding-top: 2rem;
        padding-bottom: 2rem;
        
        .value {
            font-size: 3.75rem;
            line-height: 1;
        }

        .name {
            font-size: 1.25rem;
            line-height: 1.75rem;
        }
    }
}

@media (max-width: 768px) {
    #about > ul {
        gap: .5rem;
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* OFFER BLOCK  */
@media (max-width: 768px) {
    #offer > .inner > .container,
    #offer > .inner > .footer > .block {
        width: 100% !important;
    }
}

#offer {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    .inner {
        display: flex;
        flex-direction: column;
        gap: 5rem;

        .container {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            width: 60%;

            h3 {
                font-size: 2.25rem;
                line-height: 2.5rem;
            }
        }

        .footer {
            display: flex;
            justify-content: flex-end;

            .block {
                display: flex;
                flex-direction: column;
                gap: 3rem;
                width: 40%;
            }
        }
    }
}

/* PAYMENT BLOCK */
@media (max-width: 768px) {
    #payment {
        padding: 0 !important;
        padding-top: 2rem !important;
        padding-bottom: 5rem !important;
    }

    #payment > .title,
    #payment > .payment-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #payment > .title > h2 {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    #payment > .title > p {
        font-size: .875rem;
        line-height: 1.25rem;
    }

    #payment > .payment-container {
        width: 100% !important;
    }
}

#payment {
    background: var(--ui-color--gradient);
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 4rem 5rem 5rem;
    position: relative;

    .title {
        gap: 1.25rem;
        text-align: center;

        .star {
            height: 100px;
            width: 100px;
            position: relative;
            
            img {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 300px;
                min-width: 300px;
                height: 300px;
                transform: translate(-50%, -50%);
            }
        }

        h2 {
            font-weight: 300;
            font-size: 2.25rem;
            line-height: 2.5rem;
        }
    }

    .payment-container {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin: 0 auto;
        width: 50%;


        .starsChoise {
                display: flex;
                flex-direction: column;
                gap: .5rem;

            ul {
                display: flex;
                flex-direction: column;
                gap: .25rem;
            }

            li {
                height: 2.75rem;
                margin-bottom: .5rem;
                
                > div {
                    align-items: center;
                    display: flex;
                    background-color: #244cc680;
                    border-radius: .5rem;
                    cursor: pointer;
                    font-size: .875rem;
                    gap: 1rem;
                    justify-content: space-between;
                    line-height: 1.25rem;
                    padding: .75rem;
                    width: 100%;
                }

                >div.choiced {
                    box-shadow: 0 0 0 2px rgb(var(--ui-color--blue) / 1);
                }
            }
        }
    }
}

.checker {
    border-color: rgb(var(--ui-color--white));
    display: flex;
    border-radius: 9999px;
    border-style: solid;
    border-width: 2px;
    height: 1.25rem;
    width: 1.25rem;
    justify-content: center;
    align-items: center;
}

.circle {
    border-radius: 9999px;
    height: .625rem;
    width: .625rem;
    background-color: rgb(var(--ui-color--white));
    
}

.quantity, .price {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: .375rem;
}

.price {
    justify-content: flex-end;
}

button.big-btn {
    width: 100%;
    font-weight: 500;
    padding: 1.25rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.btn-SPB {
    color: rgb(var(--ui-color--blue));
    background-color: rgb(var(--ui-color--white));
    &:hover {
        background-color: rgb(var(--ui-color--white)/.7);
    }
}

.paymentChoice {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.policy {
    font-size: .875rem;
    line-height: 1.25rem;
    max-width: 30rem;

    a {
        color: rgb(var(--ui-color--blue-light));
        text-decoration: underline;
    }
}

/* GIFTS BLOCK */
@media (max-width: 768px) {
    #gift .title {
        width: 100% !important;
    }
    #gift .message {
        position: static !important;
        transform: none !important;
    }
}

#gift {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    position: relative;

    .title {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        width: 40%;
        align-items: flex-start;
    }

    h3 {
        font-size: 2.25rem;
        line-height: 2.5rem;
        font-weight: 300;
    }

    p {
        text-align: left;
    }

    .message {
        position: absolute;
        left: 50%;
        top: 8rem;
        transform: rotate(-6deg);
    }

    ul {
        display: flex;
        scroll-snap-type: mandatory;
        gap: 1rem;
        overflow-x: scroll;
        overflow-y: hidden;
        padding-bottom: 1rem;

        li {
            display: flex;
            align-items: center;
            border-radius: 1rem;
            cursor: pointer;
            flex-direction: column;
            gap: 1rem;
            min-width: 158px;
            overflow-x: hidden;
            position: relative;
            scroll-snap-align: center;
            --tw-bg-opacity: 1;
            background-color: rgb(var(--ui-color--blue-dark));
            padding: 1.5rem .5rem;
        }
    }
}

.sticker {
    height: 84px;
    width: 84px;
}

.gift-price {
    display: flex;
    align-items: center;
    border-radius: 9999px;
    border-style: solid;
    border-width: 1px;
    gap: .25rem;
    border-color: rgb(var(--ui-color--blue-light));
    font-size: .75rem;
    line-height: 1rem;
    padding: .25rem 1rem;
    color: rgb(var(--ui-color--blue-light));
}

/* PREMIUM BLOCK */

@media (max-width: 768px) {
    #premium {
        flex-direction: column !important;
    }
    #premium > .tags,
    #premium > .title {
        width: 100% !important;
    }
    #premium .message {
        position: static !important;
        transform: none !important;
    }
}

#premium {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    justify-content: space-between;
    margin-top: 6rem;

    .tags {
        width: 60%;
        justify-content: flex-start;
    }

    .title {
        width: 40%;
        align-items: flex-start;
        gap: 1rem;
        h3 {
            font-size: 2.25rem;
            font-weight: 300;
        }
        p {
            text-align: left;
        }
    }
}

/* FAQ BLOCK */
#faq {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    h3 {
        font-size: 2.25rem;
        font-weight: 300;
    }
}


@media (max-width: 768px) {
    .message.start > div,
    .message.end > div {
        width: 100% !important;
    }
}

.chatblock {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message.start {

    >div {
        width: 50%;
    }
    align-items: flex-start;
}

.message.end {

    >div {
        width: 50%;
        border-bottom-left-radius: .75rem;
        &::before {
            content: '';
            border-bottom-color: rgb(var(--ui-color--green-dark));
            position: absolute;
            bottom: 0;
            left: 1rem;
            right: -.75rem;
            border-left: 12px solid var(--ui-color--transparent);
            border-right: 12px solid var(--ui-color--transparent);
            border-bottom: 12px solid rgb(var(--ui-color--green-dark));
        }
    }
}

/* FOOTER */
footer {
    background: var(--ui-color--gradient);
    border-radius: 1.5rem;
    margin-top: 15rem;
    padding-bottom: 4rem;
    padding-top: 4rem;
}

@media (max-width: 768px) {
    footer {
        margin-top: 0 !important;
    }

    .footer-container > ul,
    .footer-container .header {
        flex-direction: column !important;
    }
    .footer-container .about {
        flex-direction: column-reverse;
        align-items: flex-start !important;
        .about-right {
            text-align: left !important;
        }
    }
}

.footer-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;

    .header {
        align-items: center;
        display: flex;
        gap: 2rem;
        justify-content: space-between;
        
        .logotype.large {
            font-size: 2.25rem;
            font-weight: 600;
            gap: 1rem;
            line-height: 2.5rem;
            align-items: center;
            display: flex;
        }

        .socials {
            align-items: center;
            display: flex;
            gap: .5rem;
        }
    }

    > ul {
        align-items: flex-start;
        display: flex;
        font-size: .875rem;
        gap: 3.5rem;
        line-height: 1.25rem;
    
        li>ul {
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }
    }

    .about {
        align-items: flex-end;
        display: flex;
        font-size: .75rem;
        justify-content: space-between;
        line-height: 1rem; 
        a {
            color: rgb(var(--ui-color--white) / .5);
        }

        .about-left {
            display: flex;
            flex-direction: column;
            gap: .25rem;
        }

        .about-right {
            display: flex;
            flex-direction: column;
            gap: .25rem;
            text-align: right;
        }
    }

}

/* tg menu */
.tgmenu.min {
    flex-wrap: wrap;
    > .card {
        min-width: 49%;
        max-width: 100%;
    }
}
@media (max-width: 768px) {
        .tgmenu {
            flex-wrap: wrap;
        }
    }

.tgmenu {
    display: flex;
    
    gap: .375rem;
    justify-content: space-between;
    
    > .card {
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        min-width: 23%;
        max-width: 50%;
        height: 7rem;
        border-radius: 1rem;
        background: var(--ui-gradient-block);
        padding: 1rem;
        color: rgb(var(--ui-color--white));
    }

    > .card.big {
        min-width: 50%;
        flex: 1;
        max-width: 100%;
        height: 14.5rem;
        gap: 1rem;
        justify-content: space-between;
        
        .links {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            >p {
                &:hover {
                        transform: scale(1.05);
                    }
                >a {
                    color: rgb(var(--ui-filter--white));
                    background-color: rgb(var(--ui-color--background));
                    padding: .5rem 1rem;
                    border-radius: 1rem;
                    
                }
            }
        }

        
    }

    > .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('tgblock.jpg');
        background-size: cover;
        background-position: center;
        opacity: 10%; /* 20% прозрачности */
        z-index: 1;
        border-radius: 1rem;
        pointer-events: none;
    }


    > .card:hover {
        transform: scale(1.025);
    }

    > .card.big:hover {
        transform: scale(1.015);
    }

    
    @media (max-width: 768px) {
        > .card {
            width: 49%;
        }
    }

    .text > p {
        color: rgb(var(--ui-color--white) / .5);
    }

    .icons {
        display: flex;
        flex-direction: row-reverse;
        gap: .25rem;
        
        img {
            border-radius: 9999px;
        }
    }
}

/* market block */
#market {
    display: flex;
    flex-direction: column;
    gap: .5rem;

    .input {
        width: 100%;

        label > input {
            background-color: rgb(var(--ui-color--gray));
            
        }
    }

    .filters {
        display: flex;
        flex-direction: row;
        gap: .5rem;
        
        >div {
            cursor: pointer;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-radius: .5rem;
            background-color: rgb(var(--ui-color--gray));
            padding: .5rem 1rem;
        }
    }

    .products {
        margin-top: 1rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .product.active {
        border: 4px solid rgb(var(--ui-color--white));
    }

    .product {
        cursor: pointer;
        border-radius: .5rem;
        width: 9.75rem;
        background-color: rgb(var(--ui-color--gray));
        overflow: hidden;
        
        &:hover {
            transform: scale(1.05);
        }
    }

    .product-image {
        width: 100%;
        height: 10rem;
        background-size: cover;
        background-position: center;
    }

    .product-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem;
        background-color: rgb(var(--ui-color--gray));
    }

    .product .price {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        border-radius: 0.25rem;
        opacity: 0.9;
        color: rgb(var(--ui-color--blue-light));
        font-weight: 800;
        img {
            padding-bottom: .25rem;
        }
    }
    .product .name {
        font-weight: 800;
    }
    .product .id {
        border-radius: 0.25rem;
        font-size: 0.75rem;
        opacity: 20%;
    }
}

#product-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border-radius: 1rem;
    padding: 2rem;
    background-color: rgb(var(--ui-color--blue-dark));
    margin: 0 auto;

    
    .product-main {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
        justify-content: space-between;
    }

    .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    .product-name {
        font-size: 2rem;
        font-weight: 700;
        color: rgb(var(--ui-color--white));
    }

    .product-price {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.5rem;
        color: rgb(var(--ui-color--white));
        font-weight: 800;
    }

    .product-details {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .5rem 1rem;
        background-color: rgb(var(--ui-color--background));
        border-radius: 1rem;
        
    }

    .detail-item .label {
        color: rgb(var(--ui-color--blue-light));
        font-weight: 300;
    }

    .detail-item .value {
        color: rgb(var(--ui-color--white));
        font-weight: 400;
    }

    .product-image {
        width: 15rem;
        flex-shrink: 0;
    }

    .product-image .image {
        width: 100%;
        height: 15rem;
        border-radius: 1rem;
        background-size: cover;
        background-position: center;
    }

    .ownership-history {
        width: 100%;
    }

    .ownership-history h3 {
        font-size: 1.5rem;
        color: rgb(var(--ui-color--white));
        margin-bottom: 1rem;
        font-weight: 600;
    }

    .history-table {
        display: flex;
        flex-direction: column;
        background-color: rgb(var(--ui-color--background));
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .table-header {
        display: flex;
        background-color: rgb(var(--ui-color--blue-100));
        padding: 1rem;
        font-weight: 600;
        color: rgb(var(--ui-color--white));
    }

    .table-header span:first-child {
        width: 20%;
    }

    .table-header span:nth-child(2) {
        width: 30%;
    }

    .table-header span:last-child {
        width: 50%;
    }

    .table-row {
        display: flex;
        padding: 1rem;
        gap: .5rem;
        border-bottom: 1px solid rgb(var(--ui-color--blue-dark));
        color: rgb(var(--ui-color--white));
    }

    .table-row span:first-child {
        width: 20%;
        font-weight: 500;
    }

    .table-row span:nth-child(2) {
        width: 30%;
        color: rgb(var(--ui-color--blue-light));
    }

    .table-row span:last-child {
        width: 50%;
        word-break: break-word;
    }

    @media (max-width: 768px) {
        .product-main {
            flex-direction: column;
        }
        
        .product-image {
            width: 100%;
            order: -1;
        }
        
        .product-image .image {
            height: 20rem;
        }
        
        .table-header,
        .table-row {
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .table-header span,
        .table-row span {
            width: 100% !important;
        }
        
        .ownership-history {
            order: 2;
        }
    }
}

/* PROFILE */
#profile {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.profile-header {
    text-align: center;
    margin-bottom: 2rem;
}

.account-info {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
}

.info-card {
    flex: 1;
    background-color: rgb(var(--ui-color--blue-dark));
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: rgb(var(--ui-color--background));
    border-radius: 0.5rem;
}

.info-item .label {
    color: rgb(var(--ui-color--blue-light));
    font-weight: 300;
}

.info-item .value {
    color: rgb(var(--ui-color--white));
    font-weight: 500;
}

.info-item .value.premium {
    color: rgb(var(--ui-color--yellow));
    font-weight: 600;
}

.stats-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 30%;
}

.stat-card {
    background-color: rgb(var(--ui-color--blue-dark));
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    flex: 1;
}

@media (max-width:768px) {
    .stat-card{
        padding: .5rem;
    } 
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: rgb(var(--ui-color--white));
    margin-bottom: 0.5rem;
}

.stat-label {
    color: rgb(var(--ui-color--blue-light));
    font-size: 0.875rem;
}

/* orders history */
.orders-history h3 {
    font-size: 2rem;
    color: rgb(var(--ui-color--white));
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.orders-table {
    display: flex;
    flex-direction: column;
    background-color: rgb(var(--ui-color--blue-dark));
    border-radius: 1rem;
    overflow: hidden;
}

.table-header {
    display: flex;
    background-color: rgb(var(--ui-color--blue-100));
    padding: 1.5rem;
    font-weight: 600;
    color: rgb(var(--ui-color--white));
}

.table-header span:first-child {
    width: 40%;
}

.table-header span:nth-child(2) {
    width: 25%;
}

.table-header span:nth-child(3) {
    width: 15%;
}

.table-header span:last-child {
    width: 20%;
}

.table-row {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgb(var(--ui-color--blue-300));
    color: rgb(var(--ui-color--white));
}

.table-row:last-child {
    border-bottom: none;
}

.order-info {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.order-name {
    font-weight: 500;
    color: rgb(var(--ui-color--white));
}

.order-id {
    font-size: 0.875rem;
    color: rgb(var(--ui-color--blue-light));
    opacity: 0.7;
}

.order-date {
    width: 25%;
    color: rgb(var(--ui-color--blue-light));
}

.order-amount {
    width: 15%;
    font-weight: 600;
    color: rgb(var(--ui-color--white));
}

.order-status {
    width: 20%;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
}

.order-status.completed {
    background-color: rgb(var(--ui-color--green));
    color: rgb(var(--ui-color--white));
}

.order-status.pending {
    background-color: rgb(var(--ui-color--yellow));
    color: rgb(var(--ui-color--black));
}

.order-status.cancelled {
    background-color: rgb(var(--ui-color--red));
    color: rgb(var(--ui-color--white));
}

@media (max-width: 768px) {
    .account-info {
        flex-direction: column;
    }
    
    .stats-cards {
        width: 100%;
        flex-direction: row;
    }
    
    .stat-card {
        flex: 1;
    }
    
    .table-header,
    .table-row {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .table-header span,
    .table-row > * {
        width: 100% !important;
    }
    
    .order-info {
        width: 100%;
        text-align: center;
    }
}

/* filters */
.filters {
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

.dropdown {
    position: relative;
    width: 100%;
}

.dropdown-trigger {
    cursor: pointer;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: .5rem;
    background-color: rgb(var(--ui-color--gray));
    padding: .5rem 1rem;
    align-items: center;
    transition: all 0.2s ease;
}

.dropdown-trigger:hover {
    background-color: rgba(var(--ui-color--gray), 0.8);
}

.dropdown-trigger.active {
    background-color: rgba(var(--ui-color--gray), 0.9);
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(var(--ui-color--gray));
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: .5rem;
    margin-top: .25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    overflow: hidden;
}

.dropdown-content.show {
    display: block;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Стили для сортировки */
.sort-options {
    padding: .5rem 0;
}

.sort-option {
    padding: .75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sort-option:hover {
    background-color: rgba(var(--ui-color--gray), 0.3);
}

.sort-option.active {
    background-color: rgba(var(--ui-color--gray), 0.5);
    font-weight: 500;
}

.sort-divider {
    height: 1px;
    background-color: rgba(0,0,0,0.1);
    margin: .25rem 1rem;
}

.filter-options {
    padding: .5rem 0;
}

.filter-option {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    gap: .75rem;
}

.filter-option:hover {
    background-color: rgba(var(--ui-color--gray), 0.3);
}

.filter-option input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.filter-option input:checked + .checkmark {
    background-color: #007bff;
    border-color: #007bff;
}

.filter-option input:checked + .checkmark::after {
    content: "✓";
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.filter-actions {
    display: flex;
    gap: .5rem;
    padding: .75rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    background-color: rgba(var(--ui-color--gray), 0.2);
}

.apply-filters, .reset-filters {
    flex: 1;
    padding: .5rem;
    border: none;
    border-radius: .25rem;
    cursor: pointer;
    font-size: .875rem;
    transition: all 0.2s ease;
}

.apply-filters {
    background-color: #007bff;
    color: white;
}

.apply-filters:hover {
    background-color: #0056b3;
}

.reset-filters {
    background-color: rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.7);
}

.reset-filters:hover {
    background-color: rgba(0,0,0,0.2);
}