@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@plugin "daisyui" {
    themes: all;
}

/**
    --color-base-100 - DaisyUI background
 */

html, body, #app {
    overflow-x: hidden;
    min-height: 100vh;
}

:root {
    --swiper-pagination-bullet-horizontal-gap: 1px;
    --swiper-pagination-bullet-size: 6px;
    --swiper-pagination-color: #777;
    --swiper-pagination-bottom: 0px;
    --product_list_title_max_lines: 2;
    --tc-navbar-min-height: 3rem;
    --dock-height: 72px;
}

.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    padding-left: calc(
            var(--tg-content-safe-area-inset-left, 0px)
            + var(--tg-safe-area-inset-left, 0px)
    );
    padding-right: calc(
            var(--tg-content-safe-area-inset-right, 0px)
            + var(--tg-safe-area-inset-right, 0px)
    );
}

.app-content {
    flex: 1 1 auto;

    padding-top: calc(
            var(--tg-content-safe-area-inset-top, 0px)
            + var(--tg-safe-area-inset-top, 0px)
    );

    padding-bottom: calc(
            var(--dock-height)
            + var(--tg-content-safe-area-inset-bottom, 0px)
            + var(--tg-safe-area-inset-bottom, 0px)
    );
}

.safe-top {
    padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
}

.app-header {
    z-index: 60;
    position: fixed;
    height: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
    min-height: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
    max-height: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    color: white;
}

html {
    background-color: var(--color-base-200);
}

.radius-box {
    border-radius: var(--radius-xl);
}

.bottom-fix {
    bottom: calc(
            var(--tg-content-safe-area-inset-bottom, 0px)
            + var(--tg-safe-area-inset-bottom, 0px)
    );
}