:root {
    --def-text-color: #b5c0ca;
    --side-text-color: #708297;
    --header-text-color: #6277ac;
    --link-text-color: #407eb4;
    --container-max-width: 800px;
    --container-width: 92%;
    --scroll-margin: max(4vw, calc((100vw - 800px) / 2));
    --container-large-margin: 20px;
    --container-middle-margin: 15px;
    --container-mini-magin: 10px;
    --def-font-size: 18px;
    --block-background-color: linear-gradient(45deg, #192135, #1b243a);
}
html {
    scroll-padding-top: var(--container-middle-margin);
    scroll-behavior: smooth;
}
* {
    -webkit-tap-highlight-color: transparent;
}
body {
    background: #0a1222;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Commissioner", sans-serif;
    word-spacing: 2px;
    color: var(--def-text-color);
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    margin: 0;
    font-size: var(--def-font-size);
    padding-bottom: 30px;
    color: var(--def-text-color);

    > * {
        margin-top: var(--container-large-margin);
    }
}
.container {
    width: var(--container-width) !important;
    max-width: var(--container-max-width) !important;
}

.block {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 23px;
    border-radius: 10px;
    background: var(--block-background-color);
    color: var(--def-text-color);
    width: 100%;
}
.error-block {
    background: linear-gradient(45deg, #a96d6d6f, #ae828251) !important;
}


#settings-message {
    display: none;
    margin-top: var(--container-mini-magin);
}

#client {
    display: none;
    gap: var(--scroll-margin);
    margin-top: var(--container-middle-margin);

    #client-info {
        justify-content: space-between;

        .top {
            display: flex;
            flex-direction: column;

            .status {
                font-size: 17px;
            }
            .name {
                font-size: 34px;
                font-weight: 800;
                margin: 4px 0 13px 0;
                color: #a0acb6;
            }
            .devices, .date {
                margin: 3px 0;
            }
        }
        .bottom {
            display: flex;
            flex-direction: row;
            justify-content: end;
            gap: 8px;
            margin-top: 25px;
        }
    }
    #client-settings {
        justify-content: space-between;

        .top {
            display: flex;
            flex-direction: column;
            justify-self: center;
            gap: 9px;

            .rect-btn  {
                position: relative;
                overflow: hidden;

                .overflow {
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    pointer-events: none;
                    opacity: 0;
                    color: #c3cfdb;
                }
                .success {
                    background: #007b70 !important;
                }
                .error {
                    background: #974545 !important;
                }
                .animated {
                    animation: 2s btnOverflowEnable;
                }
            }
        }
        .bottom {
            display: flex;
            flex-direction: row;
            justify-content: start;
            gap: 8px;
            margin-top: 20px;
        }
    }
}
#client-error {
    display: none;
    background: var(--block-background-color);
    margin-top: var(--container-middle-margin);
}
#help {
    display: none;
    margin-top: 10px;
    padding-top: 9px;
    padding-bottom: 9px;

    #help-payments, #help-about, #help-tutorial, #help-support {
        display: none;
        align-items: center;
        height: 36px;
        color: var(--side-text-color);
        cursor: pointer;
    }
}
#tariffs {
    display: none;
    gap: 15px;

    .block {
        width: 250px;
        justify-content: space-between;
        .top {
            display: flex;
            flex-direction: column;
            
            .country {
                font-size: 16px;
                color: var(--side-text-color);
            }
            .name {
                font-size: 28px;
                font-weight: 800;
                margin: 4px 0 15px 0;
                color: var(--header-text-color);
            }
            .devices, .traffic {
                margin: 3px 0;
            }
            .price {
                font-size: 24px;
                font-weight: 700;
                margin-top: 30px;

                .note {
                    font-size: var(--def-font-size);
                    font-weight: normal;
                }
            }
        }
        .bottom {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
        }
    }

    @media screen and (min-width: 800px) {
        width: var(--container-width);
        max-width: var(--container-max-width);

        .block {
            flex-grow: 1;
            margin: 0;
        }
    }
}
#tariffs-error {
    display: none;
}

.sqare-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    aspect-ratio: 1/1;
    background: #ffffff07;
    border-radius: 7px;
    cursor: pointer;

    > img {
        height: 65%;
        aspect-ratio: 1/1;
        opacity: 0.6;
    }
}
.rect-btn {
    width: 100%;
    display: flex;
    height: 45px;
    background: #2f3a51;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    cursor: pointer;
    color: #abb5bf;
}

.scroll-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;

    .block {
        scroll-snap-align: center;
        flex-shrink: 0;
        width: var(--container-width);
        max-width: var(--container-max-width);
    }
    .block:first-of-type {
        margin-left: var(--scroll-margin);
    }
    .block:last-of-type {
        margin-right: var(--scroll-margin);
    }
}
.scroll-container::-webkit-scrollbar {
    display: none;
}

#popup-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000042;
    justify-content: center;
    margin: 0;

    #popup {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0;
        width: 100%;
        max-width: 600px;
        box-sizing: border-box;
        padding: 40px;
        background: var(--block-background-color);
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        transform: translateY(100%);
        transition: 0.2s ease-in-out;

        #popup-content {
            display: none;
            flex-direction: column;
            width: 100%;

            .uname {
                display: none;
            }
            .title {
                font-size: 28px;
                font-weight: 700;
                margin-bottom: 10px;
                color: var(--header-text-color);
                box-sizing: border-box;
                padding-left: 2px;
            }
            .text {
                font-size: 18px;
                margin-bottom: 25px;
                color: var(--def-text-color);
                box-sizing: border-box;
                padding-left: 2px;
            }
            .radiogroup {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 9px;
                margin-bottom: 20px;

                input[type="radio"] {
                    position: absolute;
                    opacity: 0;
                    width: 0;
                    height: 0;
                    margin: 0;
                    padding: 0;
                    pointer-events: none;
                }

                label {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    position: relative;
                    padding-left: 50px;
                    height: 45px;
                    border-radius: 7px;
                    background: #313d55;
                    cursor: pointer;
                    box-sizing: border-box;
                }

                label::before {
                    content: '';
                    position: absolute;
                    left: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 20px;
                    height: 20px;
                    border: 2px solid #4f5f77;
                    border-radius: 50%;
                    background-color: transparent;
                    box-sizing: border-box;
                    transition: 0.1s;
                }

                label:has(input[type="radio"]:checked)::before {
                    background-color: #009185;
                    border-color: #009185;
                    box-shadow: inset 0 0 0 4px #35425c;
                }

                .months {
                    font-size: 18px;
                }
                .discount {
                    margin-left: 10px;
                    color: #f41d7e;
                    font-size: 15px;
                }
            }
            .button {
                width: 100%;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #c3cfdb;
                background: #007b70;
                border-radius: 7px;
            }
            .offer {
                font-size: 15px;
                margin-top: 10px;
                box-sizing: border-box;
                padding-left: 2px;
                a {
                    text-decoration: underline;
                }
            }
        }

        #popup-error {
            display: none;
        }
    }
    #popup.opened {
        transform: translateY(0%) !important;
    }
}


@keyframes btnOverflowEnable {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

red { color: rgb(225, 67, 67); }
green { color: #009185; }
def { color: var(--def-text-color); }

a[href]:link {
    color: var(--link-text-color);
    cursor: pointer;
}