/* ==========================
   CONTAINER
========================== */

.container{
display:flex;
flex-direction:column;
align-items:center;
padding:70px 20px 0;
max-width:1000px;
margin:auto;
}

/* ==========================
   BANNER
========================== */

.banner{
width:17.5rem;
height:12.5rem;
margin-bottom:2rem;
object-fit:contain;
object-position:center bottom;
transition:filter .3s ease;
}

/* banner dark */
.dark .banner{
filter:brightness(.9) invert(.05);
}

/* ==========================
   ITEMS WRAPPER
========================== */

.list-items{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:18px;
padding:16px 10px;
width:100%;
}

/* ==========================
   ITEM CARD
========================== */

.list-items .item{

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

width:9.5em;
padding:1.1em .8em;

border-radius:14px;
text-decoration:none;
color:var(--text-main);

cursor:pointer;
user-select:none;

background:var(--bg-card);

box-shadow:0 4px 14px rgba(0,0,0,.06);

transition:all .25s ease;

}

/* hover */

.list-items .item:hover{
transform:translateY(-4px);
box-shadow:0 8px 24px rgba(0,0,0,.12);
}

/* ==========================
   ICON
========================== */

.list-items .item .icon{

width:3.4em;
height:3.4em;

border-radius:50%;
padding:.7em;

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

margin-bottom:.8em;

background:var(--glass-bg);
border:1px solid var(--glass-border);

box-shadow:0 4px 10px rgba(0,0,0,.08);

transition:all .25s ease;

}

/* ==========================
   ICON IMAGE
========================== */

.list-items .item .icon img{
width:2em;
height:2em;
object-fit:contain;
}

/* ==========================
   LABEL
========================== */

.list-items .item .label{

font-size:.85em;
font-weight:500;

text-align:center;

opacity:.85;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

}

/* ==========================
   ADD ITEM BUTTON
========================== */

#add-item.item .icon{
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:white;
}

#add-item.item .icon > *{
width:1.5em;
height:1.5em;
}

/* ==========================
   MODAL
========================== */

.modal{

display:none;

position:fixed;

top:0;
left:0;
bottom:0;
right:0;

background:rgba(0,0,0,.55);

backdrop-filter:blur(4px);

align-items:center;
justify-content:center;

z-index:999;

}

.modal.open{
display:flex;
}

.modal-box{

background:var(--bg-card);
color:var(--text-main);

border-radius:16px;

padding:1.4em;

width:90%;
max-width:420px;

box-shadow:0 10px 30px rgba(0,0,0,.3);

}

/* ==========================
   MODAL HEADER
========================== */

.modal-header{
font-weight:bold;
margin-bottom:1em;
font-size:1.1rem;
}

/* ==========================
   INPUT
========================== */

.input-field{
margin-bottom:1em;
}

.input-field input{

width:100%;
margin-top:.4em;

padding:.7em 1em;

border:none;
outline:none;

border-radius:10px;

background:var(--glass-bg);
border:1px solid var(--glass-border);

color:var(--text-main);

}

.input-field input:focus{
border-color:var(--accent);
}

/* ==========================
   BUTTONS
========================== */

.modal-box .buttons{

display:flex;
justify-content:flex-end;
gap:10px;

}

.modal-box button{

padding:.6em 1.1em;

border-radius:30px;
border:none;

cursor:pointer;

font-weight:600;

transition:.2s;

}

.btn-cancel{

background:transparent;
border:1px solid var(--accent);
color:var(--accent);

}

.btn-done{

background:var(--accent);
color:white;

}

.btn-done:hover{
background:var(--accent2);
}

/* ==========================
   DARK TOGGLER
========================== */

#dark-toggler{

position:absolute;

top:70px;
right:1em;

width:3em;
height:3em;

border-radius:50%;

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

cursor:pointer;

background:var(--glass-bg);
border:1px solid var(--glass-border);

transition:.2s;

}

#dark-toggler:hover{
transform:scale(1.1);
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:768px){

.container{
padding:60px 15px 0;
}

.banner{
width:14rem;
height:10rem;
}

.list-items{
gap:12px;
}

.list-items .item{
width:8em;
padding:1em .6em;
}

}