.filter-panel{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    box-shadow: var(--shadow-sm);

    border-radius: var(--radius-sm);

    padding:var(--space-4);
}

.filter-panel button{
    background-color: var(--primary-3-darker-2);
    padding: var(--space-2) var(--space-4);
    align-self: flex-end;
}


.filter-panel > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    height: 4.8rem;
}

.filter-panel > div > label {
    font-size: 1.6rem;
}

.filter-panel > div > select {
    font-size: 1.3rem;
    font-weight: 500;
    height: 3.2rem;
}
.filter-panel > div:focus-within label{
    text-shadow: var(--shadow-sm);
}
/* ----------------submission list----------------- */

.submission-list {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, max-content));
    
    column-gap: var(--space-4);
    row-gap: var(--space-4);

    justify-content: start;
}

.submission-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-sm);

    padding: var(--space-2) var(--space-4);
    margin-top: var(--space-4);
}

.submission-card-header {
    
    width: 100%;
    height: 7.2rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-bottom: 2px solid var(--primary-3-darker-3);

}


.submission-card-header h2{
    width: 100%;
    font-size: 2rem;
    text-align: center;
    text-shadow: var(--shadow-sm);
    color:var(--primary-3-lighter-1);
    margin: 0;
    margin-bottom: var(--space-1);
}
.submission-card-header span{
    text-align: center;
    background-color: var(--primary-3-darker-2);
    
    border-radius: var(--radius-sm);

    width:8.2rem;
    
    align-self: flex-end;

    padding:var(--space-1) var(--space-2);

    font-size: 1.1rem;
}

.submission-card p {
    font-size: 1.6rem;
    border-bottom: 2px solid var(--primary-3-lighter-2);
    margin:var(--space-1) 0;
    padding: 0;
}

.submission-card .submission-information{
    border: none;
    text-decoration: underline;
    text-underline-offset: 0.7rem;
    text-decoration-color: var(--warning);
    text-align: center;
    color:var(--warning)
}

.submission-actions {
    width: 100%;
    height: 3.2rem;

    padding: 0 var(--space-2);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.submission-actions a{
    text-decoration: none;
    color:var(--primary-3-lighter-3);
    font-size: 1.4rem;

    background-color: var(--success);

    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}

.submission-actions button {
    color:var(--primary-3-lighter-3);
    font-size: 1.4rem;

    background-color: var(--danger);

    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
}

.submission-actions .price-list {
    margin: 0;
    padding: 0;
}

.submission-card .price-list li{
    list-style: none;
    position: relative;
    padding-inline-start: 4rem;
    font-size: 1.4rem;

    text-align: center;
}

.submission-card .price-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    right:0;
    width: 2rem;
    height: 2rem;
    background: url("../assets/icons/dimond.svg") center / contain no-repeat;
}