@import url(../../../../assets/css/base.css);
@import url(./huetten_base.css);
@import url(./navbar.css);

.dash-section{
    margin-top: 2rem;
}

.shopping-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.shopping-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .9rem;

    padding: .95rem 1rem;
    border-radius: 1.15rem;

    background:
        linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
        var(--bg-surface-2);

    border: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.shopping-row::before {
    content: "";
    width: .55rem;
    height: .55rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--green-main);
    box-shadow: 0 0 0 5px rgba(50, 205, 0, .10);
}

.shopping-name {
    flex: 1;
    min-width: 0;

    color: var(--text-primary);
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.35;

    word-break: break-word;
}

.shopping-qty {
    flex: 0 0 auto;

    min-width: 2.4rem;
    padding: .38rem .62rem;
    border-radius: 999px;

    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.07);

    color: var(--text-primary);
    font-size: .82rem;
    font-weight: 900;
    text-align: center;
}

@media (max-width: 420px) {
    .shopping-row {
        padding: .85rem .9rem;
        gap: .75rem;
    }

    .shopping-name {
        font-size: .92rem;
    }

    .shopping-qty {
        min-width: 2.2rem;
        padding: .34rem .55rem;
    }
}