body { background:#FFF3FF; font-family:system-ui,sans-serif; margin:0; padding:0; color:#222; }
.container { max-width:1200px; margin:30px auto; display:grid; grid-template-columns:320px 1fr; gap:20px; }
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }

    .sidebar {
        order: 1;
    }

    #calendar {
        order: 2;
        margin-top: 20px;
    }
}

.sidebar { background:#F8F5FA; padding:20px; border-radius:20px; box-shadow:0 10px 40px rgba(0,0,0,0.12); border:1px solid #D8CDE0; }
.sidebar h2 { margin-top:0; font-size:22px; margin-bottom:15px; color:#222; }
.sidebar input { width:100%; padding:10px; margin:8px 0; border:1px solid #D8CDE0; border-radius:10px; font-size:14px; background:#fff; }
.servicos-container { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.servico-card { padding:10px; border-radius:10px; background:#F1EDF4; text-align:center; cursor:pointer; font-weight:500; user-select:none; transition:0.3s; border:1px solid #D8CDE0; }
.servico-card.selected { background:#B89DBF; color:#fff; }
#calendar { background:#fff; padding:20px; border-radius:20px; min-height:600px; box-shadow:0 10px 40px rgba(0,0,0,0.12); border:1px solid #D8CDE0; }
#caixaHorarios { margin-top:20px; background:#fff; padding:20px; border-radius:20px; display:none; box-shadow:0 10px 40px rgba(0,0,0,0.12); border:1px solid #D8CDE0; overflow:hidden; }
#horariosDisponiveis { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:15px; }
#horariosDisponiveis div { padding:8px; border-radius:8px; cursor:pointer; background:#F1EDF4; text-align:center; font-weight:500; border:1px solid #D8CDE0; }
#horariosDisponiveis div:hover:not(.ocupado) { background:#E8E0F0; }
#horariosDisponiveis div.ocupado { color:#fff; cursor:not-allowed; }
#horariosDisponiveis div.ocupado.red { background:#C0392B; }
#horariosDisponiveis div.ocupado.purple { background:#8E44AD; }
#horariosDisponiveis div.selecionado { background:#B89DBF; color:#fff; }
.fc-daygrid-day.segunda-feira {
    background-color: #F1948A; /* vermelho claro */
}
.btn-register, .btn-login {
    padding: 10px 18px;
    margin: 5px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: 0.3s;
    background: #B89DBF;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-register:hover, .btn-login:hover {
    background: #A88DB0;
    transform: translateY(-2px);
}

.popup { position:fixed; top:20px; right:20px; background:#B89DBF; color:#fff; padding:15px 25px; border-radius:12px; display:none; z-index:999; }
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:25px; border-radius:16px; box-shadow:0 15px 50px rgba(0,0,0,0.3); z-index:10000; display:none; max-width:450px; width:90%; font-family:system-ui,sans-serif; animation:fadeIn 0.3s ease; text-align:center; border:1px solid #D8CDE0; }
.modal h3 { margin-top:0; font-size:20px; color:#222; }
.modal .close { float:right; cursor:pointer; font-weight:bold; font-size:18px; color:#B89DBF; }
.modal ul { padding-left:0; margin-top:10px; list-style:none; }
.modal ul li { margin-bottom:5px; color:#555; }
@keyframes fadeIn { from {opacity:0; transform:translate(-50%,-48%);} to {opacity:1; transform:translate(-50%,-50%);} }
.agendarBtn {
    width: 100%;
    padding: 12px 0;
    margin-top: 15px;
    background: #B89DBF;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transition: 0.3s;
    letter-spacing: 0.3px;
}

.agendarBtn:hover {
    background: #A88DB0;
    transform: translateY(-2px);
}

.agendarBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}