@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300..900&display=swap');
:root {
    --primary-color: #272832;
    --secondary-color: #3a3b4a;
    --hover-color: #272832;
    --accent-color: #0071FF;
    --accent-icon-color: #ff6a00;
    --text-color: #c9c9c9;
    --text-article-color: #020202;
    --background-color: #f5f5f5;
    --background-article-color: #ffffff;
    --shop-text-color: #6e6e6e;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
    min-height: 100vh;
    color: var(--text-color);
    background-color: var(--background-color);
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "main sidebar"
        "footer footer";
    overflow:hidden;
}

.content {
    padding-top: 1.1rem;
}
.right{
    diplay:none;
}
@media (max-width: 1366px) {
    aside {
        display: none;
    }

    .container {
        grid-template-columns: minmax(100%, 4fr);
        grid-template-areas:
            "header"
            "main"
            "footer";
    }
}

/* ===== Ekran ładowania Blazor WASM ===== */
#app:has(.loading-progress) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color);
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--accent-color);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: relative;
    display: block;
    text-align: center;
    font-weight: 600;
    margin-top: 0.75rem;
    color: var(--primary-color);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Ładowanie sklepu...");
    }