/* Ícones base e dos períodos (manhã azul, tarde bicolor amarelo/laranja, noite lua) + lixeira + check */
.icon{
width: 18px; height: 18px; display: inline-block;
background-size: 18px 18px; background-repeat: no-repeat; background-position: center;
}
.icon.calendar{
background-image: url('data:image/svg+xml;utf8,');
}
.icon.clock{
background-image: url('data:image/svg+xml;utf8,');
}
.icon.chevron{
background-image: url('data:image/svg+xml;utf8,');
}
/* Lixeira no botão Remover */
.remove{ display: inline-flex; align-items: center; gap: 8px; }
.remove::before{
content: ""; width: 16px; height: 16px; flex: 0 0 16px;
background-size: 16px 16px; background-repeat: no-repeat; background-position: center;
opacity: .9; transition: opacity .2s ease;
background-image: url('data:image/svg+xml;utf8,');
}
.remove:hover::before{ opacity: 1; }
/* Ícones dos períodos */
.period-left{ position: relative; padding-left: 26px; }
.period-left .bullet{ display: none; }
.period--morning .period-left::before,
.period--afternoon .period-left::before,
.period--night .period-left::before{
content: "";
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; background-size: 18px 18px; background-repeat: no-repeat; opacity: .98;
}
/* Manhã — sol azul */
.period--morning .period-left::before{
background-image: url('data:image/svg+xml;utf8,');
}
/* Tarde — sol bicolor (amarelo/laranja) */
.period--afternoon .period-left::before{
background-image: url('data:image/svg+xml;utf8,');
}
/* Noite — lua */
.period--night .period-left::before{
background-image: url('data:image/svg+xml;utf8,');
}
/* Check no botão Agendar */
.modal .btn.primary{ display: inline-flex; align-items: center; gap: 8px; }
.modal .btn.primary::before{
content: ""; width: 16px; height: 16px; flex: 0 0 16px;
background-size: 16px 16px; background-repeat: no-repeat; background-position: center;
filter: brightness(0) invert(1);
background-image: url('data:image/svg+xml;utf8,');
}